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

wix-style-react

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './AvatarGroup.st.css';
import Avatar from '../Avatar';
import Text from '../Text';
import Divider from '../Divider';
import { dataHooks } from './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.createElement("div", {
    "data-hook": dataHooks.avatarGroupMoreItem,
    className: st(classes.moreIndicatorCircle, {
      size: size
    })
  }, /*#__PURE__*/React.createElement(Text, {
    secondary: true,
    weight: "normal",
    className: 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.createElement("div", {
    className: st(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.createElement("div", {
        key: key,
        className: classes.avatarContainer
      }, /*#__PURE__*/React.createElement(MoreIndicator, {
        text: item.text,
        size: size
      }));
    }

    var shouldIncludeDivider = index === 0 && showDivider && avatarCompArr.length > 1;
    return /*#__PURE__*/React.createElement(React.Fragment, {
      key: key
    }, /*#__PURE__*/React.createElement("div", {
      className: classes.avatarContainer
    }, /*#__PURE__*/React.createElement(Avatar, _extends({}, item, {
      dataHook: dataHooks.avatarGroupItem
    }))), shouldIncludeDivider && /*#__PURE__*/React.createElement(Divider, {
      direction: 'vertical',
      className: st(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.string,

  /**
   * Allows to apply a CSS class to the component’s root element
   */
  className: PropTypes.string,

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

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

  /**
   * Separates the first avatar with a divider  from the rest of the group
   */
  showDivider: PropTypes.bool,

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

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