@ozen-ui/kit

Version:
React component library
40 lines (39 loc) • 3.03 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SidebarUser = exports.cnSidebarUser = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var useThemeProps_1 = require("../../../../hooks/useThemeProps");
var utils_1 = require("../../../../utils");
var Avatar_1 = require("../../../Avatar");
var Stack_1 = require("../../../Stack");
var Typography_1 = require("../../../Typography");
var SidebarContext_1 = require("../../SidebarContext");
var SidebarCollapsibleItem_1 = require("../SidebarCollapsibleItem");
var constants_1 = require("./constants");
exports.cnSidebarUser = (0, utils_1.cn)('SidebarUser');
exports.SidebarUser = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
    var _a;
    var props = (0, useThemeProps_1.useThemeProps)({
        props: inProps,
        name: 'SidebarUser',
    });
    var _b = props.as, as = _b === void 0 ? constants_1.SIDEBAR_USER_DEFAULT_TAG : _b, className = props.className, avatarProps = props.avatarProps, name = props.name, online = props.online, status = props.status, after = props.after, other = tslib_1.__rest(props, ["as", "className", "avatarProps", "name", "online", "status", "after"]);
    var _c = (0, SidebarContext_1.useSidebarContext)(), variant = _c.variant, size = _c.size;
    var isCollapsed = variant !== 'full';
    return (react_1.default.createElement(SidebarCollapsibleItem_1.SidebarCollapsibleItem, tslib_1.__assign({}, other, { ref: ref, as: as, className: (0, exports.cnSidebarUser)('', [className]), fixed: react_1.default.createElement(Avatar_1.Avatar, tslib_1.__assign({}, avatarProps, { online: (0, utils_1.isFunction)(online) ? online({ collapsed: isCollapsed }) : online, name: (_a = avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.name) !== null && _a !== void 0 ? _a : name, size: constants_1.SIDEBAR_USER_SIZE_TO_AVATAR[size], indicatorProps: { className: (0, exports.cnSidebarUser)('Indicator') }, className: (0, exports.cnSidebarUser)('Avatar', [avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.className]), colorScheme: {
                text: 'content-primary',
                background: 'background-tertiary',
            } })), collapsed: isCollapsed, classNames: {
            content: (0, exports.cnSidebarUser)('Content'),
            fixed: (0, exports.cnSidebarUser)('Fixed'),
        }, contentFullWidth: {
            s: 184,
            m: 200,
        } }),
        react_1.default.createElement(Stack_1.Stack, { direction: "column", className: (0, exports.cnSidebarUser)('Info') },
            react_1.default.createElement(Typography_1.Typography, { variant: "text-s", as: "span", className: (0, exports.cnSidebarUser)('Name') }, name),
            status),
        after && (react_1.default.createElement(Stack_1.Stack, { display: "block", align: "center", justify: "center", className: (0, exports.cnSidebarUser)('After') }, after))));
});
exports.SidebarUser.displayName = 'SidebarUser';