@ozen-ui/kit/__inner__/esm/components/Sidebar/modules/SidebarSubitem/SidebarSubitem.js

React component library

import { __assign, __rest } from "tslib";
import React, { useRef } from 'react';
import { DotIcon } from '@ozen-ui/icons';
import { CSSTransition } from 'react-transition-group';
import { useThemeProps } from '../../../../hooks/useThemeProps';
import { cn, polymorphicComponentWithRef } from '../../../../utils';
import { useSidebarContext } from '../../SidebarContext';
import { SidebarItem } from '../SidebarItem';
import { SIDEBAR_SUBITEM_DEFAULT_TAG } from './constants';
export var cnSidebarSubitem = cn('SidebarSubitem');
export var SidebarSubitem = polymorphicComponentWithRef(function (inProps, ref) {
    var props = useThemeProps({
        props: inProps,
        name: 'SidebarSubitem',
    });
    var _a = props.as, as = _a === void 0 ? SIDEBAR_SUBITEM_DEFAULT_TAG : _a, children = props.children, className = props.className, other = __rest(props, ["as", "children", "className"]);
    var variant = useSidebarContext().variant;
    var iconRef = useRef(null);
    var isShowDot = variant !== 'full';
    return (React.createElement(SidebarItem, __assign({}, other, { icon: React.createElement(CSSTransition, { nodeRef: iconRef, in: isShowDot, timeout: 120, classNames: cnSidebarSubitem('Icon', { animation: true }), unmountOnExit: true, mountOnEnter: true },
            React.createElement("div", { ref: iconRef, className: cnSidebarSubitem('Icon') },
                React.createElement(DotIcon, null))), gutters: false, ref: ref, as: as, className: cnSidebarSubitem('', [className]) }), children));
});
SidebarSubitem.displayName = 'SidebarSubitem';