@ozen-ui/kit/__inner__/cjs/components/Avatar/Avatar.js

React component library

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Avatar = exports.cnAvatar = void 0;
var tslib_1 = require("tslib");
require("./Avatar.css");
var react_1 = tslib_1.__importStar(require("react"));
var useThemeProps_1 = require("../../hooks/useThemeProps");
var useThemeTokens_1 = require("../../hooks/useThemeTokens");
var utils_1 = require("../../utils");
var classname_1 = require("../../utils/classname");
var Indicator_1 = require("../Indicator");
var constants_1 = require("./constants");
var get_hash_number_1 = require("./get-hash-number");
var utils_2 = require("./utils");
exports.cnAvatar = (0, classname_1.cn)('Avatar');
exports.Avatar = (0, react_1.forwardRef)(function (inProps, ref) {
    var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Avatar' });
    var _a = props.size, size = _a === void 0 ? constants_1.AVATAR_DEFAULT_SIZE : _a, _b = props.online, online = _b === void 0 ? constants_1.AVATAR_DEFAULT_ONLINE : _b, _c = props.hue, hue = _c === void 0 ? constants_1.AVATAR_DEFAULT_HUE : _c, src = props.src, nameProp = props.name, className = props.className, indicatorProps = props.indicatorProps, children = props.children, colorScheme = props.colorScheme, styleProp = props.style, other = tslib_1.__rest(props, ["size", "online", "hue", "src", "name", "className", "indicatorProps", "children", "colorScheme", "style"]);
    var colorToken = (0, useThemeTokens_1.useThemeTokens)().color;
    var name = nameProp || '';
    var indicatorSize = utils_2.matchSizeIndicatorToAvatar[size];
    var colorShades = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
    var color = "".concat(colorShades[(0, get_hash_number_1.getHashNumber)(name, colorShades.length)]).concat(hue);
    var renderContent = function () {
        if (src) {
            return react_1.default.createElement("img", { src: src, alt: name, className: (0, exports.cnAvatar)('Image') });
        }
        if (children) {
            return children;
        }
        return (0, utils_2.getInitials)(name);
    };
    var style = (function () {
        var properties = {};
        if (colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.background) {
            properties[constants_1.AVATAR_CSS_VARIABLE.BACKGROUND_COLOR] =
                "var(".concat(colorToken.toCSSProperty(colorScheme.background), ")");
        }
        if (colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.text) {
            properties[constants_1.AVATAR_CSS_VARIABLE.COLOR] = "var(".concat(colorToken.toCSSProperty(colorScheme.text));
        }
        return tslib_1.__assign(tslib_1.__assign({}, (0, utils_1.generateCSSVariables)(properties)), styleProp);
    })();
    return (react_1.default.createElement("div", tslib_1.__assign({ className: (0, exports.cnAvatar)({ size: size, color: !src && color }, [className]) }, other, { style: style, ref: ref }),
        renderContent(),
        online && (react_1.default.createElement(Indicator_1.Indicator, tslib_1.__assign({ variant: "success", size: indicatorSize, border: true }, indicatorProps, { className: (0, exports.cnAvatar)('Online', indicatorProps === null || indicatorProps === void 0 ? void 0 : indicatorProps.className) })))));
});
exports.Avatar.displayName = 'Avatar';