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

UI Components Library for React.js

'use strict';

var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var PropTypes = require('prop-types');
var index = require('../../_virtual/index.js');
require('@popperjs/core');
var useForkedRef = require('../../hooks/useForkedRef.js');
var CSSTransition = require('../../node_modules/react-transition-group/esm/CSSTransition.js');

const CCollapse = React.forwardRef((_a, ref) => {
    var { children, className, horizontal, onHide, onShow, visible } = _a, rest = tslib_es6.__rest(_a, ["children", "className", "horizontal", "onHide", "onShow", "visible"]);
    const collapseRef = React.useRef(null);
    const forkedRef = useForkedRef.useForkedRef(ref, collapseRef);
    const [height, setHeight] = React.useState();
    const [width, setWidth] = React.useState();
    const onEntering = () => {
        onShow && onShow();
        if (horizontal) {
            collapseRef.current && setWidth(collapseRef.current.scrollWidth);
            return;
        }
        collapseRef.current && setHeight(collapseRef.current.scrollHeight);
    };
    const onEntered = () => {
        if (horizontal) {
            setWidth(0);
            return;
        }
        setHeight(0);
    };
    const onExit = () => {
        if (horizontal) {
            collapseRef.current && setWidth(collapseRef.current.scrollWidth);
            return;
        }
        collapseRef.current && setHeight(collapseRef.current.scrollHeight);
    };
    const onExiting = () => {
        onHide && onHide();
        if (horizontal) {
            setWidth(0);
            return;
        }
        setHeight(0);
    };
    const onExited = () => {
        if (horizontal) {
            setWidth(0);
            return;
        }
        setHeight(0);
    };
    return (React.createElement(CSSTransition.default, { 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: index.default(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';

exports.CCollapse = CCollapse;
//# sourceMappingURL=CCollapse.js.map