stream-chat-react-native-core 3.10.1 → 4.0.0-beta.2

package/src/components/MessageInput/CooldownTimer.tsx

@@ -0,0 +1,66 @@
+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

@@ -102,7 +102,7 @@ const FileUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { black, grey, grey_whisper, overlay_dark },
+      colors: { black, grey, grey_whisper, overlay },
       messageInput: {
         fileUploadPreview: {
           dismiss,
@@ -182,7 +182,7 @@ const FileUploadPreviewWithContext = <
           onPress={() => {
             removeFile(item.id);
           }}
-          style={[styles.dismiss, { backgroundColor: overlay_dark }, dismiss]}
+          style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}
           testID='remove-file-upload-preview'
         >
           <Close />

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -83,7 +83,7 @@ const ImageUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { overlay_dark, white },
+      colors: { overlay, white },
       messageInput: {
         imageUploadPreview: { dismiss, flatList, itemContainer, upload },
       },
@@ -122,7 +122,7 @@ const ImageUploadPreviewWithContext = <
         onPress={() => {
           removeImage(item.id);
         }}
-        style={[styles.dismiss, { backgroundColor: overlay_dark }, dismiss]}
+        style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}
         testID='remove-image-upload-preview'
       >
         <Close pathFill={white} />

package/src/components/MessageInput/InputButtons.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -55,7 +56,6 @@ export type InputButtonsWithContextProps<
   | 'showMoreOptions'
   | 'text'
   | 'toggleAttachmentPicker'
-  | 'uploadsEnabled'
 >;
 
 export const InputButtonsWithContext = <
@@ -82,7 +82,6 @@ export const InputButtonsWithContext = <
     showMoreOptions,
     text,
     toggleAttachmentPicker,
-    uploadsEnabled,
   } = props;
 
   const {
@@ -91,6 +90,8 @@ export const InputButtonsWithContext = <
     },
   } = useTheme();
 
+  const ownCapabilities = useOwnCapabilitiesContext();
+
   if (giphyActive) {
     return null;
   }
@@ -99,7 +100,7 @@ export const InputButtonsWithContext = <
     <MoreOptionsButton handleOnPress={() => setShowMoreOptions(true)} />
   ) : (
     <>
-      {(hasImagePicker || hasFilePicker) && uploadsEnabled !== false && (
+      {(hasImagePicker || hasFilePicker) && ownCapabilities.uploadFile && (
         <View
           style={[hasCommands ? styles.attachButtonContainer : undefined, attachButtonContainer]}
         >
@@ -134,7 +135,6 @@ const areEqual = <
     selectedPicker: prevSelectedPicker,
     showMoreOptions: prevShowMoreOptions,
     text: prevText,
-    uploadsEnabled: prevUploadsEnabled,
   } = prevProps;
 
   const {
@@ -145,7 +145,6 @@ const areEqual = <
     selectedPicker: nextSelectedPicker,
     showMoreOptions: nextShowMoreOptions,
     text: nextText,
-    uploadsEnabled: nextUploadsEnabled,
   } = nextProps;
 
   if (prevHasImagePicker !== nextHasImagePicker) {
@@ -160,9 +159,6 @@ const areEqual = <
     return false;
   }
 
-  if (prevUploadsEnabled !== nextUploadsEnabled) {
-    return false;
-  }
   if (prevSelectedPicker !== nextSelectedPicker) {
     return false;
   }
@@ -212,7 +208,6 @@ export const InputButtons = <
     showMoreOptions,
     text,
     toggleAttachmentPicker,
-    uploadsEnabled,
   } = useMessageInputContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   return (
@@ -231,7 +226,6 @@ export const InputButtons = <
         showMoreOptions,
         text,
         toggleAttachmentPicker,
-        uploadsEnabled,
       }}
       {...props}
     />

package/src/components/MessageInput/MessageInput.tsx

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
+import { useCountdown } from './hooks/useCountdown';
+
 import { AttachmentSelectionBar } from '../AttachmentPicker/components/AttachmentSelectionBar';
 import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
-import { SuggestionsList } from '../AutoCompleteInput/SuggestionsList';
 
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import {
   ChannelContextValue,
   useChannelContext,
@@ -120,6 +122,8 @@ type MessageInputPropsWithContext<
     | 'additionalTextInputProps'
     | 'asyncIds'
     | 'asyncUploads'
+    | 'cooldownEndsAt'
+    | 'CooldownTimer'
     | 'clearEditingState'
     | 'clearQuotedMessageState'
     | 'closeAttachmentPicker'
@@ -148,8 +152,15 @@ type MessageInputPropsWithContext<
     | 'removeImage'
     | 'uploadNewImage'
   > &
-  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'Reply' | 'quotedRepliesEnabled'> &
-  Pick<SuggestionsContextValue<Co, Us>, 'componentType' | 'suggestions' | 'suggestionsTitle'> &
+  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'Reply'> &
+  Pick<
+    SuggestionsContextValue<Co, Us>,
+    | 'AutoCompleteSuggestionHeader'
+    | 'AutoCompleteSuggestionItem'
+    | 'AutoCompleteSuggestionList'
+    | 'suggestions'
+    | 'triggerType'
+  > &
   Pick<ThreadContextValue, 'thread'> &
   Pick<TranslationContextValue, 't'> & {
     threadList?: boolean;
@@ -170,10 +181,12 @@ const MessageInputWithContext = <
     additionalTextInputProps,
     asyncIds,
     asyncUploads,
+    AutoCompleteSuggestionList,
     clearEditingState,
     clearQuotedMessageState,
     closeAttachmentPicker,
-    componentType,
+    cooldownEndsAt,
+    CooldownTimer,
     disabled,
     editing,
     FileUploadPreview,
@@ -190,7 +203,6 @@ const MessageInputWithContext = <
     mentionedUsers,
     numberOfUploads,
     quotedMessage,
-    quotedRepliesEnabled,
     removeImage,
     Reply,
     resetInput,
@@ -201,10 +213,10 @@ const MessageInputWithContext = <
     setShowMoreOptions,
     ShowThreadMessageInChannelButton,
     suggestions,
-    suggestionsTitle,
     t,
     thread,
     threadList,
+    triggerType,
     uploadNewImage,
     watchers,
   } = props;
@@ -236,7 +248,7 @@ const MessageInputWithContext = <
         optionsContainer,
         replyContainer,
         sendButtonContainer,
-        suggestionsListContainer,
+        suggestionsListContainer: { container: suggestionListContainer },
       },
     },
   } = useTheme();
