@coreui/react-pro
Version:
UI Components Library for React.js
77 lines (74 loc) • 3.78 kB
JavaScript
import { __rest } 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';
const isInVisibleGroup = (el1, el2) => {
const array1 = el1.toString().split('.');
const array2 = el2.toString().split('.');
return array2.every((item, index) => item === array1[index]);
};
const CNavGroup = forwardRef((_a, ref) => {
var { children, as: Component = 'li', className, compact, idx, toggler, visible } = _a, rest = __rest(_a, ["children", "as", "className", "compact", "idx", "toggler", "visible"]);
const [height, setHeight] = useState(0);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const navItemsRef = useRef(null);
const { visibleGroup, setVisibleGroup } = useContext(CSidebarNavContext);
const [_visible, setVisible] = useState(Boolean(visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx))));
useEffect(() => {
setVisible(Boolean(idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)));
}, [visibleGroup]);
const handleTogglerOnCLick = (event) => {
event.preventDefault();
setVisibleGroup(_visible ? ((idx === null || idx === void 0 ? void 0 : idx.toString().includes('.')) ? idx.slice(0, idx.lastIndexOf('.')) : '') : idx);
setVisible(!_visible);
};
const style = {
height: 0,
};
const onEntering = () => {
navItemsRef.current && setHeight(navItemsRef.current.scrollHeight);
};
const onEntered = () => {
setHeight('auto');
};
const onExit = () => {
navItemsRef.current && setHeight(navItemsRef.current.scrollHeight);
};
const onExiting = () => {
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);
};
const onExited = () => {
setHeight(0);
};
const transitionStyles = {
entering: { display: 'block', height: height },
entered: { display: 'block', height: height },
exiting: { display: 'block', height: height },
exited: { height: height },
unmounted: {},
};
const NavGroupItemsComponent = Component === 'li' ? 'ul' : 'div';
return (React.createElement(Component, Object.assign({ className: classNames('nav-group', { show: _visible }, className) }, rest, { ref: ref }),
toggler && (React.createElement("a", { className: "nav-link nav-group-toggle", href: "#", onClick: (event) => handleTogglerOnCLick(event) }, toggler)),
React.createElement(Transition, { in: _visible, nodeRef: navItemsRef, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, timeout: 300 }, (state) => (React.createElement(NavGroupItemsComponent, { className: classNames('nav-group-items', {
compact: compact,
}), style: Object.assign(Object.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