react-native-gifted-chat 3.2.2 → 3.3.0

package/src/__tests__/__snapshots__/ReplyPreview.test.tsx.snap

@@ -0,0 +1,403 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render <ReplyPreview /> and compare with snapshot 1`] = `
+<View
+  collapsable={false}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "height": 0,
+        "opacity": 0,
+        "transform": [
+          {
+            "translateY": 10,
+          },
+        ],
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "overflow": "hidden",
+      },
+    ]
+  }
+  nativeID="0"
+  style={
+    [
+      {
+        "overflow": "hidden",
+      },
+      {
+        "height": 0,
+        "opacity": 0,
+        "transform": [
+          {
+            "translateY": 10,
+          },
+        ],
+      },
+    ]
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={
+      [
+        {
+          "borderRadius": 8,
+          "flexDirection": "row",
+          "marginBottom": 8,
+          "marginHorizontal": 10,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": "#e9e9eb",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#0084ff",
+          "borderTopLeftRadius": 4,
+          "height": "100%",
+          "width": 4,
+        }
+      }
+    />
+    <View
+      style={
+        {
+          "flex": 1,
+          "paddingHorizontal": 10,
+          "paddingVertical": 8,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "flex": 1,
+            }
+          }
+        >
+          <Text
+            numberOfLines={1}
+            style={
+              {
+                "color": "#0084ff",
+                "fontSize": 13,
+                "fontWeight": "600",
+                "marginBottom": 2,
+              }
+            }
+          >
+            Replying to 
+            John Doe
+          </Text>
+          <Text
+            numberOfLines={2}
+            style={
+              [
+                {
+                  "fontSize": 14,
+                },
+                {
+                  "color": "#333",
+                },
+                undefined,
+              ]
+            }
+          >
+            Original message to reply to
+          </Text>
+        </View>
+      </View>
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={8}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "borderRadius": 12,
+          "height": 24,
+          "justifyContent": "center",
+          "width": 24,
+        }
+      }
+    >
+      <Text
+        style={
+          [
+            {
+              "fontSize": 18,
+              "fontWeight": "600",
+            },
+            {
+              "color": "#333",
+            },
+          ]
+        }
+      >
+        ×
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`should render <ReplyPreview /> with image and compare with snapshot 1`] = `
+<View
+  collapsable={false}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "height": 0,
+        "opacity": 0,
+        "transform": [
+          {
+            "translateY": 10,
+          },
+        ],
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "overflow": "hidden",
+      },
+    ]
+  }
+  nativeID="1"
+  style={
+    [
+      {
+        "overflow": "hidden",
+      },
+      {
+        "height": 0,
+        "opacity": 0,
+        "transform": [
+          {
+            "translateY": 10,
+          },
+        ],
+      },
+    ]
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={
+      [
+        {
+          "borderRadius": 8,
+          "flexDirection": "row",
+          "marginBottom": 8,
+          "marginHorizontal": 10,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": "#e9e9eb",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#0084ff",
+          "borderTopLeftRadius": 4,
+          "height": "100%",
+          "width": 4,
+        }
+      }
+    />
+    <View
+      style={
+        {
+          "flex": 1,
+          "paddingHorizontal": 10,
+          "paddingVertical": 8,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+          }
+        }
+      >
+        <Image
+          source={
+            {
+              "uri": "https://example.com/image.jpg",
+            }
+          }
+          style={
+            [
+              {
+                "borderRadius": 4,
+                "height": 40,
+                "marginRight": 8,
+                "width": 40,
+              },
+              undefined,
+            ]
+          }
+        />
+        <View
+          style={
+            {
+              "flex": 1,
+            }
+          }
+        >
+          <Text
+            numberOfLines={1}
+            style={
+              {
+                "color": "#0084ff",
+                "fontSize": 13,
+                "fontWeight": "600",
+                "marginBottom": 2,
+              }
+            }
+          >
+            Replying to 
+            John Doe
+          </Text>
+          <Text
+            numberOfLines={2}
+            style={
+              [
+                {
+                  "fontSize": 14,
+                },
+                {
+                  "color": "#333",
+                },
+                undefined,
+              ]
+            }
+          >
+            Original message to reply to
+          </Text>
+        </View>
+      </View>
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={8}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "borderRadius": 12,
+          "height": 24,
+          "justifyContent": "center",
+          "width": 24,
+        }
+      }
+    >
+      <Text
+        style={
+          [
+            {
+              "fontSize": 18,
+              "fontWeight": "600",
+            },
+            {
+              "color": "#333",
+            },
+          ]
+        }
+      >
+        ×
+      </Text>
+    </View>
+  </View>
+</View>
+`;

