stream-chat-react-native-core 8.5.2-beta.2 → 8.6.0-beta.1

package/lib/commonjs/components/MessageList/MessageFlashList.js

@@ -0,0 +1,872 @@
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageFlashList = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _useMessageList2 = require("./hooks/useMessageList");
+var _useShouldScrollToRecentOnNewOwnMessage = require("./hooks/useShouldScrollToRecentOnNewOwnMessage");
+var _InlineLoadingMoreIndicator = require("./InlineLoadingMoreIndicator");
+var _InlineLoadingMoreRecentIndicator = require("./InlineLoadingMoreRecentIndicator");
+var _InlineLoadingMoreRecentThreadIndicator = require("./InlineLoadingMoreRecentThreadIndicator");
+var _getLastReceivedMessageFlashList = require("./utils/getLastReceivedMessageFlashList");
+var _AttachmentPickerContext = require("../../contexts/attachmentPickerContext/AttachmentPickerContext");
+var _ChannelContext = require("../../contexts/channelContext/ChannelContext");
+var _ChatContext = require("../../contexts/chatContext/ChatContext");
+var _ImageGalleryContext = require("../../contexts/imageGalleryContext/ImageGalleryContext");
+var _MessagesContext = require("../../contexts/messagesContext/MessagesContext");
+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", "style"];
+var _this = this,
+  _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageList/MessageFlashList.tsx";
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var FlashList;
+try {
+  FlashList = require('@shopify/flash-list').FlashList;
+} catch (_unused) {
+  FlashList = undefined;
+}
+var keyExtractor = function keyExtractor(item) {
+  if (item.id) {
+    return item.id;
+  }
+  if (item.created_at) {
+    return typeof item.created_at === 'string' ? item.created_at : item.created_at.toISOString();
+  }
+  return Date.now().toString();
+};
+var flatListViewabilityConfig = {
+  viewAreaCoveragePercentThreshold: 1
+};
+var hasReadLastMessage = function hasReadLastMessage(channel, userId) {
+  var _channel$state$latest, _channel$state$read$u;
+  var latestMessageIdInChannel = (_channel$state$latest = channel.state.latestMessages[channel.state.latestMessages.length - 1]) == null ? void 0 : _channel$state$latest.id;
+  var lastReadMessageIdServer = (_channel$state$read$u = channel.state.read[userId]) == null ? void 0 : _channel$state$read$u.last_read_message_id;
+  return latestMessageIdInChannel === lastReadMessageIdServer;
+};
+var getPreviousLastMessage = function getPreviousLastMessage(messages, newMessage) {
+  if (!newMessage) return;
+  var previousLastMessage;
+  for (var i = messages.length - 1; i >= 0; i--) {
+    var msg = messages[i];
+    if (!(msg != null && msg.id)) break;
+    if (msg.id !== newMessage.id) {
+      previousLastMessage = msg;
+      break;
+    }
+  }
+  return previousLastMessage;
+};
+var WAIT_FOR_SCROLL_TIMEOUT = 0;
+var getItemTypeInternal = function getItemTypeInternal(message) {
+  if (message.type === 'regular') {
+    var _message$attachments$, _message$attachments;
+    if (((_message$attachments$ = (_message$attachments = message.attachments) == null ? void 0 : _message$attachments.length) != null ? _message$attachments$ : 0) > 0) {
+      return 'message-with-attachments';
+    }
+    if (message.poll_id) {
+      return 'message-with-poll';
+    }
+    if (message.quoted_message_id) {
+      return 'message-with-quote';
+    }
+    if (message.shared_location) {
+      return 'message-with-shared-location';
+    }
+    if (message.text) {
+      return 'message-with-text';
+    }
+    return 'message-with-nothing';
+  }
+  if (message.type === 'deleted') {
+    return 'deleted-message';
+  }
+  if (message.type === 'system') {
+    return 'system-message';
+  }
+  return 'generic-message';
+};
+var MessageFlashListWithContext = function MessageFlashListWithContext(props) {
+  var _client$user4;
+  var LoadingMoreRecentIndicator = props.threadList ? _InlineLoadingMoreRecentThreadIndicator.InlineLoadingMoreRecentThreadIndicator : _InlineLoadingMoreRecentIndicator.InlineLoadingMoreRecentIndicator;
+  var additionalFlashListProps = props.additionalFlashListProps,
+    channel = props.channel,
+    channelUnreadState = props.channelUnreadState,
+    client = props.client,
+    closePicker = props.closePicker,
+    DateHeader = props.DateHeader,
+    disabled = props.disabled,
+    disableTypingIndicator = props.disableTypingIndicator,
+    EmptyStateIndicator = props.EmptyStateIndicator,
+    _props$FooterComponen = props.FooterComponent,
+    FooterComponent = _props$FooterComponen === void 0 ? LoadingMoreRecentIndicator : _props$FooterComponen,
+    _props$HeaderComponen = props.HeaderComponent,
+    HeaderComponent = _props$HeaderComponen === void 0 ? _InlineLoadingMoreIndicator.InlineLoadingMoreIndicator : _props$HeaderComponen,
+    hideStickyDateHeader = props.hideStickyDateHeader,
+    highlightedMessageId = props.highlightedMessageId,
+    InlineDateSeparator = props.InlineDateSeparator,
+    InlineUnreadIndicator = props.InlineUnreadIndicator,
+    _props$isListActive = props.isListActive,
+    isListActive = _props$isListActive === void 0 ? false : _props$isListActive,
+    legacyImageViewerSwipeBehaviour = props.legacyImageViewerSwipeBehaviour,
+    loadChannelAroundMessage = props.loadChannelAroundMessage,
+    loading = props.loading,
+    LoadingIndicator = props.LoadingIndicator,
+    loadMore = props.loadMore,
+    loadMoreRecent = props.loadMoreRecent,
+    loadMoreRecentThread = props.loadMoreRecentThread,
+    loadMoreThread = props.loadMoreThread,
+    markRead = props.markRead,
+    Message = props.Message,
+    MessageSystem = props.MessageSystem,
+    myMessageTheme = props.myMessageTheme,
+    NetworkDownIndicator = props.NetworkDownIndicator,
+    noGroupByUser = props.noGroupByUser,
+    onListScroll = props.onListScroll,
+    onThreadSelect = props.onThreadSelect,
+    reloadChannel = props.reloadChannel,
+    ScrollToBottomButton = props.ScrollToBottomButton,
+    selectedPicker = props.selectedPicker,
+    setChannelUnreadState = props.setChannelUnreadState,
+    setFlatListRef = props.setFlatListRef,
+    setMessages = props.setMessages,
+    setSelectedPicker = props.setSelectedPicker,
+    setTargetedMessage = props.setTargetedMessage,
+    shouldShowUnreadUnderlay = props.shouldShowUnreadUnderlay,
+    StickyHeader = props.StickyHeader,
+    targetedMessage = props.targetedMessage,
+    thread = props.thread,
+    threadInstance = props.threadInstance,
+    _props$threadList = props.threadList,
+    threadList = _props$threadList === void 0 ? false : _props$threadList,
+    TypingIndicator = props.TypingIndicator,
+    TypingIndicatorContainer = props.TypingIndicatorContainer,
+    UnreadMessagesNotification = props.UnreadMessagesNotification;
+  var flashListRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hasMoved = _useState2[0],
+    setHasMoved = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    scrollToBottomButtonVisible = _useState4[0],
+    setScrollToBottomButtonVisible = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isUnreadNotificationOpen = _useState6[0],
+    setIsUnreadNotificationOpen = _useState6[1];
+  var _useState7 = (0, _react.useState)(),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    stickyHeaderDate = _useState8[0],
+    setStickyHeaderDate = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    autoScrollToRecent = _useState10[0],
+    setAutoScrollToRecent = _useState10[1];
+  var stickyHeaderDateRef = (0, _react.useRef)(undefined);
+  var onStartReachedTracker = (0, _react.useRef)({});
+  var onEndReachedTracker = (0, _react.useRef)({});
+  var onStartReachedInPromise = (0, _react.useRef)(null);
+  var onEndReachedInPromise = (0, _react.useRef)(null);
+  var scrollToDebounceTimeoutRef = (0, _react.useRef)(undefined);
+  var channelResyncScrollSet = (0, _react.useRef)(true);
+  var _useTheme = (0, _ThemeContext.useTheme)(),
+    theme = _useTheme.theme;
+  var white_snow = theme.colors.white_snow,
+    _theme$messageList = theme.messageList,
+    container = _theme$messageList.container,
+    contentContainer = _theme$messageList.contentContainer,
+    listContainer = _theme$messageList.listContainer;
+  var myMessageThemeString = (0, _react.useMemo)(function () {
+    return JSON.stringify(myMessageTheme);
+  }, [myMessageTheme]);
+  var modifiedTheme = (0, _react.useMemo)(function () {
+    return (0, _ThemeContext.mergeThemes)({
+      style: myMessageTheme,
+      theme: theme
+    });
+  }, [myMessageThemeString, theme]);
+  var _useMessageList = (0, _useMessageList2.useMessageList)({
+      isFlashList: true,
+      noGroupByUser: noGroupByUser,
+      threadList: threadList
+    }),
+    dateSeparatorsRef = _useMessageList.dateSeparatorsRef,
+    messageGroupStylesRef = _useMessageList.messageGroupStylesRef,
+    processedMessageList = _useMessageList.processedMessageList,
+    rawMessageList = _useMessageList.rawMessageList;
+  var topMessageBeforeUpdate = (0, _react.useRef)(undefined);
+  var topMessageAfterUpdate = rawMessageList[0];
+  var latestNonCurrentMessageBeforeUpdateRef = (0, _react.useRef)(undefined);
+  var messageListLengthBeforeUpdate = (0, _react.useRef)(0);
+  var messageListLengthAfterUpdate = processedMessageList.length;
+  var shouldScrollToRecentOnNewOwnMessageRef = (0, _useShouldScrollToRecentOnNewOwnMessage.useShouldScrollToRecentOnNewOwnMessage)(rawMessageList, client.userID);
+  var lastReceivedId = (0, _react.useMemo)(function () {
+    var _getLastReceivedMessa;
+    return (_getLastReceivedMessa = (0, _getLastReceivedMessageFlashList.getLastReceivedMessageFlashList)(processedMessageList)) == null ? void 0 : _getLastReceivedMessa.id;
+  }, [processedMessageList]);
+  var maintainVisibleContentPosition = (0, _react.useMemo)(function () {
+    return {
+      animateAutoscrollToBottom: true,
+      autoscrollToBottomThreshold: autoScrollToRecent || threadList ? 10 : undefined,
+      startRenderingFromBottom: true
+    };
+  }, [autoScrollToRecent, threadList]);
+  (0, _react.useEffect)(function () {
+    if (disabled) {
+      setScrollToBottomButtonVisible(false);
+    }
+  }, [disabled]);
+  (0, _react.useEffect)(function () {
+    if (!targetedMessage) {
+      return;
+    }
+    var indexOfParentInMessageList = processedMessageList.findIndex(function (message) {
+      return (message == null ? void 0 : message.id) === targetedMessage;
+    });
+    if (indexOfParentInMessageList === -1) {
+      loadChannelAroundMessage({
+        messageId: targetedMessage,
+        setTargetedMessage: setTargetedMessage
+      });
+    } else {
+      scrollToDebounceTimeoutRef.current = setTimeout(function () {
+        var _flashListRef$current;
+        clearTimeout(scrollToDebounceTimeoutRef.current);
+        (_flashListRef$current = flashListRef.current) == null || _flashListRef$current.scrollToIndex({
+          animated: true,
+          index: indexOfParentInMessageList,
+          viewPosition: 0.5
+        });
+        setTargetedMessage(undefined);
+      }, WAIT_FOR_SCROLL_TIMEOUT);
+    }
+  }, [loadChannelAroundMessage, processedMessageList, setTargetedMessage, targetedMessage]);
+  var goToMessage = (0, _hooks.useStableCallback)(function () {
+    var _ref = (0, _asyncToGenerator2.default)(function* (messageId) {
+      var indexOfParentInMessageList = processedMessageList.findIndex(function (message) {
+        return (message == null ? void 0 : message.id) === messageId;
+      });
+      if (indexOfParentInMessageList !== -1) {
+        var _flashListRef$current2;
+        (_flashListRef$current2 = flashListRef.current) == null || _flashListRef$current2.scrollToIndex({
+          animated: true,
+          index: indexOfParentInMessageList,
+          viewPosition: 0.5
+        });
+        setTargetedMessage(messageId);
+        return;
+      }
+      try {
+        if (indexOfParentInMessageList === -1) {
+          var _flashListRef$current3;
+          clearTimeout(scrollToDebounceTimeoutRef.current);
+          yield loadChannelAroundMessage({
+            messageId: messageId
+          });
+          setTargetedMessage(messageId);
+          (_flashListRef$current3 = flashListRef.current) == null || _flashListRef$current3.scrollToIndex({
+            animated: true,
+            index: indexOfParentInMessageList,
+            viewPosition: 0.5
+          });
+          return;
+        }
+      } catch (e) {
+        console.warn('Error while scrolling to message', e);
+      }
+    });
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }());
+  (0, _react.useEffect)(function () {
+    var isMessageRemovedFromMessageList = messageListLengthBeforeUpdate.current - messageListLengthAfterUpdate === 1;
+    var scrollToBottomIfNeeded = function scrollToBottomIfNeeded() {
+      var _topMessageBeforeUpda;
+      if (!client || !channel || processedMessageList.length === 0) {
+        return;
+      }
+      if (isMessageRemovedFromMessageList || (_topMessageBeforeUpda = topMessageBeforeUpdate.current) != null && _topMessageBeforeUpda.created_at && topMessageAfterUpdate != null && topMessageAfterUpdate.created_at && topMessageBeforeUpdate.current.created_at < topMessageAfterUpdate.created_at) {
+        channelResyncScrollSet.current = false;
+        setScrollToBottomButtonVisible(false);
+        resetPaginationTrackersRef.current();
+        setAutoScrollToRecent(true);
+        setTimeout(function () {
+          channelResyncScrollSet.current = true;
+          if (channel.countUnread() > 0) {
+            markRead();
+          }
+          setAutoScrollToRecent(false);
+        }, WAIT_FOR_SCROLL_TIMEOUT);
+      }
+    };
+    if (isMessageRemovedFromMessageList) {
+      scrollToBottomIfNeeded();
+    }
+    messageListLengthBeforeUpdate.current = messageListLengthAfterUpdate;
+    topMessageBeforeUpdate.current = topMessageAfterUpdate;
+  }, [messageListLengthAfterUpdate, topMessageAfterUpdate == null ? void 0 : topMessageAfterUpdate.id]);
+  (0, _react.useEffect)(function () {
+    if (!processedMessageList.length) {
+      return;
+    }
+    var notLatestSet = channel.state.messages !== channel.state.latestMessages;
+    if (notLatestSet) {
+      latestNonCurrentMessageBeforeUpdateRef.current = channel.state.latestMessages[channel.state.latestMessages.length - 1];
+      setAutoScrollToRecent(false);
+      setScrollToBottomButtonVisible(true);
+      return;
+    }
+    var latestNonCurrentMessageBeforeUpdate = latestNonCurrentMessageBeforeUpdateRef.current;
+    latestNonCurrentMessageBeforeUpdateRef.current = undefined;
+    var latestCurrentMessageAfterUpdate = processedMessageList[processedMessageList.length - 1];
+    if (!latestCurrentMessageAfterUpdate) {
+      setAutoScrollToRecent(true);
+      return;
+    }
+    var didMergeMessageSetsWithNoUpdates = (latestNonCurrentMessageBeforeUpdate == null ? void 0 : latestNonCurrentMessageBeforeUpdate.id) === latestCurrentMessageAfterUpdate.id;
+    if (!didMergeMessageSetsWithNoUpdates) {
+      var shouldScrollToRecentOnNewOwnMessage = shouldScrollToRecentOnNewOwnMessageRef.current();
+      if (shouldScrollToRecentOnNewOwnMessage) {
+        var _flashListRef$current4;
+        (_flashListRef$current4 = flashListRef.current) == null || _flashListRef$current4.scrollToEnd({
+          animated: true
+        });
+      }
+    }
+  }, [channel, processedMessageList, shouldScrollToRecentOnNewOwnMessageRef, threadList]);
+  (0, _react.useEffect)(function () {
+    var handleEvent = function handleEvent(event) {
+      var _event$message;
+      if (((_event$message = event.message) == null || (_event$message = _event$message.user) == null ? void 0 : _event$message.id) !== client.userID) {
+        if (!scrollToBottomButtonVisible) {
+          var _flashListRef$current5;
+          (_flashListRef$current5 = flashListRef.current) == null || _flashListRef$current5.scrollToEnd({
+            animated: true
+          });
+        } else {
+          setAutoScrollToRecent(false);
+        }
+      }
+    };
+    var listener = channel.on('message.new', handleEvent);
+    return function () {
+      listener == null || listener.unsubscribe();
+    };
+  }, [channel, client.userID, scrollToBottomButtonVisible]);
+  (0, _react.useEffect)(function () {
+    var shouldMarkRead = function shouldMarkRead() {
+      var _client$user, _client$user2;
+      return !(channelUnreadState != null && channelUnreadState.first_unread_message_id) && !scrollToBottomButtonVisible && ((_client$user = client.user) == null ? void 0 : _client$user.id) && !hasReadLastMessage(channel, (_client$user2 = client.user) == null ? void 0 : _client$user2.id);
+    };
+    var handleEvent = function () {
+      var _ref2 = (0, _asyncToGenerator2.default)(function* (event) {
+        var _event$message2, _event$message3, _event$message4, _client$user3;
+        var mainChannelUpdated = !((_event$message2 = event.message) != null && _event$message2.parent_id) || ((_event$message3 = event.message) == null ? void 0 : _event$message3.show_in_channel);
+        var isMyOwnMessage = ((_event$message4 = event.message) == null || (_event$message4 = _event$message4.user) == null ? void 0 : _event$message4.id) === ((_client$user3 = client.user) == null ? void 0 : _client$user3.id);
+        if ((scrollToBottomButtonVisible || channelUnreadState != null && channelUnreadState.first_unread_message_id) && !isMyOwnMessage) {
+          setChannelUnreadState(function (prev) {
+            var _prev$unread_messages, _prev$last_read;
+            var previousUnreadCount = (_prev$unread_messages = prev == null ? void 0 : prev.unread_messages) != null ? _prev$unread_messages : 0;
+            var previousLastMessage = getPreviousLastMessage(channel.state.messages, event.message);
+            return Object.assign({}, prev || {}, {
+              last_read: (_prev$last_read = prev == null ? void 0 : prev.last_read) != null ? _prev$last_read : previousUnreadCount === 0 && previousLastMessage != null && previousLastMessage.created_at ? new Date(previousLastMessage.created_at) : new Date(0),
+              unread_messages: previousUnreadCount + 1
+            });
+          });
+        } else if (mainChannelUpdated && shouldMarkRead()) {
+          yield markRead();
+        }
+      });
+      return function handleEvent(_x2) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    var listener = channel.on('message.new', handleEvent);
+    return function () {
+      listener == null || listener.unsubscribe();
+    };
+  }, [channel, channelUnreadState == null ? void 0 : channelUnreadState.first_unread_message_id, (_client$user4 = client.user) == null ? void 0 : _client$user4.id, markRead, scrollToBottomButtonVisible, setChannelUnreadState, threadList]);
+  var updateStickyHeaderDateIfNeeded = (0, _hooks.useStableCallback)(function (viewableItems) {
+    var _lastItem$item, _stickyHeaderDateRef$;
+    if (!viewableItems.length) {
+      return;
+    }
+    var lastItem = viewableItems[0];
+    if (!lastItem) return;
+    if (!channel.state.messagePagination.hasPrev && processedMessageList[0].id === lastItem.item.id) {
+      setStickyHeaderDate(undefined);
+      return;
+    }
+    var isMessageTypeDeleted = lastItem.item.type === 'deleted';
+    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);
+    }
+  });
+  var updateStickyUnreadIndicator = (0, _hooks.useStableCallback)(function (viewableItems) {
+    if (!viewableItems.length) {
+      setIsUnreadNotificationOpen(false);
+      return;
+    }
+    if (selectedPicker === 'images') {
+      setIsUnreadNotificationOpen(false);
+      return;
+    }
+    var lastItem = viewableItems[0];
+    if (!lastItem) return;
+    var lastItemMessage = lastItem.item;
+    var lastItemCreatedAt = lastItemMessage.created_at;
+    var unreadIndicatorDate = channelUnreadState == null ? void 0 : channelUnreadState.last_read.getTime();
+    var lastItemDate = lastItemCreatedAt.getTime();
+    if (!channel.state.messagePagination.hasPrev && processedMessageList[0].id === lastItemMessage.id) {
+      setIsUnreadNotificationOpen(false);
+      return;
+    }
+    if (viewableItems.length === 1 && channel.countUnread() === 0 && lastItemMessage.user.id === client.userID) {
+      setIsUnreadNotificationOpen(false);
+      return;
+    }
+    if (unreadIndicatorDate && lastItemDate > unreadIndicatorDate) {
+      setIsUnreadNotificationOpen(true);
+    } else {
+      setIsUnreadNotificationOpen(false);
+    }
+  });
+  var unstableOnViewableItemsChanged = function unstableOnViewableItemsChanged(_ref3) {
+    var viewableItems = _ref3.viewableItems;
+    if (!viewableItems) {
+      return;
+    }
+    if (!hideStickyDateHeader) {
+      updateStickyHeaderDateIfNeeded(viewableItems);
+    }
+    updateStickyUnreadIndicator(viewableItems);
+  };
+  var onViewableItemsChanged = (0, _react.useRef)(unstableOnViewableItemsChanged);
+  onViewableItemsChanged.current = unstableOnViewableItemsChanged;
+  var stableOnViewableItemsChanged = (0, _react.useCallback)(function (_ref4) {
+    var viewableItems = _ref4.viewableItems;
+    onViewableItemsChanged.current({
+      viewableItems: viewableItems
+    });
+  }, []);
+  var renderItem = (0, _react.useCallback)(function (_ref5) {
+    var _message$user, _messageGroupStylesRe;
+    var index = _ref5.index,
+      message = _ref5.item;
+    if (!channel || channel.disconnected || !channel.initialized && !channel.offlineMode) {
+      return null;
+    }
+    var createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
+    var lastReadTimestamp = channelUnreadState == null ? void 0 : channelUnreadState.last_read.getTime();
+    var isNewestMessage = index === 0;
+    var isLastReadMessage = (channelUnreadState == null ? void 0 : channelUnreadState.last_read_message_id) === message.id || !(channelUnreadState != null && channelUnreadState.unread_messages) && createdAtTimestamp === lastReadTimestamp;
+    var showUnreadSeparator = isLastReadMessage && !isNewestMessage && (!!(channelUnreadState != null && channelUnreadState.first_unread_message_id) || !!(channelUnreadState != null && channelUnreadState.unread_messages));
+    var showUnreadUnderlay = !!shouldShowUnreadUnderlay && showUnreadSeparator;
+    var wrapMessageInTheme = client.userID === ((_message$user = message.user) == null ? void 0 : _message$user.id) && !!myMessageTheme;
+    var renderDateSeperator = dateSeparatorsRef.current[message.id] && (0, _jsxRuntime.jsx)(InlineDateSeparator, {
+      date: dateSeparatorsRef.current[message.id]
+    });
+    var renderMessage = (0, _jsxRuntime.jsx)(Message, {
+      goToMessage: goToMessage,
+      groupStyles: (_messageGroupStylesRe = messageGroupStylesRef.current[message.id]) != null ? _messageGroupStylesRe : [],
+      isTargetedMessage: highlightedMessageId === message.id,
+      lastReceivedId: lastReceivedId === message.id || message.quoted_message_id ? lastReceivedId : undefined,
+      message: message,
+      onThreadSelect: onThreadSelect,
+      showUnreadUnderlay: showUnreadUnderlay,
+      threadList: threadList
+    });
+    return (0, _jsxRuntime.jsxs)(_reactNative.View, {
+      testID: `message-list-item-${index}`,
+      children: [message.type === 'system' ? (0, _jsxRuntime.jsx)(MessageSystem, {
+        message: message
+      }) : wrapMessageInTheme ? (0, _jsxRuntime.jsx)(_ThemeContext.ThemeProvider, {
+        mergedStyle: modifiedTheme,
+        children: (0, _jsxRuntime.jsxs)(_reactNative.View, {
+          testID: `message-list-item-${index}`,
+          children: [renderDateSeperator, renderMessage]
+        })
+      }) : (0, _jsxRuntime.jsxs)(_reactNative.View, {
+        testID: `message-list-item-${index}`,
+        children: [renderDateSeperator, renderMessage]
+      }), showUnreadUnderlay && (0, _jsxRuntime.jsx)(InlineUnreadIndicator, {})]
+    });
+  }, [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, dateSeparatorsRef, goToMessage, highlightedMessageId, lastReceivedId, messageGroupStylesRef, modifiedTheme, myMessageTheme, onThreadSelect, shouldShowUnreadUnderlay, threadList]);
+  var messagesWithImages = legacyImageViewerSwipeBehaviour && processedMessageList.filter(function (message) {
+    var isMessageTypeDeleted = message.type === 'deleted';
+    if (!isMessageTypeDeleted && message.attachments) {
+      return message.attachments.some(function (attachment) {
+        return attachment.type === _types.FileTypes.Image && !attachment.title_link && !attachment.og_scrape_url && (attachment.image_url || attachment.thumb_url);
+      });
+    }
+    return false;
+  });
+  var imageString = legacyImageViewerSwipeBehaviour && messagesWithImages && messagesWithImages.map(function (message) {
+    var _message$attachments2;
+    return (_message$attachments2 = message.attachments) == null ? void 0 : _message$attachments2.map(function (attachment) {
+      return attachment.image_url || attachment.thumb_url || '';
+    }).join();
+  }).join();
+  var numberOfMessagesWithImages = legacyImageViewerSwipeBehaviour && messagesWithImages && messagesWithImages.length;
+  var threadExists = !!thread;
+  (0, _react.useEffect)(function () {
+    if (legacyImageViewerSwipeBehaviour && isListActive && (threadList && thread || !threadList && !thread)) {
+      setMessages(messagesWithImages);
+    }
+  }, [imageString, isListActive, legacyImageViewerSwipeBehaviour, numberOfMessagesWithImages, threadExists, threadList]);
+  var maybeCallOnStartReached = (0, _hooks.useStableCallback)((0, _asyncToGenerator2.default)(function* () {
+    if (processedMessageList != null && processedMessageList.length && onStartReachedTracker.current[processedMessageList.length]) {
+      return;
+    }
+    if (processedMessageList != null && processedMessageList.length) {
+      onStartReachedTracker.current[processedMessageList.length] = true;
+    }
+    var callback = function callback() {
+      onStartReachedInPromise.current = null;
+      return Promise.resolve();
+    };
+    var onError = function onError() {
+      setTimeout(function () {
+        onStartReachedTracker.current = {};
+      }, 2000);
+    };
+    if (onEndReachedInPromise.current) {
+      yield onEndReachedInPromise.current;
+    }
+    onStartReachedInPromise.current = (threadList && !!threadInstance && loadMoreRecentThread ? loadMoreRecentThread({}) : loadMoreRecent()).then(callback).catch(onError);
+  }));
+  var maybeCallOnEndReached = (0, _hooks.useStableCallback)((0, _asyncToGenerator2.default)(function* () {
+    if (processedMessageList != null && processedMessageList.length && onEndReachedTracker.current[processedMessageList.length]) {
+      return;
+    }
+    if (processedMessageList != null && processedMessageList.length) {
+      onEndReachedTracker.current[processedMessageList.length] = true;
+    }
+    var callback = function callback() {
+      onEndReachedInPromise.current = null;
+      return Promise.resolve();
+    };
+    var onError = function onError() {
+      setTimeout(function () {
+        onEndReachedTracker.current = {};
+      }, 2000);
+    };
+    if (onStartReachedInPromise.current) {
+      yield onStartReachedInPromise.current;
+    }
+    onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore()).then(callback).catch(onError);
+  }));
+  var onUserScrollEvent = (0, _hooks.useStableCallback)(function (event) {
+    var nativeEvent = event.nativeEvent;
+    var offset = nativeEvent.contentOffset.y;
+    var visibleLength = nativeEvent.layoutMeasurement.height;
+    var contentLength = nativeEvent.contentSize.height;
+    if (!channel || !channelResyncScrollSet.current) {
+      return;
+    }
+    var isScrollAtEnd = offset < 100;
+    var isScrollAtStart = contentLength - visibleLength - offset < 100;
+    if (isScrollAtEnd) {
+      maybeCallOnEndReached();
+    }
+    if (isScrollAtStart) {
+      maybeCallOnStartReached();
+    }
+  });
+  var resetPaginationTrackersRef = (0, _react.useRef)(function () {
+    onStartReachedTracker.current = {};
+    onEndReachedTracker.current = {};
+  });
+  var currentScrollOffsetRef = (0, _react.useRef)(0);
+  var handleScroll = (0, _hooks.useStableCallback)(function (event) {
+    var messageListHasMessages = processedMessageList.length > 0;
+    var nativeEvent = event.nativeEvent;
+    var offset = nativeEvent.contentOffset.y;
+    currentScrollOffsetRef.current = offset;
+    var visibleLength = nativeEvent.layoutMeasurement.height;
+    var contentLength = nativeEvent.contentSize.height;
+    var isScrollAtStart = contentLength - visibleLength - offset < 150;
+    var notLatestSet = channel.state.messages !== channel.state.latestMessages;
+    var showScrollToBottomButton = messageListHasMessages && (!threadList && notLatestSet || !isScrollAtStart);
+    setScrollToBottomButtonVisible(showScrollToBottomButton);
+    if (onListScroll) {
+      onListScroll(event);
+    }
+  });
+  var goToNewMessages = (0, _hooks.useStableCallback)((0, _asyncToGenerator2.default)(function* () {
+    var isNotLatestSet = channel.state.messages !== channel.state.latestMessages;
+    if (isNotLatestSet) {
+      resetPaginationTrackersRef.current();
+      yield reloadChannel();
+    } else if (flashListRef.current) {
+      flashListRef.current.scrollToEnd({
+        animated: true
+      });
+    }
+    setScrollToBottomButtonVisible(false);
+    yield markRead({
+      updateChannelUnreadState: false
+    });
+  }));
+  var dismissImagePicker = (0, _hooks.useStableCallback)(function () {
+    if (selectedPicker) {
+      setSelectedPicker(undefined);
+      closePicker();
+    }
+  });
+  var onScrollBeginDrag = (0, _hooks.useStableCallback)(function (event) {
+    !hasMoved && selectedPicker && setHasMoved(true);
+    onUserScrollEvent(event);
+  });
+  var onScrollEndDrag = (0, _hooks.useStableCallback)(function (event) {
+    hasMoved && selectedPicker && setHasMoved(false);
+    onUserScrollEvent(event);
+  });
+  var refCallback = (0, _hooks.useStableCallback)(function (ref) {
+    flashListRef.current = ref;
+    if (setFlatListRef) {
+      setFlatListRef(ref);
+    }
+  });
+  var onUnreadNotificationClose = (0, _hooks.useStableCallback)((0, _asyncToGenerator2.default)(function* () {
+    yield markRead();
+    setIsUnreadNotificationOpen(false);
+  }));
+  var additionalFlashListPropsExcludingStyle;
+  if (additionalFlashListProps) {
+    var contentContainerStyle = additionalFlashListProps.contentContainerStyle,
+      style = additionalFlashListProps.style,
+      rest = (0, _objectWithoutProperties2.default)(additionalFlashListProps, _excluded);
+    additionalFlashListPropsExcludingStyle = rest;
+  }
+  var flatListStyle = (0, _react.useMemo)(function () {
+    return Object.assign({}, styles.listContainer, listContainer, additionalFlashListProps == null ? void 0 : additionalFlashListProps.style);
+  }, [additionalFlashListProps == null ? void 0 : additionalFlashListProps.style, listContainer]);
+  var flatListContentContainerStyle = (0, _react.useMemo)(function () {
+    return Object.assign({}, styles.contentContainer, contentContainer);
+  }, [contentContainer]);
+  var getItemType = (0, _hooks.useStableCallback)(function (item) {
+    var _item$user;
+    var type = getItemTypeInternal(item);
+    return client.userID === ((_item$user = item.user) == null ? void 0 : _item$user.id) ? `own-${type}` : type;
+  });
+  var currentListHeightRef = (0, _react.useRef)(undefined);
+  var onLayout = (0, _hooks.useStableCallback)(function (e) {
+    var _flashListRef$current6;
+    var height = e.nativeEvent.layout.height;
+    if (!currentListHeightRef.current) {
+      currentListHeightRef.current = height;
+      return;
+    }
+    var changedBy = currentListHeightRef.current - height;
+    (_flashListRef$current6 = flashListRef.current) == null || _flashListRef$current6.scrollToOffset({
+      offset: currentScrollOffsetRef.current + changedBy
+    });
+    currentListHeightRef.current = height;
+  });
+  if (loading) {
+    return (0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.container, {
+        backgroundColor: white_snow
+      }, container],
+      children: (0, _jsxRuntime.jsx)(LoadingIndicator, {
+        listType: "message"
+      })
+    });
+  }
+  if (!FlashList) {
+    throw new Error('The package @shopify/flash-list is not installed. Installing this package will enable the use of the FlashList component.');
+  }
+  return (0, _jsxRuntime.jsxs)(_reactNative.View, {
+    onLayout: onLayout,
+    style: [styles.container, {
+      backgroundColor: white_snow
+    }, container],
+    testID: "message-flat-list-wrapper",
+    children: [processedMessageList.length === 0 && !thread ? (0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.flex, {
+        backgroundColor: white_snow
+      }],
+      testID: "empty-state",
+      children: EmptyStateIndicator ? (0, _jsxRuntime.jsx)(EmptyStateIndicator, {
+        listType: "message"
+      }) : null
+    }) : (0, _jsxRuntime.jsx)(FlashList, Object.assign({
+      contentContainerStyle: flatListContentContainerStyle,
+      data: processedMessageList,
+      drawDistance: 800,
+      getItemType: getItemType,
+      keyboardShouldPersistTaps: "handled",
+      keyExtractor: keyExtractor,
+      ListFooterComponent: FooterComponent,
+      ListHeaderComponent: HeaderComponent,
+      maintainVisibleContentPosition: maintainVisibleContentPosition,
+      onMomentumScrollEnd: onUserScrollEvent,
+      onScroll: handleScroll,
+      onScrollBeginDrag: onScrollBeginDrag,
+      onScrollEndDrag: onScrollEndDrag,
+      onTouchEnd: dismissImagePicker,
+      onViewableItemsChanged: stableOnViewableItemsChanged,
+      ref: refCallback,
+      renderItem: renderItem,
+      showsVerticalScrollIndicator: false,
+      style: flatListStyle,
+      testID: "message-flash-list",
+      viewabilityConfig: flatListViewabilityConfig
+    }, additionalFlashListPropsExcludingStyle)), (0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.stickyHeader,
+      children: messageListLengthAfterUpdate && StickyHeader ? (0, _jsxRuntime.jsx)(StickyHeader, {
+        date: stickyHeaderDate,
+        DateHeader: DateHeader
+      }) : null
+    }), !disableTypingIndicator && TypingIndicator && (0, _jsxRuntime.jsx)(TypingIndicatorContainer, {
+      children: (0, _jsxRuntime.jsx)(TypingIndicator, {})
+    }), (0, _jsxRuntime.jsx)(ScrollToBottomButton, {
+      onPress: goToNewMessages,
+      showNotification: scrollToBottomButtonVisible,
+      unreadCount: threadList ? 0 : channel == null ? void 0 : channel.countUnread()
+    }), (0, _jsxRuntime.jsx)(NetworkDownIndicator, {}), isUnreadNotificationOpen && !threadList ? (0, _jsxRuntime.jsx)(UnreadMessagesNotification, {
+      onCloseHandler: onUnreadNotificationClose
+    }) : null]
+  });
+};
+var MessageFlashList = exports.MessageFlashList = function MessageFlashList(props) {
+  var _useAttachmentPickerC = (0, _AttachmentPickerContext.useAttachmentPickerContext)(),
+    closePicker = _useAttachmentPickerC.closePicker,
+    selectedPicker = _useAttachmentPickerC.selectedPicker,
+    setSelectedPicker = _useAttachmentPickerC.setSelectedPicker;
+  var _useChannelContext = (0, _ChannelContext.useChannelContext)(),
+    channel = _useChannelContext.channel,
+    channelUnreadState = _useChannelContext.channelUnreadState,
+    disabled = _useChannelContext.disabled,
+    EmptyStateIndicator = _useChannelContext.EmptyStateIndicator,
+    enableMessageGroupingByUser = _useChannelContext.enableMessageGroupingByUser,
+    error = _useChannelContext.error,
+    hideStickyDateHeader = _useChannelContext.hideStickyDateHeader,
+    highlightedMessageId = _useChannelContext.highlightedMessageId,
+    isChannelActive = _useChannelContext.isChannelActive,
+    loadChannelAroundMessage = _useChannelContext.loadChannelAroundMessage,
+    loading = _useChannelContext.loading,
+    LoadingIndicator = _useChannelContext.LoadingIndicator,
+    markRead = _useChannelContext.markRead,
+    NetworkDownIndicator = _useChannelContext.NetworkDownIndicator,
+    reloadChannel = _useChannelContext.reloadChannel,
+    scrollToFirstUnreadThreshold = _useChannelContext.scrollToFirstUnreadThreshold,
+    setChannelUnreadState = _useChannelContext.setChannelUnreadState,
+    setTargetedMessage = _useChannelContext.setTargetedMessage,
+    StickyHeader = _useChannelContext.StickyHeader,
+    targetedMessage = _useChannelContext.targetedMessage,
+    threadList = _useChannelContext.threadList;
+  var _useChatContext = (0, _ChatContext.useChatContext)(),
+    client = _useChatContext.client;
+  var _useImageGalleryConte = (0, _ImageGalleryContext.useImageGalleryContext)(),
+    setMessages = _useImageGalleryConte.setMessages;
+  var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
+    DateHeader = _useMessagesContext.DateHeader,
+    disableTypingIndicator = _useMessagesContext.disableTypingIndicator,
+    FlatList = _useMessagesContext.FlatList,
+    InlineDateSeparator = _useMessagesContext.InlineDateSeparator,
+    InlineUnreadIndicator = _useMessagesContext.InlineUnreadIndicator,
+    legacyImageViewerSwipeBehaviour = _useMessagesContext.legacyImageViewerSwipeBehaviour,
+    Message = _useMessagesContext.Message,
+    MessageSystem = _useMessagesContext.MessageSystem,
+    myMessageTheme = _useMessagesContext.myMessageTheme,
+    ScrollToBottomButton = _useMessagesContext.ScrollToBottomButton,
+    shouldShowUnreadUnderlay = _useMessagesContext.shouldShowUnreadUnderlay,
+    TypingIndicator = _useMessagesContext.TypingIndicator,
+    TypingIndicatorContainer = _useMessagesContext.TypingIndicatorContainer,
+    UnreadMessagesNotification = _useMessagesContext.UnreadMessagesNotification;
+  var _usePaginatedMessageL = (0, _PaginatedMessageListContext.usePaginatedMessageListContext)(),
+    loadMore = _usePaginatedMessageL.loadMore,
+    loadMoreRecent = _usePaginatedMessageL.loadMoreRecent;
+  var _useThreadContext = (0, _ThreadContext.useThreadContext)(),
+    loadMoreRecentThread = _useThreadContext.loadMoreRecentThread,
+    loadMoreThread = _useThreadContext.loadMoreThread,
+    thread = _useThreadContext.thread,
+    threadInstance = _useThreadContext.threadInstance;
+  return (0, _jsxRuntime.jsx)(MessageFlashListWithContext, Object.assign({
+    channel: channel,
+    channelUnreadState: channelUnreadState,
+    client: client,
+    closePicker: closePicker,
+    DateHeader: DateHeader,
+    disabled: disabled,
+    disableTypingIndicator: disableTypingIndicator,
+    EmptyStateIndicator: EmptyStateIndicator,
+    enableMessageGroupingByUser: enableMessageGroupingByUser,
+    error: error,
+    FlatList: FlatList,
+    hideStickyDateHeader: hideStickyDateHeader,
+    highlightedMessageId: highlightedMessageId,
+    InlineDateSeparator: InlineDateSeparator,
+    InlineUnreadIndicator: InlineUnreadIndicator,
+    isListActive: isChannelActive,
+    legacyImageViewerSwipeBehaviour: legacyImageViewerSwipeBehaviour,
+    loadChannelAroundMessage: loadChannelAroundMessage,
+    loading: loading,
+    LoadingIndicator: LoadingIndicator,
+    loadMore: loadMore,
+    loadMoreRecent: loadMoreRecent,
+    loadMoreRecentThread: loadMoreRecentThread,
+    loadMoreThread: loadMoreThread,
+    markRead: markRead,
+    Message: Message,
+    MessageSystem: MessageSystem,
+    myMessageTheme: myMessageTheme,
+    NetworkDownIndicator: NetworkDownIndicator,
+    reloadChannel: reloadChannel,
+    ScrollToBottomButton: ScrollToBottomButton,
+    scrollToFirstUnreadThreshold: scrollToFirstUnreadThreshold,
+    selectedPicker: selectedPicker,
+    setChannelUnreadState: setChannelUnreadState,
+    setMessages: setMessages,
+    setSelectedPicker: setSelectedPicker,
+    setTargetedMessage: setTargetedMessage,
+    shouldShowUnreadUnderlay: shouldShowUnreadUnderlay,
+    StickyHeader: StickyHeader,
+    targetedMessage: targetedMessage,
+    thread: thread,
+    threadInstance: threadInstance,
+    threadList: threadList,
+    TypingIndicator: TypingIndicator,
+    TypingIndicatorContainer: TypingIndicatorContainer,
+    UnreadMessagesNotification: UnreadMessagesNotification
+  }, props, {
+    noGroupByUser: !enableMessageGroupingByUser || props.noGroupByUser
+  }));
+};
+var styles = _reactNative.StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flex: 1,
+    width: '100%'
+  },
+  contentContainer: {
+    paddingBottom: 4
+  },
+  flex: {
+    flex: 1
+  },
+  listContainer: {
+    flex: 1,
+    width: '100%'
+  },
+  stickyHeader: {
+    position: 'absolute',
+    top: 0
+  }
+});
+//# sourceMappingURL=MessageFlashList.js.map