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

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
var cx = require('classnames');
var PropTypes = require('prop-types');
var React = require('react');
var MskIcon = require('../../Icon/MskIcon.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

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] = React.useState(true);
  const imageOnErrorHandler = React.useCallback(() => {
    setValidImage(false);
  }, []);
  const avatarContent = React.useMemo(() => {
    if (!!url && isValidImage) {
      return (
        /*#__PURE__*/
        // set the background image to the url
        React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
          className: cx__default["default"]('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["default"].createElement("img", {
          src: url,
          alt: label ?? 'avatar image',
          onError: imageOnErrorHandler,
          className: cx__default["default"]('msk-header--avatar-img', 'hidden')
        }))
      );
    }
    if (label) {
      return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
        className: cx__default["default"]('msk-header--avatar-content')
      }, rest), _div || (_div = /*#__PURE__*/React__default["default"].createElement("div", {
        className: "msk-header--avatar-title"
      }, label)));
    }
    return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
      className: cx__default["default"](`msk-header--avatar-content`)
    }, rest), /*#__PURE__*/React__default["default"].createElement(MskIcon.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["default"].createElement("div", {
    className: cx__default["default"](className, `msk-header--avatar`, {
      [`msk-header--avatar--${size}`]: size,
      [`msk-header--avatar--${color}`]: color,
      'msk-header--avatar--label': children
    })
  }, avatarContent, children && /*#__PURE__*/React__default["default"].createElement("span", {
    className: "msk-header--avatar-content-inner"
  }, children));
};
HeaderAvatar.displayName = 'HeaderAvatar';
HeaderAvatar.propTypes = {
  children: PropTypes__default["default"].node,
  className: PropTypes__default["default"].string,
  color: PropTypes__default["default"].oneOf(colors),
  icon: PropTypes__default["default"].string,
  label: PropTypes__default["default"].string,
  size: PropTypes__default["default"].oneOf(['sm', 'lg']),
  url: PropTypes__default["default"].string
};

exports.HeaderAvatar = HeaderAvatar;
exports.colors = colors;