MOON-116: Add animation on opening/closing accordion #147
Conversation
| const open = context.currentItem === id; | ||
|
|
||
| const handleClick = (e, open) => { | ||
| onClick(e, !open); | ||
| context.onSetOpenedItem(id); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| setCssExpanded({[styles.accordionItem_opened]: open}); |
There was a problem hiding this comment.
I don't understand the need of a state here - why don't we use directly open ?
There was a problem hiding this comment.
It's to trigger the animation after the render. We had some user feedback than they don't understand there is some accordion at the bottom of the page. We think to animate the opening of the accordion can improve this behavior.
There was a problem hiding this comment.
So it's only for the first render, if the accordion item is directly opened ? This has no impact when opening/closing the accordion after its first render ?
| @@ -95,3 +98,18 @@ $accordionHeader_height: 48px; | |||
| background-color: var(--color-dark60); | |||
| } | |||
| } | |||
|
|
|||
| // Animation | |||
| .accordionItem_opened { | |||
There was a problem hiding this comment.
please follow conventions for modifiers - .accordionItem.opened ( .accordion { &.opened {} }
| @@ -7,28 +7,33 @@ import {AccordionContext} from '~/components/Accordion/Accordion.context'; | |||
|
|
|||
| export const AccordionItem = ({id, label, icon, onClick, children, className, ...props}) => { | |||
There was a problem hiding this comment.
Add callbacks for transition handling - onItemOpening / onItemOpened on Accordion before and after transition , also check what to do with onSetOpenedItem (currently called before transition)
| useEffect(() => { | ||
| setCssExpanded({[styles.accordionItem_opened]: open}); | ||
| }, | ||
| [open]); | ||
|
|
There was a problem hiding this comment.
If only for the first render I would suggest something like that :
| useEffect(() => { | |
| setCssExpanded({[styles.accordionItem_opened]: open}); | |
| }, | |
| [open]); | |
| const [initialized, setInitialized] = useState(false); | |
| useEffect(() => { | |
| setInitialized(true) | |
| }, []); | |
| const isExpanded = open && initialized |
And replace the cssExpanded with just {[styles.expanded]: isExpanded}
JIRA
https://jira.jahia.org/browse/MOON-116
Description