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

package/src/components/MessageInput/AttachButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { GestureResponderEvent } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
@@ -9,43 +10,20 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Attach } from '../../icons/Attach';
 
-import type { GestureResponderEvent } from 'react-native';
-
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 
 type AttachButtonPropsWithContext<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Pick<ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'disabled'> & {
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChannelContextValue<StreamChatGenerics>, 'disabled'> & {
   /** Function that opens attachment options bottom sheet */
   handleOnPress?: ((event: GestureResponderEvent) => void) & (() => void);
   selectedPicker?: 'images';
 };
 
 const AttachButtonWithContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: AttachButtonPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: AttachButtonPropsWithContext<StreamChatGenerics>,
 ) => {
   const { disabled, handleOnPress, selectedPicker } = props;
   const {
@@ -59,7 +37,7 @@ const AttachButtonWithContext = <
     <TouchableOpacity
       disabled={disabled}
       hitSlop={{ bottom: 15, left: 15, right: 5, top: 15 }}
-      onPress={handleOnPress}
+      onPress={disabled ? () => null : handleOnPress}
       style={[attachButton]}
       testID='attach-button'
     >
@@ -68,17 +46,9 @@ const AttachButtonWithContext = <
   );
 };
 
-const areEqual = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
->(
-  prevProps: AttachButtonPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: AttachButtonPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: AttachButtonPropsWithContext<StreamChatGenerics>,
+  nextProps: AttachButtonPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     disabled: prevDisabled,
@@ -109,30 +79,18 @@ const MemoizedAttachButton = React.memo(
 ) as typeof AttachButtonWithContext;
 
 export type AttachButtonProps<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Partial<AttachButtonPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<AttachButtonPropsWithContext<StreamChatGenerics>>;
 
 /**
  * UI Component for attach button in MessageInput component.
  */
 export const AttachButton = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: AttachButtonProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: AttachButtonProps<StreamChatGenerics>,
 ) => {
-  const { disabled = false } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { disabled = false } = useChannelContext<StreamChatGenerics>();
   const { selectedPicker } = useAttachmentPickerContext();
 
   return <MemoizedAttachButton {...{ disabled, selectedPicker }} {...props} />;

package/src/components/MessageInput/CommandsButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { GestureResponderEvent } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import {
@@ -13,43 +14,20 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Lightning } from '../../icons/Lightning';
 
-import type { GestureResponderEvent } from 'react-native';
-
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 
 type CommandsButtonPropsWithContext<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Pick<ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'disabled'> &
-  Pick<SuggestionsContextValue<Co, Us>, 'suggestions'> & {
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChannelContextValue<StreamChatGenerics>, 'disabled'> &
+  Pick<SuggestionsContextValue<StreamChatGenerics>, 'suggestions'> & {
     /** Function that opens commands selector */
     handleOnPress?: ((event: GestureResponderEvent) => void) & (() => void);
   };
 
 const CommandsButtonWithContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: CommandsButtonPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: CommandsButtonPropsWithContext<StreamChatGenerics>,
 ) => {
   const { disabled, handleOnPress, suggestions } = props;
 
@@ -79,17 +57,9 @@ const CommandsButtonWithContext = <
   );
 };
 
-const areEqual = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
->(
-  prevProps: CommandsButtonPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: CommandsButtonPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: CommandsButtonPropsWithContext<StreamChatGenerics>,
+  nextProps: CommandsButtonPropsWithContext<StreamChatGenerics>,
 ) => {
   const { disabled: prevDisabled, suggestions: prevSuggestions } = prevProps;
   const { disabled: nextDisabled, suggestions: nextSuggestions } = nextProps;
@@ -109,31 +79,19 @@ const MemoizedCommandsButton = React.memo(
 ) as typeof CommandsButtonWithContext;
 
 export type CommandsButtonProps<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Partial<CommandsButtonPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<CommandsButtonPropsWithContext<StreamChatGenerics>>;
 
 /**
  * UI Component for attach button in MessageInput component.
  */
 export const CommandsButton = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: CommandsButtonProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: CommandsButtonProps<StreamChatGenerics>,
 ) => {
-  const { disabled = false } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { suggestions } = useSuggestionsContext<Co, Us>();
+  const { disabled = false } = useChannelContext<StreamChatGenerics>();
+  const { suggestions } = useSuggestionsContext<StreamChatGenerics>();
 
   return <MemoizedCommandsButton {...{ disabled, suggestions }} {...props} />;
 };