package/src/__tests__/__snapshots__/Send.test.tsx.snap

@@ -23,6 +23,7 @@ exports[`Send should always render <Send /> and compare with snapshot 1`] = `
       undefined,
     ]
   }
+  nativeID="1"
   pointerEvents="auto"
   style={
     [
@@ -93,6 +94,7 @@ exports[`Send should not render <Send /> and compare with snapshot 1`] = `
       undefined,
     ]
   }
+  nativeID="0"
   pointerEvents="none"
   style={
     [
@@ -163,6 +165,7 @@ exports[`Send should render <Send /> where there is input and compare with snaps
       undefined,
     ]
   }
+  nativeID="2"
   pointerEvents="auto"
   style={
     [

package/src/__tests__/__snapshots__/SystemMessage.test.tsx.snap

@@ -10,17 +10,10 @@ exports[`SystemMessage should render <SystemMessage /> and compare with snapshot
         "flex": 1,
       },
       {
-        "alignItems": "flex-end",
-        "backgroundColor": "rgba(0,0,0,0.05)",
-        "borderColor": "rgba(0,0,0,0.1)",
-        "borderRadius": 20,
-        "borderWidth": 1,
+        "alignItems": "center",
         "marginHorizontal": 10,
         "marginVertical": 5,
-        "paddingHorizontal": 10,
-        "paddingVertical": 10,
       },
-      undefined,
     ]
   }
 >
