stream-chat-react-native-core 6.7.3-beta.2 → 6.7.3-beta.3

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

@@ -26,6 +26,7 @@ var _OverlayContext = require("../../contexts/overlayContext/OverlayContext");
 var _PaginatedMessageListContext = require("../../contexts/paginatedMessageListContext/PaginatedMessageListContext");
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _ThreadContext = require("../../contexts/threadContext/ThreadContext");
+var _hooks = require("../../hooks");
 var _types = require("../../types/types");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["contentContainerStyle", "ItemSeparatorComponent", "style"];
@@ -95,7 +96,7 @@ var getPreviousLastMessage = function getPreviousLastMessage(messages, newMessag
   return previousLastMessage;
 };
 var MessageListWithContext = function MessageListWithContext(props) {
-  var _getLastReceivedMessa, _client$user3;
+  var _client$user3;
   var LoadingMoreRecentIndicator = props.threadList ? _InlineLoadingMoreRecentThreadIndicator.InlineLoadingMoreRecentThreadIndicator : _InlineLoadingMoreRecentIndicator.InlineLoadingMoreRecentIndicator;
   var additionalFlatListProps = props.additionalFlatListProps,
     channel = props.channel,
@@ -192,6 +193,12 @@ var MessageListWithContext = function MessageListWithContext(props) {
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     autoscrollToRecent = _useState4[0],
     setAutoscrollToRecent = _useState4[1];
+  var maintainVisibleContentPosition = (0, _react.useMemo)(function () {
+    return {
+      autoscrollToTopThreshold: autoscrollToRecent ? 10 : undefined,
+      minIndexForVisible: 1
+    };
+  }, [autoscrollToRecent]);
   var onStartReachedTracker = (0, _react.useRef)({});
   var onEndReachedTracker = (0, _react.useRef)({});
   var onStartReachedInPromise = (0, _react.useRef)(null);
@@ -205,22 +212,22 @@ var MessageListWithContext = function MessageListWithContext(props) {
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     hasMoved = _useState6[0],
     setHasMoved = _useState6[1];
-  var _useState7 = (0, _react.useState)((_getLastReceivedMessa = (0, _getLastReceivedMessage.getLastReceivedMessage)(processedMessageList)) == null ? void 0 : _getLastReceivedMessa.id),
+  var lastReceivedId = (0, _react.useMemo)(function () {
+    var _getLastReceivedMessa;
+    return (_getLastReceivedMessa = (0, _getLastReceivedMessage.getLastReceivedMessage)(processedMessageList)) == null ? void 0 : _getLastReceivedMessa.id;
+  }, [processedMessageList]);
+  var _useState7 = (0, _react.useState)(false),
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    lastReceivedId = _useState8[0],
-    setLastReceivedId = _useState8[1];
-  var _useState9 = (0, _react.useState)(false),
+    scrollToBottomButtonVisible = _useState8[0],
+    setScrollToBottomButtonVisible = _useState8[1];
+  var _useState9 = (0, _react.useState)(),
     _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    scrollToBottomButtonVisible = _useState10[0],
-    setScrollToBottomButtonVisible = _useState10[1];
-  var _useState11 = (0, _react.useState)(),
-    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    stickyHeaderDate = _useState12[0],
-    setStickyHeaderDate = _useState12[1];
+    stickyHeaderDate = _useState10[0],
+    setStickyHeaderDate = _useState10[1];
   var stickyHeaderDateRef = (0, _react.useRef)(undefined);
   var channelRef = (0, _react.useRef)(channel);
   channelRef.current = channel;
-  var updateStickyHeaderDateIfNeeded = function updateStickyHeaderDateIfNeeded(viewableItems) {
+  var updateStickyHeaderDateIfNeeded = (0, _hooks.useStableCallback)(function (viewableItems) {
     if (!viewableItems.length) {
       return;
     }
@@ -237,8 +244,8 @@ var MessageListWithContext = function MessageListWithContext(props) {
         setStickyHeaderDate(lastItem.item.created_at);
       }
     }
-  };
-  var updateStickyUnreadIndicator = function updateStickyUnreadIndicator(viewableItems) {
+  });
+  var updateStickyUnreadIndicator = (0, _hooks.useStableCallback)(function (viewableItems) {
     if (!viewableItems.length) {
       setIsUnreadNotificationOpen(false);
       return;
@@ -267,7 +274,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
         setIsUnreadNotificationOpen(false);
       }
     }
-  };
+  });
   var unstableOnViewableItemsChanged = function unstableOnViewableItemsChanged(_ref) {
     var viewableItems = _ref.viewableItems;
     if (!viewableItems) {
@@ -346,8 +353,6 @@ var MessageListWithContext = function MessageListWithContext(props) {
     };
   }, [channel, channelUnreadState == null ? void 0 : channelUnreadState.first_unread_message_id, (_client$user3 = client.user) == null ? void 0 : _client$user3.id, markRead, scrollToBottomButtonVisible, setChannelUnreadState, threadList]);
   (0, _react.useEffect)(function () {
-    var lastReceivedMessage = (0, _getLastReceivedMessage.getLastReceivedMessage)(processedMessageList);
-    setLastReceivedId(lastReceivedMessage == null ? void 0 : lastReceivedMessage.id);
     var scrollToBottomIfNeeded = function scrollToBottomIfNeeded() {
       var _topMessageBeforeUpda;
       if (!client || !channel || rawMessageList.length === 0) {
@@ -415,7 +420,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       }
     }
   }, [channel, rawMessageList, threadList]);
-  var goToMessage = function () {
+  var goToMessage = (0, _hooks.useStableCallback)(function () {
     var _ref4 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2(messageId) {
       var indexOfParentInMessageList;
       return _regenerator["default"].wrap(function _callee2$(_context2) {
@@ -465,10 +470,10 @@ var MessageListWithContext = function MessageListWithContext(props) {
         }
       }, _callee2, null, [[1, 18]]);
     }));
-    return function goToMessage(_x2) {
+    return function (_x2) {
       return _ref4.apply(this, arguments);
     };
-  }();
+  }());
   (0, _react.useEffect)(function () {
     if (!targetedMessage) {
       return;
@@ -517,7 +522,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     })), WAIT_FOR_SCROLL_TIMEOUT);
   }, [targetedMessage]);
   var shouldApplyAndroidWorkaround = inverted && _reactNative.Platform.OS === 'android';
