@ozen-ui/kit

Version:
React component library
41 lines (40 loc) • 3.28 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Sidebar = exports.cnSidebar = void 0;
var tslib_1 = require("tslib");
require("./Sidebar.css");
require("./modules/SidebarCollapsibleItem/SidebarCollapsibleItem.css");
require("./modules/SidebarContent/SidebarContent.css");
require("./modules/SidebarDivider/SidebarDivider.css");
require("./modules/SidebarFooter/SidebarFooter.css");
require("./modules/SidebarHeader/SidebarHeader.css");
require("./modules/SidebarHeaderLogo/SidebarHeaderLogo.css");
require("./modules/SidebarItem/SidebarItem.css");
require("./modules/SidebarList/SidebarList.css");
require("./modules/SidebarSizer/SidebarSizer.css");
require("./modules/SidebarSubitem/SidebarSubitem.css");
require("./modules/SidebarUser/SidebarUser.css");
require("./modules/SidebarUserMenu/SidebarUserMenu.css");
var react_1 = tslib_1.__importStar(require("react"));
var useThemeProps_1 = require("../../hooks/useThemeProps");
var utils_1 = require("../../utils");
var constants_1 = require("./constants");
var SidebarContext_1 = require("./SidebarContext");
exports.cnSidebar = (0, utils_1.cn)('Sidebar');
exports.Sidebar = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
    var _a;
    var props = (0, useThemeProps_1.useThemeProps)({
        name: 'Sidebar',
        props: inProps,
    });
    var children = props.children, className = props.className, _b = props.as, Tag = _b === void 0 ? constants_1.SIDEBAR_DEFAULT_TAG : _b, _c = props.variant, variant = _c === void 0 ? constants_1.SIDEBAR_DEFAULT_VARIANT : _c, _d = props.rounded, rounded = _d === void 0 ? constants_1.SIDEBAR_DEFAULT_ROUNDED : _d, _e = props.size, size = _e === void 0 ? constants_1.SIDEBAR_DEFAULT_SIZE : _e, _f = props.color, color = _f === void 0 ? constants_1.SIDEBAR_DEFAULT_COLOR : _f, sizer = props.sizer, sizerWrapperProps = props.sizerWrapperProps, style = props.style, forceShowSizer = props.forceShowSizer, other = tslib_1.__rest(props, ["children", "className", "as", "variant", "rounded", "size", "color", "sizer", "sizerWrapperProps", "style", "forceShowSizer"]);
    var memoizedContextValue = (0, react_1.useMemo)(function () { return ({ variant: variant, size: size, color: color }); }, [variant, size, color]);
    var width = constants_1.SIDEBAR_WIDTH_BY_VARIANT[size][variant];
    return (react_1.default.createElement(SidebarContext_1.SidebarContext.Provider, { value: memoizedContextValue },
        react_1.default.createElement(Tag, tslib_1.__assign({}, other, { ref: ref, style: tslib_1.__assign(tslib_1.__assign({}, style), (0, utils_1.generateCSSVariables)((_a = {},
                _a[constants_1.SIDEBAR_CSS_VARIABLE.WIDTH] = "".concat(width, "px"),
                _a))), className: (0, exports.cnSidebar)({ variant: variant, rounded: rounded, size: size, color: color }, [className]) }),
            children,
            sizer && (react_1.default.createElement("div", tslib_1.__assign({}, sizerWrapperProps, { className: (0, exports.cnSidebar)('SizerWrapper', { forceShow: forceShowSizer }, [sizerWrapperProps === null || sizerWrapperProps === void 0 ? void 0 : sizerWrapperProps.className]) }),
                react_1.default.createElement("div", { className: (0, exports.cnSidebar)('Sizer') }, sizer))))));
});