stream-chat-react-native-core 3.10.2 → 4.0.0-beta.4

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -10,8 +10,6 @@ import {
 } from '../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Close } from '../../icons/Close';
-import { FileState, ProgressIndicatorTypes } from '../../utils/utils';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -22,6 +20,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { FileState, ProgressIndicatorTypes } from '../../utils/utils';
 
 const IMAGE_PREVIEW_SIZE = 100;
 
@@ -83,7 +82,7 @@ const ImageUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { overlay_dark, white },
+      colors: { overlay, white },
       messageInput: {
         imageUploadPreview: { dismiss, flatList, itemContainer, upload },
       },
@@ -122,7 +121,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

@@ -5,6 +5,7 @@ import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../contexts/messageInputContext/MessageInputContext';
+import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 import type {
@@ -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,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
-import { AttachmentSelectionBar } from '../AttachmentPicker/components/AttachmentSelectionBar';
-import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
-import { SuggestionsList } from '../AutoCompleteInput/SuggestionsList';
+import type { UserResponse } from 'stream-chat';
+
+import { useCountdown } from './hooks/useCountdown';
 
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import {
@@ -18,6 +18,7 @@ import {
   MessagesContextValue,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
+import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import {
   SuggestionsContextValue,
   useSuggestionsContext,
@@ -30,8 +31,6 @@ import {
 } from '../../contexts/translationContext/TranslationContext';
 import { CircleClose, CurveLineLeftUp, Edit, Lightning } from '../../icons';
 
-import type { UserResponse } from 'stream-chat';
-
 import type { Asset } from '../../native';
 import type {
   DefaultAttachmentType,
@@ -43,6 +42,8 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { AttachmentSelectionBar } from '../AttachmentPicker/components/AttachmentSelectionBar';
+import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
 
 const styles = StyleSheet.create({
   attachmentSeparator: {
@@ -120,6 +121,8 @@ type MessageInputPropsWithContext<
     | 'additionalTextInputProps'
     | 'asyncIds'
     | 'asyncUploads'
+    | 'cooldownEndsAt'
+    | 'CooldownTimer'
     | 'clearEditingState'
     | 'clearQuotedMessageState'
     | 'closeAttachmentPicker'
@@ -148,8 +151,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 +180,12 @@ const MessageInputWithContext = <
     additionalTextInputProps,
     asyncIds,
     asyncUploads,
+    AutoCompleteSuggestionList,
     clearEditingState,
     clearQuotedMessageState,
     closeAttachmentPicker,
-    componentType,
+    cooldownEndsAt,
+    CooldownTimer,
     disabled,
     editing,
     FileUploadPreview,
@@ -190,7 +202,6 @@ const MessageInputWithContext = <
     mentionedUsers,
     numberOfUploads,
     quotedMessage,
-    quotedRepliesEnabled,
     removeImage,
     Reply,
     resetInput,
@@ -201,10 +212,10 @@ const MessageInputWithContext = <
     setShowMoreOptions,
     ShowThreadMessageInChannelButton,
     suggestions,
-    suggestionsTitle,
     t,
     thread,
     threadList,
+    triggerType,
     uploadNewImage,
     watchers,
   } = props;
@@ -236,7 +247,7 @@ const MessageInputWithContext = <
         optionsContainer,
         replyContainer,
         sendButtonContainer,
-        suggestionsListContainer,
+        suggestionsListContainer: { container: suggestionListContainer },
       },
     },
   } = useTheme();
@@ -251,6 +262,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 +475,6 @@ const MessageInputWithContext = <
                 if (quotedMessage) {
                   clearQuotedMessageState();
                 }
-                if (inputBoxRef.current) {
-                  inputBoxRef.current.blur();
-                }
               }}
               testID='close-button'
             >
@@ -493,10 +503,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 +545,7 @@ const MessageInputWithContext = <
                   )}
                   <AutoCompleteInput<At, Ch, Co, Ev, Me, Re, Us>
                     additionalTextInputProps={additionalTextInputProps}
+                    cooldownActive={!!cooldownRemainingSeconds}
                   />
                   {giphyActive && (
                     <TouchableOpacity
@@ -554,26 +562,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 +637,6 @@ const areEqual = <
     sending: prevSending,
     showMoreOptions: prevShowMoreOptions,
     suggestions: prevSuggestions,
-    suggestionsTitle: prevSuggestionsTitle,
     t: prevT,
     thread: prevThread,
     threadList: prevThreadList,
@@ -642,7 +655,6 @@ const areEqual = <
     sending: nextSending,
     showMoreOptions: nextShowMoreOptions,
     suggestions: nextSuggestions,
-    suggestionsTitle: nextSuggestionsTitle,
     t: nextT,
     thread: nextThread,
     threadList: nextThreadList,
@@ -705,9 +717,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 +764,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 +775,8 @@ export const MessageInput = <
     clearEditingState,
     clearQuotedMessageState,
     closeAttachmentPicker,
+    cooldownEndsAt,
+    CooldownTimer,
     editing,
     FileUploadPreview,
     fileUploads,
@@ -783,6 +796,7 @@ export const MessageInput = <
     SendButton,
     sending,
     sendMessageAsync,
+    SendMessageDisallowedIndicator,
     setGiphyActive,
     setShowMoreOptions,
     showMoreOptions,
@@ -790,24 +804,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 +852,6 @@ export const MessageInput = <
         mentionedUsers,
         numberOfUploads,
         quotedMessage,
-        quotedRepliesEnabled,
         removeImage,
         Reply,
         resetInput,
@@ -836,9 +863,9 @@ export const MessageInput = <
         showMoreOptions,
         ShowThreadMessageInChannelButton,
         suggestions,
-        suggestionsTitle,
         t,
         thread,
+        triggerType,
         uploadNewImage,
         watchers,
       }}

package/src/components/MessageInput/MoreOptionsButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { GestureResponderEvent } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import {
@@ -8,8 +9,6 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { CircleRight } from '../../icons/CircleRight';
 
-import type { GestureResponderEvent } from 'react-native';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+
+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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
-import { Check } from '../../icons';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -12,6 +11,7 @@ import {
   TranslationContextValue,
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
+import { Check } from '../../icons';
 
 import type {
   DefaultAttachmentType,
@@ -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)}
         >

package/src/components/MessageInput/__tests__/AttachButton.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
-import { AttachButton } from '../AttachButton';
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { AttachButton } from '../AttachButton';
 
 describe('AttachButton', () => {
   it('should render an enabled AttachButton', async () => {