@adaptabletools/adaptable-cjs/src/components/Accordion.js

Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Accordion = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const SimpleButton_1 = tslib_1.__importDefault(require("./SimpleButton"));
const Panel_1 = tslib_1.__importDefault(require("./Panel"));
const Accordion = ({ title, children }) => {
    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
    const [height, setHeight] = (0, react_1.useState)('0px');
    const content = (0, react_1.useRef)(null);
    const observer = (0, react_1.useRef)(null);
    (0, react_1.useEffect)(() => {
        setHeight(isOpen && content.current ? `${content.current.scrollHeight}px` : '0px');
    }, [isOpen, content]);
    (0, react_1.useEffect)(() => {
        if (content.current) {
            observer.current = new MutationObserver(() => {
                setHeight(`${content.current?.scrollHeight}px`);
            });
            observer.current.observe(content.current, { childList: true, subtree: true });
        }
        return () => {
            observer.current?.disconnect();
        };
    }, []);
    const toggleAccordion = () => {
        setIsOpen(!isOpen);
    };
    return (react_1.default.createElement(Panel_1.default, { className: "ab-Accordion" },
        react_1.default.createElement(SimpleButton_1.default, { iconPosition: "end", icon: isOpen ? 'expand-all' : 'collapse-all', variant: "text", onClick: toggleAccordion, style: { width: '100%', textAlign: 'left' } }, title),
        react_1.default.createElement("div", { ref: content, style: {
                maxHeight: `${height}`,
                overflow: 'hidden',
                transition: 'max-height 0.6s ease',
            } }, children)));
};
exports.Accordion = Accordion;
exports.default = exports.Accordion;