stream-chat-react-native-core 4.0.0 → 4.1.0

package/lib/module/components/MessageList/MessageList.js

@@ -43,14 +43,14 @@ var _OverlayContext = require("../../contexts/overlayContext/OverlayContext");
 
 var _PaginatedMessageListContext = require("../../contexts/paginatedMessageListContext/PaginatedMessageListContext");
 
-var _ThreadContext = require("../../contexts/threadContext/ThreadContext");
-
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
+var _ThreadContext = require("../../contexts/threadContext/ThreadContext");
+
 var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageList/MessageList.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageList/MessageList.tsx";
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -104,6 +104,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       client = props.client,
       closePicker = props.closePicker,
       DateHeader = props.DateHeader,
+      deletedMessagesVisibilityType = props.deletedMessagesVisibilityType,
       disabled = props.disabled,
       disableTypingIndicator = props.disableTypingIndicator,
       EmptyStateIndicator = props.EmptyStateIndicator,
@@ -112,11 +113,15 @@ var MessageListWithContext = function MessageListWithContext(props) {
       FooterComponent = _props$FooterComponen === void 0 ? LoadingMoreIndicator : _props$FooterComponen,
       _props$HeaderComponen = props.HeaderComponent,
       HeaderComponent = _props$HeaderComponen === void 0 ? _InlineLoadingMoreRecentIndicator.InlineLoadingMoreRecentIndicator : _props$HeaderComponen,
+      hideStickyDateHeader = props.hideStickyDateHeader,
       initialScrollToFirstUnreadMessage = props.initialScrollToFirstUnreadMessage,
       InlineDateSeparator = props.InlineDateSeparator,
       InlineUnreadIndicator = props.InlineUnreadIndicator,
       _props$inverted = props.inverted,
       inverted = _props$inverted === void 0 ? true : _props$inverted,
+      _props$isListActive = props.isListActive,
+      isListActive = _props$isListActive === void 0 ? false : _props$isListActive,
+      legacyImageViewerSwipeBehaviour = props.legacyImageViewerSwipeBehaviour,
       loadChannelAtMessage = props.loadChannelAtMessage,
       loading = props.loading,
       LoadingIndicator = props.LoadingIndicator,
@@ -146,7 +151,6 @@ var MessageListWithContext = function MessageListWithContext(props) {
       thread = props.thread,
       _props$threadList = props.threadList,
       threadList = _props$threadList === void 0 ? false : _props$threadList,
-      typingEventsEnabled = props.typingEventsEnabled,
       TypingIndicator = props.TypingIndicator,
       TypingIndicatorContainer = props.TypingIndicatorContainer;
 
@@ -165,6 +169,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     });
   }, [myMessageTheme, theme]);
   var messageList = (0, _useMessageList.useMessageList)({
+    deletedMessagesVisibilityType: deletedMessagesVisibilityType,
     inverted: inverted,
     noGroupByUser: noGroupByUser,
     threadList: threadList
@@ -202,12 +207,12 @@ var MessageListWithContext = function MessageListWithContext(props) {
       scrollToBottomButtonVisible = _useState8[0],
       setScrollToBottomButtonVisible = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(new Date()),
+  var _useState9 = (0, _react.useState)(),
       _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
       stickyHeaderDate = _useState10[0],
       setStickyHeaderDate = _useState10[1];
 
-  var stickyHeaderDateRef = (0, _react.useRef)(new Date());
+  var stickyHeaderDateRef = (0, _react.useRef)();
 
   var getLastReadSafely = function getLastReadSafely() {
     return channel != null && channel.initialized ? channel.lastRead() : undefined;
@@ -240,11 +245,12 @@ var MessageListWithContext = function MessageListWithContext(props) {
 
   var updateStickyHeaderDateIfNeeded = function updateStickyHeaderDateIfNeeded(viewableItems) {
     if (viewableItems.length) {
-      var _lastItem$item;
+      var _lastItem$item, _stickyHeaderDateRef$;
 
       var lastItem = viewableItems.pop();
+      var isMessageTypeDeleted = lastItem.item.type === 'deleted';
 
-      if (lastItem != null && (_lastItem$item = lastItem.item) != null && _lastItem$item.created_at && !lastItem.item.deleted_at && typeof lastItem.item.created_at !== 'string' && lastItem.item.created_at.toDateString() !== stickyHeaderDateRef.current.toDateString()) {
+      if (lastItem != null && (_lastItem$item = lastItem.item) != null && _lastItem$item.created_at && !isMessageTypeDeleted && typeof lastItem.item.created_at !== 'string' && lastItem.item.created_at.toDateString() !== ((_stickyHeaderDateRef$ = stickyHeaderDateRef.current) == null ? void 0 : _stickyHeaderDateRef$.toDateString())) {
         stickyHeaderDateRef.current = lastItem.item.created_at;
         setStickyHeaderDate(lastItem.item.created_at);
       }
@@ -254,7 +260,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
   var onViewableItemsChanged = (0, _react.useRef)(function (_ref) {
     var viewableItems = _ref.viewableItems;
 
-    if (viewableItems) {
+    if (viewableItems && !hideStickyDateHeader) {
       updateStickyHeaderDateIfNeeded(viewableItems);
     }
 
@@ -270,7 +276,9 @@ var MessageListWithContext = function MessageListWithContext(props) {
     setScrollToBottomButtonVisible(false);
   }, [disabled]);
   (0, _react.useEffect)(function () {
-    if (!loading && channel && channel.countUnread() <= scrollToFirstUnreadThreshold) {
+    var shouldMarkReadOnFirstLoad = !loading && channel && (!initialScrollToFirstUnreadMessage && channel.countUnread() > 0 || initialScrollToFirstUnreadMessage && channel.countUnread() <= scrollToFirstUnreadThreshold);
+
+    if (shouldMarkReadOnFirstLoad) {
       markRead();
     }
   }, [loading]);
@@ -347,16 +355,24 @@ var MessageListWithContext = function MessageListWithContext(props) {
     var insertInlineUnreadIndicator = showUnreadUnderlay && !isUnreadMessage(lastMessage, lastRead);
 
     if (message.type === 'system') {
-      return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(MessageSystem, {
+      return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactNative.View, {
+        testID: "message-list-item-" + index,
+        __self: _this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 539,
+          columnNumber: 11
+        }
+      }, _react["default"].createElement(MessageSystem, {
         message: message,
         style: styles.messagePadding,
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 541,
-          columnNumber: 11
+          lineNumber: 540,
+          columnNumber: 13
         }
-      }), insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
+      })), insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
@@ -375,66 +391,82 @@ var MessageListWithContext = function MessageListWithContext(props) {
         lineNumber: 550,
         columnNumber: 9
       }
+    }, _react["default"].createElement(_reactNative.View, {
+      testID: "message-list-item-" + index,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 551,
+        columnNumber: 11
+      }
     }, _react["default"].createElement(Message, {
       goToMessage: goToMessage,
       groupStyles: (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) ? message.groupStyles : [],
+      isTargetedMessage: targetedMessage === message.id,
       lastReceivedId: lastReceivedId === message.id ? lastReceivedId : undefined,
       message: message,
       onThreadSelect: onThreadSelect,
       showUnreadUnderlay: showUnreadUnderlay,
       style: styles.messagePadding,
-      targetedMessage: targetedMessage === message.id,
       threadList: threadList,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 551,
-        columnNumber: 11
+        lineNumber: 552,
+        columnNumber: 13
       }
-    })), (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && _react["default"].createElement(InlineDateSeparator, {
+    }))), (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && _react["default"].createElement(InlineDateSeparator, {
       date: message.dateSeparator,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 566,
+        lineNumber: 568,
         columnNumber: 11
       }
     }), insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 569,
+        lineNumber: 571,
         columnNumber: 41
       }
-    })) : _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(Message, {
+    })) : _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactNative.View, {
+      testID: "message-list-item-" + index,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 575,
+        columnNumber: 9
+      }
+    }, _react["default"].createElement(Message, {
       goToMessage: goToMessage,
       groupStyles: (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) ? message.groupStyles : [],
+      isTargetedMessage: targetedMessage === message.id,
       lastReceivedId: lastReceivedId === message.id || message.quoted_message_id ? lastReceivedId : undefined,
       message: message,
       onThreadSelect: onThreadSelect,
       showUnreadUnderlay: showUnreadUnderlay,
       style: styles.messagePadding,
-      targetedMessage: targetedMessage === message.id,
       threadList: threadList,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 573,
-        columnNumber: 9
+        lineNumber: 576,
+        columnNumber: 11
       }
-    }), (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && _react["default"].createElement(InlineDateSeparator, {
+    })), (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && _react["default"].createElement(InlineDateSeparator, {
       date: message.dateSeparator,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 589,
+        lineNumber: 595,
         columnNumber: 11
       }
     }), insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 592,
