@helpscout/hsds-react/components/AvatarStack/AvatarStack.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.AvatarStack = void 0;

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

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

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

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

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

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

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

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

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

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

var _AvatarStack = require("./AvatarStack.css");

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

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

/* istanbul ignore file */
// Deprecated component, use AvatarList instead
var AvatarStack = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(AvatarStack, _React$PureComponent);

  function AvatarStack() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;

    _this.getAvatars = function () {
      return _react.default.Children.toArray(_this.props.children);
    };

    _this.getCurrentAvatarCount = function () {
      var max = _this.props.max;

      var count = _this.getTotalAvatarCount();

      return count < max ? count : max;
    };

    _this.getAvatarSize = function () {
      var currentCount = _this.getCurrentAvatarCount();

      var size = 'md';

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

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

      return size;
    };

    _this.getAvatarPropsFromIndex = function (index) {
      var _this$props = _this.props,
          avatarsClassName = _this$props.avatarsClassName,
          borderColor = _this$props.borderColor,
          outerBorderColor = _this$props.outerBorderColor,
          shape = _this$props.shape,
          showStatusBorderColor = _this$props.showStatusBorderColor;
      return {
        borderColor: borderColor,
        className: (0, _classnames.default)(avatarsClassName, 'c-AvatarStack__avatar'),
        outerBorderColor: outerBorderColor,
        shape: shape,
        showStatusBorderColor: showStatusBorderColor,
        size: _this.getAvatarSize(),
        withShadow: true
      };
    };

    _this.getAvatarStyleFromIndex = function (index) {
      var max = _this.props.max;

      var currentCount = _this.getCurrentAvatarCount();

      var zIndex = max - index;

      if (currentCount > 2 && (0, _number.isOdd)("" + currentCount)) {
        if ((0, _number.isOdd)(index)) {
          zIndex = zIndex + 1;
        }

        if (index === (0, _number.getMiddleIndex)("" + currentCount)) {
          zIndex = zIndex + 2;
        }
      }

      return {
        zIndex: zIndex
      };
    };

    return _this;
  }

  var _proto = AvatarStack.prototype;

  _proto.getTotalAvatarCount = function getTotalAvatarCount() {
    return this.getAvatars().length;
  };

  _proto.getAvatarList = function getAvatarList() {
    var max = this.props.max;
    var avatars = this.getAvatars();
    var totalAvatarCount = avatars.length;
    var sliceAt = max;
    var avatarList = max && totalAvatarCount > max ? avatars.slice(0, sliceAt) : avatars;
    return avatarList;
  };

  _proto.renderAvatars = function renderAvatars() {
    var _this2 = this;

    var _this$props2 = this.props,
        animationDuration = _this$props2.animationDuration,
        animationEasing = _this$props2.animationEasing,
        animationSequence = _this$props2.animationSequence;
    var avatarList = this.getAvatarList();
    var componentClassName = (0, _classnames.default)('is-withLayerStack', 'c-AvatarStack__item');
    var avatarMarkup = avatarList.map(function (avatar, index) {
      var key = (0, _component.getComponentKey)(avatar, index);

      var avatarProps = _this2.getAvatarPropsFromIndex(index);

      var avatarStyles = _this2.getAvatarStyleFromIndex(index);

      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarStack.ItemUI, {
        className: componentClassName,
        style: avatarStyles,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animate.default, {
          duration: animationDuration,
          easing: animationEasing,
          sequence: animationSequence,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarList.AvatarListContext.Provider, {
            value: avatarProps,
            children: avatar
          })
        })
      }, key);
    });
    return avatarMarkup;
  };

  _proto.render = function render() {
    var _this$props3 = this.props,
        animationEasing = _this$props3.animationEasing,
        animationSequence = _this$props3.animationSequence,
        avatarsClassName = _this$props3.avatarsClassName,
        borderColor = _this$props3.borderColor,
        children = _this$props3.children,
        className = _this$props3.className,
        max = _this$props3.max,
        outerBorderColor = _this$props3.outerBorderColor,
        shape = _this$props3.shape,
        showStatusBorderColor = _this$props3.showStatusBorderColor,
        size = _this$props3.size,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["animationEasing", "animationSequence", "avatarsClassName", "borderColor", "children", "className", "max", "outerBorderColor", "shape", "showStatusBorderColor", "size"]);
    var componentClassName = (0, _classnames.default)('c-AvatarStack', 'is-withLayerStack', className);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarStack.AvatarStackLayeringUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: componentClassName,
      children: this.renderAvatars()
    }));
  };

  return AvatarStack;
}(_react.default.PureComponent);

exports.AvatarStack = AvatarStack;
AvatarStack.defaultProps = {
  animationDuration: 300,
  animationEasing: 'ease',
  animationSequence: 'fade',
  borderColor: 'white',
  'data-cy': 'AvatarStack',
  max: 5,
  shape: 'circle',
  showStatusBorderColor: true
};
AvatarStack.propTypes = {
  /** Duration of animation applied to the child Avatars. */
  animationDuration: _propTypes.default.number,

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

  /** Style of animation applied to the child Avatars. */
  animationSequence: _propTypes.default.string,

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

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

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

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

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

  /** Shape of the avatars. */
  shape: _propTypes.default.oneOf(['square', 'rounded', 'circle']),

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

  /** Size of the avatars. */
  size: _propTypes.default.oneOf(['lg', 'md', 'smmd', 'sm', 'xs', 'xxs', '']),

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