@ozen-ui/kit
Version:
React component library
32 lines (31 loc) • 2.07 kB
JavaScript
import { __assign, __rest } from "tslib";
import './Avatar.css';
import React, { forwardRef } from 'react';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { Indicator } from '../Indicator';
import { 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, other = __rest(props, ["size", "online", "hue", "src", "name", "className", "indicatorProps", "children"]);
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);
};
return (React.createElement("div", __assign({ className: cnAvatar({ size: size, color: !src && color }, [className]) }, other, { 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';