gather-content-ui/dist/lib/Avatar/AvatarGroup/index.js

GatherContent UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AvatarGroup = AvatarGroup;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Dropdown = _interopRequireDefault(require("../../Dropdown"));
var _index = _interopRequireDefault(require("../index"));
var _AvatarInformation = _interopRequireDefault(require("../AvatarInformation"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function AvatarGroup(_ref) {
  var children = _ref.children,
    maximum = _ref.maximum,
    className = _ref.className,
    small = _ref.small,
    micro = _ref.micro,
    noTransform = _ref.noTransform,
    stacked = _ref.stacked;
  var total = children && children.length || 0;
  var plusLabel = "+".concat(total - maximum);
  var display = children;
  var remaining = 0;
  var zIndex = children.length;
  if (total > 1) {
    display = children.slice(0, maximum);
    remaining = children.slice(maximum, total);
  }
  var classes = (0, _classnames["default"])("gui-avatar-group ".concat(className), {
    "gui-avatar-group--small": small,
    "gui-avatar-group--micro": micro,
    "gui-avatar-group-stacked": stacked
  });
  return /*#__PURE__*/_react["default"].createElement("div", {
    "data-component": "gui-avatar-group",
    className: classes
  }, _react["default"].Children.map(display, function (child) {
    var styles = {
      zIndex: zIndex
    };
    zIndex -= 1;
    return /*#__PURE__*/_react["default"].createElement("span", {
      className: "gui-avatar-group__item",
      style: styles
    }, /*#__PURE__*/_react["default"].cloneElement(child));
  }), total > maximum && /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
    id: "gui-avatar-group-dropdown",
    autoPosition: true
  }, /*#__PURE__*/_react["default"].createElement(_Dropdown["default"].Trigger, {
    triggerClassName: "gui-avatar-plus-trigger"
  }, /*#__PURE__*/_react["default"].createElement(_index["default"], {
    initials: plusLabel
  })), /*#__PURE__*/_react["default"].createElement(_Dropdown["default"].Content, {
    noTransform: noTransform
  }, _react["default"].Children.map(remaining, function (child) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "gui-h-margin-bottom-half"
    }, /*#__PURE__*/_react["default"].createElement(_index["default"], child.props, /*#__PURE__*/_react["default"].createElement(_AvatarInformation["default"], {
      name: child.props.name,
      email: child.props.email
    })));
  }))));
}
AvatarGroup.defaultProps = {
  maximum: 3,
  className: "",
  small: false,
  micro: false,
  stacked: true
};
var _default = exports["default"] = AvatarGroup;
//# sourceMappingURL=index.js.map