@helpscout/hsds-react/components/AvatarRow/AvatarRow.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _lodash = _interopRequireDefault(require("lodash.isnil"));

var _lodash2 = _interopRequireDefault(require("lodash.throttle"));

var _useMeasureNode = require("../../hooks/useMeasureNode");

var _AvatarRow = require("./AvatarRow.utils");

var _Avatar = require("../Avatar/Avatar.css");

var _AvatarRow2 = require("./AvatarRow.css");

var _Avatar2 = _interopRequireDefault(require("../Avatar"));

var _Tooltip = _interopRequireDefault(require("../Tooltip"));

var _jsxRuntime = require("react/jsx-runtime");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var avatarConfigSizes = _Avatar.config.size;

function AvatarRow(_ref) {
  var _ref$adaptable = _ref.adaptable,
      adaptable = _ref$adaptable === void 0 ? true : _ref$adaptable,
      _ref$avatars = _ref.avatars,
      avatars = _ref$avatars === void 0 ? [] : _ref$avatars,
      className = _ref.className,
      _ref$dataCy = _ref['data-cy'],
      dataCy = _ref$dataCy === void 0 ? 'AvatarRow' : _ref$dataCy,
      _ref$extraTooltipProp = _ref.extraTooltipProps,
      extraTooltipProps = _ref$extraTooltipProp === void 0 ? {} : _ref$extraTooltipProp,
      _ref$gap = _ref.gap,
      gap = _ref$gap === void 0 ? 2 : _ref$gap,
      _ref$minAvatarsShown = _ref.minAvatarsShown,
      minAvatarsShown = _ref$minAvatarsShown === void 0 ? 1 : _ref$minAvatarsShown,
      _ref$throttleOnResize = _ref.throttleOnResize,
      throttleOnResize = _ref$throttleOnResize === void 0 ? true : _ref$throttleOnResize,
      _ref$throttleWait = _ref.throttleWait,
      throttleWait = _ref$throttleWait === void 0 ? 200 : _ref$throttleWait,
      avatarProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["adaptable", "avatars", "className", "data-cy", "extraTooltipProps", "gap", "minAvatarsShown", "throttleOnResize", "throttleWait"]);
  var _avatarConfigSizes = avatarConfigSizes[avatarProps.size || 'md'],
      avatarSize = _avatarConfigSizes.size,
      avatarFontSize = _avatarConfigSizes.fontSize;
  var avatarRowRef = (0, _react.useRef)(null);
  var observerRef = (0, _react.useRef)(null);
  var numberOfAvatars = avatars.length;

  var _useState = (0, _react.useState)(numberOfAvatars),
      numberOfItemsOnDisplay = _useState[0],
      setNumberOfItemsOnDisplay = _useState[1];

  (0, _react.useEffect)(function () {
    if (!adaptable || (0, _lodash.default)(avatarRowRef.current)) return; // Avoid adding multiple observers

    if (!(0, _lodash.default)(observerRef.current) && observerRef.current instanceof ResizeObserver) {
      observerRef.current.disconnect();
    }

    var avatarRowEl = avatarRowRef.current;
    var resizeObserver = (0, _useMeasureNode.setupObserver)({
      observerEntryType: 'contentBoxSize',
      cb: throttleOnResize ? (0, _lodash2.default)(onResize, throttleWait) : onResize,
      dimensions: {
        width: true
      }
    });
    observerRef.current = resizeObserver;
    resizeObserver.observe(avatarRowEl);
    return function () {
      if (!adaptable || (0, _lodash.default)(avatarRowEl)) return;
      resizeObserver.disconnect();
    }; // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [numberOfAvatars]);

  function onResize(_ref2) {
    var containerWidth = _ref2.width;
    setNumberOfItemsOnDisplay((0, _AvatarRow.getNumberOfItemsToDisplay)({
      avatarSize: avatarSize,
      containerWidth: containerWidth,
      gap: gap,
      numberOfAvatars: numberOfAvatars
    }));
  }

  var _splitAvatarsArray = (0, _AvatarRow.splitAvatarsArray)(avatars, numberOfItemsOnDisplay),
      shownAvatars = _splitAvatarsArray.shownAvatars,
      hiddenAvatars = _splitAvatarsArray.hiddenAvatars;

  var minWidth = minAvatarsShown * avatarSize + gap * (minAvatarsShown - 1);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_AvatarRow2.AvatarRowUI, {
    className: (0, _classnames.default)('AvatarRow', className),
    "data-cy": dataCy,
    ref: avatarRowRef,
    $gap: gap,
    $minWidth: minWidth,
    children: [shownAvatars.map(function (props) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar2.default, (0, _extends2.default)({}, props, avatarProps), props.id || props.name);
    }), hiddenAvatars.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, (0, _extends2.default)({
      title: hiddenAvatars.map(function (props) {
        return props.name;
      }).join('\n'),
      withTriggerWrapper: false,
      placement: "bottom"
    }, extraTooltipProps, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarRow2.CounterAvatarUI, {
        className: "AvatarOverflowed",
        $fontSize: avatarFontSize,
        $size: avatarSize,
        children: hiddenAvatars.length
      })
    }))]
  });
}

AvatarRow.propTypes = {
  /** Whether it should adapt the number of avatars shown to the container width */
  adaptable: _propTypes.default.bool,

  /** List of Objects that include Avatars individual props to be rendered as `<Avatar />` */
  avatars: _propTypes.default.arrayOf(_propTypes.default.object),

  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,

  /** Show a minimum amount of avatars before folding */
  minAvatarsShown: _propTypes.default.number,

  /** If you want to throttle the onResize function */
  throttleOnResize: _propTypes.default.bool,

  /** Customize the throttle wait in ms */
  throttleWait: _propTypes.default.number,

  /** Gap in pixels between Avatars */
  gap: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),

  /** Customize the Tooltip on the "overflow" avatar by passing valid options */
  extraTooltipProps: _propTypes.default.object
};
var _default = AvatarRow;
exports.default = _default;