-  var renderItem = function renderItem(_ref6) {
+  var renderItem = (0, _react.useCallback)(function (_ref6) {
     var _message$user;
     var index = _ref6.index,
       message = _ref6.item;
@@ -564,92 +569,82 @@ var MessageListWithContext = function MessageListWithContext(props) {
         children: [renderDateSeperator, renderMessage]
       }), showUnreadUnderlay && (0, _jsxRuntime.jsx)(InlineUnreadIndicator, {})]
     });
-  };
-  var maybeCallOnStartReached = function () {
-    var _ref7 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee4() {
-      var callback, onError;
-      return _regenerator["default"].wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
-          case 0:
-            if (!(processedMessageList != null && processedMessageList.length && onStartReachedTracker.current[processedMessageList.length])) {
-              _context4.next = 2;
-              break;
-            }
-            return _context4.abrupt("return");
-          case 2:
-            if (processedMessageList != null && processedMessageList.length) {
-              onStartReachedTracker.current[processedMessageList.length] = true;
-            }
-            callback = function callback() {
-              onStartReachedInPromise.current = null;
-              return Promise.resolve();
-            };
-            onError = function onError() {
-              setTimeout(function () {
-                onStartReachedTracker.current = {};
-              }, 2000);
-            };
-            if (!onEndReachedInPromise.current) {
-              _context4.next = 8;
-              break;
-            }
+  }, [InlineDateSeparator, InlineUnreadIndicator, Message, MessageSystem, channel, channelUnreadState == null ? void 0 : channelUnreadState.first_unread_message_id, channelUnreadState == null ? void 0 : channelUnreadState.last_read, channelUnreadState == null ? void 0 : channelUnreadState.last_read_message_id, channelUnreadState == null ? void 0 : channelUnreadState.unread_messages, client.userID, goToMessage, highlightedMessageId, lastReceivedId, messageContainer, modifiedTheme, myMessageTheme, onThreadSelect, screenPadding, shouldApplyAndroidWorkaround, shouldShowUnreadUnderlay, threadList]);
+  var maybeCallOnStartReached = (0, _hooks.useStableCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee4() {
+    var callback, onError;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          if (!(processedMessageList != null && processedMessageList.length && onStartReachedTracker.current[processedMessageList.length])) {
+            _context4.next = 2;
+            break;
+          }
+          return _context4.abrupt("return");
+        case 2:
+          if (processedMessageList != null && processedMessageList.length) {
+            onStartReachedTracker.current[processedMessageList.length] = true;
+          }
+          callback = function callback() {
+            onStartReachedInPromise.current = null;
+            return Promise.resolve();
+          };
+          onError = function onError() {
+            setTimeout(function () {
+              onStartReachedTracker.current = {};
+            }, 2000);
+          };
+          if (!onEndReachedInPromise.current) {
             _context4.next = 8;
-            return onEndReachedInPromise.current;
-          case 8:
-            onStartReachedInPromise.current = (threadList && !!threadInstance && loadMoreRecentThread ? loadMoreRecentThread({}) : loadMoreRecent()).then(callback)["catch"](onError);
-          case 9:
-          case "end":
-            return _context4.stop();
-        }
-      }, _callee4);
-    }));
-    return function maybeCallOnStartReached() {
-      return _ref7.apply(this, arguments);
-    };
-  }();
-  var maybeCallOnEndReached = function () {
-    var _ref8 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee5() {
-      var callback, onError;
-      return _regenerator["default"].wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
-          case 0:
-            if (!(processedMessageList != null && processedMessageList.length && onEndReachedTracker.current[processedMessageList.length])) {
-              _context5.next = 2;
-              break;
-            }
-            return _context5.abrupt("return");
-          case 2:
-            if (processedMessageList != null && processedMessageList.length) {
-              onEndReachedTracker.current[processedMessageList.length] = true;
-            }
-            callback = function callback() {
-              onEndReachedInPromise.current = null;
-              return Promise.resolve();
-            };
-            onError = function onError() {
-              setTimeout(function () {
-                onEndReachedTracker.current = {};
-              }, 2000);
-            };
-            if (!onStartReachedInPromise.current) {
-              _context5.next = 8;
-              break;
-            }
+            break;
+          }
+          _context4.next = 8;
+          return onEndReachedInPromise.current;
+        case 8:
+          onStartReachedInPromise.current = (threadList && !!threadInstance && loadMoreRecentThread ? loadMoreRecentThread({}) : loadMoreRecent()).then(callback)["catch"](onError);
+        case 9:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })));
+  var maybeCallOnEndReached = (0, _hooks.useStableCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee5() {
+    var callback, onError;
+    return _regenerator["default"].wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          if (!(processedMessageList != null && processedMessageList.length && onEndReachedTracker.current[processedMessageList.length])) {
+            _context5.next = 2;
+            break;
+          }
+          return _context5.abrupt("return");
+        case 2:
+          if (processedMessageList != null && processedMessageList.length) {
+            onEndReachedTracker.current[processedMessageList.length] = true;
+          }
+          callback = function callback() {
+            onEndReachedInPromise.current = null;
+            return Promise.resolve();
+          };
+          onError = function onError() {
+            setTimeout(function () {
+              onEndReachedTracker.current = {};
+            }, 2000);
+          };
+          if (!onStartReachedInPromise.current) {
             _context5.next = 8;
-            return onStartReachedInPromise.current;
-          case 8:
-            onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore()).then(callback)["catch"](onError);
-          case 9:
-          case "end":
-            return _context5.stop();
-        }
-      }, _callee5);
-    }));
-    return function maybeCallOnEndReached() {
-      return _ref8.apply(this, arguments);
-    };
-  }();
-  var onUserScrollEvent = function onUserScrollEvent(event) {
+            break;
+          }
+          _context5.next = 8;
+          return onStartReachedInPromise.current;
+        case 8:
+          onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore()).then(callback)["catch"](onError);
+        case 9:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
+  var onUserScrollEvent = (0, _hooks.useStableCallback)(function (event) {
     var nativeEvent = event.nativeEvent;
     clearTimeout(onScrollEventTimeoutRef.current);
     var offset = nativeEvent.contentOffset.y;
@@ -666,8 +661,8 @@ var MessageListWithContext = function MessageListWithContext(props) {
     if (isScrollAtEnd) {
       maybeCallOnEndReached();
     }
-  };
-  var handleScroll = function handleScroll(event) {
+  });
+  var handleScroll = (0, _hooks.useStableCallback)(function (event) {
     var messageListHasMessages = processedMessageList.length > 0;
     var offset = event.nativeEvent.contentOffset.y;
     var isScrollAtBottom = offset <= 150;
@@ -677,47 +672,42 @@ var MessageListWithContext = function MessageListWithContext(props) {
     if (onListScroll) {
       onListScroll(event);
     }
-  };
-  var goToNewMessages = function () {
-    var _ref9 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee6() {
-      var isNotLatestSet;
-      return _regenerator["default"].wrap(function _callee6$(_context6) {
-        while (1) switch (_context6.prev = _context6.next) {
-          case 0:
-            isNotLatestSet = channel.state.messages !== channel.state.latestMessages;
-            if (!isNotLatestSet) {
-              _context6.next = 7;
-              break;
-            }
-            resetPaginationTrackersRef.current();
-            _context6.next = 5;
-            return reloadChannel();
-          case 5:
-            _context6.next = 8;
+  });
+  var goToNewMessages = (0, _hooks.useStableCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee6() {
+    var isNotLatestSet;
+    return _regenerator["default"].wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          isNotLatestSet = channel.state.messages !== channel.state.latestMessages;
+          if (!isNotLatestSet) {
+            _context6.next = 7;
             break;
-          case 7:
-            if (flatListRef.current) {
-              flatListRef.current.scrollToOffset({
-                animated: true,
-                offset: 0
-              });
-            }
-          case 8:
-            setScrollToBottomButtonVisible(false);
-            _context6.next = 11;
-            return markRead({
-              updateChannelUnreadState: false
+          }
+          resetPaginationTrackersRef.current();
+          _context6.next = 5;
+          return reloadChannel();
+        case 5:
+          _context6.next = 8;
+          break;
+        case 7:
+          if (flatListRef.current) {
+            flatListRef.current.scrollToOffset({
+              animated: true,
+              offset: 0
             });
-          case 11:
-          case "end":
-            return _context6.stop();
-        }
-      }, _callee6);
-    }));
-    return function goToNewMessages() {
-      return _ref9.apply(this, arguments);
-    };
-  }();
+          }
+        case 8:
+          setScrollToBottomButtonVisible(false);
+          _context6.next = 11;
+          return markRead({
+            updateChannelUnreadState: false
+          });
+        case 11:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  })));
   var scrollToIndexFailedRetryCountRef = (0, _react.useRef)(0);
   var failScrollTimeoutId = (0, _react.useRef)(undefined);
   var onScrollToIndexFailedRef = (0, _react.useRef)(function (info) {
@@ -768,45 +758,40 @@ var MessageListWithContext = function MessageListWithContext(props) {
       setMessages(messagesWithImages);
     }
   }, [imageString, isListActive, legacyImageViewerSwipeBehaviour, numberOfMessagesWithImages, threadExists, threadList]);
