@bigbinary/neetoui/dist/cjs/Avatar.js

neetoUI drives the experience at all neeto products

'use strict';

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var React = require('react');
var Avvvatars = require('avvvatars-react');
var classnames = require('classnames');
var ramda = require('ramda');
var Tooltip = require('./Tooltip.js');
var jsxRuntime = require('react/jsx-runtime');
require('@tippyjs/react');
require('tippy.js');
require('react-router-dom');
require('@bigbinary/neeto-hotkeys');
require('./overlayManager.js');
require('@babel/runtime/helpers/classCallCheck');
require('@babel/runtime/helpers/createClass');
require('@bigbinary/neeto-cist');
require('qs');
require('./index-D0rucYPS.js');
require('@babel/runtime/helpers/toConsumableArray');
require('dayjs');
require('dayjs/plugin/localeData');
require('dayjs/plugin/utc');
require('dayjs/plugin/weekday');
require('dayjs/plugin/weekOfYear');
require('i18next');
require('./usePrefersReducedMotion-DIgi-Aj7.js');

var _excluded = ["size", "user", "status", "onClick", "className", "showTooltip", "tooltipProps"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var SIZE = {
  small: 24,
  medium: 32,
  large: 40,
  extraLarge: 64
};
var getInitials = function getInitials(fullName) {
  if (typeof fullName !== "string" || ramda.isEmpty(fullName)) return " ";
  var allNames = fullName.trim().split(" ");
  if (allNames.length === 1) return fullName.substring(0, 2).toUpperCase();
  return "".concat(allNames[0][0]).concat(allNames[allNames.length - 1][0]).toUpperCase();
};
var Avatar = function Avatar(_ref) {
  var _ref$size = _ref.size,
    size = _ref$size === void 0 ? "medium" : _ref$size,
    _ref$user = _ref.user,
    user = _ref$user === void 0 ? {} : _ref$user,
    _ref$status = _ref.status,
    status = _ref$status === void 0 ? null : _ref$status,
    _ref$onClick = _ref.onClick,
    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    _ref$showTooltip = _ref.showTooltip,
    showTooltip = _ref$showTooltip === void 0 ? false : _ref$showTooltip,
    _ref$tooltipProps = _ref.tooltipProps,
    tooltipProps = _ref$tooltipProps === void 0 ? {} : _ref$tooltipProps,
    otherProps = _objectWithoutProperties(_ref, _excluded);
  var _useState = React.useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isLoadingFailed = _useState2[0],
    setIsLoadingFailed = _useState2[1];
  var _user$name = user.name,
    name = _user$name === void 0 ? "" : _user$name,
    imageUrl = user.imageUrl;
  var isMedium = size === "medium";
  var isLarge = size === "large";
  var isExtraLarge = size === "extraLarge";
  var containerClasses = classnames("neeto-ui-avatar__container neeto-ui-select-none", {
    "neeto-ui-avatar__container--medium": isMedium,
    "neeto-ui-avatar__container--large": isLarge,
    "neeto-ui-avatar__container--xlarge": isExtraLarge
  }, className);
  var imageClasses = classnames("neeto-ui-avatar", {
    "neeto-ui-avatar--medium": isMedium,
    "neeto-ui-avatar--large": isLarge,
    "neeto-ui-avatar--xlarge": isExtraLarge,
    hidden: isLoadingFailed
  });
  var statusClasses = classnames("neeto-ui-avatar__status", status, {
    "neeto-ui-avatar__status-medium": isMedium,
    "neeto-ui-avatar__status-large": isLarge,
    "neeto-ui-avatar__status-xlarge": isExtraLarge
  });
  var shouldDisplayFallbackAvatar = !(imageUrl && !isLoadingFailed);
  return /*#__PURE__*/jsxRuntime.jsx(Tooltip, _objectSpread(_objectSpread({
    content: name,
    disabled: !showTooltip,
    position: "bottom"
  }, tooltipProps), {}, {
    children: /*#__PURE__*/jsxRuntime.jsxs("span", _objectSpread(_objectSpread({
      onClick: onClick,
      className: containerClasses,
      "data-testid": "nui-avatar"
    }, otherProps), {}, {
      children: [!ramda.isNil(status) && /*#__PURE__*/jsxRuntime.jsx("span", {
        className: statusClasses,
        "data-testid": "indicator"
      }), shouldDisplayFallbackAvatar ? /*#__PURE__*/jsxRuntime.jsx(Avvvatars, {
        displayValue: getInitials(name),
        size: SIZE[size],
        value: name
      }) : /*#__PURE__*/jsxRuntime.jsx("img", {
        alt: "avatar-".concat(name),
        className: imageClasses,
        src: imageUrl,
        onError: function onError() {
          return setIsLoadingFailed(true);
        }
      })]
    }))
  }));
};

module.exports = Avatar;
//# sourceMappingURL=Avatar.js.map