stream-chat-react-native-core/lib/commonjs/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 _useChannelName2 = 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 _client$user2, _useChannelName, _channel$data, _usersWithoutSelf$, _usersWithoutSelf$2;
  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 => {
    var _client$user;
    return user.id !== ((_client$user = client.user) == null ? void 0 : _client$user.id);
  }), [usersForGroup, (_client$user2 = client.user) == null ? void 0 : _client$user2.id]);
  var channelName = (_useChannelName = (0, _useChannelName2.useChannelName)(channel)) != null ? _useChannelName : channel.cid;
  var memberCount = Object.keys(members).length;
  var isGroup = !!((_channel$data = channel.data) != null && _channel$data.name) || memberCount > 2;
  var otherUserName = ((_usersWithoutSelf$ = usersWithoutSelf[0]) == null ? void 0 : _usersWithoutSelf$.name) || ((_usersWithoutSelf$2 = usersWithoutSelf[0]) == null ? void 0 : _usersWithoutSelf$2.id);
  var labelParams = (0, _react.useMemo)(() => ({
    count: memberCount,
    name: otherUserName != null ? 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