Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | 113x 113x 113x 113x 113x 198x 198x 198x 198x 198x 198x 198x 198x 198x 198x 198x 2x 198x 113x | import classNames from 'classnames';
import React, { memo, useCallback, useContext, FunctionComponent, ReactNode } from 'react';
import { CSSTransition } from 'react-transition-group';
import AccordionContext from './AccordionContext';
export interface AccordionItemProps {
bodyClassName?: string;
children?: ReactNode;
className?: string;
classNameSelected?: string;
headerClassName?: string;
headerClassNameSelected?: string;
itemId: string;
headerContent(props: AccordionItemHeaderProps): ReactNode;
}
export interface AccordionItemHeaderProps {
isSelected: boolean;
onToggle(id: string): void;
}
const AccordionItem: FunctionComponent<AccordionItemProps> = ({
bodyClassName = 'accordion-item-body',
children,
className = 'accordion-item',
classNameSelected = 'accordion-item--selected',
headerClassName = 'accordion-item-header',
headerClassNameSelected = 'accordion-item-header--selected',
headerContent,
itemId,
}) => {
const { onToggle, selectedItemId } = useContext(AccordionContext);
const isSelected = selectedItemId === itemId;
const transitionEndListener = useCallback((node, done) => {
node.addEventListener('transitionend', ({ target }: Event) => {
if (target === node) {
done();
}
});
}, []);
return (
<li className={ classNames(
className,
{ [classNameSelected]: isSelected }
) }
>
<div className={ classNames(
headerClassName,
{ [headerClassNameSelected]: isSelected }
) }
>
{ headerContent({ isSelected, onToggle }) }
</div>
{ children && <CSSTransition
addEndListener={ transitionEndListener }
classNames={ bodyClassName }
in={ isSelected }
mountOnEnter
timeout={ {} }
unmountOnExit
>
<div className={ bodyClassName }>
{ children }
</div>
</CSSTransition> }
</li>
);
};
export default memo(AccordionItem);
|