@coreui/react/dist/esm/components/nav/CNavGroup.js

UI Components Library for React.js

import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useState, useRef, useContext, useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../_virtual/index.js';
import { CSidebarNavContext } from '../sidebar/CSidebarNavContext.js';
import Transition from '../../node_modules/react-transition-group/esm/Transition.js';

var isInVisibleGroup = function (el1, el2) {
    var array1 = el1.toString().split('.');
    var array2 = el2.toString().split('.');
    return array2.every(function (item, index) { return item === array1[index]; });
};
var CNavGroup = forwardRef(function (_a, ref) {
    var children = _a.children, _b = _a.as, Component = _b === void 0 ? 'li' : _b, className = _a.className, compact = _a.compact, idx = _a.idx, toggler = _a.toggler, visible = _a.visible, rest = __rest(_a, ["children", "as", "className", "compact", "idx", "toggler", "visible"]);
    var _c = useState(0), height = _c[0], setHeight = _c[1];
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    var navItemsRef = useRef(null);
    var _d = useContext(CSidebarNavContext), visibleGroup = _d.visibleGroup, setVisibleGroup = _d.setVisibleGroup;
    var _e = useState(Boolean(visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)))), _visible = _e[0], setVisible = _e[1];
    useEffect(function () {
        setVisible(Boolean(idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)));
    }, [visibleGroup]);
    var handleTogglerOnCLick = function (event) {
        event.preventDefault();
        setVisibleGroup(_visible ? ((idx === null || idx === void 0 ? void 0 : idx.toString().includes('.')) ? idx.slice(0, idx.lastIndexOf('.')) : '') : idx);
        setVisible(!_visible);
    };
    var style = {
        height: 0,
    };
    var onEntering = function () {
        navItemsRef.current && setHeight(navItemsRef.current.scrollHeight);
    };
    var onEntered = function () {
        setHeight('auto');
    };
    var onExit = function () {
        navItemsRef.current && setHeight(navItemsRef.current.scrollHeight);
    };
    var onExiting = function () {
        var _a;
        // @ts-expect-error reflow is necessary to get correct height of the element
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        (_a = navItemsRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
        setHeight(0);
    };
    var onExited = function () {
        setHeight(0);
    };
    var transitionStyles = {
        entering: { display: 'block', height: height },
        entered: { display: 'block', height: height },
        exiting: { display: 'block', height: height },
        exited: { height: height },
        unmounted: {},
    };
    var NavGroupItemsComponent = Component === 'li' ? 'ul' : 'div';
    return (React.createElement(Component, __assign({ className: classNames('nav-group', { show: _visible }, className) }, rest, { ref: ref }),
        toggler && (React.createElement("a", { className: "nav-link nav-group-toggle", href: "#", onClick: function (event) { return handleTogglerOnCLick(event); } }, toggler)),
        React.createElement(Transition, { in: _visible, nodeRef: navItemsRef, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, timeout: 300 }, function (state) { return (React.createElement(NavGroupItemsComponent, { className: classNames('nav-group-items', {
                compact: compact,
            }), style: __assign(__assign({}, style), transitionStyles[state]), ref: navItemsRef }, children)); })));
});
CNavGroup.propTypes = {
    as: PropTypes.elementType,
    children: PropTypes.node,
    className: PropTypes.string,
    compact: PropTypes.bool,
    idx: PropTypes.string,
    toggler: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    visible: PropTypes.bool,
};
CNavGroup.displayName = 'CNavGroup';

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