@ozen-ui/kit

Version:
React component library
51 lines (50 loc) • 3.76 kB
JavaScript
import { __assign, __read, __rest } from "tslib";
import React, { useRef } from 'react';
import { ChevronDownSmallIcon } from '@ozen-ui/icons';
import { useControlled } from '../../../../hooks/useControlled';
import { useMultiRef } from '../../../../hooks/useMultiRef';
import { useThemeProps } from '../../../../hooks/useThemeProps';
import { cn, generateCSSVariables, polymorphicComponentWithRef, } from '../../../../utils';
import { Button } from '../../../ButtonNext';
import { Menu } from '../../../Menu';
import { Typography } from '../../../Typography';
import { useSidebarContext } from '../../SidebarContext';
import { SIDEBAR_USER_MENU_DEFAULT_LABEL_VARIANT, SIDEBAR_USER_MENU_DEFAULT_MAX_LINES, SIDEBAR_USER_MENU_DEFAULT_MENU_SIZE, SIDEBAR_USER_MENU_DEFAULT_TAG, } from './constants';
export var cnSidebarUserMenu = cn('SidebarUserMenu');
export var SidebarUserMenu = polymorphicComponentWithRef(function (inProps, ref) {
    var _a;
    var props = useThemeProps({
        props: inProps,
        name: 'SidebarUserMenu',
    });
    var _b = props.as, as = _b === void 0 ? SIDEBAR_USER_MENU_DEFAULT_TAG : _b, className = props.className, children = props.children, label = props.label, _c = props.labelVariant, labelVariant = _c === void 0 ? 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 ? SIDEBAR_USER_MENU_DEFAULT_MAX_LINES : _d, other = __rest(props, ["as", "className", "children", "label", "labelVariant", "open", "onOpenChange", "menuProps", "onClick", "maxLines"]);
    var color = useSidebarContext().color;
    var buttonRef = useRef(null);
    var _e = __read(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.createElement(React.Fragment, null,
        React.createElement(Button, __assign({}, other, { as: as, ref: useMultiRef([ref, buttonRef]), variant: "function", onClick: function (event) {
                setIsOpen(!isOpen);
                onClick === null || onClick === void 0 ? void 0 : onClick(event);
            }, style: generateCSSVariables({
                'sidebar-user-menu-ellipsis': maxLines.toString(),
            }), className: cnSidebarUserMenu('Button', { color: color, open: isOpen, manyLines: isManyLines }, [className]), labelProps: {
                className: cnSidebarUserMenu('LabelWrapper'),
            }, size: "2xs", iconRight: React.createElement(ChevronDownSmallIcon, { className: cnSidebarUserMenu('Chevron') }) }),
            React.createElement(Typography, { variant: labelVariant, className: cnSidebarUserMenu('Label'), color: "inherit", as: "span" }, label)),
        React.createElement(Menu, __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 : SIDEBAR_USER_MENU_DEFAULT_MENU_SIZE, open: isOpen, className: 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)));
});
SidebarUserMenu.displayName = 'SidebarUserMenu';