stream-chat-react-native-core/lib/commonjs/components/ui/Avatar/AvatarStack.js

The official React Native and Expo components for Stream Chat, a service for building chat applications

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.UserAvatarStack = exports.AvatarStack = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _constants = require("./constants");
var _UserAvatar = require("./UserAvatar");
var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
var _theme = require("../../../theme");
var _Badge = require("../Badge");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ui/Avatar/AvatarStack.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var AvatarStack = props => {
  var _props$avatarSize = props.avatarSize,
    avatarSize = _props$avatarSize === void 0 ? 'sm' : _props$avatarSize,
    _props$maxVisible = props.maxVisible,
    maxVisible = _props$maxVisible === void 0 ? 3 : _props$maxVisible,
    _props$items = props.items,
    items = _props$items === void 0 ? [] : _props$items,
    _props$overlap = props.overlap,
    overlap = _props$overlap === void 0 ? 0 : _props$overlap;
  var styles = useStyles();
  var diameter = _constants.avatarSizes[avatarSize].width;
  var visiblePortion = diameter * (1 - overlap);
  var visibleItems = items.slice(0, maxVisible);
  var extraCount = items.length - visibleItems.length;
  var totalWidth = diameter + (visibleItems.length - 1) * visiblePortion;
  var badgeCountSize = avatarSize === 'md' ? 'lg' : avatarSize === 'sm' ? 'md' : 'sm';
  return (0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: styles.wrapper,
    children: [(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [styles.container, {
        width: totalWidth,
        height: diameter
      }],
      children: visibleItems.map((item, index) => {
        return (0, _jsxRuntime.jsx)(_reactNative.View, {
          style: [styles.item, {
            left: index * visiblePortion
          }],
          children: item
        }, index);
      })
    }), extraCount > 0 && (0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [styles.badgeCount, {
        marginLeft: -(overlap * diameter)
      }],
      children: (0, _jsxRuntime.jsx)(_Badge.BadgeCount, {
        count: extraCount,
        size: badgeCountSize
      })
    })]
  });
};
exports.AvatarStack = AvatarStack;
var UserAvatarStack = ({
  avatarSize = 'sm',
  maxVisible,
  overlap,
  users
}) => {
  var styles = useUserAvatarStackStyles();
  var items = (0, _react.useMemo)(() => users.map(user => {
    return (0, _jsxRuntime.jsx)(_UserAvatar.UserAvatar, {
      style: styles.userAvatarWrapper,
      user: user,
      size: avatarSize,
      showBorder: true
    }, user.id);
  }), [avatarSize, styles.userAvatarWrapper, users]);
  return (0, _jsxRuntime.jsx)(AvatarStack, {
    avatarSize: avatarSize,
    maxVisible: maxVisible,
    overlap: overlap,
    items: items
  });
};
exports.UserAvatarStack = UserAvatarStack;
var useUserAvatarStackStyles = () => {
  var _useTheme = (0, _ThemeContext.useTheme)(),
    _useTheme$theme = _useTheme.theme,
    avatarStack = _useTheme$theme.avatarStack,
    semantics = _useTheme$theme.semantics;
  return (0, _react.useMemo)(() => _reactNative.StyleSheet.create({
    userAvatarWrapper: {
      borderWidth: 2,
      borderColor: semantics.borderCoreInverse,
      borderRadius: _theme.primitives.radiusMax,
      ...avatarStack.userAvatarWrapper
    }
  }), [avatarStack.userAvatarWrapper, semantics.borderCoreInverse]);
};
var useStyles = () => {
  return (0, _react.useMemo)(() => _reactNative.StyleSheet.create({
    container: {
      flexDirection: 'row',
      alignItems: 'center'
    },
    item: {
      position: 'absolute'
    },
    badgeCount: {},
    wrapper: {
      flexDirection: 'row'
    }
  }), []);
};
//# sourceMappingURL=AvatarStack.js.map