@re-flex/ui/Collapse/index.js

Re-Flex ui library

import StyledCollapse from "@re-flex/styled/Collapse";
import { useTheme } from "@re-flex/styles";
import clsx from "clsx";
import React, { useCallback, useMemo } from "react";
const Collapse = ({ children, open = false, starterHeight = 0, className, ...rest }) => {
    const theme = useTheme();
    const collapseRef = React.useRef(null);
    const [maxHeight, setMaxHeight] = React.useState(0);
    React.useEffect(() => {
        const target = collapseRef.current;
        if (!!target) {
            const resizer = new ResizeObserver(listenChange);
            resizer.observe(target, { box: "border-box" });
            return () => {
                resizer.unobserve(target);
                resizer.disconnect();
            };
        }
    }, [collapseRef]);
    const listenChange = useCallback(() => {
        setMaxHeight(collapseRef.current?.scrollHeight || 0);
    }, [collapseRef.current, open]);
    const collapseHeight = useMemo(() => {
        return ((open ? collapseRef.current?.scrollHeight || maxHeight : starterHeight) +
            "px");
    }, [open, collapseRef, maxHeight, starterHeight]);
    return (React.createElement(StyledCollapse, { ...rest, className: clsx(theme.prefix + "-collapse-content", className), height: collapseHeight },
        React.createElement("div", { ref: collapseRef }, children)));
};
export default Collapse;