@kadconsulting/dry/dist/src/components/MultiAccordion/MultiAccordion.js

KAD Reusable Component Library

import { jsx as _jsx } from "react/jsx-runtime";
import { useState, forwardRef, useEffect } from 'react';
import { Accordion } from '../Accordion';
import classnames from 'classnames';
import './MultiAccordion.scss';
const MultiAccordion = forwardRef(({ id, className, passProps, faqs, accordionComponent: AccordionComponent = Accordion, controlledIndex, onAccordionChange, expandAll, collapseAll, ...props }, ref) => {
    const [openAccordion, setOpenAccordion] = useState(collapseAll ? null : 0);
    useEffect(() => {
        if (controlledIndex !== undefined) {
            setOpenAccordion(controlledIndex);
        }
    }, [controlledIndex]);
    useEffect(() => {
        if (expandAll) {
            setOpenAccordion(-1); // -1 represent 'all open'
        }
        else if (collapseAll) {
            setOpenAccordion(null);
        }
    }, [expandAll, collapseAll]);
    const handleAccordionClick = (index) => {
        const newIndex = openAccordion === index ? null : index;
        setOpenAccordion(newIndex);
        onAccordionChange && onAccordionChange(newIndex);
    };
    return (_jsx("div", { id: id, ref: ref, className: classnames(className, 'dry-multiaccordion'), ...props, children: faqs.map((faq, index) => (_jsx(Accordion, { 
            // TODO-p2: remove the parentContent and replace with title also make this easer to use
            title: faq.title, subTitle: faq.subTitle, parentContent: faq.title, children: faq.content, initialOpenState: openAccordion === index || openAccordion === -1, collapsible: true, onClick: () => handleAccordionClick(index) }, index))) }));
});
export default MultiAccordion;
//# sourceMappingURL=MultiAccordion.js.map