package/src/components/MessageInput/CooldownTimer.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
+export type CooldownTimerProps = {
+  seconds: number;
+};
+
+const CONTAINER_SIZE = 24;
+const CONTAINER_HORIZONTAL_PADDING = 6;
+const EXTRA_CHARACTER_PADDING = CONTAINER_SIZE - CONTAINER_HORIZONTAL_PADDING * 2;
+
+/**
+ * To avoid the container jumping between sizes when there are more
+ * than one character in the width of the container since we aren't
+ * using a monospaced font.
+ */
+const normalizeWidth = (seconds: number) =>
+  CONTAINER_SIZE + EXTRA_CHARACTER_PADDING * (`${seconds}`.length - 1);
+
+/**
+ * Renders an amount of seconds left for a cooldown to finish.
+ *
+ * See `useCountdown` for an example of how to set a countdown
+ * to use as the source of `seconds`.
+ **/
+export const CooldownTimer = (props: CooldownTimerProps) => {
+  const { seconds } = props;
+  const {
+    theme: {
+      colors: { black, grey_gainsboro },
+      messageInput: {
+        cooldownTimer: { container, text },
+      },
+    },
+  } = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: grey_gainsboro,
+          width: normalizeWidth(seconds),
+        },
+        container,
+      ]}
+    >
+      <Text style={[styles.text, { color: black }, text]} testID='cooldown-seconds'>
+        {seconds}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    borderRadius: CONTAINER_SIZE / 2,
+    height: CONTAINER_SIZE,
+    justifyContent: 'center',
+    minWidth: CONTAINER_SIZE,
+    paddingHorizontal: CONTAINER_HORIZONTAL_PADDING,
+  },
+  text: { fontSize: 16, fontWeight: '600' },
+});

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -3,7 +3,6 @@ import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native
 
 import { UploadProgressIndicator } from './UploadProgressIndicator';
 
