stream-chat-react-native-core/lib/commonjs/components/ChannelPreview/ChannelDetailsBottomSheet.js

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ChannelDetailsHeader = exports.ChannelDetailsBottomSheet = exports.ChannelActionItemView = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeGestureHandler = require("react-native-gesture-handler");
var _ChannelPreviewMutedStatus = require("./ChannelPreviewMutedStatus");
var _ChannelPreviewTitle = require("./ChannelPreviewTitle");
var _BottomSheetContext = require("../../contexts/bottomSheetContext/BottomSheetContext");
var _ComponentsContext = require("../../contexts/componentsContext/ComponentsContext");
var _SwipeRegistryContext = require("../../contexts/swipeableContext/SwipeRegistryContext");
var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
var _useChannelMuteActive = require("../../hooks/useChannelMuteActive");
var _useIsDirectChat = require("../../hooks/useIsDirectChat");
var _useStableCallback = require("../../hooks/useStableCallback");
var _theme = require("../../theme");
var _useChannelMembersState = require("../ChannelList/hooks/useChannelMembersState");
var _useChannelOnlineMemberCount = require("../ChannelList/hooks/useChannelOnlineMemberCount");
var _ChannelAvatar = require("../ui/Avatar/ChannelAvatar");
var _StreamBottomSheetModalFlatList = require("../UIComponents/StreamBottomSheetModalFlatList");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ChannelPreview/ChannelDetailsBottomSheet.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 ChannelDetailsHeader = ({
  channel
}) => {
  var styles = useStyles();
  var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
    t = _useTranslationContex.t;
  var members = (0, _useChannelMembersState.useChannelMembersState)(channel);
  var memberCount = (0, _react.useMemo)(() => Object.keys(members).length, [members]);
  var onlineCount = (0, _useChannelOnlineMemberCount.useChannelOnlineMemberCount)(channel);
  var isDirectChat = (0, _useIsDirectChat.useIsDirectChat)(channel);
  var muted = (0, _useChannelMuteActive.useChannelMuteActive)(channel);
  var displayedMemberCount = memberCount > 9 ? '9+' : `${memberCount}`;
  var displayedOnlineCount = onlineCount > 9 ? '9+' : `${onlineCount}`;
  var membersAndOnlineLabel = (0, _react.useMemo)(() => t('{{memberCount}} members, {{onlineCount}} online', {
    count: memberCount,
    memberCount: displayedMemberCount,
    onlineCount: displayedOnlineCount
  }), [displayedMemberCount, displayedOnlineCount, memberCount, t]);
  return (0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: styles.headerContainer,
    children: [(0, _jsxRuntime.jsx)(_ChannelAvatar.ChannelAvatar, {
      channel: channel,
      size: 'xl'
    }), (0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: styles.metaContainer,
      children: [(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: styles.titleContainer,
        children: [(0, _jsxRuntime.jsx)(_ChannelPreviewTitle.ChannelPreviewTitle, {
          channel: channel
        }), muted ? (0, _jsxRuntime.jsx)(_ChannelPreviewMutedStatus.ChannelPreviewMutedStatus, {}) : null]
      }), (0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: styles.headerMeta,
        children: isDirectChat ? onlineCount === 1 ? t('Online') : t('Offline') : membersAndOnlineLabel
      })]
    })]
  });
};
exports.ChannelDetailsHeader = ChannelDetailsHeader;
var ChannelActionItemView = ({
  item
}) => {
  var action = item.action,
    Icon = item.Icon,
    label = item.label;
  var _useBottomSheetContex = (0, _BottomSheetContext.useBottomSheetContext)(),
    close = _useBottomSheetContex.close;
  var swipableRegistry = (0, _SwipeRegistryContext.useSwipeRegistryContext)();
  var styles = useStyles();
  var _useTheme = (0, _ThemeContext.useTheme)(),
    semantics = _useTheme.theme.semantics;
  var onPress = (0, _useStableCallback.useStableCallback)(() => {
    action();
    close();
    swipableRegistry == null || swipableRegistry.closeAll();
  });
  return (0, _jsxRuntime.jsxs)(_reactNativeGestureHandler.Pressable, {
    onPress: onPress,
    style: styles.itemContainer,
    children: [(0, _jsxRuntime.jsx)(Icon, {
      stroke: item.type === 'standard' ? semantics.textSecondary : semantics.accentError
    }), (0, _jsxRuntime.jsx)(_reactNative.Text, {
      style: item.type === 'standard' ? styles.itemTextStandard : styles.itemTextDestructive,
      children: label
    })]
  });
};
exports.ChannelActionItemView = ChannelActionItemView;
var renderChannelActionItem = ({
  item
}) => (0, _jsxRuntime.jsx)(ChannelActionItemView, {
  item: item
});
var keyExtractor = item => item.id;
var ChannelDetailsBottomSheet = ({
  additionalFlatListProps,
  items,
  channel
}) => {
  var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
    ChannelDetailsHeaderComponent = _useComponentsContext.ChannelDetailsHeader;
  var styles = useStyles();
  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [(0, _jsxRuntime.jsx)(ChannelDetailsHeaderComponent, {
      channel: channel
    }), (0, _jsxRuntime.jsx)(_StreamBottomSheetModalFlatList.StreamBottomSheetModalFlatList, {
      data: items,
      renderItem: renderChannelActionItem,
      keyExtractor: keyExtractor,
      contentContainerStyle: styles.contentContainer,
      ...additionalFlatListProps
    })]
  });
};
exports.ChannelDetailsBottomSheet = ChannelDetailsBottomSheet;
var useStyles = () => {
  var _useTheme2 = (0, _ThemeContext.useTheme)(),
    _useTheme2$theme = _useTheme2.theme,
    _useTheme2$theme$chan = _useTheme2$theme.channelDetailsMenu,
    contentContainer = _useTheme2$theme$chan.contentContainer,
    header = _useTheme2$theme$chan.header,
    item = _useTheme2$theme$chan.item,
    semantics = _useTheme2$theme.semantics;
  return (0, _react.useMemo)(() => _reactNative.StyleSheet.create({
    contentContainer: {
      flexGrow: 1,
      backgroundColor: semantics.backgroundCoreElevation1,
      ...contentContainer
    },
    headerContainer: {
      flexDirection: 'row',
      padding: _theme.primitives.spacingSm,
      gap: _theme.primitives.spacingSm,
      backgroundColor: 'transparent',
      ...header.container
    },
    headerMeta: {
      fontSize: _theme.primitives.typographyFontSizeSm,
      lineHeight: _theme.primitives.typographyLineHeightNormal,
      color: semantics.textTertiary,
      ...header.metaText
    },
    metaContainer: {
      gap: _theme.primitives.spacingXxs,
      ...header.metaContainer
    },
    titleContainer: {
      alignItems: 'center',
      flexDirection: 'row',
      gap: _theme.primitives.spacingXxs
    },
    itemContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      padding: _theme.primitives.spacingSm,
      gap: _theme.primitives.spacingXs,
      ...item.container
    },
    itemTextStandard: {
      fontSize: _theme.primitives.typographyFontSizeMd,
      lineHeight: _theme.primitives.typographyLineHeightNormal,
      color: semantics.textPrimary,
      ...item.standardText
    },
    itemTextDestructive: {
      fontSize: _theme.primitives.typographyFontSizeMd,
      lineHeight: _theme.primitives.typographyLineHeightNormal,
      color: semantics.accentError,
      ...item.destructiveText
    }
  }), [contentContainer, header.container, header.metaContainer, header.metaText, item.container, item.destructiveText, item.standardText, semantics.accentError, semantics.backgroundCoreElevation1, semantics.textPrimary, semantics.textTertiary]);
};
//# sourceMappingURL=ChannelDetailsBottomSheet.js.map