wix-style-react/dist/src/AvatarGroup/AvatarGroup.js

wix-style-react

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

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

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

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

var _AvatarGroupSt = require("./AvatarGroup.st.css");

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

var _Text = _interopRequireDefault(require("../Text"));

var _Divider = _interopRequireDefault(require("../Divider"));

var _constants = require("./constants");

var getRandomColorPattern = function getRandomColorPattern() {
  var patternColor = ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A1', 'A2', 'A3', 'A4', 'A5', 'A6'];
  var firstIndex = Math.floor(Math.random() * 6); // get random number between 0 to 5

  var lastIndex = firstIndex + 6;
  return patternColor.slice(firstIndex, lastIndex);
};

var myPatternColors = getRandomColorPattern();

var getAvatarColor = function getAvatarColor(_ref) {
  var index = _ref.index,
      color = _ref.color;
  var colorIndex = index;

  if (color) {
    return color;
  }

  while (colorIndex > 5) {
    colorIndex = colorIndex - 6;
  }

  return myPatternColors[colorIndex];
};

var setAvatarCompPropsArr = function setAvatarCompPropsArr(items, avatarSize, itemsMaxLength) {
  // gets the items prop from avatarGroup component and set it with the proper prop for avatar component such as size, shape etc.
  var avatarItems = items.map(function (item, index) {
    var ariaLabel = item.ariaLabel,
        color = item.color,
        imgProps = item.imgProps,
        name = item.name,
        text = item.text,
        placeholder = item.placeholder,
        title = item.title;
    var size = avatarSize === 'small' ? 'size24' : 'size30';
    var shape = 'circle';
    var avatarColor = getAvatarColor({
      index: index,
      color: color
    });
    return {
      size: size,
      shape: shape,
      ariaLabel: ariaLabel,
      color: avatarColor,
      imgProps: imgProps,
      name: name,
      text: text,
      placeholder: placeholder,
      title: title
    };
  });
  var avatars = avatarItemsLenghtHandler(avatarItems, avatarItems.length, itemsMaxLength, avatarSize);
  return avatars;
};

var avatarItemsLenghtHandler = function avatarItemsLenghtHandler(items, itemsLength, maxItems, avatarSize) {
  var moreItemAvatar = {
    text: "".concat(itemsLength - maxItems + 1, "+"),
    size: avatarSize === 'small' ? 'size24' : 'size30',
    isMoreItem: true
  };

  if (itemsLength > maxItems && maxItems >= 2) {
    items.length = maxItems;
    items[maxItems - 1] = moreItemAvatar;
  }

  return items;
};

var MoreIndicator = function MoreIndicator(_ref2) {
  var text = _ref2.text,
      size = _ref2.size;
  return /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": _constants.dataHooks.avatarGroupMoreItem,
    className: (0, _AvatarGroupSt.st)(_AvatarGroupSt.classes.moreIndicatorCircle, {
      size: size
    })
  }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
    secondary: true,
    weight: "normal",
    className: _AvatarGroupSt.classes.moreIndicatorText
  }, text));
};
/** AvatarGroup */


var AvatarGroup = function AvatarGroup(_ref3) {
  var dataHook = _ref3.dataHook,
      className = _ref3.className,
      type = _ref3.type,
      items = _ref3.items,
      maxItems = _ref3.maxItems,
      size = _ref3.size,
      showDivider = _ref3.showDivider;
  var itemsMaxLength = maxItems < 2 ? 2 : maxItems;
  var avatarCompArr = setAvatarCompPropsArr(items, size, itemsMaxLength);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _AvatarGroupSt.st)(_AvatarGroupSt.classes.root, {
      size: size,
      type: type
    }, className),
    "data-hook": dataHook
  }, avatarCompArr.map(function (item, index) {
    var key = "".concat(Object.values(item));

    if (item.isMoreItem) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        key: key,
        className: _AvatarGroupSt.classes.avatarContainer
      }, /*#__PURE__*/_react["default"].createElement(MoreIndicator, {
        text: item.text,
        size: size
      }));
    }

    var shouldIncludeDivider = index === 0 && showDivider && avatarCompArr.length > 1;
    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
      key: key
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: _AvatarGroupSt.classes.avatarContainer
    }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, item, {
      dataHook: _constants.dataHooks.avatarGroupItem
    }))), shouldIncludeDivider && /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
      direction: 'vertical',
      className: (0, _AvatarGroupSt.st)(_AvatarGroupSt.classes.divider, {
        size: size,
        type: type
      })
    }));
  }));
};

AvatarGroup.displayName = 'AvatarGroup';
AvatarGroup.propTypes = {
  /**
   * Applies a data-hook HTML attribute that can be used in the tests
   */
  dataHook: _propTypes["default"].string,

  /**
   * Allows to apply a CSS class to the component’s root element
   */
  className: _propTypes["default"].string,

  /**
   * Changes the way avatars are displayed inside the group.
   */
  type: _propTypes["default"].oneOf(['stretched', 'condensed']),

  /**
   * Changes the size of avatars in the group
   */
  size: _propTypes["default"].oneOf(['medium', 'small']),

  /**
   * Separates the first avatar with a divider  from the rest of the group
   */
  showDivider: _propTypes["default"].bool,

  /**
   * Sets the maximum number of avatars to be displayed. Number which exceeds this limit will be hidden under the “N+” item.
   */
  maxItems: _propTypes["default"].number,

  /**
   * Use to pass an array of avatars
   */
  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    ariaLabel: _propTypes["default"].string,
    color: _propTypes["default"].oneOf(['A1', 'A2', 'A3', 'A4', 'A5', 'A6']),
    imgProp: _propTypes["default"].object,
    name: _propTypes["default"].string,
    text: _propTypes["default"].string,
    placeholder: _propTypes["default"].node,
    title: _propTypes["default"].string
  })).isRequired
};
AvatarGroup.defaultProps = {
  type: 'stretched',
  size: 'medium',
  showDivider: false,
  maxItems: 5,
  items: []
};
var _default = AvatarGroup;
exports["default"] = _default;