@sb1/ffe-collapse-react/es/Collapse.js

React component for expand/collapse

import React, { useRef, useEffect, useState, } from 'react';
import classNames from 'classnames';
import { mergeRefs } from './mergeRefs';
import { usePreviousIsOpen } from './usePreviousIsOpen';
export const Collapse = React.forwardRef(({ className, isOpen, onRest, children, ...rest }, ref) => {
    const internalRef = useRef(null);
    const [isHidden, setIsHidden] = useState(!isOpen);
    const [overflowVisible, setOverflowVisible] = useState(isOpen);
    const previousIsOpen = usePreviousIsOpen(isOpen);
    useEffect(() => {
        if (typeof previousIsOpen === 'boolean' &&
            isOpen !== previousIsOpen) {
            setIsHidden(!isOpen);
            setOverflowVisible(false);
        }
    }, [previousIsOpen, isOpen]);
    return (React.createElement("div", { ...rest, ref: mergeRefs([internalRef, ref]), className: classNames('ffe-collapse', className, {
            'ffe-collapse--open': isOpen,
            'ffe-collapse--hidden': isHidden,
        }), onTransitionEnd: e => {
            if (e.target === internalRef.current &&
                e.propertyName === 'grid-template-rows') {
                setIsHidden(!isOpen);
                if (isOpen) {
                    setOverflowVisible(true);
                }
                onRest === null || onRest === void 0 ? void 0 : onRest();
            }
        } },
        React.createElement("div", { className: classNames('ffe-collapse__inner', {
                'ffe-collapse__inner--visible': overflowVisible,
            }) }, children)));
});