@coreui/react/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');
var useForkedRef = require('../../hooks/useForkedRef.js');
require('@popperjs/core');
var CSSTransition = require('../../node_modules/react-transition-group/esm/CSSTransition.js');

var CCollapse = React.forwardRef(function (_a, ref) {
    var children = _a.children, className = _a.className, horizontal = _a.horizontal, onHide = _a.onHide, onShow = _a.onShow, visible = _a.visible, rest = tslib_es6.__rest(_a, ["children", "className", "horizontal", "onHide", "onShow", "visible"]);
    var collapseRef = React.useRef(null);
    var forkedRef = useForkedRef.useForkedRef(ref, collapseRef);
    var _b = React.useState(), height = _b[0], setHeight = _b[1];
    var _c = React.useState(), width = _c[0], setWidth = _c[1];
    var onEntering = function () {
        onShow && onShow();
        if (horizontal) {
            collapseRef.current && setWidth(collapseRef.current.scrollWidth);
            return;
        }
        collapseRef.current && setHeight(collapseRef.current.scrollHeight);
    };
    var onEntered = function () {
        if (horizontal) {
            setWidth(0);
            return;
        }
        setHeight(0);
    };
    var onExit = function () {
        if (horizontal) {
            collapseRef.current && setWidth(collapseRef.current.scrollWidth);
            return;
        }
        collapseRef.current && setHeight(collapseRef.current.scrollHeight);
    };
    var onExiting = function () {
        onHide && onHide();
        if (horizontal) {
            setWidth(0);
            return;
        }
        setHeight(0);
    };
    var onExited = function () {
        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 }, function (state) {
        var currentHeight = height === 0 ? null : { height: height };
        var currentWidth = width === 0 ? null : { width: width };
        return (React.createElement("div", tslib_es6.__assign({ className: index.default(className, {
                'collapse-horizontal': horizontal,
                collapsing: state === 'entering' || state === 'exiting',
                'collapse show': state === 'entered',
                collapse: state === 'exited',
            }), style: tslib_es6.__assign(tslib_es6.__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