@ducor/react/dist/components/disclosure.js

admin template ui interface

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { createContext, useContext, useState, } from "react";
const DisclosureContext = createContext(undefined);
const useDisclosureContext = () => {
    const context = useContext(DisclosureContext);
    if (!context) {
        throw new Error("Disclosure components must be used within a Disclosure.");
    }
    return context;
};
const useDisclosureItem = (index) => {
    const context = useDisclosureContext();
    const isOpen = [...context.isOpen].includes(index);
    return {
        isOpen,
        toggle: () => {
            context.toggle(index);
        },
    };
};
// eventKey; eta use kora hoyeche muloto rerander jeno na hoy
const Disclosure = ({ children, defaultActiveKey = [], eventKey, alwaysOpen = false, }) => {
    // je datai dea hok kono errror dibe na . eta resove
    const _resolve = () => {
        const key = eventKey ? eventKey : defaultActiveKey;
        if (typeof key === "number" || typeof key === "string") {
            return [key];
        }
        else if (typeof key === "object" && Array.isArray(key)) {
            return [
                ...key.filter((k) => {
                    return typeof k === "number" || typeof k === "string";
                }),
            ];
        }
        return [];
    };
    const [isOpen, setIsOpen] = useState(_resolve);
    const toggle = (index) => {
        if (alwaysOpen) {
            //many
            if ([...isOpen].includes(index)) {
                setIsOpen([...isOpen.filter((key) => key !== index)]);
            }
            else {
                setIsOpen([...isOpen, index]);
            }
        }
        else if (typeof index === "number" || typeof index === "string") {
            // single item
            setIsOpen([...isOpen].includes(index) ? [] : [index]);
        }
    };
    const isValid = children !== null && children !== undefined;
    // children to array
    const childrenArray = isValid ? React.Children.toArray(children) : [];
    return (_jsx(DisclosureContext.Provider, { value: { isOpen, alwaysOpen, toggle }, children: childrenArray.map((child, index) => {
            if (child !== null && child !== undefined) {
                let newChild = React.cloneElement(child, {
                    key: index,
                    index,
                });
                return newChild;
            }
            return null;
        }) }));
};
const DisclosureItem = ({ children, index }) => {
    const isValid = children !== null && children !== undefined;
    // children to array
    const childrenArray = isValid ? React.Children.toArray(children) : [];
    return (_jsx("div", { className: 'border rounded-lg overflow-hidden', children: childrenArray.map((child, key) => {
            if (child !== null && child !== undefined) {
                let newChild = React.cloneElement(child, {
                    key,
                    index,
                });
                return newChild;
            }
            return null;
        }) }));
};
const Header = ({ children, index }) => {
    const { isOpen, toggle } = useDisclosureItem(index);
    return (_jsxs("div", { onClick: toggle, role: 'button', className: 'flex justify-between items-center bg-gray-900 text-white w-full px-4 py-2', children: [_jsx("div", { children: children }), _jsx("i", { className: isOpen ? "feather-arrow-down" : "feather-arrow-up" })] }));
};
const Body = ({ children, index }) => {
    const { isOpen } = useDisclosureItem(index);
    return isOpen ? (_jsx("div", { className: 'px-4 py-2 bg-gray-100', children: children })) : null;
};
export default Object.assign(Disclosure, {
    Item: DisclosureItem,
    Header: Header,
    Body: Body,
});