stream-chat-react-native-core 5.39.5 → 5.40.0-rc.2

package/src/components/Channel/Channel.tsx

@@ -80,7 +80,12 @@ import {
   ThumbsUpReaction,
   WutReaction,
 } from '../../icons';
-import { FlatList as FlatListDefault, isImagePickerAvailable, pickDocument } from '../../native';
+import {
+  FlatList as FlatListDefault,
+  isAudioRecorderAvailable,
+  isDocumentPickerAvailable,
+  isImagePickerAvailable,
+} from '../../native';
 import * as dbApi from '../../store/apis';
 import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 import { addReactionToLocalState } from '../../utils/addReactionToLocalState';
@@ -134,7 +139,8 @@ import { MessageRepliesAvatars as MessageRepliesAvatarsDefault } from '../Messag
 import { MessageSimple as MessageSimpleDefault } from '../Message/MessageSimple/MessageSimple';
 import { MessageStatus as MessageStatusDefault } from '../Message/MessageSimple/MessageStatus';
 import { MessageTimestamp as MessageTimestampDefault } from '../Message/MessageSimple/MessageTimestamp';
-import { ReactionList as ReactionListDefault } from '../Message/MessageSimple/ReactionList';
+import { ReactionListBottom as ReactionListBottomDefault } from '../Message/MessageSimple/ReactionList/ReactionListBottom';
+import { ReactionListTop as ReactionListTopDefault } from '../Message/MessageSimple/ReactionList/ReactionListTop';
 import { AttachButton as AttachButtonDefault } from '../MessageInput/AttachButton';
 import { CommandsButton as CommandsButtonDefault } from '../MessageInput/CommandsButton';
 import { AudioRecorder as AudioRecorderDefault } from '../MessageInput/components/AudioRecorder/AudioRecorder';
@@ -166,7 +172,13 @@ import { ScrollToBottomButton as ScrollToBottomButtonDefault } from '../MessageL
 import { StickyHeader as StickyHeaderDefault } from '../MessageList/StickyHeader';
 import { TypingIndicator as TypingIndicatorDefault } from '../MessageList/TypingIndicator';
 import { TypingIndicatorContainer as TypingIndicatorContainerDefault } from '../MessageList/TypingIndicatorContainer';
