stream-chat-react-native-core 3.10.2 → 4.0.0-beta.4

package/src/components/MessageOverlay/MessageOverlay.tsx

@@ -1,5 +1,11 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { Keyboard, Platform, SafeAreaView, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  PanGestureHandler,
+  PanGestureHandlerGestureEvent,
+  State,
+  TapGestureHandler,
+} from 'react-native-gesture-handler';
 import Animated, {
   cancelAnimation,
   Easing,
@@ -13,36 +19,26 @@ import Animated, {
   withSpring,
   withTiming,
 } from 'react-native-reanimated';
-import {
-  PanGestureHandler,
-  PanGestureHandlerGestureEvent,
-  ScrollView,
-  State,
-  TapGestureHandler,
-} from 'react-native-gesture-handler';
 
+import { MessageActionList as DefaultMessageActionList } from './MessageActionList';
 import { OverlayReactionList as OverlayReactionListDefault } from './OverlayReactionList';
+import { OverlayReactionsAvatar as OverlayReactionsAvatarDefault } from './OverlayReactionsAvatar';
 
-import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
-import { MessageActions as DefaultMessageActions } from '../MessageOverlay/MessageActions';
-import { OverlayReactions as DefaultOverlayReactions } from '../MessageOverlay/OverlayReactions';
-
+import { MessageProvider } from '../../contexts/messageContext/MessageContext';
 import {
   MessageOverlayContextValue,
   MessageOverlayData,
   useMessageOverlayContext,
 } from '../../contexts/messageOverlayContext/MessageOverlayContext';
+
 import { MessagesProvider } from '../../contexts/messagesContext/MessagesContext';
 import {
   OverlayContextValue,
+  OverlayProviderProps,
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
 import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
-import { vh, vw } from '../../utils/utils';
-
-import type { ReplyProps } from '../Reply/Reply';
 
-import { MessageProvider } from '../../contexts/messageContext/MessageContext';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -53,6 +49,10 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { vh, vw } from '../../utils/utils';
+import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
+import { OverlayReactions as DefaultOverlayReactions } from '../MessageOverlay/OverlayReactions';
+import type { ReplyProps } from '../Reply/Reply';
 
 const styles = StyleSheet.create({
   alignEnd: { alignItems: 'flex-end' },
@@ -84,6 +84,7 @@ const styles = StyleSheet.create({
 
 const screenHeight = vh(100);
 const halfScreenHeight = vh(50);
+const DefaultMessageTextNumberOfLines = 5;
 
 export type MessageOverlayPropsWithContext<
   At extends UnknownType = DefaultAttachmentType,
@@ -95,11 +96,26 @@ export type MessageOverlayPropsWithContext<
   Us extends DefaultUserType = DefaultUserType,
 > = Pick<
   MessageOverlayContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-  'MessageActions' | 'OverlayReactionList' | 'OverlayReactions' | 'reset'
+  | 'MessageActionList'
+  | 'MessageActionListItem'
+  | 'OverlayReactionList'
+  | 'OverlayReactions'
+  | 'OverlayReactionsAvatar'
+  | 'reset'
 > &
   Omit<MessageOverlayData<At, Ch, Co, Ev, Me, Re, Us>, 'supportedReactions'> &
-  Pick<OverlayContextValue, 'overlay' | 'setOverlay'> & {
-    overlayOpacity: Animated.SharedValue<number>;
+  Pick<OverlayContextValue, 'overlay' | 'setOverlay'> &
+  Pick<
+    OverlayProviderProps<At, Ch, Co, Ev, Me, Re, Us>,
+    | 'error'
+    | 'isMyMessage'
+    | 'isThreadMessage'
+    | 'message'
+    | 'messageReactions'
+    | 'messageTextNumberOfLines'
+    | 'overlayOpacity'
+  > & {
+    showScreen?: Animated.SharedValue<number>;
     visible?: boolean;
   };
 
@@ -116,6 +132,7 @@ const MessageOverlayWithContext = <
 ) => {
   const {
     alignment,
+    ownCapabilities,
     clientId,
     files,
     groupStyles,
@@ -123,9 +140,11 @@ const MessageOverlayWithContext = <
     images,
     message,
     messageActions,
-    MessageActions = DefaultMessageActions,
+    MessageActionList = DefaultMessageActionList,
+    MessageActionListItem,
     messageContext,
     messageReactionTitle,
+    messageTextNumberOfLines = DefaultMessageTextNumberOfLines,
     messagesContext,
     onlyEmojis,
     otherAttachments,
@@ -133,19 +152,32 @@ const MessageOverlayWithContext = <
     overlayOpacity,
     OverlayReactionList = OverlayReactionListDefault,
     OverlayReactions = DefaultOverlayReactions,
+    OverlayReactionsAvatar = OverlayReactionsAvatarDefault,
     reset,
     setOverlay,
     threadList,
     visible,
+    isMyMessage,
+    messageReactions,
+    error,
+    isThreadMessage,
   } = props;
 
+  const messageActionProps = {
+    error,
+    isMyMessage,
+    isThreadMessage,
+    message,
+    messageReactions,
+  };
+
   const { theme } = useTheme();
 
   const myMessageTheme = messagesContext?.myMessageTheme;
   const wrapMessageInTheme = clientId === message?.user?.id && !!myMessageTheme;
 
   const [myMessageThemeString, setMyMessageThemeString] = useState(JSON.stringify(myMessageTheme));
-  const [reactionListHeight, setReactionListHeight] = useState(0);
+  const [, setReactionListHeight] = useState(0);
 
   useEffect(() => {
     if (myMessageTheme) {
@@ -167,6 +199,7 @@ const MessageOverlayWithContext = <
         replyContainer,
       },
     },
+    overlay: { container: containerStyle, padding: overlayPadding },
   } = wrapMessageInTheme ? modifiedTheme : theme;
 
   const messageHeight = useSharedValue(0);
@@ -311,7 +344,7 @@ const MessageOverlayWithContext = <
         <ThemeProvider mergedStyle={wrapMessageInTheme ? modifiedTheme : theme}>
           <Animated.View
             pointerEvents={visible ? 'auto' : 'none'}
-            style={StyleSheet.absoluteFillObject}
+            style={[StyleSheet.absoluteFillObject, containerStyle]}
           >
             <PanGestureHandler
               enabled={overlay === 'message'}
@@ -321,206 +354,201 @@ const MessageOverlayWithContext = <
             >
               <Animated.View style={[StyleSheet.absoluteFillObject]}>
                 <SafeAreaView style={styles.flex}>
-                  <ScrollView
-                    alwaysBounceVertical={false}
-                    contentContainerStyle={[
-                      styles.center,
-                      {
-                        paddingTop: reactionListHeight,
-                      },
-                    ]}
-                    showsVerticalScrollIndicator={false}
-                    style={[styles.flex, styles.scrollView]}
+                  <TapGestureHandler
+                    maxDist={32}
+                    onHandlerStateChange={({ nativeEvent: { state } }) => {
+                      if (state === State.END) {
+                        setOverlay('none');
+                      }
+                    }}
                   >
-                    <TapGestureHandler
-                      maxDist={32}
-                      onHandlerStateChange={({ nativeEvent: { state } }) => {
-                        if (state === State.END) {
-                          setOverlay('none');
-                        }
-                      }}
-                    >
-                      <Animated.View style={[styles.flex, panStyle]}>
-                        {message && (
-                          <View
-                            style={[
-                              styles.center,
-                              styles.overlayPadding,
-                              alignment === 'left' ? styles.alignStart : styles.alignEnd,
-                            ]}
+                    <Animated.View style={[styles.flex, panStyle]}>
+                      {message && (
+                        <View
+                          style={[
+                            styles.center,
+                            styles.overlayPadding,
+                            { padding: overlayPadding },
+                            alignment === 'left' ? styles.alignStart : styles.alignEnd,
+                          ]}
+                        >
+                          {handleReaction && ownCapabilities?.sendReaction ? (
+                            <OverlayReactionList
+                              messageLayout={messageLayout}
+                              ownReactionTypes={
+                                message?.own_reactions?.map((reaction) => reaction.type) || []
+                              }
+                              setReactionListHeight={setReactionListHeight}
+                              showScreen={showScreen}
+                            />
+                          ) : null}
+                          <Animated.View
+                            onLayout={({
+                              nativeEvent: {
+                                layout: { height: layoutHeight, width: layoutWidth, x, y },
+                              },
+                            }) => {
+                              messageLayout.value = {
+                                x: alignment === 'left' ? x + layoutWidth : x,
+                                y,
+                              };
+                              messageWidth.value = layoutWidth;
+                              messageHeight.value = layoutHeight;
+                            }}
+                            style={[styles.alignEnd, styles.row, showScreenStyle]}
                           >
-                            {handleReaction ? (
-                              <OverlayReactionList
-                                messageLayout={messageLayout}
-                                ownReactionTypes={
-                                  message?.own_reactions?.map((reaction) => reaction.type) || []
-                                }
-                                setReactionListHeight={setReactionListHeight}
-                                showScreen={showScreen}
-                              />
-                            ) : null}
-                            <Animated.View
-                              onLayout={({
-                                nativeEvent: {
-                                  layout: { height: layoutHeight, width: layoutWidth, x, y },
+                            {alignment === 'left' && MessageAvatar && (
+                              <MessageAvatar {...{ alignment, message, showAvatar: true }} />
+                            )}
+                            <View
+                              style={[
+                                styles.containerInner,
+                                {
+                                  backgroundColor:
+                                    onlyEmojis && !message.quoted_message
+                                      ? transparent
+                                      : otherAttachments?.length
+                                      ? otherAttachments[0].type === 'giphy'
+                                        ? !message.quoted_message
+                                          ? transparent
+                                          : grey_gainsboro
+                                        : blue_alice
+                                      : alignment === 'left'
+                                      ? white_smoke
+                                      : grey_gainsboro,
+                                  borderBottomLeftRadius:
+                                    (groupStyle === 'left_bottom' ||
+                                      groupStyle === 'left_single') &&
+                                    (!hasThreadReplies || threadList)
+                                      ? borderRadiusS
+                                      : borderRadiusL,
+                                  borderBottomRightRadius:
+                                    (groupStyle === 'right_bottom' ||
+                                      groupStyle === 'right_single') &&
+                                    (!hasThreadReplies || threadList)
+                                      ? borderRadiusS
+                                      : borderRadiusL,
+                                  borderColor: grey_whisper,
                                 },
-                              }) => {
-                                messageLayout.value = {
-                                  x: alignment === 'left' ? x + layoutWidth : x,
-                                  y,
-                                };
-                                messageWidth.value = layoutWidth;
-                                messageHeight.value = layoutHeight;
-                              }}
-                              style={[styles.alignEnd, styles.row, showScreenStyle]}
+                                (onlyEmojis && !message.quoted_message) || otherAttachments?.length
+                                  ? { borderWidth: 0 }
+                                  : {},
+                                containerInner,
+                              ]}
                             >
-                              {alignment === 'left' && MessageAvatar && (
-                                <MessageAvatar {...{ alignment, message, showAvatar: true }} />
-                              )}
-                              <View
-                                style={[
-                                  styles.containerInner,
-                                  {
-                                    backgroundColor:
-                                      onlyEmojis && !message.quoted_message
-                                        ? transparent
-                                        : otherAttachments?.length
-                                        ? otherAttachments[0].type === 'giphy'
-                                          ? !message.quoted_message
-                                            ? transparent
-                                            : grey_gainsboro
-                                          : blue_alice
-                                        : alignment === 'left'
-                                        ? white_smoke
-                                        : grey_gainsboro,
-                                    borderBottomLeftRadius:
-                                      (groupStyle === 'left_bottom' ||
-                                        groupStyle === 'left_single') &&
-                                      (!hasThreadReplies || threadList)
-                                        ? borderRadiusS
-                                        : borderRadiusL,
-                                    borderBottomRightRadius:
-                                      (groupStyle === 'right_bottom' ||
-                                        groupStyle === 'right_single') &&
-                                      (!hasThreadReplies || threadList)
-                                        ? borderRadiusS
-                                        : borderRadiusL,
-                                    borderColor: grey_whisper,
-                                  },
-                                  (onlyEmojis && !message.quoted_message) ||
-                                  otherAttachments?.length
-                                    ? { borderWidth: 0 }
-                                    : {},
-                                  containerInner,
-                                ]}
-                              >
-                                {messagesContext?.messageContentOrder?.map(
-                                  (messageContentType, messageContentOrderIndex) => {
-                                    switch (messageContentType) {
-                                      case 'quoted_reply':
-                                        return (
-                                          messagesContext?.quotedRepliesEnabled &&
-                                          message.quoted_message &&
-                                          Reply && (
-                                            <View
-                                              key={`quoted_reply_${messageContentOrderIndex}`}
-                                              style={[styles.replyContainer, replyContainer]}
-                                            >
-                                              <Reply
-                                                quotedMessage={
-                                                  message.quoted_message as ReplyProps<
-                                                    At,
-                                                    Ch,
-                                                    Co,
-                                                    Ev,
-                                                    Me,
-                                                    Re,
-                                                    Us
-                                                  >['quotedMessage']
-                                                }
-                                                styles={{
-                                                  messageContainer: {
-                                                    maxWidth: vw(60),
-                                                  },
-                                                }}
-                                              />
-                                            </View>
-                                          )
-                                        );
-                                      case 'attachments':
-                                        return otherAttachments?.map(
-                                          (attachment, attachmentIndex) =>
-                                            Attachment && (
-                                              <Attachment
-                                                attachment={attachment}
-                                                key={`${message.id}-${attachmentIndex}`}
-                                              />
-                                            ),
-                                        );
-                                      case 'files':
-                                        return (
-                                          FileAttachmentGroup && (
-                                            <FileAttachmentGroup
-                                              files={files}
-                                              key={`file_attachment_group_${messageContentOrderIndex}`}
-                                              messageId={message.id}
+                              {messagesContext?.messageContentOrder?.map(
+                                (messageContentType, messageContentOrderIndex) => {
+                                  switch (messageContentType) {
+                                    case 'quoted_reply':
+                                      return (
+                                        message.quoted_message &&
+                                        Reply && (
+                                          <View
+                                            key={`quoted_reply_${messageContentOrderIndex}`}
+                                            style={[styles.replyContainer, replyContainer]}
+                                          >
+                                            <Reply
+                                              quotedMessage={
+                                                message.quoted_message as ReplyProps<
+                                                  At,
+                                                  Ch,
+                                                  Co,
+                                                  Ev,
+                                                  Me,
+                                                  Re,
+                                                  Us
+                                                >['quotedMessage']
+                                              }
+                                              styles={{
+                                                messageContainer: {
+                                                  maxWidth: vw(60),
+                                                },
+                                              }}
                                             />
-                                          )
-                                        );
-                                      case 'gallery':
-                                        return (
-                                          Gallery && (
-                                            <Gallery
-                                              alignment={alignment}
-                                              groupStyles={groupStyles}
-                                              hasThreadReplies={!!message?.reply_count}
-                                              images={images}
-                                              key={`gallery_${messageContentOrderIndex}`}
-                                              messageId={message.id}
-                                              messageText={message.text}
-                                              threadList={threadList}
+                                          </View>
+                                        )
+                                      );
+                                    case 'attachments':
+                                      return otherAttachments?.map(
+                                        (attachment, attachmentIndex) =>
+                                          Attachment && (
+                                            <Attachment
+                                              attachment={attachment}
+                                              key={`${message.id}-${attachmentIndex}`}
                                             />
-                                          )
-                                        );
-                                      case 'text':
-                                      default:
-                                        return otherAttachments?.length &&
-                                          otherAttachments[0].actions ? null : (
-                                          <MessageTextContainer<At, Ch, Co, Ev, Me, Re, Us>
-                                            key={`message_text_container_${messageContentOrderIndex}`}
+                                          ),
+                                      );
+                                    case 'files':
+                                      return (
+                                        FileAttachmentGroup && (
+                                          <FileAttachmentGroup
+                                            files={files}
+                                            key={`file_attachment_group_${messageContentOrderIndex}`}
+                                            messageId={message.id}
+                                          />
+                                        )
+                                      );
+                                    case 'gallery':
+                                      return (
+                                        Gallery && (
+                                          <Gallery
+                                            alignment={alignment}
+                                            groupStyles={groupStyles}
+                                            hasThreadReplies={!!message?.reply_count}
+                                            images={images}
+                                            key={`gallery_${messageContentOrderIndex}`}
                                             message={message}
-                                            messageOverlay
-                                            onlyEmojis={onlyEmojis}
+                                            threadList={threadList}
                                           />
-                                        );
-                                    }
-                                  },
-                                )}
-                              </View>
-                            </Animated.View>
-                            {messageActions && <MessageActions showScreen={showScreen} />}
-                            {!!messageReactionTitle &&
-                            message.latest_reactions &&
-                            message.latest_reactions.length > 0 ? (
-                              <OverlayReactions
-                                alignment={alignment}
-                                reactions={message.latest_reactions.map((reaction) => ({
-                                  alignment:
-                                    clientId && clientId === reaction.user?.id ? 'right' : 'left',
-                                  image: reaction?.user?.image,
-                                  name: reaction?.user?.name || reaction.user_id || '',
-                                  type: reaction.type,
-                                }))}
-                                showScreen={showScreen}
-                                supportedReactions={messagesContext?.supportedReactions}
-                                title={messageReactionTitle}
-                              />
-                            ) : null}
-                          </View>
-                        )}
-                      </Animated.View>
-                    </TapGestureHandler>
-                  </ScrollView>
+                                        )
+                                      );
+                                    case 'text':
+                                    default:
+                                      return otherAttachments?.length &&
+                                        otherAttachments[0].actions ? null : (
+                                        <MessageTextContainer<At, Ch, Co, Ev, Me, Re, Us>
+                                          key={`message_text_container_${messageContentOrderIndex}`}
+                                          message={message}
+                                          messageOverlay
+                                          messageTextNumberOfLines={messageTextNumberOfLines}
+                                          onlyEmojis={onlyEmojis}
+                                        />
+                                      );
+                                  }
+                                },
+                              )}
+                            </View>
+                          </Animated.View>
+                          {messageActions && (
+                            <MessageActionList
+                              MessageActionListItem={MessageActionListItem}
+                              showScreen={showScreen}
+                              {...messageActionProps}
+                            />
+                          )}
+                          {!!messageReactionTitle &&
+                          message.latest_reactions &&
+                          message.latest_reactions.length > 0 ? (
+                            <OverlayReactions
+                              alignment={alignment}
+                              OverlayReactionsAvatar={OverlayReactionsAvatar}
+                              reactions={message.latest_reactions.map((reaction) => ({
+                                alignment:
+                                  clientId && clientId === reaction.user?.id ? 'right' : 'left',
+                                id: reaction?.user?.id || '',
+                                image: reaction?.user?.image,
+                                name: reaction?.user?.name || reaction.user_id || '',
+                                type: reaction.type,
+                              }))}
+                              showScreen={showScreen}
+                              supportedReactions={messagesContext?.supportedReactions}
+                              title={messageReactionTitle}
+                            />
+                          ) : null}
+                        </View>
+                      )}
+                    </Animated.View>
+                  </TapGestureHandler>
                 </SafeAreaView>
               </Animated.View>
             </PanGestureHandler>
@@ -591,7 +619,11 @@ export type MessageOverlayProps<
   Re extends UnknownType = DefaultReactionType,
   Us extends DefaultUserType = DefaultUserType,
 > = Partial<Omit<MessageOverlayPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>, 'overlayOpacity'>> &
-  Pick<MessageOverlayPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>, 'overlayOpacity'>;
+  Pick<MessageOverlayPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>, 'overlayOpacity'> &
+  Pick<
+    MessageOverlayPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+    'isMyMessage' | 'error' | 'isThreadMessage' | 'messageReactions'
+  >;
 
 /**
  * MessageOverlay - A high level component which implements all the logic required for a message overlay
@@ -607,15 +639,24 @@ export const MessageOverlay = <
 >(
   props: MessageOverlayProps<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
-  const { data, MessageActions, OverlayReactionList, OverlayReactions, reset } =
-    useMessageOverlayContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const {
+    data,
+    MessageActionList,
+    MessageActionListItem,
+    OverlayReactionList,
+    OverlayReactions,
+    OverlayReactionsAvatar,
+    reset,
+  } = useMessageOverlayContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { overlay, setOverlay } = useOverlayContext();
 
   const componentProps = {
-    MessageActions: props.MessageActions || MessageActions,
+    MessageActionList: props.MessageActionList || MessageActionList,
+    MessageActionListItem: props.MessageActionListItem || MessageActionListItem,
     OverlayReactionList:
       props.OverlayReactionList || OverlayReactionList || data?.OverlayReactionList,
     OverlayReactions: props.OverlayReactions || OverlayReactions,
+    OverlayReactionsAvatar: props.OverlayReactionsAvatar || OverlayReactionsAvatar,
   };
 
   return (

package/src/components/MessageOverlay/OverlayBackdrop.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
+type OverlayBackdropProps = {
+  style?: StyleProp<ViewStyle>;
+};
+
+export const OverlayBackdrop = (props: OverlayBackdropProps): JSX.Element => {
+  const { style = {} } = props;
+  const {
+    theme: {
+      colors: { overlay },
+    },
+  } = useTheme();
+  return <View style={[{ backgroundColor: overlay }, style]} />;
+};

package/src/components/MessageOverlay/OverlayReactionList.tsx

@@ -334,14 +334,12 @@ const OverlayReactionListWithContext = <
   const animatedBigCircleProps = useAnimatedProps<CircleProps>(() => ({
     cx: messageLayout.value.x - radius * 3,
     cy: messageLayout.value.y - radius * 3,
-    fill: fill || white_snow,
     r: radius * 2,
   }));
 
   const animateSmallCircleProps = useAnimatedProps<CircleProps>(() => ({
     cx: messageLayout.value.x - radius,
     cy: messageLayout.value.y,
-    fill: fill || white_snow,
     r: radius,
   }));
 
@@ -372,7 +370,7 @@ const OverlayReactionListWithContext = <
   const numberOfReactions = supportedReactions.length;
 
   return (
-    <View style={StyleSheet.absoluteFill}>
+    <View style={StyleSheet.absoluteFill} testID='overlay-reaction-list'>
       <Animated.View
         onLayout={({ nativeEvent: { layout } }) => {
           reactionBubbleWidth.value = layout.width;
@@ -380,8 +378,8 @@ const OverlayReactionListWithContext = <
         style={showScreenStyle}
       >
         <Svg>
-          <AnimatedCircle animatedProps={animatedBigCircleProps} />
-          <AnimatedCircle animatedProps={animateSmallCircleProps} />
+          <AnimatedCircle animatedProps={animatedBigCircleProps} fill={fill || white_snow} />
+          <AnimatedCircle animatedProps={animateSmallCircleProps} fill={fill || white_snow} />
         </Svg>
         <Animated.View
           onLayout={({