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

React component library for Help Scout's Design System

"use strict";

exports.__esModule = true;
exports.splitAvatarsArray = splitAvatarsArray;
exports.getNumberOfItemsToDisplay = getNumberOfItemsToDisplay;
exports.MARGIN_LEFT = void 0;
var MARGIN_LEFT = 2;
exports.MARGIN_LEFT = MARGIN_LEFT;

function splitAvatarsArray(avatars, itemsDisplayed) {
  var hiddenAvatars = itemsDisplayed < avatars.length ? avatars.slice(itemsDisplayed - 1, avatars.length) : [];
  var shownAvatars = hiddenAvatars.length ? avatars.slice(0, itemsDisplayed - 1) : avatars;
  return {
    shownAvatars: shownAvatars,
    hiddenAvatars: hiddenAvatars
  };
}

function getNumberOfItemsToDisplay(_ref) {
  var avatarSize = _ref.avatarSize,
      containerWidth = _ref.containerWidth,
      gap = _ref.gap,
      numberOfAvatars = _ref.numberOfAvatars;

  /** Only act if we have more than 1 avatar */
  if (!containerWidth || numberOfAvatars <= 1) {
    return;
  }
  /** The total space for the avatars is comprised of:
   * Avatar space: Number of avatars * the size of the avatar
   * +
   * Margin space: gap between avatars * the number of gaps. For example, for 3 avatars, there are 2 gaps => [AV]gap[AV]gap[AV]
   */


  var spaceForAllAvatars = avatarSize * numberOfAvatars + (numberOfAvatars - 1) * gap;

  if (containerWidth >= spaceForAllAvatars) {
    return numberOfAvatars;
  } else {
    // The real space for an avatar is its size + gap, we round down to account
    // for the last avatar not having a gap after it [AV]gap[AV]gap[AV]gap[AV]
    var numberOfGaps = Math.floor(containerWidth / (avatarSize + gap));
    var itemsThatFit = Math.floor((containerWidth - numberOfGaps * gap) / avatarSize); // Always show 1 regardless if there's enough space for it

    return itemsThatFit > 0 ? itemsThatFit : 1;
  }
}