@@ -251,6 +263,8 @@ const MessageInputWithContext = <
     setSelectedImages,
   } = useAttachmentPickerContext();
 
+  const { seconds: cooldownRemainingSeconds } = useCountdown(cooldownEndsAt);
+
   /**
    * Mounting and un-mounting logic are un-related in following useEffect.
    * While mounting we want to pass maxNumberOfFiles (which is prop on Channel component)
@@ -462,9 +476,6 @@ const MessageInputWithContext = <
                 if (quotedMessage) {
                   clearQuotedMessageState();
                 }
-                if (inputBoxRef.current) {
-                  inputBoxRef.current.blur();
-                }
               }}
               testID='close-button'
             >
@@ -493,10 +504,7 @@ const MessageInputWithContext = <
                   inputBoxContainer,
                 ]}
               >
-                {((typeof editing !== 'boolean' &&
-                  quotedRepliesEnabled &&
-                  editing?.quoted_message) ||
-                  quotedMessage) && (
+                {((typeof editing !== 'boolean' && editing?.quoted_message) || quotedMessage) && (
                   <View style={[styles.replyContainer, replyContainer]}>
                     <Reply />
                   </View>
@@ -538,6 +546,7 @@ const MessageInputWithContext = <
                   )}
                   <AutoCompleteInput<At, Ch, Co, Ev, Me, Re, Us>
                     additionalTextInputProps={additionalTextInputProps}
+                    cooldownActive={!!cooldownRemainingSeconds}
                   />
                   {giphyActive && (
                     <TouchableOpacity
@@ -554,26 +563,32 @@ const MessageInputWithContext = <
                 </View>
               </View>
               <View style={[styles.sendButtonContainer, sendButtonContainer]}>
-                <SendButton disabled={disabled || sending.current || !isValidMessage()} />
+                {cooldownRemainingSeconds ? (
+                  <CooldownTimer seconds={cooldownRemainingSeconds} />
+                ) : (
+                  <SendButton disabled={disabled || sending.current || !isValidMessage()} />
+                )}
               </View>
             </>
           )}
         </View>
         <ShowThreadMessageInChannelButton threadList={threadList} />
       </View>
-      {componentType && suggestions ? (
+
+      {triggerType && suggestions ? (
         <View
           style={[
+            suggestionListContainer,
             styles.suggestionsListContainer,
             { backgroundColor: white, bottom: height },
-            suggestionsListContainer,
           ]}
         >
-          <SuggestionsList<Co, Us>
+          <AutoCompleteSuggestionList
             active={!!suggestions}
-            componentType={componentType}
-            suggestions={suggestions}
-            suggestionsTitle={suggestionsTitle}
+            data={suggestions.data}
+            onSelect={suggestions.onSelect}
+            queryText={suggestions.queryText}
+            triggerType={triggerType}
           />
         </View>
       ) : null}
@@ -623,7 +638,6 @@ const areEqual = <
     sending: prevSending,
     showMoreOptions: prevShowMoreOptions,
     suggestions: prevSuggestions,
-    suggestionsTitle: prevSuggestionsTitle,
     t: prevT,
     thread: prevThread,
     threadList: prevThreadList,
@@ -642,7 +656,6 @@ const areEqual = <
     sending: nextSending,
     showMoreOptions: nextShowMoreOptions,
     suggestions: nextSuggestions,
-    suggestionsTitle: nextSuggestionsTitle,
     t: nextT,
     thread: nextThread,
     threadList: nextThreadList,
@@ -705,9 +718,6 @@ const areEqual = <
       : !!prevSuggestions === !!nextSuggestions;
   if (!suggestionsEqual) return false;
 
-  const suggestionsTitleEqual = prevSuggestionsTitle === nextSuggestionsTitle;
-  if (!suggestionsTitleEqual) return false;
-
   const threadEqual =
     prevThread?.id === nextThread?.id &&
     prevThread?.text === nextThread?.text &&
@@ -755,6 +765,8 @@ export const MessageInput = <
 >(
   props: MessageInputProps<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
+  const ownCapabilities = useOwnCapabilitiesContext();
+
   const { disabled = false, members, watchers } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   const {
@@ -764,6 +776,8 @@ export const MessageInput = <
     clearEditingState,
     clearQuotedMessageState,
     closeAttachmentPicker,
+    cooldownEndsAt,
+    CooldownTimer,
     editing,
     FileUploadPreview,
     fileUploads,
@@ -783,6 +797,7 @@ export const MessageInput = <
     SendButton,
     sending,
     sendMessageAsync,
+    SendMessageDisallowedIndicator,
     setGiphyActive,
     setShowMoreOptions,
     showMoreOptions,
@@ -790,24 +805,38 @@ export const MessageInput = <
     uploadNewImage,
   } = useMessageInputContext<At, Ch, Co, Ev, Me, Re, Us>();
 
-  const { quotedRepliesEnabled, Reply } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { Reply } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
 
-  const { componentType, suggestions, suggestionsTitle } = useSuggestionsContext<Co, Us>();
+  const {
+    AutoCompleteSuggestionHeader,
+    AutoCompleteSuggestionItem,
+    AutoCompleteSuggestionList,
+    suggestions,
+    triggerType,
+  } = useSuggestionsContext<Co, Us>();
 
   const { thread } = useThreadContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   const { t } = useTranslationContext();
 
+  if (!ownCapabilities.sendMessage && SendMessageDisallowedIndicator) {
+    return <SendMessageDisallowedIndicator />;
+  }
+
   return (
     <MemoizedMessageInput
       {...{
         additionalTextInputProps,
         asyncIds,
         asyncUploads,
+        AutoCompleteSuggestionHeader,
+        AutoCompleteSuggestionItem,
+        AutoCompleteSuggestionList,
         clearEditingState,
         clearQuotedMessageState,
         closeAttachmentPicker,
-        componentType,
+        cooldownEndsAt,
+        CooldownTimer,
         disabled,
         editing,
         FileUploadPreview,
@@ -824,7 +853,6 @@ export const MessageInput = <
         mentionedUsers,
         numberOfUploads,
         quotedMessage,
-        quotedRepliesEnabled,
         removeImage,
         Reply,
         resetInput,
@@ -836,9 +864,9 @@ export const MessageInput = <
         showMoreOptions,
         ShowThreadMessageInChannelButton,
         suggestions,
-        suggestionsTitle,
         t,
         thread,
+        triggerType,
         uploadNewImage,
         watchers,
       }}

package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    borderTopWidth: 1,
+    height: 50,
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 17,
+    fontWeight: '400',
+  },
+});
+
+export const SendMessageDisallowedIndicator = () => {
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      colors: { border, grey_dark },
+      messageInput: {
+        sendMessageDisallowedIndicator: { container, text },
+      },
+    },
+  } = useTheme();
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          borderTopColor: border,
+          height: 50,
+        },
+        container,
+      ]}
+      testID='send-message-disallowed-indicator'
+    >
+      <Text style={[styles.text, { color: grey_dark }, text]}>
+        {t("You can't send messages in this channel")}
+      </Text>
+    </View>
+  );
+};

package/src/components/MessageInput/ShowThreadMessageInChannelButton.tsx

@@ -87,7 +87,7 @@ export const ShowThreadMessageInChannelButtonWithContext: React.FC<ShowThreadMes
     }
 
     return (
-      <View style={[styles.container, container]}>
+      <View style={[styles.container, container]} testID='show-thread-message-in-channel-button'>
         <TouchableOpacity
           onPress={() => setSendThreadMessageInChannel((prevSendInChannel) => !prevSendInChannel)}
         >