stream-chat-react-native-core/lib/module/components/Message/MessageItemView/MessageWrapper.js

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MessageWrapper = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _useMessageDateSeparator = require("../../../components/MessageList/hooks/useMessageDateSeparator");
var _useMessageGroupStyles = require("../../../components/MessageList/hooks/useMessageGroupStyles");
var _ChannelContext = require("../../../contexts/channelContext/ChannelContext");
var _ChatContext = require("../../../contexts/chatContext/ChatContext");
var _ComponentsContext = require("../../../contexts/componentsContext/ComponentsContext");
var _MessageListItemContext = require("../../../contexts/messageListItemContext/MessageListItemContext");
var _MessagesContext = require("../../../contexts/messagesContext/MessagesContext");
var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
var _useStateStore2 = require("../../../hooks/useStateStore");
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/Message/MessageItemView/MessageWrapper.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 channelUnreadStateSelector = state => ({
  first_unread_message_id: state.channelUnreadState?.first_unread_message_id,
  last_read_message_id: state.channelUnreadState?.last_read_message_id,
  last_read_timestamp: state.channelUnreadState?.last_read?.getTime(),
  unread_messages: state.channelUnreadState?.unread_messages
});
var MessageWrapper = exports.MessageWrapper = _react.default.memo(function MessageWrapper(props) {
  var message = props.message,
    previousMessage = props.previousMessage,
    nextMessage = props.nextMessage;
  var _useChatContext = (0, _ChatContext.useChatContext)(),
    client = _useChatContext.client;
  var _useChannelContext = (0, _ChannelContext.useChannelContext)(),
    channelUnreadStateStore = _useChannelContext.channelUnreadStateStore,
    channel = _useChannelContext.channel,
    hideDateSeparators = _useChannelContext.hideDateSeparators,
    highlightedMessageId = _useChannelContext.highlightedMessageId,
    maxTimeBetweenGroupedMessages = _useChannelContext.maxTimeBetweenGroupedMessages,
    threadList = _useChannelContext.threadList;
  var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
    InlineDateSeparator = _useComponentsContext.InlineDateSeparator,
    InlineUnreadIndicator = _useComponentsContext.InlineUnreadIndicator,
    Message = _useComponentsContext.Message,
    MessageSystem = _useComponentsContext.MessageSystem;
  var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
    getMessageGroupStyle = _useMessagesContext.getMessageGroupStyle,
    myMessageTheme = _useMessagesContext.myMessageTheme,
    shouldShowUnreadUnderlay = _useMessagesContext.shouldShowUnreadUnderlay;
  var _useMessageListItemCo = (0, _MessageListItemContext.useMessageListItemContext)(),
    goToMessage = _useMessageListItemCo.goToMessage,
    onThreadSelect = _useMessageListItemCo.onThreadSelect,
    noGroupByUser = _useMessageListItemCo.noGroupByUser,
    modifiedTheme = _useMessageListItemCo.modifiedTheme;
  var dateSeparatorDate = (0, _useMessageDateSeparator.useMessageDateSeparator)({
    hideDateSeparators,
    message,
    previousMessage
  });
  var isNewestMessage = nextMessage === undefined;
  var groupStyles = (0, _useMessageGroupStyles.useMessageGroupStyles)({
    dateSeparatorDate,
    getMessageGroupStyle,
    maxTimeBetweenGroupedMessages,
    message,
    previousMessage,
    nextMessage,
    noGroupByUser
  });
  var _useStateStore = (0, _useStateStore2.useStateStore)(channelUnreadStateStore.state, channelUnreadStateSelector),
    first_unread_message_id = _useStateStore.first_unread_message_id,
    last_read_timestamp = _useStateStore.last_read_timestamp,
    last_read_message_id = _useStateStore.last_read_message_id,
    unread_messages = _useStateStore.unread_messages;
  var _useTheme = (0, _ThemeContext.useTheme)(),
    messageContainer = _useTheme.theme.messageList.messageContainer;
  var styles = useStyles();
  if (!channel || channel.disconnected) {
    return null;
  }
  var createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
  var isLastReadMessage = last_read_message_id === message.id || !unread_messages && createdAtTimestamp === last_read_timestamp;
  var showUnreadSeparator = isLastReadMessage && !isNewestMessage && (!!first_unread_message_id || !!unread_messages);
  var showUnreadUnderlay = !!shouldShowUnreadUnderlay && showUnreadSeparator;
  var wrapMessageInTheme = client.userID === message.user?.id && !!myMessageTheme;
  var renderDateSeperator = dateSeparatorDate ? (0, _jsxRuntime.jsx)(_reactNative.View, {
    style: styles.dateSeparatorContainer,
    children: (0, _jsxRuntime.jsx)(InlineDateSeparator, {
      date: dateSeparatorDate
    })
  }) : null;
  var renderMessage = (0, _jsxRuntime.jsx)(Message, {
    goToMessage: goToMessage,
    groupStyles: groupStyles,
    isTargetedMessage: highlightedMessageId === message.id,
    message: message,
    onThreadSelect: onThreadSelect,
    showUnreadUnderlay: showUnreadUnderlay,
    style: [messageContainer],
    threadList: threadList
  });
  return (0, _jsxRuntime.jsxs)(_reactNative.View, {
    testID: `message-list-item-${message.id}`,
    children: [message.type === 'system' ? (0, _jsxRuntime.jsx)(MessageSystem, {
      message: message,
      style: messageContainer
    }) : wrapMessageInTheme ? (0, _jsxRuntime.jsxs)(_ThemeContext.ThemeProvider, {
      mergedStyle: modifiedTheme,
      children: [renderDateSeperator, renderMessage]
    }) : (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [renderDateSeperator, renderMessage]
    }), showUnreadUnderlay && (0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.unreadUnderlayContainer,
      children: (0, _jsxRuntime.jsx)(InlineUnreadIndicator, {
        unreadCount: unread_messages
      })
    })]
  });
});
var useStyles = () => {
  var _useTheme2 = (0, _ThemeContext.useTheme)(),
    _useTheme2$theme$mess = _useTheme2.theme.messageList,
    unreadUnderlayContainer = _useTheme2$theme$mess.unreadUnderlayContainer,
    inlineDateSeparatorContainer = _useTheme2$theme$mess.inlineDateSeparatorContainer,
    systemMessageContainer = _useTheme2$theme$mess.systemMessageContainer;
  return (0, _react.useMemo)(() => _reactNative.StyleSheet.create({
    dateSeparatorContainer: {
      paddingVertical: _theme.primitives.spacingXs,
      ...inlineDateSeparatorContainer
    },
    unreadUnderlayContainer: {
      paddingVertical: _theme.primitives.spacingXs,
      ...unreadUnderlayContainer
    },
    systemMessageContainer: {
      alignItems: 'center',
      ...systemMessageContainer
    }
  }), [unreadUnderlayContainer, inlineDateSeparatorContainer, systemMessageContainer]);
};
//# sourceMappingURL=MessageWrapper.js.map