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

React component library

import { __assign, __rest } from "tslib";
import React, { useRef } from 'react';
import { CSSTransition } from 'react-transition-group';
import { useMultiRef } from '../../../../hooks/useMultiRef';
import { useThemeProps } from '../../../../hooks/useThemeProps';
import { cn, generateCSSVariables, isFunction, polymorphicComponentWithRef, renderContent, } from '../../../../utils';
import { Stack } from '../../../Stack';
import { useSidebarContext } from '../../SidebarContext';
import { SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG, SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY, SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER, } from './constants';
import { useSidebarCollapsibleItemAnimation } from './hooks';
export var cnSidebarCollapsibleItem = cn('SidebarCollapsibleItem');
export var SidebarCollapsibleItem = polymorphicComponentWithRef(function (inProps, ref) {
    var props = useThemeProps({
        props: inProps,
        name: 'SidebarCollapsibleItem',
    });
    var _a = props.as, as = _a === void 0 ? SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG : _a, className = props.className, fixed = props.fixed, classNames = props.classNames, _b = props.justify, justify = _b === void 0 ? SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY : _b, _c = props.animated, animated = _c === void 0 ? true : _c, children = props.children, collapsed = props.collapsed, _d = props.autoCenter, autoCenter = _d === void 0 ? SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER : _d, contentFullWidth = props.contentFullWidth, other = __rest(props, ["as", "className", "fixed", "classNames", "justify", "animated", "children", "collapsed", "autoCenter", "contentFullWidth"]);
    var _e = useSidebarContext(), variant = _e.variant, size = _e.size;
    var isCollapsed = collapsed !== null && collapsed !== void 0 ? collapsed : variant === 'mini';
    var internalRef = useRef(null);
    var itemRef = useMultiRef([ref, internalRef]);
    var fixedRef = useRef(null);
    var fixedRendered = isFunction(fixed)
        ? renderContent({
            content: fixed,
            props: { collapsed: isCollapsed },
        })
        : fixed;
    var _f = useSidebarCollapsibleItemAnimation({
        autoCenter: autoCenter,
        ref: internalRef,
        fixedRef: fixedRef,
        isCollapsed: isCollapsed,
    }), onExit = _f.onExit, onEnter = _f.onEnter, onTransitionEnd = _f.onTransitionEnd, hasMarginAutoClass = _f.hasMarginAutoClass;
    return (React.createElement(CSSTransition, { nodeRef: internalRef, in: isCollapsed, timeout: { enter: 120, exit: 120 }, appear: true, onEnter: onEnter, onExit: onExit, onEntered: onTransitionEnd, onExited: onTransitionEnd },
        React.createElement(Stack, __assign({}, other, { ref: itemRef, as: as, className: cnSidebarCollapsibleItem({ collapsed: isCollapsed, animated: animated, center: hasMarginAutoClass }, [className]), justify: justify }),
            React.createElement("div", { ref: fixedRef, className: cnSidebarCollapsibleItem('Fixed', [classNames === null || classNames === void 0 ? void 0 : classNames.fixed]) }, fixedRendered),
            React.createElement("div", { className: cnSidebarCollapsibleItem('ContentWrapper', [
                    classNames === null || classNames === void 0 ? void 0 : classNames.contentWrapper,
                ]), style: generateCSSVariables({
                    'sidebar-collapsible-item-content-width': "".concat(contentFullWidth[size], "px"),
                }) },
                React.createElement("div", { className: cnSidebarCollapsibleItem('Content', [
                        classNames === null || classNames === void 0 ? void 0 : classNames.content,
                    ]) }, children)))));
});
SidebarCollapsibleItem.displayName = 'SidebarCollapsibleItem';