@braineet/ui/dist/esm/components/avatar/index.js

Braineet design system

var _excluded = ["id", "color", "size", "name", "src", "iconName", "iconColor", "customIcon", "shape", "altImg"];
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import React from 'react';
import chroma from 'chroma-js';
import { useTheme } from 'styled-components';
import { getInitials } from '../../utils';
import Box from '../box';
import Icon from '../icon';
import { StyledAvatar, StyledText, StyledImg, StyledAvatarBadge, StyledCircle, StyledIcon, ColorBadge } from './styles';

/**
 The `Avatar` component.
 */
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var getColorProps = function getColorProps(color, theme, id) {
  if (color === 'automatic') {
    return theme.helpers.getAvatarProps({
      color: color,
      id: id
    });
  }
  var backgroundColor = theme.colors[color] || color;
  try {
    var constrast = chroma(backgroundColor).get('lab.l') < 70 ? 'dark' : 'light';
    return {
      color: constrast === 'dark' ? theme.colors.white : theme.colors.black,
      backgroundColor: backgroundColor
    };
  } catch (error) {
    return theme.helpers.getFills({
      color: color
    });
  }
};
var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var _name$replace;
  var id = _ref.id,
    color = _ref.color,
    size = _ref.size,
    name = _ref.name,
    src = _ref.src,
    iconName = _ref.iconName,
    iconColor = _ref.iconColor,
    customIcon = _ref.customIcon,
    shape = _ref.shape,
    altImg = _ref.altImg,
    restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var theme = useTheme();
  // Define the avatar size
  var globalSize = ['xxs', 'xs', 'sm', 'md', 'lg'].includes(size) ? size : 'md';
  var _getColorProps = getColorProps(color, theme, (id == null ? void 0 : id.length) || (name == null ? void 0 : (_name$replace = name.replace(' ', '')) == null ? void 0 : _name$replace.length)),
    colorProps = _getColorProps.color,
    backgroundColor = _getColorProps.backgroundColor;

  // Get text color and background color of avatar badge
  var _theme$helpers$getFil = theme.helpers.getFills({
      appearance: 'subtle',
      color: iconColor
    }),
    iconColorAvatarBadge = _theme$helpers$getFil.color,
    backgroundColorAvatarBadge = _theme$helpers$getFil.backgroundColor;
  var initials = getInitials(name, '', {
    oneLetter: size === 'xxs'
  });
  return /*#__PURE__*/_jsxs(StyledAvatar, _extends({
    sizeItem: globalSize,
    variant: shape,
    ref: ref
  }, restProps, {
    children: [!src ? /*#__PURE__*/_jsx(StyledText, {
      size: size,
      sizeItem: globalSize,
      backgroundColor: backgroundColor,
      fontFamily: "display",
      color: colorProps,
      children: customIcon && /*#__PURE__*/_jsx(Icon, {
        name: customIcon
      }) || initials || /*#__PURE__*/_jsx(Icon, {
        name: "user"
      })
    }) : /*#__PURE__*/_jsx(Box, {
      width: "100%",
      height: "100%",
      overflow: "hidden",
      borderRadius: "inherit",
      children: /*#__PURE__*/_jsx(StyledImg, {
        src: src,
        alt: altImg
      })
    }), iconName && typeof iconName === 'string' && /*#__PURE__*/_jsx(StyledAvatarBadge, {
      children: /*#__PURE__*/_jsx(StyledCircle, {
        backgroundColor: backgroundColorAvatarBadge,
        children: /*#__PURE__*/_jsx(StyledIcon, {
          color: iconColorAvatarBadge,
          name: iconName,
          size: 16
        })
      })
    }), iconColor && !iconName && iconColor !== 'black' && /*#__PURE__*/_jsx(StyledAvatarBadge, {
      children: /*#__PURE__*/_jsx(StyledCircle, {
        backgroundColor: "white",
        children: /*#__PURE__*/_jsx(ColorBadge, {
          backgroundColor: iconColorAvatarBadge
        })
      })
    })]
  }));
});
Avatar.defaultProps = {
  color: 'automatic',
  size: 'md',
  name: '',
  id: '',
  src: null,
  iconName: null,
  iconColor: 'black',
  shape: 'circle',
  altImg: ''
};
export default Avatar;