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

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ChannelPreviewView = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _useA11yLabel = require("../../a11y/hooks/useA11yLabel");
var _ChannelsContext = require("../../contexts/channelsContext/ChannelsContext");
var _ComponentsContext = require("../../contexts/componentsContext/ComponentsContext");
var _SwipeRegistryContext = require("../../contexts/swipeableContext/SwipeRegistryContext");
var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
var _hooks = require("../../hooks");
var _theme = require("../../theme");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ChannelPreview/ChannelPreviewView.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 ChannelPreviewViewWithContext = props => {
  var channel = props.channel,
    formatLatestMessageDate = props.formatLatestMessageDate,
    maxUnreadCount = props.maxUnreadCount,
    muted = props.muted,
    onSelect = props.onSelect,
    pinned = props.pinned,
    unread = props.unread,
    mutedStatusPosition = props.mutedStatusPosition,
    pinnedStatusPosition = props.pinnedStatusPosition,
    lastMessage = props.lastMessage;
  var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
    ChannelPreviewAvatar = _useComponentsContext.ChannelPreviewAvatar,
    ChannelPreviewMessage = _useComponentsContext.ChannelPreviewMessage,
    ChannelPreviewMutedStatus = _useComponentsContext.ChannelPreviewMutedStatus,
    ChannelPreviewPinnedStatus = _useComponentsContext.ChannelPreviewPinnedStatus,
    ChannelPreviewStatus = _useComponentsContext.ChannelPreviewStatus,
    ChannelPreviewTitle = _useComponentsContext.ChannelPreviewTitle,
    ChannelPreviewUnreadCount = _useComponentsContext.ChannelPreviewUnreadCount;
  var _useTheme = (0, _ThemeContext.useTheme)(),
    _useTheme$theme = _useTheme.theme,
    _useTheme$theme$chann = _useTheme$theme.channelPreview,
    container = _useTheme$theme$chann.container,
    contentContainer = _useTheme$theme$chann.contentContainer,
    lowerRow = _useTheme$theme$chann.lowerRow,
    statusContainer = _useTheme$theme$chann.statusContainer,
    upperRow = _useTheme$theme$chann.upperRow,
    titleContainer = _useTheme$theme$chann.titleContainer,
    wrapper = _useTheme$theme$chann.wrapper,
    semantics = _useTheme$theme.semantics;
  var styles = useStyles();
  var swipeRegistry = (0, _SwipeRegistryContext.useSwipeRegistryContext)();
  var accessibilityHint = (0, _useA11yLabel.useA11yLabel)('a11y/Double tap to open');
  var onPress = (0, _hooks.useStableCallback)(() => {
    if (swipeRegistry != null && swipeRegistry.hasOpen()) {
      swipeRegistry == null || swipeRegistry.closeAll();
      return;
    }
    if (onSelect) {
      onSelect(channel);
    }
  });
  return (0, _jsxRuntime.jsx)(_reactNative.View, {
    style: [styles.wrapper, wrapper],
    children: (0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
      accessibilityHint: accessibilityHint,
      onPress: onPress,
      style: ({
        pressed
      }) => [styles.container, {
        backgroundColor: pressed && !(swipeRegistry != null && swipeRegistry.hasOpen()) ? semantics.backgroundUtilityPressed : 'transparent'
      }, container],
      testID: "channel-preview-button",
      children: [(0, _jsxRuntime.jsx)(ChannelPreviewAvatar, {
        channel: channel,
        size: "xl"
      }), (0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: [styles.contentContainer, contentContainer],
        testID: `channel-preview-content-${channel.id}`,
        children: [(0, _jsxRuntime.jsxs)(_reactNative.View, {
          style: [styles.upperRow, upperRow],
          children: [(0, _jsxRuntime.jsxs)(_reactNative.View, {
            style: [styles.titleContainer, titleContainer],
            children: [(0, _jsxRuntime.jsx)(ChannelPreviewTitle, {
              channel: channel
            }), muted && mutedStatusPosition === 'inlineTitle' ? (0, _jsxRuntime.jsx)(ChannelPreviewMutedStatus, {}) : null, pinned && pinnedStatusPosition === 'inlineTitle' ? (0, _jsxRuntime.jsx)(ChannelPreviewPinnedStatus, {}) : null]
          }), (0, _jsxRuntime.jsxs)(_reactNative.View, {
            style: [styles.statusContainer, statusContainer],
            children: [(0, _jsxRuntime.jsx)(ChannelPreviewStatus, {
              channel: channel,
              formatLatestMessageDate: formatLatestMessageDate,
              lastMessage: lastMessage
            }), (0, _jsxRuntime.jsx)(ChannelPreviewUnreadCount, {
              channel: channel,
              maxUnreadCount: maxUnreadCount,
              unread: unread
            })]
          })]
        }), (0, _jsxRuntime.jsxs)(_reactNative.View, {
          style: [styles.lowerRow, lowerRow],
          children: [(0, _jsxRuntime.jsx)(ChannelPreviewMessage, {
            channel: channel,
            lastMessage: lastMessage
          }), muted && mutedStatusPosition === 'trailingBottom' ? (0, _jsxRuntime.jsx)(ChannelPreviewMutedStatus, {}) : null, pinned && pinnedStatusPosition === 'trailingBottom' ? (0, _jsxRuntime.jsx)(ChannelPreviewPinnedStatus, {}) : null]
        })]
      })]
    })
  });
};
var MemoizedChannelPreviewViewWithContext = _react.default.memo(ChannelPreviewViewWithContext);
var ChannelPreviewView = props => {
  var _useChannelsContext = (0, _ChannelsContext.useChannelsContext)(),
    forceUpdate = _useChannelsContext.forceUpdate,
    maxUnreadCount = _useChannelsContext.maxUnreadCount,
    onSelect = _useChannelsContext.onSelect,
    mutedStatusPosition = _useChannelsContext.mutedStatusPosition,
    pinnedStatusPosition = _useChannelsContext.pinnedStatusPosition;
  return (0, _jsxRuntime.jsx)(MemoizedChannelPreviewViewWithContext, {
    forceUpdate,
    maxUnreadCount,
    onSelect,
    mutedStatusPosition,
    pinnedStatusPosition,
    ...props
  });
};
exports.ChannelPreviewView = ChannelPreviewView;
ChannelPreviewView.displayName = 'ChannelPreviewView{channelPreview}';
var useStyles = () => {
  var _useTheme2 = (0, _ThemeContext.useTheme)(),
    semantics = _useTheme2.theme.semantics;
  return (0, _react.useMemo)(() => {
    return _reactNative.StyleSheet.create({
      container: {
        alignItems: 'center',
        flexDirection: 'row',
        padding: _theme.primitives.spacingSm,
        borderRadius: _theme.primitives.radiusLg,
        gap: _theme.primitives.spacingMd
      },
      contentContainer: {
        flex: 1,
        gap: _theme.primitives.spacingXxs
      },
      upperRow: {
        gap: _theme.primitives.spacingMd,
        alignItems: 'center',
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between'
      },
      lowerRow: {
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'space-between'
      },
      innerRow: {
        alignItems: 'center',
        flexDirection: 'row',
        gap: _theme.primitives.spacingXxs
      },
      statusContainer: {
        alignItems: 'center',
        flexDirection: 'row',
        gap: _theme.primitives.spacingXs
      },
      titleContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        gap: _theme.primitives.spacingXxs,
        flexShrink: 1
      },
      wrapper: {
        flex: 1,
        padding: _theme.primitives.spacingXxs,
        borderBottomWidth: 1,
        borderBottomColor: semantics.borderCoreSubtle
      }
    });
  }, [semantics]);
};
//# sourceMappingURL=ChannelPreviewView.js.map