@carbon/ibm-products/lib/components/UserProfileImage/UserProfileImage.js

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
require('../../global/js/utils/props-helper.js');
var icons = require('@carbon/react/icons');
var react = require('@carbon/react');
var index = require('../../_virtual/index.js');
var React = require('react');
var cx = require('classnames');
var devtools = require('../../global/js/utils/devtools.js');
var settings = require('../../settings.js');
var TooltipTrigger = require('../TooltipTrigger/TooltipTrigger.js');

// The block part of our conventional BEM class names (blockClass__E--M).
const blockClass = `${settings.pkg.prefix}--user-profile-image`;
const componentName = 'UserProfileImage';

// NOTE: the component SCSS is not imported here: it is rolled up separately.

/**
 * The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
 */
exports.UserProfileImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  var _FillItem;
  let {
    backgroundColor,
    className,
    kind,
    icon,
    initials,
    image,
    imageDescription,
    size,
    theme,
    tooltipText,
    tooltipAlignment = 'bottom',
    // Collect any other property values passed in.
    ...rest
  } = _ref;
  const carbonPrefix = react.usePrefix();
  const icons$1 = {
    user: {
      md: props => /*#__PURE__*/React.createElement(icons.User, _rollupPluginBabelHelpers.extends({
        size: 20
      }, props)),
      lg: props => /*#__PURE__*/React.createElement(icons.User, _rollupPluginBabelHelpers.extends({
        size: 24
      }, props)),
      xl: props => /*#__PURE__*/React.createElement(icons.User, _rollupPluginBabelHelpers.extends({
        size: 32
      }, props))
    },
    group: {
      md: props => /*#__PURE__*/React.createElement(icons.Group, _rollupPluginBabelHelpers.extends({
        size: 20
      }, props)),
      lg: props => /*#__PURE__*/React.createElement(icons.Group, _rollupPluginBabelHelpers.extends({
        size: 24
      }, props)),
      xl: props => /*#__PURE__*/React.createElement(icons.Group, _rollupPluginBabelHelpers.extends({
        size: 32
      }, props))
    }
  };
  const formatInitials = () => {
    if (initials && initials.length === 2) {
      return initials;
    }
    // RegEx takes in the display name and returns the first and last initials. Thomas Watson and Thomas J. Watson
    // both return JW.
    return (initials || '').match(/(^\S\S?|\b\S)?/g)?.join('').match(/(^\S|\S$)?/g)?.join('').toUpperCase() || '';
  };
  const getFillItem = () => {
    if (image) {
      return () => /*#__PURE__*/React.createElement("img", {
        alt: imageDescription,
        src: image,
        className: `${blockClass}__photo ${blockClass}__photo--${size}`
      });
    }
    if (initials) {
      return formatInitials;
    }
    if (kind && size) {
      return icons$1[kind][size];
    }
    return icon;
  };

  // if user doesn't provide a color just generate a random one
  const getRandomColor = () => {
    const colors = ['light-cyan', 'dark-cyan', 'light-gray', 'dark-gray', 'light-green', 'dark-green', 'light-magenta', 'dark-magenta', 'light-purple', 'dark-purple', 'light-teal', 'dark-teal'];
    return colors[Math.floor(Math.random() * colors.length)];
  };
  const FillItem = getFillItem();
  const renderUserProfileImage = () => /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
    ref: ref,
    className: cx([blockClass, className, `${blockClass}--${size}`, `${blockClass}--${theme}`, `${blockClass}--${backgroundColor || getRandomColor()}`])
  }, devtools.getDevtoolsProps(componentName)), _FillItem || (_FillItem = /*#__PURE__*/React.createElement(FillItem, null)));
  return FillItem && (tooltipText ? /*#__PURE__*/React.createElement(react.Tooltip, {
    align: tooltipAlignment,
    label: tooltipText,
    className: `${blockClass}__tooltip ${carbonPrefix}--icon-tooltip`
  }, /*#__PURE__*/React.createElement(TooltipTrigger.TooltipTrigger, null, renderUserProfileImage())) : renderUserProfileImage());
});

// Return a placeholder if not released and not enabled by feature flag
exports.UserProfileImage = settings.pkg.checkComponentEnabled(exports.UserProfileImage, componentName);
exports.UserProfileImage.displayName = componentName;
exports.UserProfileImage.propTypes = {
  /**
   * The background color passed should match one of the background colors in the library documentation:
   * https://pages.github.ibm.com/carbon/ibm-products/patterns/user-profile-images/
   */
  backgroundColor: index.default.oneOf(['light-cyan', 'dark-cyan', 'light-gray', 'dark-gray', 'light-green', 'dark-green', 'light-magenta', 'dark-magenta', 'light-purple', 'dark-purple', 'light-teal', 'dark-teal']),
  /**
   * Provide an optional class to be applied to the containing node.
   */
  className: index.default.string,
  /**
   * Provide a custom icon to use if you need to use an icon other than the included ones
   */
  icon: index.default.func,
  /**
   * When passing the image prop, supply a full path to the image to be displayed.
   */
  /**@ts-ignore */
  image: index.default.string,
  /**
   * When passing the image prop use the imageDescription prop to describe the image for screen reader.
   */
  /**@ts-ignore */
  imageDescription: index.default.string.isRequired.if(_ref2 => {
    let {
      image
    } = _ref2;
    return !!image;
  }),
  /**
   * When passing the initials prop, either send the initials to be used or the user's display name. The first two capital letters of the display name will be used as the initials.
   */
  initials: index.default.string,
  /**
   * When passing the kind prop, use either "user" or "group". The values match up to the Carbon Library icons.
   */
  kind: index.default.oneOf(['user', 'group']),
  /**
   * Set the size of the avatar circle
   */
  size: index.default.oneOf(['xl', 'lg', 'md']).isRequired,
  /**
   * Set theme in which the component will be rendered
   */
  theme: index.default.oneOf(['light', 'dark']).isRequired,
  /**
   * Specify how the trigger should align with the tooltip
   */
  tooltipAlignment: index.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
  /**
   * Pass in the display name to have it shown on hover
   */
  tooltipText: index.default.string
};