+        lineNumber: 598,
         columnNumber: 41
       }
     }));
@@ -605,8 +637,10 @@ var MessageListWithContext = function MessageListWithContext(props) {
     });
     resetPaginationTrackers();
   }, [messageListLengthAfterUpdate]);
-  var messagesWithImages = messageList.filter(function (message) {
-    if (!message.deleted_at && message.attachments) {
+  var messagesWithImages = legacyImageViewerSwipeBehaviour && messageList.filter(function (message) {
+    var isMessageTypeDeleted = message.type === 'deleted';
+
+    if (!isMessageTypeDeleted && message.attachments) {
       return message.attachments.some(function (attachment) {
         return attachment.type === 'image' && !attachment.title_link && !attachment.og_scrape_url && (attachment.image_url || attachment.thumb_url);
       });
@@ -614,23 +648,23 @@ var MessageListWithContext = function MessageListWithContext(props) {
 
     return false;
   });
-  var imageString = messagesWithImages.map(function (message) {
+  var imageString = legacyImageViewerSwipeBehaviour && messagesWithImages && messagesWithImages.map(function (message) {
     var _message$attachments;
 
     return (_message$attachments = message.attachments) == null ? void 0 : _message$attachments.map(function (attachment) {
       return attachment.image_url || attachment.thumb_url || '';
     }).join();
   }).join();
-  var numberOfMessagesWithImages = messagesWithImages.length;
+  var numberOfMessagesWithImages = legacyImageViewerSwipeBehaviour && messagesWithImages && messagesWithImages.length;
   var threadExists = !!thread;
   (0, _react.useEffect)(function () {
-    if (threadList && thread || !threadList && !thread) {
+    if (legacyImageViewerSwipeBehaviour && isListActive && (threadList && thread || !threadList && !thread)) {
       setImages(messagesWithImages);
     }
-  }, [imageString, numberOfMessagesWithImages, threadExists, threadList]);
-  var stickyHeaderFormatDate = stickyHeaderDate.getFullYear() === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY';
-  var tStickyHeaderDate = tDateTimeParser(stickyHeaderDate);
-  var stickyHeaderDateToRender = (0, _TranslationContext.isDayOrMoment)(tStickyHeaderDate) ? tStickyHeaderDate.format(stickyHeaderFormatDate) : new Date(tStickyHeaderDate).toDateString();
+  }, [imageString, isListActive, legacyImageViewerSwipeBehaviour, numberOfMessagesWithImages, threadExists, threadList]);
+  var stickyHeaderFormatDate = (stickyHeaderDate == null ? void 0 : stickyHeaderDate.getFullYear()) === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY';
+  var tStickyHeaderDate = stickyHeaderDate && !hideStickyDateHeader ? tDateTimeParser(stickyHeaderDate) : null;
+  var stickyHeaderDateToRender = tStickyHeaderDate === null || hideStickyDateHeader ? null : (0, _TranslationContext.isDayOrMoment)(tStickyHeaderDate) ? tStickyHeaderDate.format(stickyHeaderFormatDate) : new Date(tStickyHeaderDate).toDateString();
 
   var dismissImagePicker = function dismissImagePicker() {
     if (!hasMoved && selectedPicker) {
@@ -662,7 +696,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 845,
+        lineNumber: 874,
         columnNumber: 5
       }
     }, _react["default"].createElement(EmptyStateIndicator, {
@@ -670,7 +704,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 846,
+        lineNumber: 875,
         columnNumber: 7
       }
     }));
@@ -684,7 +718,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 854,
+        lineNumber: 883,
         columnNumber: 7
       }
     }, _react["default"].createElement(LoadingIndicator, {
@@ -692,7 +726,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 855,
+        lineNumber: 884,
         columnNumber: 9
       }
     }));
