stream-chat-react-native-core 4.0.0 → 4.1.0

package/src/components/MessageInput/__tests__/__snapshots__/SendButton.test.js.snap

@@ -1,157 +1,257 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SendButton should render a non-editing disabled SendButton 1`] = `
-<View
-  accessible={true}
-  focusable={true}
-  isTVSelectable={true}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "marginLeft": 8,
-      "opacity": 1,
-    }
-  }
+<RNGestureHandlerButton
+  collapsable={false}
+  onGestureEvent={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onHandlerStateChange={[Function]}
+  rippleColor={0}
   testID="send-button"
 >
-  <Image
-    source={
+  <View
+    accessible={true}
+    style={
       Object {
-        "testUri": "../../../src/images/icons/icon_new_message.png",
+        "opacity": 1,
       }
     }
-    style={
-      Array [
-        Object {
-          "height": 15,
-          "width": 15,
-        },
-        Object {},
-      ]
-    }
-  />
-</View>
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight={24}
+      bbWidth={24}
+      focusable={false}
+      height={24}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      pathFill="#DBDBDB"
+      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="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12s4.48 10 10 10 10-4.48 10-10zM8 11h4V8l4 4-4 4v-3H8v-2z"
+          fill={4292598747}
+          fillRule={0}
+          propList={
+            Array [
+              "fill",
+              "fillRule",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</RNGestureHandlerButton>
 `;
 
 exports[`SendButton should render a non-editing enabled SendButton 1`] = `
-<View
-  accessible={true}
-  focusable={true}
-  isTVSelectable={true}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "marginLeft": 8,
-      "opacity": 1,
-    }
-  }
+<RNGestureHandlerButton
+  collapsable={false}
+  onGestureEvent={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onHandlerStateChange={[Function]}
+  rippleColor={0}
   testID="send-button"
 >
-  <Image
-    source={
+  <View
+    accessible={true}
+    style={
       Object {
-        "testUri": "../../../src/images/icons/icon_new_message.png",
+        "opacity": 1,
       }
     }
-    style={
-      Array [
-        Object {
-          "height": 15,
-          "width": 15,
-        },
-        Object {},
-      ]
-    }
-  />
-</View>
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight={24}
+      bbWidth={24}
+      focusable={false}
+      height={24}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      pathFill="#005FFF"
+      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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14v-4H8l4-4 4 4h-3v4h-2z"
+          fill={4278214655}
+          fillRule={0}
+          propList={
+            Array [
+              "fill",
+              "fillRule",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</RNGestureHandlerButton>
 `;
 
 exports[`SendButton should render an editing disabled SendButton 1`] = `
-<View
-  accessible={true}
-  focusable={true}
-  isTVSelectable={true}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "marginLeft": 8,
-      "opacity": 1,
-    }
-  }
+<RNGestureHandlerButton
+  collapsable={false}
+  onGestureEvent={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onHandlerStateChange={[Function]}
+  rippleColor={0}
   testID="send-button"
 >
-  <Image
-    source={
+  <View
+    accessible={true}
+    style={
       Object {
-        "testUri": "../../../src/images/icons/icon_edit.png",
+        "opacity": 1,
       }
     }
-    style={
-      Array [
-        Object {
-          "height": 15,
-          "width": 15,
-        },
-        Object {},
-      ]
-    }
-  />
-</View>
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight={24}
+      bbWidth={24}
+      focusable={false}
+      height={24}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      pathFill="#DBDBDB"
+      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="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12s4.48 10 10 10 10-4.48 10-10zM8 11h4V8l4 4-4 4v-3H8v-2z"
+          fill={4292598747}
+          fillRule={0}
+          propList={
+            Array [
+              "fill",
+              "fillRule",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</RNGestureHandlerButton>
 `;
 
 exports[`SendButton should render an editing enabled SendButton 1`] = `
-<View
-  accessible={true}
-  focusable={true}
-  isTVSelectable={true}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "marginLeft": 8,
-      "opacity": 1,
-    }
-  }
+<RNGestureHandlerButton
+  collapsable={false}
+  onGestureEvent={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onHandlerStateChange={[Function]}
+  rippleColor={0}
   testID="send-button"
 >
-  <Image
-    source={
+  <View
+    accessible={true}
+    style={
       Object {
-        "testUri": "../../../src/images/icons/icon_edit.png",
+        "opacity": 1,
       }
     }
-    style={
-      Array [
-        Object {
-          "height": 15,
-          "width": 15,
-        },
-        Object {},
-      ]
-    }
-  />
-</View>
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight={24}
+      bbWidth={24}
+      focusable={false}
+      height={24}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      pathFill="#005FFF"
+      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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14v-4H8l4-4 4 4h-3v4h-2z"
+          fill={4278214655}
+          fillRule={0}
+          propList={
+            Array [
+              "fill",
+              "fillRule",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</RNGestureHandlerButton>
 `;

package/src/components/MessageInput/__tests__/__snapshots__/UploadProgressIndicator.test.js.snap

@@ -2,6 +2,14 @@
 
 exports[`UploadProgressIndicator should render an active IN_PROGRESS UploadProgressIndicator 1`] = `
 <View
+  style={
+    Array [
+      Object {
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
   testID="active-upload-progress-indicator"
 >
   <View
@@ -9,13 +17,15 @@ exports[`UploadProgressIndicator should render an active IN_PROGRESS UploadProgr
       Array [
         Object {
           "alignItems": "center",
-          "backgroundColor": "#0000004D",
           "height": "100%",
           "justifyContent": "center",
           "opacity": 0,
           "position": "absolute",
           "width": "100%",
         },
+        Object {
+          "backgroundColor": "#000000CC",
+        },
         Object {},
       ]
     }
@@ -25,12 +35,14 @@ exports[`UploadProgressIndicator should render an active IN_PROGRESS UploadProgr
       Array [
         Object {
           "alignItems": "center",
-          "backgroundColor": "#FFFFFF00",
           "height": "100%",
           "justifyContent": "center",
           "position": "absolute",
           "width": "100%",
         },
+        Object {
+          "backgroundColor": "#000000CC",
+        },
         Object {},
       ]
     }
@@ -50,7 +62,7 @@ exports[`UploadProgressIndicator should render an active IN_PROGRESS UploadProgr
     >
       <ActivityIndicator
         animating={true}
-        color="grey"
+        color="#F2F2F2"
         hidesWhenStopped={true}
         size="small"
         testID="upload-progress-indicator"
@@ -62,6 +74,14 @@ exports[`UploadProgressIndicator should render an active IN_PROGRESS UploadProgr
 
 exports[`UploadProgressIndicator should render an active RETRY UploadProgressIndicator 1`] = `
 <View
+  style={
+    Array [
+      Object {
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
   testID="active-upload-progress-indicator"
 >
   <View
@@ -69,13 +89,15 @@ exports[`UploadProgressIndicator should render an active RETRY UploadProgressInd
       Array [
         Object {
           "alignItems": "center",
-          "backgroundColor": "#0000004D",
           "height": "100%",
           "justifyContent": "center",
           "opacity": 0,
           "position": "absolute",
           "width": "100%",
         },
+        Object {
+          "backgroundColor": "#000000CC",
+        },
         Object {},
       ]
     }
@@ -85,12 +107,14 @@ exports[`UploadProgressIndicator should render an active RETRY UploadProgressInd
       Array [
         Object {
           "alignItems": "center",
-          "backgroundColor": "#FFFFFF00",
           "height": "100%",
           "justifyContent": "center",
           "position": "absolute",
           "width": "100%",
         },
+        Object {
+          "backgroundColor": "#000000CC",
+        },
         Object {},
       ]
     }
@@ -98,7 +122,6 @@ exports[`UploadProgressIndicator should render an active RETRY UploadProgressInd
     <View
       accessible={true}
       focusable={true}
-      isTVSelectable={true}
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -119,20 +142,49 @@ exports[`UploadProgressIndicator should render an active RETRY UploadProgressInd
         }
       }
     >
-      <Image
-        source={
-          Object {
-            "testUri": "../../../src/images/reload1.png",
-          }
-        }
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={18}
+        bbWidth={18}
+        focusable={false}
+        height={18}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        pathFill="#F2F2F2"
         style={
-          Object {
-            "height": 18,
-            "width": 18,
-          }
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "flex": 0,
+              "height": 18,
+              "width": 18,
+            },
+          ]
         }
         testID="retry-upload-progress-indicator"
-      />
+        vbHeight={24}
+        vbWidth={24}
+        width={18}
+      >
+        <RNSVGGroup>
+          <RNSVGPath
+            clipRule={0}
+            d="M12.868 4.221a8 8 0 102.834 14.251 1 1 0 00-1.175-1.618A6 6 0 1112.4 6.166c1.31.314 2.52.803 3.31 2.12.154.254.266.485.348.708h-1.152a1 1 0 00-.81 1.585l2.375 3.291a1 1 0 001.621 0l2.376-3.291a1 1 0 00-.811-1.585h-1.509c-.128-.639-.377-1.24-.867-1.947a8 8 0 00-4.414-2.826z"
+            fill={4294111986}
+            fillRule={0}
+            propList={
+              Array [
+                "fill",
+                "fillRule",
+              ]
+            }
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
     </View>
   </View>
 </View>
@@ -140,12 +192,28 @@ exports[`UploadProgressIndicator should render an active RETRY UploadProgressInd
 
 exports[`UploadProgressIndicator should render an inactive IN_PROGRESS UploadProgressIndicator 1`] = `
 <View
+  style={
+    Array [
+      Object {
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
   testID="inactive-upload-progress-indicator"
 />
 `;
 
 exports[`UploadProgressIndicator should render an inactive RETRY UploadProgressIndicator 1`] = `
 <View
+  style={
+    Array [
+      Object {
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
   testID="inactive-upload-progress-indicator"
 />
 `;

package/src/components/MessageInput/hooks/useCooldown.ts

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+
+import { BuiltinRoles, ChannelResponse, Role } from 'stream-chat';
+
+import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { ONE_SECOND_IN_MS } from '../../../utils/date';
+
+type Roles = Array<Role>;
+
+/**
+ * useCooldown can be used to start a cooldown defined
+ * for a Channel by setting an end time for
+ **/
+export const useCooldown = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>() => {
+  const [endsAt, setEndsAt] = useState(new Date());
+
+  const { client } = useChatContext<StreamChatGenerics>();
+  const { channel } = useChannelContext<StreamChatGenerics>();
+  const { cooldown } = (channel?.data || {}) as ChannelResponse<StreamChatGenerics>;
+  const interval: number = cooldown ?? 0;
+
+  /**
+   * We get the roles a user has globally set on the Client, and the role
+   * they have locally within the chat. If any of the predefined
+   * `disabledRoles` are matched to either of the users roles, the user
+   * will not have a cooldown at all.
+   **/
+  const disabledRoles = [BuiltinRoles.Admin, BuiltinRoles.ChannelModerator];
+  const userClientRole = client?.user?.role || '';
+  const userChannelRole = channel?.state.members[client.userID || '']?.role || '';
+
+  const disabledFor = (roles: Roles) =>
+    disabledRoles.some((roleToSkip) => roles.includes(roleToSkip));
+
+  const enabled = interval > 0 && !disabledFor([userClientRole, userChannelRole]);
+
+  const start = () => {
+    if (enabled) {
+      setEndsAt(new Date(Date.now() + interval * ONE_SECOND_IN_MS));
+    }
+  };
+
+  return { endsAt, start };
+};

package/src/components/MessageInput/hooks/useCountdown.ts

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+
+import { ONE_SECOND_IN_MS, secondsUntil } from '../../../utils/date';
+
+/**
+ * Start a countdown to a set date, in seconds.
+ * The date passed in as an argument to useCountdown
+ * will be rounded up to the nearest second.
+ **/
+export const useCountdown = (end: Date) => {
+  const [seconds, setSeconds] = useState(0);
+
+  /**
+   * When a new `end` is set for the countdown, start the counter if
+   * the `end` is in the future.
+   **/
+  useEffect(() => {
+    let intervalId: NodeJS.Timer;
+
+    const startCountdown = (seconds: number) => {
+      setSeconds(seconds);
+      intervalId = setInterval(() => {
+        setSeconds((previous: number) => {
+          const next = previous - 1;
+          if (next < 1) {
+            /* Don't trigger an unnecessary rerender when done */
+            clearInterval(intervalId);
+            return 0;
+          }
+          return next;
+        });
+      }, ONE_SECOND_IN_MS);
+    };
+
+    const secondsUntilEnd = secondsUntil(end);
+    if (secondsUntilEnd > 0) {
+      startCountdown(secondsUntilEnd);
+    }
+
+    return () => {
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [end]);
+
+  return { seconds };
+};

package/src/components/MessageList/DateHeader.tsx

@@ -27,13 +27,13 @@ export type DateHeaderProps = {
 export const DateHeader: React.FC<DateHeaderProps> = ({ dateString }) => {
   const {
     theme: {
-      colors: { overlay_dark, white },
+      colors: { overlay, white },
       dateHeader: { container, text },
     },
   } = useTheme();
 
   return (
-    <View style={[styles.container, { backgroundColor: overlay_dark }, container]}>
+    <View style={[styles.container, { backgroundColor: overlay }, container]}>
       <Text style={[styles.text, { color: white }, text]}>{dateString}</Text>
     </View>
   );