react-accordion-ts/dist/panel.js

A ReactJS collapsible component

import * as React from 'react';
export var Panel = function (_a) {
    var open = _a.open, index = _a.index, title = _a.title, duration = _a.duration, multiple = _a.multiple, children = _a.children, activeTab = _a.activeTab, activatePanel = _a.activatePanel;
    var ref = React.useRef(null);
    var _b = React.useState(0), height = _b[0], setHeight = _b[1];
    var _c = React.useState(!!open), active = _c[0], setActive = _c[1];
    var isActive = multiple ? active : activeTab === index;
    var style = {
        height: "".concat(isActive ? height : 0, "px")
    };
    React.useEffect(function () {
        var timeout = setTimeout(function () {
            var _a;
            var el = ref.current;
            var newHeight = (_a = el === null || el === void 0 ? void 0 : el.querySelector('.panel__body')) === null || _a === void 0 ? void 0 : _a.scrollHeight;
            setHeight(newHeight || height);
        }, duration || 300);
        return function () {
            clearTimeout(timeout);
        };
    });
    return (React.createElement("div", { className: "panel", role: "tabpanel", "aria-expanded": isActive, ref: ref },
        React.createElement("button", { role: "tab", className: "panel__head", onClick: function () {
                multiple ? setActive(!active) : activatePanel(index);
            } }, title),
        React.createElement("div", { style: style, className: "panel__body", "aria-hidden": !isActive },
            React.createElement("div", { className: "panel__content" }, children))));
};
//# sourceMappingURL=panel.js.map