@cbinsights/fds/lib/components/Avatar/index.js

Form: A design system by CB Insights

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.trimName = exports.grabInitials = exports.default = exports.SIZES = exports.RADII = exports.INITIALS_LENGTH = exports.BG_COLORS = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireWildcard(require("react"));

var RadixAvatar = _interopRequireWildcard(require("@radix-ui/react-avatar"));

var _classcat = _interopRequireDefault(require("classcat"));

var _baseElement = _interopRequireDefault(require("../../util/baseElement"));

var _excluded = ["bgColor", "size", "radius", "aria-label", "initialsLength", "imgUrl", "name", "Link", "PlaceholderIcon"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var LIGHT_COLORS = ['white', 'haze', 'lightGray'];
var DARK_COLORS = ['orange', 'charcoal', 'navy', 'aqua', 'gray', 'red', 'purple', 'blue'];
var RADII = ['square', 'circle'];
exports.RADII = RADII;
var BG_COLORS = [].concat(LIGHT_COLORS, DARK_COLORS);
exports.BG_COLORS = BG_COLORS;
var SIZES = ['s', 'm', 'l'];
exports.SIZES = SIZES;
var INITIALS_LENGTH = [1, 2];
exports.INITIALS_LENGTH = INITIALS_LENGTH;

var grabInitials = function grabInitials(str) {
  var initialsCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
  return str.split(' ').slice(0, initialsCount).reduce(function (prev, curr) {
    return prev + curr.charAt(0);
  }, '').toUpperCase();
};

exports.grabInitials = grabInitials;

var trimName = function trimName(str) {
  // We want to reject strings which only contain whitespaces
  var regex = /\S/; // If it doesn't only contain whitespaces, return a trimmed string,
  // otherwise return null

  return str && regex.test(str) ? str.trim() : null;
};

exports.trimName = trimName;
var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
  var _ref$bgColor = _ref.bgColor,
      bgColor = _ref$bgColor === void 0 ? 'purple' : _ref$bgColor,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'm' : _ref$size,
      _ref$radius = _ref.radius,
      radius = _ref$radius === void 0 ? 'circle' : _ref$radius,
      _ref$ariaLabel = _ref['aria-label'],
      ariaLabel = _ref$ariaLabel === void 0 ? 'Avatar' : _ref$ariaLabel,
      _ref$initialsLength = _ref.initialsLength,
      initialsLength = _ref$initialsLength === void 0 ? 2 : _ref$initialsLength,
      imgUrl = _ref.imgUrl,
      _ref$name = _ref.name,
      name = _ref$name === void 0 ? '' : _ref$name,
      Link = _ref.Link,
      PlaceholderIcon = _ref.PlaceholderIcon,
      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var cleanName = trimName(name);
  var Element = (0, _baseElement.default)({
    href: rest.href,
    onClick: rest.onClick,
    as: Link
  });

  var placeholderIconSize = function placeholderIconSize() {
    switch (size) {
      case 's':
        return 16;

      case 'm':
        return 18;

      case 'l':
        return 24;

      default:
        return 16;
    }
  };

  return /*#__PURE__*/_react.default.createElement(Element, {
    href: rest.href
  }, /*#__PURE__*/_react.default.createElement(RadixAvatar.Root, (0, _extends2.default)({}, rest, {
    ref: ref,
    role: Element === 'div' ? 'img' : undefined,
    "aria-label": ariaLabel,
    title: cleanName || 'Placeholder Avatar',
    className: (0, _classcat.default)([{
      'border--focus': Element !== 'div',
      'color--white': DARK_COLORS.includes(bgColor)
    }, 'fdsAvatar', 'alignChild--center--center', !imgUrl && "bgColor--".concat(bgColor), "fdsAvatar--".concat(size), "fdsAvatar--".concat(radius)])
  }), /*#__PURE__*/_react.default.createElement(RadixAvatar.Image, {
    className: "fdsAvatar-img",
    src: imgUrl
  }), !imgUrl && cleanName && grabInitials(cleanName, initialsLength), /*#__PURE__*/_react.default.createElement(RadixAvatar.Fallback, {
    delayMs: 400
  }, !(cleanName || imgUrl) && PlaceholderIcon && /*#__PURE__*/_react.default.createElement(PlaceholderIcon, {
    customSize: placeholderIconSize()
  }))));
});
Avatar.displayName = 'Avatar';
var _default = Avatar;
exports.default = _default;