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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.default = exports.AvatarList = exports.getAvatarSize = exports.AvatarListContext = void 0;

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

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

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

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

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _Animate = _interopRequireDefault(require("../Animate"));

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

var _AvatarList = require("./AvatarList.css");

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

var _component = require("../../utilities/component");

var _number = require("../../utilities/number");

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

var AvatarListContext = /*#__PURE__*/_react.default.createContext({});

exports.AvatarListContext = AvatarListContext;

var wrapAvatar = function wrapAvatar(props, avatar, index) {
  var animationDuration = props.animationDuration,
      animationEasing = props.animationEasing,
      animationSequence = props.animationSequence,
      max = props.max,
      stack = props.stack,
      count = props.count;
  var zIndex = max - index;

  if (stack === 'horizontal') {
    if (count > 2 && (0, _number.isOdd)(count)) {
      if ((0, _number.isOdd)(index)) {
        zIndex = zIndex + 1;
      }

      if (index === (0, _number.getMiddleIndex)(count)) {
        zIndex = zIndex + 2;
      }
    }
  } else if (stack === 'vertical') {
    zIndex = index + 1;
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarList.ItemUI, {
    zIndex: zIndex,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animate.default, {
      className: "c-AvatarList__item",
      duration: animationDuration,
      easing: animationEasing,
      sequence: animationSequence,
      children: avatar
    })
  }, (0, _component.getComponentKey)(avatar, index));
};

var getCurrentCount = function getCurrentCount(_ref) {
  var count = _ref.count,
      max = _ref.max;
  return count < max ? count : max;
};

var getAvatarSize = function getAvatarSize(_ref2) {
  var sizeProp = _ref2.size,
      stack = _ref2.stack,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["size", "stack"]);
  var currentCount = getCurrentCount(rest);
  if (stack !== 'horizontal') return sizeProp;
  var size = 'md';

  if (currentCount === 2) {
    size = 'lg';
  }

  if (currentCount === 1) {
    size = 'xl';
  }

  return size;
};

exports.getAvatarSize = getAvatarSize;

var AvatarList = function AvatarList(props) {
  var children = props.children,
      max = props.max,
      className = props.className,
      center = props.center,
      stack = props.stack,
      grid = props.grid,
      extraTooltipProps = props.extraTooltipProps,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "max", "className", "center", "stack", "grid", "extraTooltipProps"]);

  var avatars = _react.default.Children.toArray(children);

  var avatarList = max && avatars.length > max ? avatars.slice(0, max - 1) : avatars;
  var extraAvatarCount = avatars.length - avatarList.length;
  var shouldShowExtra = extraAvatarCount > 0;
  var propsWithCount = (0, _extends2.default)({}, props, {
    count: avatars.length
  });
  var size = getAvatarSize(propsWithCount);
  var contextValue = {
    size: size
  };
  var avatarComponents = avatarList.map(function (avatar, index) {
    return wrapAvatar(propsWithCount, avatar, index);
  });

  if (shouldShowExtra) {
    var extraLabel = "+" + extraAvatarCount;
    avatarComponents.push(wrapAvatar(propsWithCount, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
      count: extraLabel,
      light: true,
      name: extraLabel,
      tooltipProps: extraTooltipProps
    }), avatarList.length));
  }

  var componentClassName = (0, _classnames.default)('c-AvatarList', stack && 'is-withLayerStack', stack === 'horizontal' && 'horizontally-stacked', stack === 'vertical' && 'vertically-stacked', grid && 'is-grid', className);
  var componentWrapperClassName = (0, _classnames.default)('c-AvatarListWrapper', center && 'is-center');
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarList.AvatarListWrapperUI, {
    className: componentWrapperClassName,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarListContext.Provider, {
      value: contextValue,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarList.AvatarListUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
        className: componentClassName,
        children: avatarComponents
      }))
    })
  });
};

exports.AvatarList = AvatarList;
AvatarList.defaultProps = {
  animationEasing: 'ease',
  animationSequence: 'fade',
  'data-cy': 'AvatarList',
  max: 4,
  grid: false,
  center: false,
  showStatusBorderColor: false,
  size: 'sm'
};
AvatarList.propTypes = {
  /** Duration of animation */
  animationDuration: _propTypes.PropTypes.number,

  /** Easing of animation applied to the child `Avatars`. */
  animationEasing: _propTypes.PropTypes.string,

  /** Style of animation applied to the child `Avatars`. */
  animationStagger: _propTypes.PropTypes.number,

  /** Amount (in `ms`) to stagger the animation of the `Avatars`. */
  animationSequence: _propTypes.PropTypes.string,

  /** Custom className to pass to `Avatars`. */
  avatarsClassName: _propTypes.PropTypes.string,

  /** Color for the Avatar border. */
  borderColor: _propTypes.PropTypes.string,

  /** Center Avatars */
  center: _propTypes.PropTypes.bool,

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

  /** To add a Tooltip to the "extra" avatar, accepts all Tooltip props */
  extraTooltipProps: _propTypes.PropTypes.object,

  /** Display as grid (previously AvatarGrid) */
  grid: _propTypes.PropTypes.bool,

  /** Number of avatars to display before truncating. */
  max: _propTypes.PropTypes.number,

  /** Color for the Avatar's outer border. */
  outerBorderColor: _propTypes.PropTypes.string,

  /** Shape of the avatars. */
  shape: _propTypes.PropTypes.string,

  /** Renders the `StatusDot` border. */
  showStatusBorderColor: _propTypes.PropTypes.bool,

  /** Size of the avatars. */
  size: _propTypes.PropTypes.string,

  /** Display as stack (previously AvatarStack) */
  stack: _propTypes.PropTypes.oneOf(['horizontal', 'vertical']),

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.PropTypes.string
};
var _default = AvatarList;
exports.default = _default;