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

Braineet design system

"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _chromaJs = _interopRequireDefault(require("chroma-js"));
var _styledComponents = require("styled-components");
var _utils = require("../../utils");
var _box = _interopRequireDefault(require("../box"));
var _icon = _interopRequireDefault(require("../icon"));
var _styles = require("./styles");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["id", "color", "size", "name", "src", "iconName", "iconColor", "customIcon", "shape", "altImg"];
/**
 The `Avatar` component.
 */
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
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 = (0, _chromaJs.default)(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.default.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 = (0, _styledComponents.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 || (_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 = (0, _utils.getInitials)(name, '', {
    oneLetter: size === 'xxs'
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StyledAvatar, _extends({
    sizeItem: globalSize,
    variant: shape,
    ref: ref
  }, restProps, {
    children: [!src ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledText, {
      size: size,
      sizeItem: globalSize,
      backgroundColor: backgroundColor,
      fontFamily: "display",
      color: colorProps,
      children: customIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
        name: customIcon
      }) || initials || /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
        name: "user"
      })
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_box.default, {
      width: "100%",
      height: "100%",
      overflow: "hidden",
      borderRadius: "inherit",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledImg, {
        src: src,
        alt: altImg
      })
    }), iconName && typeof iconName === 'string' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledAvatarBadge, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledCircle, {
        backgroundColor: backgroundColorAvatarBadge,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledIcon, {
          color: iconColorAvatarBadge,
          name: iconName,
          size: 16
        })
      })
    }), iconColor && !iconName && iconColor !== 'black' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledAvatarBadge, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledCircle, {
        backgroundColor: "white",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ColorBadge, {
          backgroundColor: iconColorAvatarBadge
        })
      })
    })]
  }));
});
Avatar.defaultProps = {
  color: 'automatic',
  size: 'md',
  name: '',
  id: '',
  src: null,
  iconName: null,
  iconColor: 'black',
  shape: 'circle',
  altImg: ''
};
var _default = exports.default = Avatar;