@@ -28,39 +21,57 @@ exports[`SystemMessage should render <SystemMessage /> and compare with snapshot
     style={
       [
         {
-          "marginHorizontal": 10,
-          "marginVertical": 5,
+          "backgroundColor": "rgba(0,0,0,0.05)",
+          "borderColor": "rgba(0,0,0,0.1)",
+          "borderRadius": 20,
+          "borderWidth": 1,
+          "maxWidth": "70%",
+          "paddingHorizontal": 10,
+          "paddingVertical": 10,
         },
-        [
-          {
-            "marginHorizontal": 0,
-            "marginVertical": 0,
-          },
-          undefined,
-        ],
+        undefined,
       ]
     }
   >
-    <Text
+    <View
       style={
         [
           {
-            "color": "black",
+            "marginHorizontal": 10,
+            "marginVertical": 5,
           },
-          undefined,
           [
             {
-              "backgroundColor": "transparent",
-              "fontSize": 12,
-              "fontWeight": "300",
+              "marginHorizontal": 0,
+              "marginVertical": 0,
             },
             undefined,
           ],
         ]
       }
     >
-      test
-    </Text>
+      <Text
+        style={
+          [
+            {
+              "color": "black",
+            },
+            undefined,
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontSize": 12,
+                "fontWeight": "300",
+                "textAlign": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        test
+      </Text>
+    </View>
   </View>
 </View>
 `;

package/src/components/MessageReply.tsx

@@ -0,0 +1,156 @@
+import React, { useMemo } from 'react'
+import {
+  Image,
+  ImageStyle,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native'
+
+import { IMessage, ReplyMessage } from '../Models'
+import { isSameUser } from '../utils'
+
+export interface MessageReplyProps<TMessage extends IMessage = IMessage> {
+  /** The reply message to display */
+  replyMessage: ReplyMessage
+  /** The current message containing the reply */
+  currentMessage: TMessage
+  /** Position of the bubble (left or right) */
+  position: 'left' | 'right'
+  /** Container style for the reply */
+  containerStyle?: StyleProp<ViewStyle>
+  /** Container style for left position */
+  containerStyleLeft?: StyleProp<ViewStyle>
+  /** Container style for right position */
+  containerStyleRight?: StyleProp<ViewStyle>
+  /** Text style for the reply */
+  textStyle?: StyleProp<TextStyle>
+  /** Text style for left position */
+  textStyleLeft?: StyleProp<TextStyle>
+  /** Text style for right position */
+  textStyleRight?: StyleProp<TextStyle>
+  /** Image style for the reply */
+  imageStyle?: StyleProp<ImageStyle>
+  /** Callback when reply is pressed */
+  onPress?: (replyMessage: ReplyMessage) => void
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 8,
+    marginBottom: 4,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+  },
+  containerLeft: {
+    backgroundColor: 'rgba(0, 0, 0, 0.06)',
+    borderLeftColor: '#0084ff',
+    borderLeftWidth: 3,
+  },
+  containerRight: {
+    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+    borderLeftColor: 'rgba(255, 255, 255, 0.6)',
+    borderLeftWidth: 3,
+  },
+  image: {
+    borderRadius: 4,
+    height: 40,
+    marginTop: 4,
+    width: 40,
+  },
+  text: {
+    fontSize: 13,
+  },
+  textLeft: {
+    color: '#333',
+  },
+  textRight: {
+    color: 'rgba(255, 255, 255, 0.9)',
+  },
+  username: {
+    fontWeight: '600',
+    marginBottom: 2,
+  },
+  usernameLeft: {
+    color: '#0084ff',
+  },
+  usernameRight: {
+    color: 'rgba(255, 255, 255, 0.9)',
+  },
+})
+
+export function MessageReply<TMessage extends IMessage = IMessage> ({
+  replyMessage,
+  currentMessage,
+  position,
+  containerStyle,
+  containerStyleLeft,
+  containerStyleRight,
+  textStyle,
+  textStyleLeft,
+  textStyleRight,
+  imageStyle,
+  onPress,
+}: MessageReplyProps<TMessage>) {
+  const isCurrentUser = useMemo(
+    () => isSameUser(currentMessage, { user: replyMessage.user } as TMessage),
+    [currentMessage, replyMessage.user]
+  )
+
+  const displayName = useMemo(() => {
+    if (isCurrentUser)
+      return 'You'
+
+    return replyMessage.user?.name || 'Unknown'
+  }, [isCurrentUser, replyMessage.user?.name])
+
+  const handlePress = () => {
+    onPress?.(replyMessage)
+  }
+
+  const containerStyles = [
+    styles.container,
+    position === 'left' ? styles.containerLeft : styles.containerRight,
+    containerStyle,
+    position === 'left' ? containerStyleLeft : containerStyleRight,
+  ]
+
+  const usernameStyles = [
+    styles.username,
+    position === 'left' ? styles.usernameLeft : styles.usernameRight,
+    textStyle,
+    position === 'left' ? textStyleLeft : textStyleRight,
+  ]
+
+  const textStyles = [
+    styles.text,
+    position === 'left' ? styles.textLeft : styles.textRight,
+    textStyle,
+    position === 'left' ? textStyleLeft : textStyleRight,
+  ]
+
+  return (
+    <Pressable onPress={handlePress}>
+      <View style={containerStyles}>
+        <Text style={usernameStyles} numberOfLines={1}>
+          {displayName}
+        </Text>
+        {replyMessage.text && (
+          <Text style={textStyles} numberOfLines={2}>
+            {replyMessage.text}
+          </Text>
+        )}
+        {replyMessage.image && (
+          <Image
+            source={{ uri: replyMessage.image }}
+            style={[styles.image, imageStyle]}
+          />
+        )}
+      </View>
+    </Pressable>
+  )
+}