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

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.UserAvatarGroup = exports.AvatarGroup = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _Avatar = require("./Avatar");
var _constants = require("./constants");
var _UserAvatar = require("./UserAvatar");
var _ComponentsContext = require("../../../contexts/componentsContext/ComponentsContext");
var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
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/AvatarGroup.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 sizes = {
  '2xl': {
    width: 80,
    height: 80
  },
  xl: {
    width: 48,
    height: 48
  },
  lg: {
    width: 40,
    height: 40
  }
};
var buildForTwo = items => {
  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.topStart,
      children: items[0]
    }), (0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.bottomEnd,
      children: items[1]
    })]
  });
};
var buildForThree = items => {
  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.topCenter,
      children: items[0]
    }), (0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.bottomStart,
      children: items[1]
    }), (0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.bottomEnd,
      children: items[2]
    })]
  });
};
var buildForFour = items => {
  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.topStart,
      children: items[0]
    }), (0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.topEnd,
      children: items[1]
    }), (0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.bottomStart,
      children: items[2]
    }), (0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.bottomEnd,
      children: items[3]
    })]
  });
};
var avatarSize = {
  '2xl': 'lg',
  xl: 'md',
  lg: 'sm'
};
var badgeCountSize = {
  '2xl': 'xl',
  xl: 'md',
  lg: 'sm'
};
var AvatarGroup = props => {
  var size = props.size,
    _props$items = props.items,
    items = _props$items === void 0 ? [] : _props$items;
  var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
    icons = _useComponentsContext.icons;
  var _useTheme = (0, _ThemeContext.useTheme)(),
    semantics = _useTheme.theme.semantics;
  var avatarGroupStyles = useUserAvatarGroupStyles();
  var buildForOne = (0, _react.useCallback)(item => {
    return buildForTwo([item, (0, _jsxRuntime.jsx)(_Avatar.Avatar, {
      style: avatarGroupStyles.userAvatarWrapper,
      backgroundColor: semantics.avatarBgPlaceholder,
      showBorder: true,
      placeholder: (0, _jsxRuntime.jsx)(icons.PeopleIcon, {
        stroke: semantics.avatarTextPlaceholder,
        height: _constants.iconSizes[avatarSize[size]],
        width: _constants.iconSizes[avatarSize[size]]
      }),
      size: avatarSize[size]
    }, 'people-icon')]);
  }, [avatarGroupStyles.userAvatarWrapper, icons, semantics, size]);
  var buildForMore = (0, _react.useCallback)(items => {
    var remainingItems = items.length - 2;
    return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: styles.topStart,
        children: items[0]
      }), (0, _jsxRuntime.jsx)(_reactNative.View, {
        style: styles.topEnd,
        children: items[1]
      }), (0, _jsxRuntime.jsx)(_reactNative.View, {
        style: styles.bottomCenter,
        children: (0, _jsxRuntime.jsx)(_Badge.BadgeCount, {
          size: badgeCountSize[size],
          count: `+${remainingItems}`
        })
      })]
    });
  }, [size]);
  var renderItems = (0, _react.useMemo)(() => {
    var length = items.length;
    if (length === 1) {
      return buildForOne(items[0]);
    }
    if (length === 2) {
      return buildForTwo(items);
    }
    if (length === 3) {
      return buildForThree(items);
    }
    if (length === 4) {
      return buildForFour(items);
    }
    return buildForMore(items);
  }, [buildForMore, buildForOne, items]);
  return (0, _jsxRuntime.jsx)(_reactNative.View, {
    style: styles.container,
    children: (0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [sizes[size]],
      children: renderItems
    })
  });
};
exports.AvatarGroup = AvatarGroup;
var userAvatarSize = {
  '2xl': 'xl',
  xl: 'md',
  lg: 'sm'
};
var onlineIndicatorSize = {
  '2xl': 'xl',
  xl: 'xl',
  lg: 'lg'
};
var UserAvatarGroup = ({
  users,
  showOnlineIndicator = true,
  size
}) => {
  var styles = useUserAvatarGroupStyles();
  return (0, _jsxRuntime.jsxs)(_reactNative.View, {
    testID: "user-avatar-group",
    children: [(0, _jsxRuntime.jsx)(AvatarGroup, {
      size: size,
      items: users.map(user => (0, _jsxRuntime.jsx)(_UserAvatar.UserAvatar, {
        style: styles.userAvatarWrapper,
        user: user,
        size: userAvatarSize[size],
        showBorder: true
      }, user.id))
    }), showOnlineIndicator ? (0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.onlineIndicatorWrapper,
      children: (0, _jsxRuntime.jsx)(_Badge.OnlineIndicator, {
        online: true,
        size: onlineIndicatorSize[size]
      })
    }) : null]
  });
};
exports.UserAvatarGroup = UserAvatarGroup;
var useUserAvatarGroupStyles = () => {
  var _useTheme2 = (0, _ThemeContext.useTheme)(),
    semantics = _useTheme2.theme.semantics;
  return (0, _react.useMemo)(() => _reactNative.StyleSheet.create({
    userAvatarWrapper: {
      borderWidth: 2,
      borderColor: semantics.borderCoreInverse
    },
    onlineIndicatorWrapper: {
      position: 'absolute',
      right: 0,
      top: 0
    }
  }), [semantics]);
};
var styles = _reactNative.StyleSheet.create({
  container: {},
  topStart: {
    position: 'absolute',
    top: 0,
    left: 0
  },
  bottomEnd: {
    position: 'absolute',
    bottom: 0,
    right: 0
  },
  topEnd: {
    position: 'absolute',
    top: 0,
    right: 0
  },
  bottomStart: {
    position: 'absolute',
    bottom: 0,
    left: 0
  },
  topCenter: {
    alignItems: 'center'
  },
  bottomCenter: {
    position: 'absolute',
    bottom: 0,
    alignSelf: 'center'
  }
});
//# sourceMappingURL=AvatarGroup.js.map