@@ -702,10 +736,11 @@ var MessageListWithContext = function MessageListWithContext(props) {
     style: [styles.container, {
       backgroundColor: white_snow
     }, container],
+    testID: "message-flat-list-wrapper",
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 861,
+      lineNumber: 890,
       columnNumber: 5
     }
   }, _react["default"].createElement(FlatList, (0, _extends2["default"])({
@@ -737,7 +772,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 862,
+      lineNumber: 894,
       columnNumber: 7
     }
   })), !loading && _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactNative.View, {
@@ -745,37 +780,37 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 892,
+      lineNumber: 924,
       columnNumber: 11
     }
-  }, StickyHeader ? _react["default"].createElement(StickyHeader, {
+  }, stickyHeaderDateToRender && (StickyHeader ? _react["default"].createElement(StickyHeader, {
     dateString: stickyHeaderDateToRender,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 894,
-      columnNumber: 15
+      lineNumber: 927,
+      columnNumber: 17
     }
   }) : messageListLengthAfterUpdate ? _react["default"].createElement(DateHeader, {
     dateString: stickyHeaderDateToRender,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 896,
-      columnNumber: 15
+      lineNumber: 929,
+      columnNumber: 17
     }
-  }) : null), !disableTypingIndicator && TypingIndicator && typingEventsEnabled !== false && _react["default"].createElement(TypingIndicatorContainer, {
+  }) : null)), !disableTypingIndicator && TypingIndicator && _react["default"].createElement(TypingIndicatorContainer, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 900,
+      lineNumber: 933,
       columnNumber: 13
     }
   }, _react["default"].createElement(TypingIndicator, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 901,
+      lineNumber: 934,
       columnNumber: 15
     }
   })), _react["default"].createElement(ScrollToBottomButton, {
@@ -785,14 +820,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 904,
+      lineNumber: 937,
       columnNumber: 11
     }
   })), _react["default"].createElement(NetworkDownIndicator, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 911,
+      lineNumber: 944,
       columnNumber: 7
     }
   }));
