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

package/src/components/Message/MessageSimple/MessageTextContainer.tsx

@@ -57,6 +57,7 @@ export type MessageTextContainerPropsWithContext<
   Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'markdownRules' | 'MessageText'> & {
     markdownStyles?: MarkdownStyle;
     messageOverlay?: boolean;
+    messageTextNumberOfLines?: number;
     styles?: Partial<{
       textContainer: StyleProp<ViewStyle>;
     }>;
@@ -81,6 +82,7 @@ const MessageTextContainerWithContext = <
     message,
     messageOverlay,
     MessageText,
+    messageTextNumberOfLines,
     onLongPress,
     onlyEmojis,
     onPress,
@@ -121,6 +123,7 @@ const MessageTextContainerWithContext = <
           },
           message,
           messageOverlay,
+          messageTextNumberOfLines,
           onLongPress,
           onlyEmojis,
           onPress,
@@ -192,6 +195,7 @@ export const MessageTextContainer = <
   const { message, onLongPress, onlyEmojis, onPress, preventPress } =
     useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { markdownRules, MessageText } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { messageTextNumberOfLines } = props;
 
   return (
     <MemoizedMessageTextContainer
@@ -199,6 +203,7 @@ export const MessageTextContainer = <
         markdownRules,
         message,
         MessageText,
+        messageTextNumberOfLines,
         onLongPress,
         onlyEmojis,
         onPress,

package/src/components/Message/MessageSimple/ReactionList.tsx

@@ -1,12 +1,6 @@
-import React, { useEffect } from 'react';
-import { StyleSheet, TouchableOpacity, useWindowDimensions, View, ViewStyle } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withDelay,
-  withSequence,
-  withTiming,
-} from 'react-native-reanimated';
+import React from 'react';
+import { StyleSheet, TouchableOpacity, useWindowDimensions, View } from 'react-native';
+
 import Svg, { Circle } from 'react-native-svg';
 
 import {
@@ -14,7 +8,10 @@ import {
   Reactions,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
-import { useMessagesContext } from '../../../contexts/messagesContext/MessagesContext';
+import {
+  MessagesContextValue,
+  useMessagesContext,
+} from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 import { Unknown } from '../../../icons/Unknown';
@@ -64,36 +61,10 @@ const Icon: React.FC<
   const ReactionIcon =
     supportedReactions.find((reaction) => reaction.type === type)?.Icon || Unknown;
 
-  const scale = useSharedValue(0);
-
-  const showReaction = () => {
-    'worklet';
-    scale.value = withSequence(
-      withDelay(250, withTiming(0.5, { duration: 100 })),
-      withTiming(1.5, { duration: 400 }),
-      withTiming(1, { duration: 500 }),
-    );
-  };
-
-  useEffect(() => {
-    showReaction();
-  }, []);
-
-  const animatedStyle = useAnimatedStyle<ViewStyle>(
-    () => ({
-      transform: [
-        {
-          scale: scale.value,
-        },
-      ],
-    }),
-    [],
-  );
-
   return (
-    <Animated.View style={animatedStyle}>
+    <View>
       <ReactionIcon height={size} pathFill={pathFill} style={style} width={size} />
-    </Animated.View>
+    </View>
   );
 };
 
@@ -108,21 +79,23 @@ export type ReactionListPropsWithContext<
 > = Pick<
   MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
   | 'alignment'
+  | 'message'
   | 'onLongPress'
   | 'onPress'
   | 'onPressIn'
   | 'preventPress'
   | 'reactions'
   | 'showMessageOverlay'
-> & {
-  messageContentWidth: number;
-  supportedReactions: ReactionData[];
-  fill?: string;
-  radius?: number; // not recommended to change this
-  reactionSize?: number;
-  stroke?: string;
-  strokeSize?: number; // not recommended to change this
-};
+> &
+  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'targetedMessage'> & {
+    messageContentWidth: number;
+    supportedReactions: ReactionData[];
+    fill?: string;
+    radius?: number; // not recommended to change this
+    reactionSize?: number;
+    stroke?: string;
+    strokeSize?: number; // not recommended to change this
+  };
 
 const ReactionListWithContext = <
   At extends UnknownType = DefaultAttachmentType,
@@ -138,6 +111,7 @@ const ReactionListWithContext = <
   const {
     alignment,
     fill: propFill,
+    message,
     messageContentWidth,
     onLongPress,
     onPress,
@@ -150,11 +124,20 @@ const ReactionListWithContext = <
     stroke: propStroke,
     strokeSize: propStrokeSize,
     supportedReactions,
+    targetedMessage,
   } = props;
 
   const {
     theme: {
-      colors: { accent_blue, grey, grey_gainsboro, grey_whisper, white },
+      colors: {
+        accent_blue,
+        grey,
+        grey_gainsboro,
+        grey_whisper,
+        targetedMessageBackground,
+        white,
+        white_snow,
+      },
       messageSimple: {
         avatarWrapper: { leftAlign, spacer },
         reactionList: {
@@ -171,8 +154,6 @@ const ReactionListWithContext = <
     },
   } = useTheme();
 
-  const opacity = useSharedValue(0);
-
   const width = useWindowDimensions().width;
 
   const supportedReactionTypes = supportedReactions.map(
@@ -182,22 +163,6 @@ const ReactionListWithContext = <
     supportedReactionTypes.includes(reaction.type),
   );
 
-  const showReactions = (show: boolean) => {
-    'worklet';
-    opacity.value = show ? withDelay(250, withTiming(1, { duration: 500 })) : 0;
-  };
-
-  useEffect(() => {
-    showReactions(hasSupportedReactions && messageContentWidth !== 0);
-  }, [hasSupportedReactions, messageContentWidth]);
-
-  const animatedStyle = useAnimatedStyle<ViewStyle>(
-    () => ({
-      opacity: opacity.value,
-    }),
-    [],
-  );
-
   if (!hasSupportedReactions || messageContentWidth === 0) {
     return null;
   }
@@ -206,7 +171,8 @@ const ReactionListWithContext = <
   const fill = propFill || alignmentLeft ? grey_gainsboro : grey_whisper;
   const radius = propRadius || themeRadius;
   const reactionSize = propReactionSize || themeReactionSize;
-  const stroke = propStroke || white;
+  const highlighted = message.pinned || targetedMessage === message.id;
+  const stroke = propStroke || (highlighted ? targetedMessageBackground : white_snow);
   const strokeSize = propStrokeSize || themeStrokeSize;
 
   const x1 = alignmentLeft
@@ -271,20 +237,20 @@ const ReactionListWithContext = <
       testID='reaction-list'
     >
       {reactions.length ? (
-        <Animated.View style={[StyleSheet.absoluteFill, animatedStyle]}>
+        <View style={[StyleSheet.absoluteFill]}>
           <Svg>
             <Circle cx={x1} cy={y1} fill={stroke} r={radius + strokeSize * 3} />
             <Circle cx={x2} cy={y2} fill={stroke} r={radius * 2 + strokeSize * 3} />
             <Circle cx={x1} cy={y1} fill={fill} r={radius + strokeSize} />
             <Circle cx={x2} cy={y2} fill={fill} r={radius * 2 + strokeSize} />
-            <Circle cx={x1} cy={y1} fill={alignmentLeft ? fill : stroke} r={radius} />
-            <Circle cx={x2} cy={y2} fill={alignmentLeft ? fill : stroke} r={radius * 2} />
+            <Circle cx={x1} cy={y1} fill={alignmentLeft ? fill : white} r={radius} />
+            <Circle cx={x2} cy={y2} fill={alignmentLeft ? fill : white} r={radius * 2} />
           </Svg>
           <View
             style={[
               styles.reactionBubbleBackground,
               {
-                backgroundColor: alignmentLeft ? fill : stroke,
+                backgroundColor: alignmentLeft ? fill : white,
                 borderColor: fill,
                 borderRadius: reactionSize,
                 borderWidth: strokeSize,
@@ -297,14 +263,14 @@ const ReactionListWithContext = <
           />
           <View style={[StyleSheet.absoluteFill]}>
             <Svg>
-              <Circle cx={x2} cy={y2} fill={alignmentLeft ? fill : stroke} r={radius * 2} />
+              <Circle cx={x2} cy={y2} fill={alignmentLeft ? fill : white} r={radius * 2} />
             </Svg>
           </View>
           <View
             style={[
               styles.reactionBubble,
               {
-                backgroundColor: alignmentLeft ? fill : stroke,
+                backgroundColor: alignmentLeft ? fill : white,
                 borderRadius: reactionSize - strokeSize * 2,
                 height: reactionSize - strokeSize * 2,
                 left: left + strokeSize,
@@ -325,7 +291,7 @@ const ReactionListWithContext = <
               />
             ))}
           </View>
-        </Animated.View>
+        </View>
       ) : null}
     </TouchableOpacity>
   );
@@ -343,12 +309,30 @@ const areEqual = <
   prevProps: ReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
   nextProps: ReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
-  const { messageContentWidth: prevMessageContentWidth, reactions: prevReactions } = prevProps;
-  const { messageContentWidth: nextMessageContentWidth, reactions: nextReactions } = nextProps;
+  const {
+    message: prevMessage,
+    messageContentWidth: prevMessageContentWidth,
+    reactions: prevReactions,
+    targetedMessage: prevTargetedMessage,
+  } = prevProps;
+  const {
+    message: nextMessage,
+    messageContentWidth: nextMessageContentWidth,
+    reactions: nextReactions,
+    targetedMessage: nextTargetedMessage,
+  } = nextProps;
 
   const messageContentWidthEqual = prevMessageContentWidth === nextMessageContentWidth;
   if (!messageContentWidthEqual) return false;
 
+  const messagePinnedEqual = prevMessage.pinned === nextMessage.pinned;
+
+  if (!messagePinnedEqual) return false;
+
+  const targetedMessageEqual = prevTargetedMessage === nextTargetedMessage;
+
+  if (!targetedMessageEqual) return false;
+
   const reactionsEqual =
     prevReactions.length === nextReactions.length &&
     prevReactions.every(
@@ -393,6 +377,7 @@ export const ReactionList = <
 ) => {
   const {
     alignment,
+    message,
     onLongPress,
     onPress,
     onPressIn,
@@ -400,12 +385,13 @@ export const ReactionList = <
     reactions,
     showMessageOverlay,
   } = useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { supportedReactions } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { supportedReactions, targetedMessage } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   return (
     <MemoizedReactionList
       {...{
         alignment,
+        message,
         onLongPress,
         onPress,
         onPressIn,
@@ -413,6 +399,7 @@ export const ReactionList = <
         reactions,
         showMessageOverlay,
         supportedReactions,
+        targetedMessage,
       }}
       {...props}
     />

package/src/components/Message/MessageSimple/__tests__/Message.test.js

@@ -70,7 +70,6 @@ describe('Message', () => {
     const onLongPressMessage = jest.fn();
 
     const { getByTestId } = renderMessage({
-      animatedLongPress: false,
       message,
       onLongPressMessage,
     });

package/src/components/Message/MessageSimple/__tests__/MessageContent.test.js

@@ -8,6 +8,8 @@ import { MessageContent } from '../../MessageSimple/MessageContent';
 import { Chat } from '../../../Chat/Chat';
 import { Channel } from '../../../Channel/Channel';
 
+import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext';
+
 import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
 import { generateChannel } from '../../../../mock-builders/generator/channel';
@@ -38,11 +40,13 @@ describe('MessageContent', () => {
 
     renderMessage = (options) =>
       render(
-        <Chat client={chatClient}>
-          <Channel channel={channel}>
-            <Message groupStyles={['bottom']} {...options} />
-          </Channel>
-        </Chat>,
+        <ChannelsStateProvider>
+          <Chat client={chatClient}>
+            <Channel channel={channel}>
+              <Message groupStyles={['bottom']} {...options} />
+            </Channel>
+          </Chat>
+        </ChannelsStateProvider>,
       );
   });
 
@@ -90,12 +94,12 @@ describe('MessageContent', () => {
     });
   });
 
-  it('renders a message deleted message when `message.deleted_at` exists', async () => {
+  it('renders a message deleted message when `message.type` is `deleted`', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
     const { getByTestId } = renderMessage({
-      message: { ...message, deleted_at: true },
+      message: { ...message, type: 'deleted' },
     });
 
     await waitFor(() => {
@@ -111,11 +115,13 @@ describe('MessageContent', () => {
     const ContextMessageHeader = (props) => <View {...props} testID='message-header' />;
 
     const { getByTestId } = render(
-      <Chat client={chatClient}>
-        <Channel channel={channel} MessageHeader={ContextMessageHeader}>
-          <Message groupStyles={['bottom']} message={message} />
-        </Channel>
-      </Chat>,
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel} MessageHeader={ContextMessageHeader}>
+            <Message groupStyles={['bottom']} message={message} />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
     );
 
     await waitFor(() => {
@@ -131,11 +137,13 @@ describe('MessageContent', () => {
     const ContextMessageFooter = (props) => <View {...props} testID='message-footer' />;
 
     const { getByTestId } = render(
-      <Chat client={chatClient}>
-        <Channel channel={channel} MessageFooter={ContextMessageFooter}>
-          <Message groupStyles={['bottom']} message={message} />
-        </Channel>
-      </Chat>,
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel} MessageFooter={ContextMessageFooter}>
+            <Message groupStyles={['bottom']} message={message} />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
     );
 
     await waitFor(() => {
@@ -227,11 +235,13 @@ describe('MessageContent', () => {
     };
 
     const { getByTestId } = render(
-      <Chat client={chatClient}>
-        <Channel channel={channel} MessageContent={MessageContentWithMockedMessageContentWidth}>
-          <Message groupStyles={['bottom']} message={message} reactionsEnabled />
-        </Channel>
-      </Chat>,
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel} MessageContent={MessageContentWithMockedMessageContentWidth}>
+            <Message groupStyles={['bottom']} message={message} reactionsEnabled />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
     );
 
     await waitFor(() => {

package/src/components/Message/MessageSimple/__tests__/MessagePinnedHeader.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { cleanup, render, waitFor } from '@testing-library/react-native';
+
+import { MessagePinnedHeader } from '../MessagePinnedHeader';
+
+import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
+import {
+  generateMessage,
+  generateStaticMessage,
+} from '../../../../mock-builders/generator/message';
+import { generateStaticUser } from '../../../../mock-builders/generator/user';
+
+afterEach(cleanup);
+
+describe('MessagePinnedHeader', () => {
+  it('should render message pinned', async () => {
+    const staticUser = generateStaticUser(0);
+    const message = generateMessage({
+      user: { ...staticUser, image: undefined },
+    });
+    const { getByTestId, rerender, toJSON } = render(
+      <ThemeProvider style={defaultTheme}>
+        <MessagePinnedHeader alignment='right' message={message} />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('message-pinned')).toBeTruthy();
+    });
+
+    rerender(
+      <ThemeProvider style={defaultTheme}>
+        <MessagePinnedHeader alignment='right' message={message} />
+      </ThemeProvider>,
+    );
+
+    const staticMessage = generateStaticMessage('hi', {
+      user: staticUser,
+    });
+
+    rerender(
+      <ThemeProvider style={defaultTheme}>
+        <MessagePinnedHeader alignment='left' message={staticMessage} />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('message-pinned')).toBeTruthy();
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessagePinnedHeader.test.js.snap

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessagePinnedHeader should render message pinned 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "display": "flex",
+        "flexDirection": "row",
+        "marginBottom": 8,
+        "marginLeft": 30,
+        "marginTop": 5,
+      },
+      Object {
+        "justifyContent": "flex-start",
+      },
+      Object {},
+    ]
+  }
+  testID="message-pinned"
+>
+  <RNSVGSvgView
+    align="xMidYMid"
+    bbHeight={24}
+    bbWidth={24}
+    focusable={false}
+    height={24}
+    meetOrSlice={0}
+    minX={0}
+    minY={0}
+    pathFill="#7A7A7A"
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        },
+        Object {
+          "flex": 0,
+          "height": 24,
+          "width": 24,
+        },
+      ]
+    }
+    vbHeight={24}
+    vbWidth={24}
+    width={24}
+  >
+    <RNSVGGroup>
+      <RNSVGPath
+        clipRule={0}
+        d="M10.694 1.52908C10.5304 1.36544 10.2937 1.2982 10.0685 1.35137C9.84327 1.40454 9.6616 1.57053 9.5884 1.79006L9.16613 3.05694L6.72027 5.50284C5.12809 5.14216 3.59999 5.79028 2.19557 7.1947C1.93481 7.45543 1.93481 7.87823 2.19557 8.13896L4.55625 10.4997L3.1399 11.916C2.87915 12.1768 2.87915 12.5995 3.1399 12.8603C3.40065 13.1211 3.82342 13.1211 4.08417 12.8603L5.50051 11.4439L7.8612 13.8046C8.12193 14.0654 8.54473 14.0654 8.80547 13.8046C10.2099 12.4002 10.858 10.8721 10.4973 9.2799L12.9432 6.83403L14.2101 6.41173C14.4296 6.33855 14.5956 6.15692 14.6488 5.9317C14.7019 5.70648 14.6347 5.46979 14.4711 5.30616L10.694 1.52908ZM10.3832 3.62876L10.5137 3.23728L12.7629 5.4865L12.3714 5.617C12.2731 5.64977 12.1837 5.705 12.1104 5.7783L9.2776 8.6111C9.09873 8.78996 9.03633 9.05443 9.11627 9.29436C9.43453 10.249 9.2382 11.2566 8.31287 12.3678L3.6324 7.6873C4.74353 6.76196 5.7511 6.56564 6.7058 6.8839C6.94573 6.96383 7.2102 6.90143 7.38906 6.72256L10.2219 3.88975C10.2951 3.81646 10.3504 3.7271 10.3832 3.62876Z"
+        fill={4286216826}
+        fillRule={0}
+        propList={
+          Array [
+            "fill",
+            "fillRule",
+          ]
+        }
+      />
+    </RNSVGGroup>
+  </RNSVGSvgView>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#7A7A7A",
+        },
+        Object {},
+        Object {},
+      ]
+    }
+  >
+    Pinned by
+     
+    You
+  </Text>
+</View>
+`;

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -88,6 +88,7 @@ export type RenderTextParams<
   markdownRules?: MarkdownRules;
   markdownStyles?: MarkdownStyle;
   messageOverlay?: boolean;
+  messageTextNumberOfLines?: number;
   onLink?: (url: string) => Promise<void>;
   onlyEmojis?: boolean;
 };
@@ -109,6 +110,7 @@ export const renderText = <
     markdownStyles,
     message,
     messageOverlay,
+    messageTextNumberOfLines,
     onLink: onLinkParams,
     onLongPress: onLongPressParam,
     onlyEmojis,
@@ -137,6 +139,7 @@ export const renderText = <
   }
 
   newText = newText.replace(/[<&"'>]/g, '\\$&');
+
   const styles: MarkdownStyle = {
     ...defaultMarkdownStyles,
     ...markdownStyles,
@@ -202,6 +205,12 @@ export const renderText = <
     );
   };
 
+  const paragraphText: ReactNodeOutput = (node, output, { ...state }) => (
+    <Text key={state.key} numberOfLines={messageTextNumberOfLines} style={styles.paragraph}>
+      {output(node.content, state)}
+    </Text>
+  );
+
   const mentionedUsers = Array.isArray(mentioned_users)
     ? mentioned_users.reduce((acc, cur) => {
         const userName = cur.name || cur.id || '';
@@ -286,6 +295,8 @@ export const renderText = <
   const customRules = {
     link: { react },
     list: { react: customListAtLevel('top') },
+    // Truncate long text content in the message overlay
+    paragraph: messageTextNumberOfLines ? { react: paragraphText } : {},
     // we have no react rendering support for reflinks
     reflink: { match: () => null },
     sublist: { react: customListAtLevel('sub') },

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -25,7 +25,6 @@ export const useCreateMessageContext = <
 >({
   actionsEnabled,
   alignment,
-  canModifyMessage,
   channel,
   disabled,
   files,
@@ -55,7 +54,6 @@ export const useCreateMessageContext = <
   otherAttachments,
   preventPress,
   reactions,
-  readEventsEnabled,
   showAvatar,
   showMessageOverlay,
   showMessageStatus,
@@ -78,7 +76,6 @@ export const useCreateMessageContext = <
     () => ({
       actionsEnabled,
       alignment,
-      canModifyMessage,
       channel,
       disabled,
       files,
@@ -108,7 +105,6 @@ export const useCreateMessageContext = <
       otherAttachments,
       preventPress,
       reactions,
-      readEventsEnabled,
       showAvatar,
       showMessageOverlay,
       showMessageStatus,
@@ -127,7 +123,6 @@ export const useCreateMessageContext = <
       membersValue,
       messageValue,
       reactionsValue,
-      readEventsEnabled,
       showAvatar,
       showMessageStatus,
       threadList,