@coreui/react-pro/dist/esm/components/collapse/CCollapse.js

UI Components Library for React.js

import { __rest } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../_virtual/index.js';
import '@popperjs/core';
import { useForkedRef } from '../../hooks/useForkedRef.js';
import CSSTransition from '../../node_modules/react-transition-group/esm/CSSTransition.js';

const CCollapse = forwardRef((_a, ref) => {
    var { children, className, horizontal, onHide, onShow, visible } = _a, rest = __rest(_a, ["children", "className", "horizontal", "onHide", "onShow", "visible"]);
    const collapseRef = useRef(null);
    const forkedRef = useForkedRef(ref, collapseRef);
    const [height, setHeight] = useState();
    const [width, setWidth] = useState();
    const onEntering = () => {
        onShow === null || onShow === void 0 ? void 0 : onShow();
        if (horizontal) {
            if (collapseRef.current) {
                setWidth(collapseRef.current.scrollWidth);
            }
            return;
        }
        if (collapseRef.current) {
            setHeight(collapseRef.current.scrollHeight);
        }
    };
    const onEntered = () => {
        if (horizontal) {
            setWidth(0);
            return;
        }
        setHeight(0);
    };
    const onExit = () => {
        if (horizontal) {
            if (collapseRef.current) {
                setWidth(collapseRef.current.scrollWidth);
            }
            return;
        }
        if (collapseRef.current) {
            setHeight(collapseRef.current.scrollHeight);
        }
    };
    const onExiting = () => {
        onHide === null || onHide === void 0 ? void 0 : onHide();
        if (horizontal) {
            setWidth(0);
            return;
        }
        setHeight(0);
    };
    const onExited = () => {
        if (horizontal) {
            setWidth(0);
            return;
        }
        setHeight(0);
    };
    return (React.createElement(CSSTransition, { in: visible, nodeRef: collapseRef, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, timeout: 350 }, (state) => {
        const currentHeight = height === 0 ? null : { height };
        const currentWidth = width === 0 ? null : { width };
        return (React.createElement("div", Object.assign({ className: classNames(className, {
                'collapse-horizontal': horizontal,
                collapsing: state === 'entering' || state === 'exiting',
                'collapse show': state === 'entered',
                collapse: state === 'exited',
            }), style: Object.assign(Object.assign({}, currentHeight), currentWidth) }, rest, { ref: forkedRef }), children));
    }));
});
CCollapse.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    horizontal: PropTypes.bool,
    onHide: PropTypes.func,
    onShow: PropTypes.func,
    visible: PropTypes.bool,
};
CCollapse.displayName = 'CCollapse';

export { CCollapse };
//# sourceMappingURL=CCollapse.js.map