@@ -808,7 +843,10 @@ var MessageList = function MessageList(props) {
       channel = _useChannelContext.channel,
       disabled = _useChannelContext.disabled,
       EmptyStateIndicator = _useChannelContext.EmptyStateIndicator,
+      enableMessageGroupingByUser = _useChannelContext.enableMessageGroupingByUser,
       error = _useChannelContext.error,
+      hideStickyDateHeader = _useChannelContext.hideStickyDateHeader,
+      isChannelActive = _useChannelContext.isChannelActive,
       loadChannelAtMessage = _useChannelContext.loadChannelAtMessage,
       loading = _useChannelContext.loading,
       LoadingIndicator = _useChannelContext.LoadingIndicator,
@@ -818,9 +856,7 @@ var MessageList = function MessageList(props) {
       scrollToFirstUnreadThreshold = _useChannelContext.scrollToFirstUnreadThreshold,
       setTargetedMessage = _useChannelContext.setTargetedMessage,
       StickyHeader = _useChannelContext.StickyHeader,
-      targetedMessage = _useChannelContext.targetedMessage,
-      threadList = _useChannelContext.threadList,
-      typingEventsEnabled = _useChannelContext.typingEventsEnabled;
+      targetedMessage = _useChannelContext.targetedMessage;
 
   var _useChatContext = (0, _ChatContext.useChatContext)(),
       client = _useChatContext.client;
@@ -830,11 +866,13 @@ var MessageList = function MessageList(props) {
 
   var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
       DateHeader = _useMessagesContext.DateHeader,
+      deletedMessagesVisibilityType = _useMessagesContext.deletedMessagesVisibilityType,
       disableTypingIndicator = _useMessagesContext.disableTypingIndicator,
       FlatList = _useMessagesContext.FlatList,
       initialScrollToFirstUnreadMessage = _useMessagesContext.initialScrollToFirstUnreadMessage,
       InlineDateSeparator = _useMessagesContext.InlineDateSeparator,
       InlineUnreadIndicator = _useMessagesContext.InlineUnreadIndicator,
+      legacyImageViewerSwipeBehaviour = _useMessagesContext.legacyImageViewerSwipeBehaviour,
       Message = _useMessagesContext.Message,
       MessageSystem = _useMessagesContext.MessageSystem,
       myMessageTheme = _useMessagesContext.myMessageTheme,
@@ -857,23 +895,24 @@ var MessageList = function MessageList(props) {
       t = _useTranslationContex.t,
       tDateTimeParser = _useTranslationContex.tDateTimeParser;
 
-  if (thread != null && thread.id && !threadList) {
-    throw new Error('Please add a threadList prop to your Channel component when rendering a thread list. Check our Channel documentation for more info: https://getstream.io/chat/docs/sdk/reactnative/core-components/channel/#threadlist');
-  }
-
   return _react["default"].createElement(MessageListWithContext, (0, _extends2["default"])({
     channel: channel,
     client: client,
     closePicker: closePicker,
     DateHeader: DateHeader,
+    deletedMessagesVisibilityType: deletedMessagesVisibilityType,
     disabled: disabled,
     disableTypingIndicator: disableTypingIndicator,
     EmptyStateIndicator: EmptyStateIndicator,
+    enableMessageGroupingByUser: enableMessageGroupingByUser,
     error: error,
     FlatList: FlatList,
+    hideStickyDateHeader: hideStickyDateHeader,
     initialScrollToFirstUnreadMessage: initialScrollToFirstUnreadMessage,
     InlineDateSeparator: InlineDateSeparator,
     InlineUnreadIndicator: InlineUnreadIndicator,
+    isListActive: isChannelActive,
+    legacyImageViewerSwipeBehaviour: legacyImageViewerSwipeBehaviour,
     loadChannelAtMessage: loadChannelAtMessage,
     loading: loading,
     LoadingIndicator: LoadingIndicator,
@@ -898,14 +937,14 @@ var MessageList = function MessageList(props) {
     targetedMessage: targetedMessage,
     tDateTimeParser: tDateTimeParser,
     thread: thread,
-    typingEventsEnabled: typingEventsEnabled,
     TypingIndicator: TypingIndicator,
     TypingIndicatorContainer: TypingIndicatorContainer
   }, props, {
+    noGroupByUser: !enableMessageGroupingByUser || props.noGroupByUser,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 985,
+      lineNumber: 1002,
       columnNumber: 5
     }
   }));