@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 && 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, { 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