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

React component library

import { __assign, __rest } from "tslib";
import './Avatar.css';
import React, { forwardRef } from 'react';
import { useThemeProps } from '../../hooks/useThemeProps';
import { useThemeTokens } from '../../hooks/useThemeTokens';
import { generateCSSVariables } from '../../utils';
import { cn } from '../../utils/classname';
import { Indicator } from '../Indicator';
import { AVATAR_CSS_VARIABLE, AVATAR_DEFAULT_HUE, AVATAR_DEFAULT_ONLINE, AVATAR_DEFAULT_SIZE, } from './constants';
import { getHashNumber } from './get-hash-number';
import { matchSizeIndicatorToAvatar, getInitials } from './utils';
export var cnAvatar = cn('Avatar');
export var Avatar = forwardRef(function (inProps, ref) {
    var props = useThemeProps({ props: inProps, name: 'Avatar' });
    var _a = props.size, size = _a === void 0 ? AVATAR_DEFAULT_SIZE : _a, _b = props.online, online = _b === void 0 ? AVATAR_DEFAULT_ONLINE : _b, _c = props.hue, hue = _c === void 0 ? 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 = __rest(props, ["size", "online", "hue", "src", "name", "className", "indicatorProps", "children", "colorScheme", "style"]);
    var colorToken = useThemeTokens().color;
    var name = nameProp || '';
    var indicatorSize = matchSizeIndicatorToAvatar[size];
    var colorShades = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
    var color = "".concat(colorShades[getHashNumber(name, colorShades.length)]).concat(hue);
    var renderContent = function () {
        if (src) {
            return React.createElement("img", { src: src, alt: name, className: cnAvatar('Image') });
        }
        if (children) {
            return children;
        }
        return getInitials(name);
    };
    var style = (function () {
        var properties = {};
        if (colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.background) {
            properties[AVATAR_CSS_VARIABLE.BACKGROUND_COLOR] =
                "var(".concat(colorToken.toCSSProperty(colorScheme.background), ")");
        }
        if (colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.text) {
            properties[AVATAR_CSS_VARIABLE.COLOR] = "var(".concat(colorToken.toCSSProperty(colorScheme.text));
        }
        return __assign(__assign({}, generateCSSVariables(properties)), styleProp);
    })();
    return (React.createElement("div", __assign({ className: cnAvatar({ size: size, color: !src && color }, [className]) }, other, { style: style, ref: ref }),
        renderContent(),
        online && (React.createElement(Indicator, __assign({ variant: "success", size: indicatorSize, border: true }, indicatorProps, { className: cnAvatar('Online', indicatorProps === null || indicatorProps === void 0 ? void 0 : indicatorProps.className) })))));
});
Avatar.displayName = 'Avatar';