@evg-b/evg-ui/dist/AvatarGroup/AvatarGroup.js

EVG-UI library inspired by Material Design.

import _extends from '@babel/runtime/helpers/extends';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import '@babel/runtime/helpers/slicedToArray';
import withStyles from '../styles/withStyles.js';
import '@babel/runtime/helpers/construct';
import '@babel/runtime/helpers/toConsumableArray';
import '@babel/runtime/helpers/defineProperty';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import Avatar from '../Avatar/Avatar.js';

var styles = {
  base: {
    position: 'relative',
    display: 'flex',
    alignItems: 'center'
  }
};
/**
 * Этот компонент группирует множества Avatar. 
*/

var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(props, ref) {
  var classes = props.classes,
      className = props.className,
      children = props.children,
      size = props.size,
      max = props.max,
      otherProps = _objectWithoutProperties(props, ["classes", "className", "children", "size", "max"]);

  var EndAvatar = /*#__PURE__*/React.createElement(Avatar, {
    alt: "+".concat(React.Children.count(children) - max),
    altMax: 2,
    size: size
  });
  return /*#__PURE__*/React.createElement("div", _extends({
    ref: ref,
    className: classNames(classes.base, className)
  }, otherProps), React.Children.map(children, function (child, index) {
    if (index < max) {
      return /*#__PURE__*/React.cloneElement(child, {
        style: {
          zIndex: React.Children.count(children) - index,
          marginRight: '-10px',
          border: '2px solid #FFFFFF'
        },
        size: child.props.size || size
      });
    } else if (index === max) {
      return EndAvatar;
    } else {
      return null;
    }
  }));
});
AvatarGroup.propTypes = {
  /**
  * Это контент между открывающим и закрывающим тегом компонента.
  */
  children: PropTypes.node,

  /**
   * Объект содержит jss стили компонента.
  */
  classes: PropTypes.object,

  /**
   * Чтобы указать CSS классы, используйте этот атрибут.
  */
  className: PropTypes.string,

  /**
   * Максимальное количество показываемых Avatar
  */
  max: PropTypes.number,

  /**
   * Размер компонента.
  */
  size: PropTypes.number
};
AvatarGroup.defaultProps = {
  max: 5,
  size: 40
};
AvatarGroup.displayName = 'AvatarGroupEVG';
var AvatarGroup$1 = withStyles(styles)(AvatarGroup);

export default AvatarGroup$1;