@ozen-ui/kit

Version:
React component library
53 lines (52 loc) • 3.84 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HeaderAccount = exports.cnHeaderAccount = 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 ButtonBase_1 = require("../../../ButtonBase");
var List_1 = require("../../../List");
var Paper_1 = require("../../../Paper");
var Popover_1 = require("../../../Popover");
var Typography_1 = require("../../../Typography");
var constants_1 = require("./constants");
exports.cnHeaderAccount = (0, utils_1.cn)('HeaderAccount');
exports.HeaderAccount = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
    var props = (0, useThemeProps_1.useThemeProps)({
        props: inProps,
        name: 'HeaderAccount',
    });
    var _a = props.as, as = _a === void 0 ? constants_1.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 = tslib_1.__rest(props, ["as", "children", "content", "label", "avatar", "className", "open", "onOpenChange", "onClick", "popoverProps"]);
    var internalRef = (0, react_1.useRef)(null);
    var hasItems = !!children;
    var _b = tslib_1.__read((0, useControlled_1.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_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(ButtonBase_1.ButtonBase, tslib_1.__assign({}, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, internalRef]), as: as, className: (0, exports.cnHeaderAccount)({ open: isOpen }, [className]), onClick: function (event) {
                setIsOpen(!isOpen);
                onClick === null || onClick === void 0 ? void 0 : onClick(event);
            } }),
            react_1.default.createElement("div", { className: (0, exports.cnHeaderAccount)('Avatar') }, avatar),
            react_1.default.createElement("div", { className: (0, exports.cnHeaderAccount)('Content') },
                label && (react_1.default.createElement(Typography_1.Typography, { as: "span", className: (0, exports.cnHeaderAccount)('Label'), variant: "text-3xs", color: "secondary" }, label)),
                react_1.default.createElement(Typography_1.Typography, { as: "span", className: (0, exports.cnHeaderAccount)('ContentText'), variant: "text-s", color: "primary" }, content)),
            hasItems && (react_1.default.createElement("div", { className: (0, exports.cnHeaderAccount)('After') },
                react_1.default.createElement(icons_1.ChevronDownSmallIcon, { className: (0, exports.cnHeaderAccount)('Chevron'), size: "s" })))),
        react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: internalRef, offset: [0, 4], strategy: "absolute", placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, equalAnchorWidth: true, as: Paper_1.Paper, radius: "l", open: isOpen && hasItems, onClose: function () { return setIsOpen(false); } }, popoverProps),
            react_1.default.createElement(List_1.List, { as: "ul", size: "s" }, children))));
});