-  var dismissImagePicker = function dismissImagePicker() {
+  var dismissImagePicker = (0, _hooks.useStableCallback)(function () {
     if (selectedPicker) {
       setSelectedPicker(undefined);
       closePicker();
     }
-  };
-  var onScrollBeginDrag = function onScrollBeginDrag(event) {
+  });
+  var onScrollBeginDrag = (0, _hooks.useStableCallback)(function (event) {
     !hasMoved && selectedPicker && setHasMoved(true);
     onUserScrollEvent(event);
-  };
-  var onScrollEndDrag = function onScrollEndDrag(event) {
+  });
+  var onScrollEndDrag = (0, _hooks.useStableCallback)(function (event) {
     hasMoved && selectedPicker && setHasMoved(false);
     onUserScrollEvent(event);
-  };
-  var refCallback = function refCallback(ref) {
+  });
+  var refCallback = (0, _hooks.useStableCallback)(function (ref) {
     flatListRef.current = ref;
     if (setFlatListRef) {
       setFlatListRef(ref);
     }
-  };
-  var onUnreadNotificationClose = function () {
-    var _ref10 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee7() {
-      return _regenerator["default"].wrap(function _callee7$(_context7) {
-        while (1) switch (_context7.prev = _context7.next) {
-          case 0:
-            _context7.next = 2;
-            return markRead();
-          case 2:
-            setIsUnreadNotificationOpen(false);
-          case 3:
-          case "end":
-            return _context7.stop();
-        }
-      }, _callee7);
-    }));
-    return function onUnreadNotificationClose() {
-      return _ref10.apply(this, arguments);
-    };
-  }();
+  });
+  var onUnreadNotificationClose = (0, _hooks.useStableCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee7() {
+    return _regenerator["default"].wrap(function _callee7$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          _context7.next = 2;
+          return markRead();
+        case 2:
+          setIsUnreadNotificationOpen(false);
+        case 3:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee7);
+  })));
   var debugRef = (0, _DebugContext.useDebugContext)();
   var isDebugModeEnabled = __DEV__ && debugRef && debugRef.current;
   if (isDebugModeEnabled) {
@@ -847,6 +832,12 @@ var MessageListWithContext = function MessageListWithContext(props) {
       rest = (0, _objectWithoutProperties2["default"])(additionalFlatListProps, _excluded);
     additionalFlatListPropsExcludingStyle = rest;
   }
+  var flatListStyle = (0, _react.useMemo)(function () {
+    return [styles.listContainer, listContainer, additionalFlatListProps == null ? void 0 : additionalFlatListProps.style, shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined];
+  }, [additionalFlatListProps == null ? void 0 : additionalFlatListProps.style, listContainer, shouldApplyAndroidWorkaround]);
+  var flatListContentContainerStyle = (0, _react.useMemo)(function () {
+    return [styles.contentContainer, additionalFlatListProps == null ? void 0 : additionalFlatListProps.contentContainerStyle, contentContainer];
+  }, [additionalFlatListProps == null ? void 0 : additionalFlatListProps.contentContainerStyle, contentContainer]);
   if (!FlatList) {
     return null;
   }
@@ -874,7 +865,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
         listType: "message"
       }) : null
     }) : (0, _jsxRuntime.jsx)(FlatList, Object.assign({
-      contentContainerStyle: [styles.contentContainer, additionalFlatListProps == null ? void 0 : additionalFlatListProps.contentContainerStyle, contentContainer],
+      contentContainerStyle: flatListContentContainerStyle,
       data: processedMessageList,
       extraData: disabled,
       inverted: shouldApplyAndroidWorkaround ? false : inverted,
@@ -883,10 +874,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       keyExtractor: keyExtractor,
       ListFooterComponent: ListFooterComponent,
       ListHeaderComponent: ListHeaderComponent,
-      maintainVisibleContentPosition: {
-        autoscrollToTopThreshold: autoscrollToRecent ? 10 : undefined,
-        minIndexForVisible: 1
-      },
+      maintainVisibleContentPosition: maintainVisibleContentPosition,
       maxToRenderPerBatch: 30,
       onMomentumScrollEnd: onUserScrollEvent,
       onScroll: handleScroll,
@@ -899,7 +887,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       renderItem: renderItem,
       scrollEnabled: overlay === 'none',
       showsVerticalScrollIndicator: !shouldApplyAndroidWorkaround,
-      style: [styles.listContainer, listContainer, additionalFlatListProps == null ? void 0 : additionalFlatListProps.style, shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined],
+      style: flatListStyle,
       testID: "message-flat-list",
       viewabilityConfig: flatListViewabilityConfig
     }, additionalFlatListPropsExcludingStyle)), (0, _jsxRuntime.jsx)(_reactNative.View, {