@kadconsulting/dry
Version:
KAD Reusable Component Library
36 lines • 2.59 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import Collapsible from 'react-collapsible';
import './Accordion.scss';
import { Button } from '../../components/Button';
// TODO-DRY: icon needs to be easer to use
import Icon from '../Icons/Icon/Icon';
import { ChevronDown, ChevronUp, Trash01 } from '../Icons/paths';
import { IconSizes } from '../Icons/Icon/IconTypes';
import './Accordion.scss';
import classnames from 'classnames';
const Accordion = ({ parentContent, subTitle, children, initialOpenState, onOpenStateChange, onDelete, collapsible = true, style, triggerStyle, contentOuterClassName, parentClassName = '', open: controlledOpen, }) => {
const [internalOpen, setInternalOpen] = useState(initialOpenState ?? false);
const isControlled = controlledOpen !== undefined;
const isOpen = isControlled ? controlledOpen : internalOpen;
useEffect(() => {
if (onOpenStateChange && collapsible)
onOpenStateChange(isOpen);
}, [onOpenStateChange, isOpen, collapsible]);
const handleToggle = () => {
if (!isControlled) {
setInternalOpen(!internalOpen);
}
if (onOpenStateChange) {
onOpenStateChange(!isOpen);
}
};
return (_jsx(Collapsible, { open: isOpen, className: 'accordion', triggerDisabled: !collapsible, trigger: _jsxs(_Fragment, { children: [_jsxs("div", { onClick: handleToggle, className: 'accordion__wrapper', children: [parentContent && (_jsx("div", { className: classnames({
accordion__parent: true,
[parentClassName]: parentClassName,
}), children: parentContent })), subTitle && _jsx("div", { className: 'accordion__subtitle', children: subTitle })] }), _jsxs("div", { className: 'accordion__actions', children: [onDelete && (_jsx(Button, { width: 'unset', buttonType: 'icon', onClick: onDelete, children: _jsx(Icon, { color: '#667085', Path: Trash01, size: IconSizes.SMALL }) })), collapsible && (_jsxs(Button, { width: 'unset', buttonType: 'icon', onClick: handleToggle, children: [!isOpen && (_jsx(Icon, { color: '#667085', Path: ChevronDown, size: IconSizes.SMALL })), isOpen && (_jsx(Icon, { color: '#667085', Path: ChevronUp, size: IconSizes.SMALL }))] }))] })] }), triggerStyle: triggerStyle, containerElementProps: {
style,
}, contentOuterClassName: contentOuterClassName, children: children }));
};
export default Accordion;
//# sourceMappingURL=Accordion.js.map