@ozen-ui/kit/__inner__/cjs/components/Sidebar/modules/SidebarItem/SidebarItem.js

React component library

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SidebarItem = exports.cnSidebarItem = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var icons_1 = require("@ozen-ui/icons");
var useControlled_1 = require("../../../../hooks/useControlled");
var useStoredValue_1 = require("../../../../hooks/useStoredValue");
var useThemeProps_1 = require("../../../../hooks/useThemeProps");
var utils_1 = require("../../../../utils");
var Badge_1 = require("../../../Badge");
var Collapse_1 = require("../../../Collapse");
var SidebarContext_1 = require("../../SidebarContext");
var SidebarCollapsibleItem_1 = require("../SidebarCollapsibleItem");
var SidebarList_1 = require("../SidebarList");
var constants_1 = require("./constants");
exports.cnSidebarItem = (0, utils_1.cn)('SidebarItem');
exports.SidebarItem = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
    var props = (0, useThemeProps_1.useThemeProps)({
        props: inProps,
        name: 'SidebarItem',
    });
    var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_ITEM_DEFAULT_TAG : _a, icon = props.icon, children = props.children, className = props.className, _b = props.interactive, interactive = _b === void 0 ? constants_1.SIDEBAR_ITEM_DEFAULT_INTERACTIVE : _b, subitems = props.subitems, onOpenChange = props.onOpenChange, open = props.open, wrapperProps = props.wrapperProps, onClick = props.onClick, _c = props.gutters, gutters = _c === void 0 ? constants_1.SIDEBAR_ITEM_DEFAULT_GUTTERS : _c, _d = props.enableSubitemsOnCollapsed, enableSubitemsOnCollapsed = _d === void 0 ? constants_1.SIDEBAR_ITEM_DEFAULT_ENABLE_OPEN_ON_COLLAPSED : _d, active = props.active, badgeProp = props.badge, badgeProps = props.badgeProps, after = props.after, dataTestId = props["data-testid"], other = tslib_1.__rest(props, ["as", "icon", "children", "className", "interactive", "subitems", "onOpenChange", "open", "wrapperProps", "onClick", "gutters", "enableSubitemsOnCollapsed", "active", "badge", "badgeProps", "after", 'data-testid']);
    var _e = (0, SidebarContext_1.useSidebarContext)(), variant = _e.variant, color = _e.color, size = _e.size;
    var _f = tslib_1.__read((0, useControlled_1.useControlled)({
        name: 'SidebarItem',
        value: open,
        defaultValue: false,
        state: 'isOpenSubitems',
    }), 2), isOpenSubitemsState = _f[0], setIsOpenSubitemsState = _f[1];
    var hasSubitems = !!subitems;
    var isOpenSubitems = hasSubitems && !!isOpenSubitemsState;
    var isCollapsed = variant === 'mini';
    var setIsOpenSubItems = function (isOpen) {
        if (isCollapsed && !enableSubitemsOnCollapsed) {
            return;
        }
        setIsOpenSubitemsState(isOpen);
        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
    };
    var previousVariant = (0, useStoredValue_1.useStoredValue)(variant);
    var isCompact = variant === 'compact';
    var isAnimated = previousVariant.current !== 'compact' && !isCompact;
    previousVariant.current = variant;
    return (react_1.default.createElement("li", tslib_1.__assign({}, wrapperProps, { ref: ref, className: (0, exports.cnSidebarItem)({
            variant: isCompact ? 'compact' : 'default',
            color: color,
            interactive: interactive,
            gutters: gutters,
            active: active,
            size: size,
            openSubitems: isOpenSubitems,
        }, [className]), "data-testid": dataTestId }),
        react_1.default.createElement(SidebarCollapsibleItem_1.SidebarCollapsibleItem, tslib_1.__assign({}, other, { as: as, onClick: function (event) {
                onClick === null || onClick === void 0 ? void 0 : onClick(event);
                setIsOpenSubItems(!isOpenSubitems);
            }, collapsed: isCollapsed, className: (0, exports.cnSidebarItem)('Item'), contentFullWidth: {
                s: 180,
                m: 196,
            }, autoCenter: false, fixed: function (props) {
                var badge = (0, utils_1.isFunction)(badgeProp)
                    ? badgeProp({ collapsed: props.collapsed })
                    : badgeProp;
                var renderedIcon = (0, utils_1.isFunction)(icon)
                    ? (0, utils_1.renderContent)({ content: icon, props: props })
                    : icon;
                if (badge) {
                    return (react_1.default.createElement(Badge_1.Badge, tslib_1.__assign({ variant: "dot", color: "errorDark" }, badgeProps, { className: (0, exports.cnSidebarItem)('Badge', [badgeProps === null || badgeProps === void 0 ? void 0 : badgeProps.className]), size: "s" }), renderedIcon));
                }
                return renderedIcon;
            }, animated: isAnimated, align: isCompact ? 'center' : 'start', direction: isCompact ? 'column' : 'row', classNames: {
                content: (0, exports.cnSidebarItem)('Content'),
                fixed: (0, exports.cnSidebarItem)('Icon'),
            } }),
            react_1.default.createElement("span", null, children),
            (after || hasSubitems) && (react_1.default.createElement("div", { className: (0, exports.cnSidebarItem)('Right') },
                after && react_1.default.createElement("div", { className: (0, exports.cnSidebarItem)('After') }, after),
                hasSubitems && (react_1.default.createElement(icons_1.ArrowDownFilledIcon, { className: (0, exports.cnSidebarItem)('Chevron'), size: "s" }))))),
        !!subitems && (react_1.default.createElement(Collapse_1.Collapse, { expanded: isOpenSubitems, className: (0, exports.cnSidebarItem)('SubitemsCollapse') },
            react_1.default.createElement(SidebarList_1.SidebarList, { className: (0, exports.cnSidebarItem)('Subitems') }, subitems)))));
});
exports.SidebarItem.displayName = 'SidebarItem';