npm - react-native-gifted-chat - Versions diffs - 3.2.3 → 3.3.0 - Mend

react-native-gifted-chat 3.2.3 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/README.md +450 -156
package/package.json +9 -8
package/src/Bubble/index.tsx +34 -2
package/src/Bubble/types.ts +17 -4
package/src/Day/index.tsx +2 -2
package/src/Day/types.ts +3 -2
package/src/GiftedChat/index.tsx +109 -23
package/src/GiftedChat/types.ts +9 -3
package/src/InputToolbar.tsx +62 -8
package/src/Message/index.tsx +181 -21
package/src/Message/types.ts +4 -0
package/src/MessageReply.tsx +160 -0
package/src/MessagesContainer/components/Item/index.tsx +17 -3
package/src/MessagesContainer/index.tsx +16 -11
package/src/MessagesContainer/types.ts +26 -3
package/src/Models.ts +3 -0
package/src/Reply/index.ts +1 -0
package/src/Reply/types.ts +80 -0
package/src/ReplyPreview.tsx +132 -0
package/src/Send.tsx +8 -3
package/src/__tests__/MessageReply.test.tsx +54 -0
package/src/__tests__/ReplyPreview.test.tsx +41 -0
package/src/__tests__/__snapshots__/GiftedChat.test.tsx.snap +69 -42
package/src/__tests__/__snapshots__/InputToolbar.test.tsx.snap +11 -15
package/src/__tests__/__snapshots__/MessageImage.test.tsx.snap +24 -18
package/src/__tests__/__snapshots__/MessageReply.test.tsx.snap +181 -0
package/src/__tests__/__snapshots__/ReplyPreview.test.tsx.snap +403 -0
package/src/__tests__/__snapshots__/Send.test.tsx.snap +3 -0
package/src/components/MessageReply.tsx +156 -0
package/src/components/ReplyPreview.tsx +230 -0
package/src/index.ts +6 -1
package/src/types.ts +17 -16
package/src/utils.ts +11 -3

package/src/__tests__/__snapshots__/MessageReply.test.tsx.snap ADDED Viewed

@@ -0,0 +1,181 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`should render <MessageReply /> and compare with snapshot 1`] = `
+<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}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 8,
+          "marginBottom": 4,
+          "paddingHorizontal": 10,
+          "paddingVertical": 6,
+        },
+        {
+          "backgroundColor": "rgba(0, 0, 0, 0.06)",
+          "borderLeftColor": "#0084ff",
+          "borderLeftWidth": 3,
+        },
+        undefined,
+        undefined,
+      ]
+    }
+  >
+    <Text
+      numberOfLines={1}
+      style={
+        [
+          {
+            "fontWeight": "600",
+            "marginBottom": 2,
+          },
+          {
+            "color": "#0084ff",
+          },
+          undefined,
+          undefined,
+        ]
+      }
+    >
+      John Doe
+    </Text>
+    <Text
+      numberOfLines={2}
+      style={
+        [
+          {
+            "fontSize": 13,
+          },
+          {
+            "color": "#333",
+          },
+          undefined,
+          undefined,
+        ]
+      }
+    >
+      Original message text
+    </Text>
+  </View>
+</View>
+`;
+exports[`should render <MessageReply /> on right position and compare with snapshot 1`] = `
+<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}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 8,
+          "marginBottom": 4,
+          "paddingHorizontal": 10,
+          "paddingVertical": 6,
+        },
+        {
+          "backgroundColor": "rgba(255, 255, 255, 0.15)",
+          "borderLeftColor": "rgba(255, 255, 255, 0.6)",
+          "borderLeftWidth": 3,
+        },
+        undefined,
+        undefined,
+      ]
+    }
+  >
+    <Text
+      numberOfLines={1}
+      style={
+        [
+          {
+            "fontWeight": "600",
+            "marginBottom": 2,
+          },
+          {
+            "color": "rgba(255, 255, 255, 0.9)",
+          },
+          undefined,
+          undefined,
+        ]
+      }
+    >
+      You
+    </Text>
+    <Text
+      numberOfLines={2}
+      style={
+        [
+          {
+            "fontSize": 13,
+          },
+          {
+            "color": "rgba(255, 255, 255, 0.9)",
+          },
+          undefined,
+          undefined,
+        ]
+      }
+    >
+      Original message text
+    </Text>
+  </View>
+</View>
+`;

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

@@ -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 CHANGED Viewed

@@ -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={
     [