-import { OverlayReactionList as OverlayReactionListDefault } from '../MessageOverlay/OverlayReactionList';
+import { MessageActionList as MessageActionListDefault } from '../MessageMenu/MessageActionList';
+import { MessageActionListItem as MessageActionListItemDefault } from '../MessageMenu/MessageActionListItem';
+import { MessageMenu as MessageMenuDefault } from '../MessageMenu/MessageMenu';
+import { MessageReactionPicker as MessageReactionPickerDefault } from '../MessageMenu/MessageReactionPicker';
+import { MessageUserReactions as MessageUserReactionsDefault } from '../MessageMenu/MessageUserReactions';
+import { MessageUserReactionsAvatar as MessageUserReactionsAvatarDefault } from '../MessageMenu/MessageUserReactionsAvatar';
+import { MessageUserReactionsItem as MessageUserReactionsItemDefault } from '../MessageMenu/MessageUserReactionsItem';
 import { Reply as ReplyDefault } from '../Reply/Reply';
 
 const styles = StyleSheet.create({
@@ -255,7 +267,7 @@ export type ChannelPropsWithContext<
   Partial<
     Pick<
       MessagesContextValue<StreamChatGenerics>,
-      | 'additionalTouchableProps'
+      | 'additionalPressableProps'
       | 'Attachment'
       | 'AttachmentActions'
       | 'AudioAttachment'
@@ -277,7 +289,6 @@ export type ChannelPropsWithContext<
       | 'Giphy'
       | 'giphyVersion'
       | 'handleBan'
-      | 'handleBlock'
       | 'handleCopy'
       | 'handleDelete'
       | 'handleEdit'
@@ -296,6 +307,8 @@ export type ChannelPropsWithContext<
       | 'ImageLoadingIndicator'
       | 'markdownRules'
       | 'Message'
+      | 'MessageActionList'
+      | 'MessageActionListItem'
       | 'messageActions'
       | 'MessageAvatar'
       | 'MessageBounce'
@@ -307,6 +320,7 @@ export type ChannelPropsWithContext<
       | 'MessageFooter'
       | 'MessageHeader'
       | 'MessageList'
+      | 'MessageMenu'
       | 'MessagePinnedHeader'
       | 'MessageReplies'
       | 'MessageRepliesAvatars'
@@ -314,13 +328,19 @@ export type ChannelPropsWithContext<
       | 'MessageStatus'
       | 'MessageSystem'
       | 'MessageText'
+      | 'messageTextNumberOfLines'
       | 'MessageTimestamp'
+      | 'MessageUserReactions'
       | 'myMessageTheme'
       | 'onLongPressMessage'
       | 'onPressInMessage'
       | 'onPressMessage'
-      | 'OverlayReactionList'
-      | 'ReactionList'
+      | 'MessageReactionPicker'
+      | 'MessageUserReactionsAvatar'
+      | 'MessageUserReactionsItem'
+      | 'ReactionListBottom'
+      | 'reactionListPosition'
+      | 'ReactionListTop'
       | 'Reply'
       | 'shouldShowUnreadUnderlay'
       | 'ScrollToBottomButton'
@@ -426,8 +446,8 @@ const ChannelWithContext = <
 ) => {
   const {
     additionalKeyboardAvoidingViewProps,
+    additionalPressableProps,
     additionalTextInputProps,
-    additionalTouchableProps,
     allowThreadMessagesInChannel = true,
     asyncMessagesLockDistance = 50,
     asyncMessagesMinimumPressDuration = 500,
@@ -439,7 +459,7 @@ const ChannelWithContext = <
     AudioAttachment = AudioAttachmentDefault,
     AudioAttachmentUploadPreview = AudioAttachmentDefault,
     AudioRecorder = AudioRecorderDefault,
-    audioRecordingEnabled = false,
+    audioRecordingEnabled = isAudioRecorderAvailable(),
     AudioRecordingInProgress = AudioRecordingInProgressDefault,
     AudioRecordingLockIndicator = AudioRecordingLockIndicatorDefault,
     AudioRecordingPreview = AudioRecordingPreviewDefault,
@@ -488,7 +508,6 @@ const ChannelWithContext = <
     giphyVersion = 'fixed_height',
     handleAttachButtonPress,
     handleBan,
-    handleBlock,
     handleCopy,
     handleDelete,
     handleEdit,
@@ -502,7 +521,7 @@ const ChannelWithContext = <
     hasCameraPicker = isImagePickerAvailable(),
     hasCommands = true,
     // If pickDocument isn't available, default to hiding the file picker
-    hasFilePicker = pickDocument !== null,
+    hasFilePicker = isDocumentPickerAvailable(),
     hasImagePicker = true,
     hideDateSeparators = false,
     hideStickyDateHeader = false,
@@ -535,6 +554,8 @@ const ChannelWithContext = <
     mentionAllAppUsersEnabled = false,
     mentionAllAppUsersQuery,
     Message = MessageDefault,
+    MessageActionList = MessageActionListDefault,
+    MessageActionListItem = MessageActionListItemDefault,
     messageActions,
     MessageAvatar = MessageAvatarDefault,
     MessageBounce = MessageBounceDefault,
@@ -547,7 +568,9 @@ const ChannelWithContext = <
     MessageHeader,
     messageId,
     MessageList = MessageListDefault,
+    MessageMenu = MessageMenuDefault,
     MessagePinnedHeader = MessagePinnedHeaderDefault,
+    MessageReactionPicker = MessageReactionPickerDefault,
     MessageReplies = MessageRepliesDefault,
     MessageRepliesAvatars = MessageRepliesAvatarsDefault,
     messages,
@@ -555,7 +578,11 @@ const ChannelWithContext = <
     MessageStatus = MessageStatusDefault,
     MessageSystem = MessageSystemDefault,
     MessageText,
+    messageTextNumberOfLines = 5,
     MessageTimestamp = MessageTimestampDefault,
+    MessageUserReactions = MessageUserReactionsDefault,
+    MessageUserReactionsAvatar = MessageUserReactionsAvatarDefault,
+    MessageUserReactionsItem = MessageUserReactionsItemDefault,
     MoreOptionsButton = MoreOptionsButtonDefault,
     myMessageTheme,
     NetworkDownIndicator = NetworkDownIndicatorDefault,
@@ -565,9 +592,10 @@ const ChannelWithContext = <
     onLongPressMessage,
     onPressInMessage,
     onPressMessage,
-    OverlayReactionList = OverlayReactionListDefault,
     overrideOwnCapabilities,
-    ReactionList = ReactionListDefault,
+    ReactionListBottom = ReactionListBottomDefault,
+    reactionListPosition = 'top',
+    ReactionListTop = ReactionListTopDefault,
     read,
     Reply = ReplyDefault,
     ScrollToBottomButton = ScrollToBottomButtonDefault,
@@ -621,8 +649,8 @@ const ChannelWithContext = <
   const [loadingMore, setLoadingMore] = useState(false);
 
   const [loadingMoreRecent, setLoadingMoreRecent] = useState(false);
-  const [quotedMessage, setQuotedMessage] = useState<boolean | MessageType<StreamChatGenerics>>(
-    false,
+  const [quotedMessage, setQuotedMessage] = useState<MessageType<StreamChatGenerics> | undefined>(
+    undefined,
   );
   const [thread, setThread] = useState<MessageType<StreamChatGenerics> | null>(threadProps || null);
   const [threadHasMore, setThreadHasMore] = useState(true);
@@ -1086,28 +1114,6 @@ const ChannelWithContext = <
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [targetedMessage]);
 
-  /**
-   * @deprecated use loadChannelAroundMessage instead
-   *
-   * Loads channel at specific message
-   *
-   * @param messageId If undefined, channel will be loaded at most recent message.
-   * @param before Number of message to query before messageId
-   * @param after Number of message to query after messageId
-   */
-  const loadChannelAtMessage: ChannelContextValue<StreamChatGenerics>['loadChannelAtMessage'] = ({
-    after = 2,
-    before = 30,
-    messageId,
-  }) =>
-    channelQueryCallRef.current(async () => {
-      await queryAtMessage({ after, before, messageId });
-
-      if (messageId) {
-        setTargetedMessage(messageId);
-      }
-    });
-
   /**
    * Utility method to mark that current set if latest into two.
    * With an empty latest set
@@ -1403,95 +1409,6 @@ const ChannelWithContext = <
       setHasNoMoreRecentMessagesToLoad(true);
     });
 
-  /**
-   * @deprecated
-   * Makes a query to load messages at particular message id.
-   *
-   * @param messageId Targeted message id
-   * @param before Number of messages to load before messageId
-   * @param after Number of messages to load after messageId
-   */
-  const queryAtMessage = async ({
-    after = 10,
-    before = 10,
-    messageId,
-  }: Parameters<ChannelContextValue<StreamChatGenerics>['loadChannelAtMessage']>[0]) => {
-    if (!channel) return;
-    channel.state.setIsUpToDate(false);
-    hasOverlappingRecentMessagesRef.current = false;
-    clearInterval(mergeSetsIntervalRef.current);
-    channel.state.clearMessages();
-    setMessages([]);
-    if (!messageId) {
-      await channel.query({
-        messages: {
-          limit: before,
-        },
-        watch: true,
-      });
-
-      channel.state.setIsUpToDate(true);
-      return;
-    }
-
-    await queryBeforeMessage(messageId, before);
-    await queryAfterMessage(messageId, after);
-  };
-
-  /**
-   * @deprecated
-   * Makes a query to load messages before particular message id.
-   *
-   * @param messageId Targeted message id
-   * @param limit Number of messages to load
-   */
-  const queryBeforeMessage = async (messageId: string, limit = 5) => {
-    if (!channel) return;
-
-    await channel.query({
-      messages: {
-        id_lt: messageId,
-        limit,
-      },
-      watch: true,
-    });
-
-    channel.state.setIsUpToDate(false);
-  };
-
-  /**
-   * @deprecated
-   * Makes a query to load messages later than particular message id.
-   *
-   * @param messageId Targeted message id
-   * @param limit Number of messages to load.
-   */
-  const queryAfterMessage = async (messageId: string, limit = 5) => {
-    if (!channel) return;
-    const state = await channel.query({
-      messages: {
-        id_gte: messageId,
-        limit,
-      },
-      watch: true,
-    });
-
-    if (state.messages.length < limit) {
-      // make current set as the latest
-      const currentSet = channel.state.messageSets.find((set) => set.isCurrent);
-      if (currentSet && !currentSet.isLatest) {
-        channel.state.messageSets = channel.state.messageSets.filter((set) => !set.isLatest);
-        currentSet.isLatest = true;
-      }
-      channel.state.setIsUpToDate(true);
-      setHasNoMoreRecentMessagesToLoad(true);
-    } else {
-      splitLatestCurrentMessageSetRef.current();
-      channel.state.setIsUpToDate(false);
-      setHasNoMoreRecentMessagesToLoad(false);
-    }
-  };
-
   // In case the channel is disconnected which may happen when channel is deleted,
   // underlying js client throws an error. Following function ensures that Channel component
   // won't result in error in such a case.
@@ -1974,7 +1891,7 @@ const ChannelWithContext = <
     () => setEditing(undefined);
 
   const clearQuotedMessageState: InputMessageInputContextValue<StreamChatGenerics>['clearQuotedMessageState'] =
-    () => setQuotedMessage(false);
+    () => setQuotedMessage(undefined);
 
   /**
    * Removes the message from local state
@@ -2230,7 +2147,6 @@ const ChannelWithContext = <
     isOwner,
     lastRead,
     loadChannelAroundMessage,
-    loadChannelAtMessage,
     loading,
     LoadingIndicator,
     markRead,
@@ -2335,7 +2251,7 @@ const ChannelWithContext = <
   });
 
   const messagesContext = useCreateMessagesContext({
-    additionalTouchableProps,
+    additionalPressableProps,
     Attachment,
     AttachmentActions,
     AudioAttachment,
@@ -2361,7 +2277,6 @@ const ChannelWithContext = <
     Giphy,
     giphyVersion,
     handleBan,
-    handleBlock,
     handleCopy,
     handleDelete,
     handleEdit,
@@ -2381,6 +2296,8 @@ const ChannelWithContext = <
     legacyImageViewerSwipeBehaviour,
     markdownRules,
     Message,
+    MessageActionList,
+    MessageActionListItem,
     messageActions,
     MessageAvatar,
     MessageBounce,
@@ -2392,20 +2309,27 @@ const ChannelWithContext = <
     MessageFooter,
     MessageHeader,
     MessageList,
+    MessageMenu,
     MessagePinnedHeader,
+    MessageReactionPicker,
     MessageReplies,
     MessageRepliesAvatars,
     MessageSimple,
     MessageStatus,
     MessageSystem,
     MessageText,
+    messageTextNumberOfLines,
     MessageTimestamp,
+    MessageUserReactions,
+    MessageUserReactionsAvatar,
+    MessageUserReactionsItem,
     myMessageTheme,
     onLongPressMessage,
     onPressInMessage,
     onPressMessage,
-    OverlayReactionList,
-    ReactionList,
+    ReactionListBottom,
+    reactionListPosition,
+    ReactionListTop,
     removeMessage,
     Reply,
     retrySendMessage,