@ozen-ui/kit

Version:
React component library
50 lines (49 loc) • 3.34 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, polymorphicComponentWithRef } from '../../../../utils';
import { ButtonBase } from '../../../ButtonBase';
import { List } from '../../../List';
import { Paper } from '../../../Paper';
import { Popover } from '../../../Popover';
import { Typography } from '../../../Typography';
import { HEADER_ACCOUNT_DEFAULT_TAG } from './constants';
export var cnHeaderAccount = cn('HeaderAccount');
export var HeaderAccount = polymorphicComponentWithRef(function (inProps, ref) {
    var props = useThemeProps({
        props: inProps,
        name: 'HeaderAccount',
    });
    var _a = props.as, as = _a === void 0 ? HEADER_ACCOUNT_DEFAULT_TAG : _a, children = props.children, content = props.content, label = props.label, avatar = props.avatar, className = props.className, open = props.open, onOpenChange = props.onOpenChange, onClick = props.onClick, popoverProps = props.popoverProps, other = __rest(props, ["as", "children", "content", "label", "avatar", "className", "open", "onOpenChange", "onClick", "popoverProps"]);
    var internalRef = useRef(null);
    var hasItems = !!children;
    var _b = __read(useControlled({
        name: 'HeaderAccount',
        value: open,
        defaultValue: false,
        state: 'open',
    }), 2), isOpen = _b[0], setIsOpenState = _b[1];
    var setIsOpen = function (isOpen) {
        if (!hasItems) {
            return;
        }
        setIsOpenState(isOpen);
        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(ButtonBase, __assign({}, other, { ref: useMultiRef([ref, internalRef]), as: as, className: cnHeaderAccount({ open: isOpen }, [className]), onClick: function (event) {
                setIsOpen(!isOpen);
                onClick === null || onClick === void 0 ? void 0 : onClick(event);
            } }),
            React.createElement("div", { className: cnHeaderAccount('Avatar') }, avatar),
            React.createElement("div", { className: cnHeaderAccount('Content') },
                label && (React.createElement(Typography, { as: "span", className: cnHeaderAccount('Label'), variant: "text-3xs", color: "secondary" }, label)),
                React.createElement(Typography, { as: "span", className: cnHeaderAccount('ContentText'), variant: "text-s", color: "primary" }, content)),
            hasItems && (React.createElement("div", { className: cnHeaderAccount('After') },
                React.createElement(ChevronDownSmallIcon, { className: cnHeaderAccount('Chevron'), size: "s" })))),
        React.createElement(Popover, __assign({ anchorRef: internalRef, offset: [0, 4], strategy: "absolute", placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, equalAnchorWidth: true, as: Paper, radius: "l", open: isOpen && hasItems, onClose: function () { return setIsOpen(false); } }, popoverProps),
            React.createElement(List, { as: "ul", size: "s" }, children))));
});