@lskjs/avatar/AvatarGroup.js

"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

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

var _merge = _interopRequireDefault(require("lodash/merge"));

var _isEqual = _interopRequireDefault(require("lodash/isEqual"));

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

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var AvatarGroup = function AvatarGroup(_ref) {
  var Avatar = _ref.Avatar,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 64 : _ref$size,
      _ref$offset = _ref.offset,
      offset = _ref$offset === void 0 ? -0.35 : _ref$offset,
      _ref$items = _ref.items,
      items = _ref$items === void 0 ? [] : _ref$items,
      limit = _ref.limit,
      initCount = _ref.count,
      backgroundColor = _ref.backgroundColor,
      initAvatarInnerStyle = _ref.avatarInnerStyle,
      initAvatarStyle = _ref.avatarStyle;
  var avatarInnerStyle = initAvatarInnerStyle;
  var avatarStyle = initAvatarStyle;

  if (!(0, _isEqual["default"])(avatarStyle, AvatarGroup.defaultProps.avatarStyle)) {
    avatarStyle = (0, _merge["default"])(AvatarGroup.defaultProps.avatarStyle, avatarStyle);
  }

  if (!(0, _isEqual["default"])(avatarInnerStyle, AvatarGroup.defaultProps.avatarInnerStyle)) {
    avatarInnerStyle = (0, _merge["default"])(AvatarGroup.defaultProps.avatarInnerStyle, avatarInnerStyle);
  }

  var renderItems = items;

  if (limit) {
    renderItems = renderItems.slice(0, limit);
  }

  var count = initCount || items.length;
  var wrapStyle = {
    marginLeft: size * offset,
    "float": 'right'
  }; //  style={{paddingLeft:-wrapStyle.marginLeft}};p

  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
    style: {
      "float": 'left',
      marginLeft: Math.abs(size * offset)
    }
  }, renderItems.length !== count && /*#__PURE__*/_react["default"].createElement("span", {
    style: wrapStyle
  }, /*#__PURE__*/_react["default"].createElement(Avatar, {
    size: size,
    placeholder: "+".concat(count - renderItems.length),
    backgroundColor: backgroundColor,
    style: _objectSpread(_objectSpread({}, avatarStyle), {}, {
      zIndex: 100
    }),
    innerStyle: avatarInnerStyle
  })), renderItems.map(function () {
    var item = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    var index = arguments.length > 1 ? arguments[1] : undefined;
    return /*#__PURE__*/_react["default"].createElement("span", {
      key: item._id || index,
      style: _objectSpread(_objectSpread({}, wrapStyle), {}, {
        marginLeft: size * offset
      })
    }, /*#__PURE__*/_react["default"].createElement(Avatar, (0, _extends2["default"])({
      size: size,
      style: avatarStyle,
      innerStyle: avatarInnerStyle
    }, item)));
  })), /*#__PURE__*/_react["default"].createElement("div", {
    style: {
      clear: 'both'
    }
  }));
};

AvatarGroup.propTypes = {
  Avatar: _propTypes["default"].func,
  size: _propTypes["default"].number,
  limit: _propTypes["default"].number,
  offset: _propTypes["default"].number,
  count: _propTypes["default"].number,
  items: _propTypes["default"].array,
  backgroundColor: _propTypes["default"].string,
  avatarStyle: _propTypes["default"].object,
  avatarInnerStyle: _propTypes["default"].object
};
AvatarGroup.defaultProps = {
  Avatar: _Avatar["default"],
  size: 64,
  limit: null,
  offset: -0.35,
  count: null,
  backgroundColor: '#838383',
  items: []
};
var _default = AvatarGroup;
exports["default"] = _default;
//# sourceMappingURL=AvatarGroup.js.map