-import { getFileSizeDisplayText } from '../Attachment/FileAttachment';
 import {
   FileUpload,
   MessageInputContextValue,
@@ -15,18 +14,10 @@ import {
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Close } from '../../icons/Close';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { FileState, ProgressIndicatorTypes } from '../../utils/utils';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import { getFileSizeDisplayText } from '../Attachment/FileAttachment';
 
 const FILE_PREVIEW_HEIGHT = 60;
 
@@ -34,6 +25,10 @@ const styles = StyleSheet.create({
   dismiss: {
     borderRadius: 24,
     height: 24,
+    position: 'absolute',
+    right: 14,
+    top: 4,
+    width: 24,
   },
   fileContainer: {
     borderRadius: 12,
@@ -67,29 +62,17 @@ const styles = StyleSheet.create({
 });
 
 type FileUploadPreviewPropsWithContext<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
-  MessageInputContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+  MessageInputContextValue<StreamChatGenerics>,
   'fileUploads' | 'removeFile' | 'uploadFile'
 > &
-  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'FileAttachmentIcon'>;
+  Pick<MessagesContextValue<StreamChatGenerics>, 'FileAttachmentIcon'>;
 
 const FileUploadPreviewWithContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: FileUploadPreviewPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: FileUploadPreviewPropsWithContext<StreamChatGenerics>,
 ) => {
   const { FileAttachmentIcon, fileUploads, removeFile, uploadFile } = props;
 
@@ -98,7 +81,7 @@ const FileUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { black, grey, grey_whisper, overlay_dark },
+      colors: { black, grey, grey_whisper, overlay },
       messageInput: {
         fileUploadPreview: {
           dismiss,
@@ -112,74 +95,80 @@ const FileUploadPreviewWithContext = <
       },
     },
   } = useTheme();
-  const renderItem = ({ index, item }: { index: number; item: FileUpload }) => (
-    <UploadProgressIndicator
-      action={() => {
-        uploadFile({ newFile: item });
-      }}
-      active={item.state !== FileState.UPLOADED && item.state !== FileState.FINISHED}
-      style={styles.overlay}
-      type={
-        item.state === FileState.UPLOADING
-          ? ProgressIndicatorTypes.IN_PROGRESS
-          : item.state === FileState.UPLOAD_FAILED
-          ? ProgressIndicatorTypes.RETRY
-          : undefined
-      }
-    >
-      <View
-        style={[
-          styles.fileContainer,
-          index === fileUploads.length - 1
-            ? {
-                marginBottom: 0,
-              }
-            : {},
-          {
-            borderColor: grey_whisper,
-            width: flatListWidth - 16,
-          },
-          fileContainer,
-        ]}
-      >
-        <View style={[styles.fileContentContainer, fileContentContainer]}>
-          <FileAttachmentIcon mimeType={item.file.type} />
-          <View style={[styles.fileTextContainer, fileTextContainer]}>
-            <Text
-              numberOfLines={1}
-              style={[
-                styles.filenameText,
-                {
-                  color: black,
-                  width:
-                    flatListWidth -
-                    16 - // 16 = horizontal padding
-                    40 - // 40 = file icon size
-                    24 - // 24 = close icon size
-                    24, // 24 = internal padding
-                },
-                filenameText,
-              ]}
-            >
-              {item.file.name || ''}
-            </Text>
-            <Text style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
-              {getFileSizeDisplayText(item.file.size)}
-            </Text>
+
+  const renderItem = ({ index, item }: { index: number; item: FileUpload }) => {
+    const indicatorType =
+      item.state === FileState.UPLOADING
+        ? ProgressIndicatorTypes.IN_PROGRESS
+        : item.state === FileState.UPLOAD_FAILED
+        ? ProgressIndicatorTypes.RETRY
+        : undefined;
+
+    return (
+      <>
+        <UploadProgressIndicator
+          action={() => {
+            uploadFile({ newFile: item });
+          }}
+          active={item.state !== FileState.UPLOADED && item.state !== FileState.FINISHED}
+          style={styles.overlay}
+          type={indicatorType}
+        >
+          <View
+            style={[
+              styles.fileContainer,
+              index === fileUploads.length - 1
+                ? {
+                    marginBottom: 0,
+                  }
+                : {},
+              {
+                borderColor: grey_whisper,
+                width: flatListWidth - 16,
+              },
+              fileContainer,
+            ]}
+          >
+            <View style={[styles.fileContentContainer, fileContentContainer]}>
+              <FileAttachmentIcon mimeType={item.file.type} />
+              <View style={[styles.fileTextContainer, fileTextContainer]}>
+                <Text
+                  numberOfLines={1}
+                  style={[
+                    styles.filenameText,
+                    {
+                      color: black,
+                      width:
+                        flatListWidth -
+                        16 - // 16 = horizontal padding
+                        40 - // 40 = file icon size
+                        24 - // 24 = close icon size
+                        24, // 24 = internal padding
+                    },
+                    filenameText,
+                  ]}
+                >
+                  {item.file.name || ''}
+                </Text>
+                <Text style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
+                  {getFileSizeDisplayText(item.file.size)}
+                </Text>
+              </View>
+            </View>
           </View>
-        </View>
+        </UploadProgressIndicator>
         <TouchableOpacity
           onPress={() => {
             removeFile(item.id);
           }}
-          style={[styles.dismiss, { backgroundColor: overlay_dark }, dismiss]}
+          style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}
           testID='remove-file-upload-preview'
         >
           <Close />
         </TouchableOpacity>
-      </View>
-    </UploadProgressIndicator>
-  );
+      </>
+    );
+  };
 
   const fileUploadsLength = fileUploads.length;
 
@@ -212,17 +201,9 @@ const FileUploadPreviewWithContext = <
   ) : null;
 };
 
-const areEqual = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
->(
-  prevProps: FileUploadPreviewPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: FileUploadPreviewPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: FileUploadPreviewPropsWithContext<StreamChatGenerics>,
+  nextProps: FileUploadPreviewPropsWithContext<StreamChatGenerics>,
 ) => {
   const { fileUploads: prevFileUploads } = prevProps;
   const { fileUploads: nextFileUploads } = nextProps;
@@ -241,33 +222,20 @@ const MemoizedFileUploadPreview = React.memo(
 ) as typeof FileUploadPreviewWithContext;
 
 export type FileUploadPreviewProps<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Partial<FileUploadPreviewPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<FileUploadPreviewPropsWithContext<StreamChatGenerics>>;
 
 /**
  * FileUploadPreview
  * UI Component to preview the files set for upload
  */
 export const FileUploadPreview = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: FileUploadPreviewProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: FileUploadPreviewProps<StreamChatGenerics>,
 ) => {
-  const { fileUploads, removeFile, uploadFile } =
-    useMessageInputContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { FileAttachmentIcon } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { fileUploads, removeFile, uploadFile } = useMessageInputContext<StreamChatGenerics>();
+  const { FileAttachmentIcon } = useMessagesContext<StreamChatGenerics>();
 
   return (
     <MemoizedFileUploadPreview