@geneui/components/Avatar/index.js

The Gene UI components library designed for BI tools

import React__default from 'react';
import { c as classnames } from '../index-031ff73c.js';
import { r as getInitials, n as noop } from '../index-a0e4e333.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import 'prop-types';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';

var css_248z = "[data-gene-ui-version=\"2.16.5\"] .user-avatar-c{--size:2.6rem;background:var(--background-sc) no-repeat 50% 50%/cover;border-radius:.3rem;box-shadow:0 0 0 0 rgba(var(--background-sc-rgb),.2);color:var(--background);font:600 calc(var(--size)/2.3)/var(--size) var(--font-family);height:var(--size);text-align:center;transition:box-shadow .3s;width:var(--size)}[data-gene-ui-version=\"2.16.5\"] .user-avatar-c.clickable{cursor:pointer}[data-gene-ui-version=\"2.16.5\"] .user-avatar-c.clickable:hover{box-shadow:0 0 0 .3rem rgba(var(--background-sc-rgb),.2)}[data-gene-ui-version=\"2.16.5\"] .user-avatar-c:not(.color-default){background:var(--background) no-repeat 50% 50%/cover;box-shadow:0 0 0 0 rgba(var(--background-rgb),.2);color:var(--background-sc)}[data-gene-ui-version=\"2.16.5\"] .user-avatar-c:not(.color-default).clickable:hover{box-shadow:0 0 0 .3rem rgba(var(--background-rgb),.2)}[data-gene-ui-version=\"2.16.5\"] .user-avatar-c.color-green{--background:var(--confirm);--background-hover:var(--confirm-hover);--background-sc:var(--confirm-sc);--background-rgb:var(--confirm-rgb);--background-sc-rgb:var(--confirm-sc-rgb)}[data-gene-ui-version=\"2.16.5\"] .user-avatar-c.color-red{--background:var(--danger);--background-hover:var(--danger-hover);--background-sc:var(--danger-sc);--background-rgb:var(--danger-rgb);--background-sc-rgb:var(--danger-sc-rgb)}[data-gene-ui-version=\"2.16.5\"] .user-avatar-c.shape-circle{border-radius:100%}[data-gene-ui-version=\"2.16.5\"] .user-avatar-c.text-small{font-size:calc(var(--size)/2.5)}[data-gene-ui-version=\"2.16.5\"] .user-avatar-c[class*=bc-icon-]{font-size:calc(var(--size)/2);line-height:var(--size)}[data-gene-ui-version=\"2.16.5\"] .user-avatar-c.size-small{--size:2.2rem}[data-gene-ui-version=\"2.16.5\"] .user-avatar-c.size-medium{--size:3.6rem}[data-gene-ui-version=\"2.16.5\"] .user-avatar-c.size-big{--size:4.6rem}";
styleInject(css_248z);

const Avatar = ({ src, icon, size, color, shape, onClick, children }) => {
    return (React__default.createElement("div", { className: classnames('user-avatar-c', {
            [`size-${size}`]: size,
            [`color-${color}`]: color,
            [`shape-${shape}`]: shape,
            [icon]: !src && icon,
            'text-small': typeof children === 'string' && children.length > 1,
            clickable: !!onClick
        }), style: { backgroundImage: src ? `url(${src})` : '' }, onClick: onClick }, !src && !icon && children && getInitials(children)));
};
Avatar.defaultProps = {
    onClick: noop,
    size: 'default',
    color: 'default',
    shape: 'circle'
};

export { Avatar as default };