@shopify/polaris/dist/esm/components/Avatar/Avatar.js

Shopify’s product component library

import React$1, { useState, useEffect, useCallback } from 'react';
import { useFeatures } from '../../utilities/features/hooks.js';
import { useI18n } from '../../utilities/i18n/hooks.js';
import { classNames, variationName } from '../../utilities/css.js';
import { useIsAfterInitialMount as useIsAfterInitialMount$1 } from '../../utilities/use-is-after-initial-mount.js';
import { Image as Image$1 } from '../Image/Image.js';
import styles from './Avatar.scss.js';

var Status;

(function (Status) {
  Status["Pending"] = "PENDING";
  Status["Loaded"] = "LOADED";
  Status["Errored"] = "ERRORED";
})(Status || (Status = {}));

var STYLE_CLASSES = ['one', 'two', 'three', 'four', 'five'];

var _ref = /*#__PURE__*/React$1.createElement("path", {
  fill: "currentColor",
  d: "M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
});

function Avatar({
  name,
  source,
  initials,
  customer,
  size = 'medium',
  accessibilityLabel
}) {
  var i18n = useI18n();
  var {
    newDesignLanguage
  } = useFeatures();
  var isAfterInitialMount = useIsAfterInitialMount$1();

  function styleClass(name) {
    var finalStyleClasses = newDesignLanguage ? STYLE_CLASSES : [...STYLE_CLASSES, 'six'];
    return name ? finalStyleClasses[name.charCodeAt(0) % finalStyleClasses.length] : finalStyleClasses[0];
  }

  var [status, setStatus] = useState(Status.Pending); // If the source changes, set the status back to pending

  useEffect(() => {
    setStatus(Status.Pending);
  }, [source]);
  var handleError = useCallback(() => {
    setStatus(Status.Errored);
  }, []);
  var handleLoad = useCallback(() => {
    setStatus(Status.Loaded);
  }, []);
  var hasImage = source && status !== Status.Errored;
  var nameString = name || initials;
  var label;

  if (accessibilityLabel) {
    label = accessibilityLabel;
  } else if (name) {
    label = name;
  } else if (initials) {
    var splitInitials = initials.split('').join(' ');
    label = i18n.translate('Polaris.Avatar.labelWithInitials', {
      initials: splitInitials
    });
  } else {
    label = i18n.translate('Polaris.Avatar.label');
  }

  var className = classNames(styles.Avatar, size && styles[variationName('size', size)], !customer && styles[variationName('style', styleClass(nameString))], (hasImage || initials && initials.length === 0) && status !== Status.Loaded && styles.hidden, hasImage && styles.hasImage);
  var imageMarkUp = source && isAfterInitialMount && status !== Status.Errored ? /*#__PURE__*/React$1.createElement(Image$1, {
    className: styles.Image,
    source: source,
    alt: "",
    role: "presentation",
    onLoad: handleLoad,
    onError: handleError
  }) : null; // Use `dominant-baseline: central` instead of `dy` when Edge supports it.

  var verticalOffset = '0.35em';
  var avatarBody = customer || !initials ? _ref : /*#__PURE__*/React$1.createElement("text", {
    x: "50%",
    y: "50%",
    dy: verticalOffset,
    fill: "currentColor",
    fontSize: "20",
    textAnchor: "middle"
  }, initials);
  var svgMarkup = !hasImage ? /*#__PURE__*/React$1.createElement("span", {
    className: styles.Initials
  }, /*#__PURE__*/React$1.createElement("svg", {
    className: styles.Svg,
    viewBox: "0 0 40 40"
  }, avatarBody)) : null;
  return /*#__PURE__*/React$1.createElement("span", {
    "aria-label": label,
    role: "img",
    className: className
  }, svgMarkup, imageMarkUp);
}

export { Avatar, STYLE_CLASSES };