@mskcc/carbon-react/es/components/MskHeader/next/HeaderAvatar.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import cx from 'classnames';
import PropTypes from 'prop-types';
import React__default, { useState, useCallback, useMemo } from 'react';
import { Icon } from '../../Icon/MskIcon.js';

const colors = ['blue', 'cyan', 'green', 'magenta', 'orange', 'purple', 'red', 'teal', 'yellow'];
/**
 * @component Avatar component is used to display a user's avatar
 */
const HeaderAvatar = _ref => {
  var _div;
  let {
    children,
    className,
    label,
    color = 'blue',
    icon,
    url,
    size = 'md',
    ...rest
  } = _ref;
  const [isValidImage, setValidImage] = useState(true);
  const imageOnErrorHandler = useCallback(() => {
    setValidImage(false);
  }, []);
  const avatarContent = useMemo(() => {
    if (!!url && isValidImage) {
      return (
        /*#__PURE__*/
        // set the background image to the url
        React__default.createElement("div", _extends({
          className: cx('msk-header--avatar-content', 'msk-header--avatar-img-container')
        }, rest, {
          // eslint-disable-next-line react/forbid-dom-props
          style: {
            backgroundImage: `url(${url})`
          }
        }), /*#__PURE__*/React__default.createElement("img", {
          src: url,
          alt: label ?? 'avatar image',
          onError: imageOnErrorHandler,
          className: cx('msk-header--avatar-img', 'hidden')
        }))
      );
    }
    if (label) {
      return /*#__PURE__*/React__default.createElement("div", _extends({
        className: cx('msk-header--avatar-content')
      }, rest), _div || (_div = /*#__PURE__*/React__default.createElement("div", {
        className: "msk-header--avatar-title"
      }, label)));
    }
    return /*#__PURE__*/React__default.createElement("div", _extends({
      className: cx(`msk-header--avatar-content`)
    }, rest), /*#__PURE__*/React__default.createElement(Icon, {
      icon: icon || 'account_circle',
      className: "msk-header--avatar-icon"
    }));
  }, [rest, isValidImage, url, label, icon, imageOnErrorHandler]);
  color = colors.includes(color) ? color : 'blue';
  return /*#__PURE__*/React__default.createElement("div", {
    className: cx(className, `msk-header--avatar`, {
      [`msk-header--avatar--${size}`]: size,
      [`msk-header--avatar--${color}`]: color,
      'msk-header--avatar--label': children
    })
  }, avatarContent, children && /*#__PURE__*/React__default.createElement("span", {
    className: "msk-header--avatar-content-inner"
  }, children));
};
HeaderAvatar.displayName = 'HeaderAvatar';
HeaderAvatar.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  color: PropTypes.oneOf(colors),
  icon: PropTypes.string,
  label: PropTypes.string,
  size: PropTypes.oneOf(['sm', 'lg']),
  url: PropTypes.string
};

export { HeaderAvatar, colors };