@primer/components/lib/AvatarStack.js

Primer react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classnames = _interopRequireDefault(require("classnames"));

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _constants = require("./constants");

var _ = require(".");

var _sx = _interopRequireDefault(require("./sx"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const AvatarStackWrapper = _styledComponents.default.span.withConfig({
  displayName: "AvatarStack__AvatarStackWrapper",
  componentId: "sc-1qgzd2v-0"
})(["display:flex;position:relative;height:20px;min-width:", ";.pc-AvatarItem{flex-shrink:0;height:20px;width:20px;box-shadow:0 0 0 1px ", ";margin-left:-11px;position:relative;overflow:hidden;transition:margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;&:first-child{margin-left:0;}&:nth-child(n + 4){display:none;}}&.pc-AvatarStack--two{min-width:30px;.pc-AvatarItem{&:nth-child(n + 3){display:none;}}}&.pc-AvatarStack--three-plus{min-width:38px;.pc-AvatarItem{&:nth-child(3){opacity:", "%;margin-left:-17px;}&:nth-child(4){opacity:", "%;margin-left:-17px;}&:nth-child(5){opacity:", "%;margin-left:-17px;}&:nth-child(n + 4){display:block;}&:nth-child(n + 6){opacity:0;visibility:hidden;}}}&.pc-AvatarStack--right{justify-content:flex-end;.pc-AvatarItem{margin-left:0 !important;margin-right:-11px;&:first-child{margin-right:0;}}.pc-AvatarStackBody{flex-direction:row-reverse;&:hover{.pc-AvatarItem{margin-right:", "!important;margin-left:0 !important;&:first-child{margin-right:0 !important;}}}}}&.pc-AvatarStack--three-plus.pc-AvatarStack--right{.pc-AvatarItem{&:nth-child(3){margin-right:-17px;}&:nth-child(4){margin-right:-17px;}&:nth-child(5){margin-right:-17px;}}}.pc-AvatarStackBody:hover{width:auto;.pc-AvatarItem{margin-left:", ";opacity:100%;visibility:visible;box-shadow:0 0 0 4px ", ";&:first-child{margin-left:0;}}}", ";"], props => props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px', (0, _constants.get)('colors.canvas.default'), 100 - 3 * 15, 100 - 4 * 15, 100 - 5 * 15, (0, _constants.get)('space.1'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.canvas.default'), _sx.default);

const transformChildren = children => {
  return _react.default.Children.map(children, (child, index) => {
    if (! /*#__PURE__*/_react.default.isValidElement(child)) return child;
    return /*#__PURE__*/_react.default.cloneElement(child, {
      className: (0, _classnames.default)(child.props.className, 'pc-AvatarItem'),
      sx: {
        zIndex: 10 - index,
        ...child.props.sx
      }
    });
  });
};

const AvatarStack = ({
  children,
  alignRight,
  sx: sxProp
}) => {
  const count = _react.default.Children.count(children);

  const wrapperClassNames = (0, _classnames.default)({
    'pc-AvatarStack--two': count === 2,
    'pc-AvatarStack--three-plus': count > 2,
    'pc-AvatarStack--right': alignRight
  });
  return /*#__PURE__*/_react.default.createElement(AvatarStackWrapper, {
    count: count,
    className: wrapperClassNames,
    sx: sxProp
  }, /*#__PURE__*/_react.default.createElement(_.Box, {
    position: "absolute",
    display: "flex",
    width: "38px",
    className: "pc-AvatarStackBody"
  }, transformChildren(children)));
};

AvatarStack.displayName = "AvatarStack";
var _default = AvatarStack;
exports.default = _default;