stream-chat-react-native-core/lib/module/components/ui/Avatar/ChannelAvatar.js

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ChannelAvatar = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Avatar = require("./Avatar");
var _AvatarGroup = require("./AvatarGroup");
var _UserAvatar = require("./UserAvatar");
var _useA11yLabel = require("../../../a11y/hooks/useA11yLabel");
var _useChannelPreviewDisplayPresence = require("../../../components/ChannelPreview/hooks/useChannelPreviewDisplayPresence");
var _ChatContext = require("../../../contexts/chatContext/ChatContext");
var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
var _useChannelImage = require("../../../hooks/useChannelImage");
var _useChannelName = require("../../../hooks/useChannelName");
var _utils = require("../../../utils/utils");
var _CompositeAccessibilityProbe = require("../../Accessibility/CompositeAccessibilityProbe");
var _useChannelMembersState = require("../../ChannelList/hooks/useChannelMembersState");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ui/Avatar/ChannelAvatar.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 ChannelAvatar = props => {
  var _useChatContext = (0, _ChatContext.useChatContext)(),
    client = _useChatContext.client;
  var channel = props.channel;
  var online = (0, _useChannelPreviewDisplayPresence.useChannelPreviewDisplayPresence)(channel);
  var _props$isPreview = props.isPreview,
    isPreview = _props$isPreview === void 0 ? false : _props$isPreview,
    _props$previewUri = props.previewUri,
    previewUri = _props$previewUri === void 0 ? null : _props$previewUri,
    _props$showOnlineIndi = props.showOnlineIndicator,
    showOnlineIndicator = _props$showOnlineIndi === void 0 ? online : _props$showOnlineIndi,
    _props$size = props.size,
    size = _props$size === void 0 ? 'xl' : _props$size,
    _props$showBorder = props.showBorder,
    showBorder = _props$showBorder === void 0 ? true : _props$showBorder;
  var _useTheme = (0, _ThemeContext.useTheme)(),
    semantics = _useTheme.theme.semantics;
  var hashedValue = (0, _utils.hashStringToNumber)(channel.cid);
  var index = hashedValue % 5 + 1;
  var avatarBackgroundColor = semantics[`avatarPaletteBg${index}`];
  var channelImage = (0, _useChannelImage.useChannelImage)(channel);
  var imageToDisplay = isPreview ? previewUri : channelImage;
  var members = (0, _useChannelMembersState.useChannelMembersState)(channel);
  var usersForGroup = (0, _react.useMemo)(() => Object.values(members).map(member => member.user), [members]);
  var usersWithoutSelf = (0, _react.useMemo)(() => usersForGroup.filter(user => user.id !== client.user?.id), [usersForGroup, client.user?.id]);
  var channelName = (0, _useChannelName.useChannelName)(channel) ?? channel.cid;
  var memberCount = Object.keys(members).length;
  var isGroup = !!channel.data?.name || memberCount > 2;
  var otherUserName = usersWithoutSelf[0]?.name || usersWithoutSelf[0]?.id;
  var labelParams = (0, _react.useMemo)(() => ({
    count: memberCount,
    name: otherUserName ?? ''
  }), [memberCount, otherUserName]);
  var accessibilityLabel = (0, _useA11yLabel.useA11yLabel)(isGroup ? 'a11y/Channel with {{count}} members' : 'a11y/Direct chat with {{name}}', labelParams);
  return (0, _jsxRuntime.jsx)(_CompositeAccessibilityProbe.CompositeAccessibilityProbe, {
    label: accessibilityLabel,
    children: imageToDisplay ? (0, _jsxRuntime.jsx)(_Avatar.Avatar, {
      backgroundColor: avatarBackgroundColor,
      imageUrl: imageToDisplay,
      name: channelName,
      showBorder: showBorder,
      size: size
    }) : usersWithoutSelf.length > 1 ? (0, _jsxRuntime.jsx)(_AvatarGroup.UserAvatarGroup, {
      size: size,
      users: usersForGroup,
      showOnlineIndicator: showOnlineIndicator
    }) : (0, _jsxRuntime.jsx)(_UserAvatar.UserAvatar, {
      user: usersWithoutSelf[0],
      size: size,
      showBorder: showBorder,
      showOnlineIndicator: showOnlineIndicator
    })
  });
};
exports.ChannelAvatar = ChannelAvatar;
//# sourceMappingURL=ChannelAvatar.js.map