@ozen-ui/kit

Version:
React component library
54 lines (53 loc) • 4.09 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SidebarUserMenu = exports.cnSidebarUserMenu = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var icons_1 = require("@ozen-ui/icons");
var useControlled_1 = require("../../../../hooks/useControlled");
var useMultiRef_1 = require("../../../../hooks/useMultiRef");
var useThemeProps_1 = require("../../../../hooks/useThemeProps");
var utils_1 = require("../../../../utils");
var ButtonNext_1 = require("../../../ButtonNext");
var Menu_1 = require("../../../Menu");
var Typography_1 = require("../../../Typography");
var SidebarContext_1 = require("../../SidebarContext");
var constants_1 = require("./constants");
exports.cnSidebarUserMenu = (0, utils_1.cn)('SidebarUserMenu');
exports.SidebarUserMenu = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
    var _a;
    var props = (0, useThemeProps_1.useThemeProps)({
        props: inProps,
        name: 'SidebarUserMenu',
    });
    var _b = props.as, as = _b === void 0 ? constants_1.SIDEBAR_USER_MENU_DEFAULT_TAG : _b, className = props.className, children = props.children, label = props.label, _c = props.labelVariant, labelVariant = _c === void 0 ? constants_1.SIDEBAR_USER_MENU_DEFAULT_LABEL_VARIANT : _c, open = props.open, onOpenChange = props.onOpenChange, menuProps = props.menuProps, onClick = props.onClick, _d = props.maxLines, maxLines = _d === void 0 ? constants_1.SIDEBAR_USER_MENU_DEFAULT_MAX_LINES : _d, other = tslib_1.__rest(props, ["as", "className", "children", "label", "labelVariant", "open", "onOpenChange", "menuProps", "onClick", "maxLines"]);
    var color = (0, SidebarContext_1.useSidebarContext)().color;
    var buttonRef = (0, react_1.useRef)(null);
    var _e = tslib_1.__read((0, useControlled_1.useControlled)({
        name: 'SidebarUserMenu',
        value: open,
        defaultValue: false,
        state: 'isOpen',
    }), 2), isOpen = _e[0], setIsOpenState = _e[1];
    var setIsOpen = function (isOpen) {
        setIsOpenState(isOpen);
        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange({ open: isOpen });
    };
    var isManyLines = maxLines > 1;
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(ButtonNext_1.Button, tslib_1.__assign({}, other, { as: as, ref: (0, useMultiRef_1.useMultiRef)([ref, buttonRef]), variant: "function", onClick: function (event) {
                setIsOpen(!isOpen);
                onClick === null || onClick === void 0 ? void 0 : onClick(event);
            }, style: (0, utils_1.generateCSSVariables)({
                'sidebar-user-menu-ellipsis': maxLines.toString(),
            }), className: (0, exports.cnSidebarUserMenu)('Button', { color: color, open: isOpen, manyLines: isManyLines }, [className]), labelProps: {
                className: (0, exports.cnSidebarUserMenu)('LabelWrapper'),
            }, size: "2xs", iconRight: react_1.default.createElement(icons_1.ChevronDownSmallIcon, { className: (0, exports.cnSidebarUserMenu)('Chevron') }) }),
            react_1.default.createElement(Typography_1.Typography, { variant: labelVariant, className: (0, exports.cnSidebarUserMenu)('Label'), color: "inherit", as: "span" }, label)),
        react_1.default.createElement(Menu_1.Menu, tslib_1.__assign({ placement: "right-end", anchorRef: buttonRef, color: color }, menuProps, { size: (_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.size) !== null && _a !== void 0 ? _a : constants_1.SIDEBAR_USER_MENU_DEFAULT_MENU_SIZE, open: isOpen, className: (0, exports.cnSidebarUserMenu)('Menu', [menuProps === null || menuProps === void 0 ? void 0 : menuProps.className]), onClose: function () {
                var _a;
                setIsOpen(false);
                (_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.onClose) === null || _a === void 0 ? void 0 : _a.call(menuProps);
            } }), children)));
});
exports.SidebarUserMenu.displayName = 'SidebarUserMenu';