stacked-avatars/dist/index.cjs.js

A React component which takes in an array of objects containing Images and renders them as stacked images

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));
var PropTypes = _interopDefault(require('prop-types'));
var styled = _interopDefault(require('@emotion/styled'));

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = ".stacked-avatars__container {\n  display: inline-flex;\n}\n\n.stacked-avatars__icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);\n  border: 2px solid #FFF;\n  overflow: hidden;\n}\n\n.stacked-avatars__icon + .stacked-avatars__icon {\n  margin-left: -20px;\n}\n\n.stacked-avatars__avatar {\n  width: 100%;\n  height: 100%;\n  margin-top: -4px;\n}\n";
styleInject(css_248z);

var Container = styled.div(function (props) {
  return {
    display: 'inline-flex',
    paddingLeft: props.paddingLeft || '20px'
  };
});
var AvatarContainer = styled.div(function (props) {
  return {
    width: props.width || '32px',
    height: props.height || '32px',
    borderRadius: props.borderRadius || '50%',
    boxShadow: props.boxShadow || '0 0 4px rgba(0, 0, 0, 0.5)',
    border: props.border || '2px solid #FFF',
    overflow: 'hidden',
    marginLeft: props.marginLeft || '-20px'
  };
});
var Avatar = styled.img(function (props) {
  return {
    width: props.width || '100%',
    height: props.height || '100%',
    marginTop: '0'
  };
});

var GroupedAvatarIcons = function GroupedAvatarIcons(_ref) {
  var _ref$data = _ref.data,
      data = _ref$data === void 0 ? [] : _ref$data,
      imageKey = _ref.imageKey,
      _ref$maxAvatarCount = _ref.maxAvatarCount,
      maxAvatarCount = _ref$maxAvatarCount === void 0 ? 3 : _ref$maxAvatarCount,
      styles = _ref.styles;
  var items = data.map(function (item, index) {
    if (index < maxAvatarCount) {
      return /*#__PURE__*/React.createElement(AvatarContainer, _extends({}, styles.avatarContainer || {}, {
        key: index
      }), /*#__PURE__*/React.createElement(Avatar, {
        src: item[imageKey],
        alt: "Icon"
      }));
    }

    return /*#__PURE__*/React.createElement(React.Fragment, null);
  });
  return /*#__PURE__*/React.createElement(Container, styles.container || {}, items);
};

GroupedAvatarIcons.propTypes = {
  data: PropTypes.array.isRequired,
  imageKey: PropTypes.string.isRequired
};

module.exports = GroupedAvatarIcons;