refactor: context logic

GetStream · Dec 13, 2023 · 92fa71c · 92fa71c
1 parent 99c5f52
commit 92fa71c
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 79 deletions.
diff --git a/...urus/docs/reactnative/common-content/contexts/message-input-context/focused.mdx b/...urus/docs/reactnative/common-content/contexts/message-input-context/focused.mdx
diff --git a/.../docs/reactnative/common-content/contexts/message-input-context/set_focused.mdx b/.../docs/reactnative/common-content/contexts/message-input-context/set_focused.mdx
diff --git a/docusaurus/docs/reactnative/contexts/message_input_context.mdx b/docusaurus/docs/reactnative/contexts/message_input_context.mdx
@@ -42,7 +42,6 @@ import CooldownEndsAt from '../common-content/contexts/message-input-context/coo
 import Editing from '../common-content/contexts/message-input-context/editing.mdx';
 import EditMessage from '../common-content/contexts/message-input-context/edit_message.mdx';
 import FileUploads from '../common-content/contexts/message-input-context/file_uploads.mdx';
-import Focused from '../common-content/contexts/message-input-context/focused.mdx';
 import GiphyActive from '../common-content/contexts/message-input-context/giphy_active.mdx';
 import ImageUploads from '../common-content/contexts/message-input-context/image_uploads.mdx';
 import InputBoxRef from '../common-content/contexts/message-input-context/input_box_ref.mdx';
@@ -57,7 +56,6 @@ import QuotedMessage from '../common-content/contexts/message-input-context/quot
 import RemoveFile from '../common-content/contexts/message-input-context/remove_file.mdx';
 import RemoveImage from '../common-content/contexts/message-input-context/remove_image.mdx';
 import ResetInput from '../common-content/contexts/message-input-context/reset_input.mdx';
-import SetFocused from '../common-content/contexts/message-input-context/set_focused.mdx';
 import SetGiphyActive from '../common-content/contexts/message-input-context/set_giphy_active.mdx';
 import SendMessage from '../common-content/contexts/message-input-context/send_message.mdx';
 import SendThreadMessageInChannel from '../common-content/contexts/message-input-context/send_thread_message_in_channel.mdx';
@@ -218,10 +216,6 @@ const { sendMessage, toggleAttachmentPicker } = useMessageInputContext();
 
 <FileUploads />
 
-### `focused`
-
-<Focused />
-
 ### giphyActive
 
 <GiphyActive />
@@ -300,10 +294,6 @@ const { sendMessage, toggleAttachmentPicker } = useMessageInputContext();
 
 <SetFileUploads />
 
-### SetFocused
-
-<SetFocused />
-
 ### setGiphyActive
 
 <SetGiphyActive />

diff --git a/docusaurus/docs/reactnative/ui-components/message_input.mdx b/docusaurus/docs/reactnative/ui-components/message_input.mdx
@@ -27,7 +27,6 @@ import ClearQuotedMessageState from '../common-content/contexts/message-input-co
 import CloseAttachmentPicker from '../common-content/contexts/message-input-context/close_attachment_picker.mdx';
 import Editing from '../common-content/contexts/message-input-context/editing.mdx';
 import FileUploads from '../common-content/contexts/message-input-context/file_uploads.mdx';
-import Focused from '../common-content/contexts/message-input-context/focused.mdx';
 import GiphyActive from '../common-content/contexts/message-input-context/giphy_active.mdx';
 import ImageUploads from '../common-content/contexts/message-input-context/image_uploads.mdx';
 import InputBoxRef from '../common-content/contexts/message-input-context/input_box_ref.mdx';
@@ -38,7 +37,6 @@ import QuotedMessage from '../common-content/contexts/message-input-context/quot
 import RemoveImage from '../common-content/contexts/message-input-context/remove_image.mdx';
 import ResetInput from '../common-content/contexts/message-input-context/reset_input.mdx';
 import SendMessageAsync from '../common-content/contexts/message-input-context/send_message_async.mdx';
-import SetFocused from '../common-content/contexts/message-input-context/set_focused.mdx';
 import SetGiphyActive from '../common-content/contexts/message-input-context/set_giphy_active.mdx';
 import ShowMoreOptions from '../common-content/contexts/message-input-context/show_more_options.mdx';
 import UploadNewImage from '../common-content/contexts/message-input-context/upload_new_image.mdx';
@@ -95,10 +93,6 @@ Additionally please take a look at our [Guide Section](../guides/message_input_c
 
 ### <div class="label description">_overrides the value from [MessageInputContext](../contexts/message_input_context.mdx#focused)_</div> focused {#focused}
 
-<Focused />
-
-### <div class="label description">_overrides the value from [MessageInputContext](../contexts/message_input_context.mdx#imageuploads)_</div> `imageUploads` {#imageuploads}
-
 <ImageUploads />
 
 ### <div class="label description">_overrides the value from [MessageInputContext](../contexts/message_input_context.mdx#inputboxref)_</div> inputBoxRef {#inputboxref}
@@ -171,10 +165,6 @@ Additionally please take a look at our [Guide Section](../guides/message_input_c
 
 ### <div class="label description">_overrides the value from [MessageInputContext](../contexts/message_input_context.mdx#setfocused)_</div> `setFocused` {#setfocused}
 
-<SetFocused />
-
-### <div class="label description">_overrides the value from [MessageInputContext](../contexts/message_input_context.mdx#showmoreoptions)_</div> `showMoreOptions` {#showmoreoptions}
-
 <ShowMoreOptions />
 
 ### <div class="label description">_overrides the value from [ThreadContext](../contexts/message_input_context.mdx#thread)_</div> thread {#thread}

diff --git a/package/src/components/AutoCompleteInput/AutoCompleteInput.tsx b/package/src/components/AutoCompleteInput/AutoCompleteInput.tsx
@@ -55,17 +55,14 @@ type AutoCompleteInputPropsWithContext<
     MessageInputContextValue<StreamChatGenerics>,
     | 'additionalTextInputProps'
     | 'autoCompleteSuggestionsLimit'
-    | 'focused'
     | 'giphyActive'
     | 'maxMessageLength'
     | 'mentionAllAppUsersEnabled'
     | 'mentionAllAppUsersQuery'
     | 'numberOfLines'
     | 'onChange'
     | 'setGiphyActive'
-    | 'setFocused'
     | 'setInputBoxRef'
-    | 'setShowMoreOptions'
     | 'text'
     | 'triggerSettings'
   > &
@@ -103,10 +100,8 @@ const AutoCompleteInputWithContext = <
     numberOfLines,
     onChange,
     openSuggestions,
-    setFocused,
     setGiphyActive,
     setInputBoxRef,
-    setShowMoreOptions,
     t,
     text,
     triggerSettings,
@@ -428,19 +423,6 @@ const AutoCompleteInputWithContext = <
       testID='auto-complete-text-input'
       value={text}
       {...additionalTextInputProps}
-      onBlur={(event) => {
-        if (additionalTextInputProps?.onBlur) {
-          additionalTextInputProps?.onBlur(event);
-        }
-        if (setFocused) setFocused(false);
-        setShowMoreOptions(true);
-      }}
-      onFocus={(event) => {
-        if (additionalTextInputProps?.onFocus) {
-          additionalTextInputProps.onFocus(event);
-        }
-        if (setFocused) setFocused(true);
-      }}
     />
   );
 };
@@ -451,14 +433,12 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
 ) => {
   const {
     cooldownActive: prevCooldownActive,
-    focused: prevFocused,
     giphyActive: prevGiphyActive,
     t: prevT,
     text: prevText,
   } = prevProps;
   const {
     cooldownActive: nextCooldownActive,
-    focused: nextFocused,
     giphyActive: nextGiphyActive,
     t: nextT,
     text: nextText,
@@ -467,9 +447,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const giphyActiveEqual = prevGiphyActive === nextGiphyActive;
   if (!giphyActiveEqual) return false;
 
-  const focusedEqual = prevFocused === nextFocused;
-  if (!focusedEqual) return false;
-
   const tEqual = prevT === nextT;
   if (!tEqual) return false;
 
@@ -496,14 +473,12 @@ export const AutoCompleteInput = <
   const {
     additionalTextInputProps,
     autoCompleteSuggestionsLimit,
-    focused,
     giphyActive,
     maxMessageLength,
     mentionAllAppUsersEnabled,
     mentionAllAppUsersQuery,
     numberOfLines,
     onChange,
-    setFocused,
     setGiphyActive,
     setInputBoxRef,
     setShowMoreOptions,
@@ -520,7 +495,6 @@ export const AutoCompleteInput = <
         additionalTextInputProps,
         autoCompleteSuggestionsLimit,
         closeSuggestions,
-        focused,
         giphyActive,
         giphyEnabled,
         maxMessageLength,
@@ -529,7 +503,6 @@ export const AutoCompleteInput = <
         numberOfLines,
         onChange,
         openSuggestions,
-        setFocused,
         setGiphyActive,
         setInputBoxRef,
         setShowMoreOptions,

diff --git a/package/src/components/MessageInput/MessageInput.tsx b/package/src/components/MessageInput/MessageInput.tsx
@@ -1,5 +1,11 @@
-import React, { useEffect, useState } from 'react';
-import { Alert, StyleSheet, View } from 'react-native';
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  Alert,
+  NativeSyntheticEvent,
+  StyleSheet,
+  TextInputFocusEventData,
+  View,
+} from 'react-native';
 
 import type { UserResponse } from 'stream-chat';
 
@@ -94,7 +100,6 @@ type MessageInputPropsWithContext<
     | 'editing'
     | 'FileUploadPreview'
     | 'fileUploads'
-    | 'focused'
     | 'giphyActive'
     | 'ImageUploadPreview'
     | 'imageUploads'
@@ -153,7 +158,6 @@ const MessageInputWithContext = <
     editing,
     FileUploadPreview,
     fileUploads,
-    focused,
     giphyActive,
     ImageUploadPreview,
     imageUploads,
@@ -177,6 +181,7 @@ const MessageInputWithContext = <
     SendButton,
     sending,
     sendMessageAsync,
+    setShowMoreOptions,
     ShowThreadMessageInChannelButton,
     suggestions,
     thread,
@@ -237,6 +242,7 @@ const MessageInputWithContext = <
 
   const [hasResetImages, setHasResetImages] = useState(false);
   const [hasResetFiles, setHasResetFiles] = useState(false);
+  const [focused, setFocused] = useState(false);
   const selectedImagesLength = hasResetImages ? selectedImages.length : 0;
   const imageUploadsLength = hasResetImages ? imageUploads.length : 0;
   const selectedFilesLength = hasResetFiles ? selectedFiles.length : 0;
@@ -516,6 +522,26 @@ const MessageInputWithContext = <
     ...additionalTextInputProps,
   };
 
+  const memoizedAdditionalTextInputProps = useMemo(
+    () => ({
+      ...additionalTextInputProps,
+      onBlur: (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        if (additionalTextInputProps?.onBlur) {
+          additionalTextInputProps?.onBlur(event);
+        }
+        if (setFocused) setFocused(false);
+        setShowMoreOptions(true);
+      },
+      onFocus: (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        if (additionalTextInputProps?.onFocus) {
+          additionalTextInputProps.onFocus(event);
+        }
+        if (setFocused) setFocused(true);
+      },
+    }),
+    [additionalTextInputProps],
+  );
+
   return (
     <>
       <View
@@ -573,7 +599,7 @@ const MessageInputWithContext = <
                 ) : (
                   <View style={[styles.autoCompleteInputContainer, autoCompleteInputContainer]}>
                     <AutoCompleteInput<StreamChatGenerics>
-                      additionalTextInputProps={additionalTextInputProps}
+                      additionalTextInputProps={memoizedAdditionalTextInputProps}
                       cooldownActive={!!cooldownRemainingSeconds}
                     />
                   </View>
@@ -643,7 +669,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     disabled: prevDisabled,
     editing: prevEditing,
     fileUploads: prevFileUploads,
-    focused: prevFocused,
     giphyActive: prevGiphyActive,
     imageUploads: prevImageUploads,
     isOnline: prevIsOnline,
@@ -663,7 +688,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     disabled: nextDisabled,
     editing: nextEditing,
     fileUploads: nextFileUploads,
-    focused: nextFocused,
     giphyActive: nextGiphyActive,
     imageUploads: nextImageUploads,
     isOnline: nextIsOnline,
@@ -709,9 +733,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const sendingEqual = prevSending.current === nextSending.current;
   if (!sendingEqual) return false;
 
-  const focusedEqual = prevFocused === nextFocused;
-  if (!focusedEqual) return false;
-
   const showMoreOptionsEqual = prevShowMoreOptions === nextShowMoreOptions;
   if (!showMoreOptionsEqual) return false;
 
@@ -793,7 +814,6 @@ export const MessageInput = <
     editing,
     FileUploadPreview,
     fileUploads,
-    focused,
     giphyActive,
     ImageUploadPreview,
     imageUploads,
@@ -859,7 +879,6 @@ export const MessageInput = <
         editing,
         FileUploadPreview,
         fileUploads,
-        focused,
         giphyActive,
         ImageUploadPreview,
         imageUploads,

diff --git a/package/src/contexts/messageInputContext/MessageInputContext.tsx b/package/src/contexts/messageInputContext/MessageInputContext.tsx
@@ -198,8 +198,6 @@ export type LocalMessageInputContext<
   uploadImage: ({ newImage }: { newImage: ImageUpload }) => Promise<void>;
   uploadNewFile: (file: File) => Promise<void>;
   uploadNewImage: (image: Partial<Asset>) => Promise<void>;
-  focused?: boolean;
-  setFocused?: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 export type InputMessageInputContextValue<
@@ -397,7 +395,6 @@ export const MessageInputProvider = <
 }: PropsWithChildren<{
   value: InputMessageInputContextValue<StreamChatGenerics>;
 }>) => {
-  const [focused, setFocused] = useState<boolean>(false);
   const { closePicker, openPicker, selectedPicker, setSelectedPicker } =
     useAttachmentPickerContext();
   const { appSettings, client, enableOfflineSupport } = useChatContext<StreamChatGenerics>();
@@ -1139,7 +1136,6 @@ export const MessageInputProvider = <
     closeAttachmentPicker,
     cooldownEndsAt,
     fileUploads,
-    focused,
     giphyActive,
     imageUploads,
     inputBoxRef,
@@ -1163,7 +1159,6 @@ export const MessageInputProvider = <
     setAsyncIds,
     setAsyncUploads,
     setFileUploads,
-    setFocused,
     setGiphyActive,
     setImageUploads,
     setInputBoxRef,

diff --git a/package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts b/package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts
@@ -26,7 +26,6 @@ export const useCreateMessageInputContext = <
   editMessage,
   FileUploadPreview,
   fileUploads,
-  focused,
   giphyActive,
   hasCommands,
   hasFilePicker,
@@ -72,7 +71,6 @@ export const useCreateMessageInputContext = <
   setAsyncIds,
   setAsyncUploads,
   setFileUploads,
-  setFocused,
   setGiphyActive,
   setImageUploads,
   setInputBoxRef,
@@ -131,7 +129,6 @@ export const useCreateMessageInputContext = <
       editMessage,
       FileUploadPreview,
       fileUploads,
-      focused,
       giphyActive,
       hasCommands,
       hasFilePicker,
@@ -177,7 +174,6 @@ export const useCreateMessageInputContext = <
       setAsyncIds,
       setAsyncUploads,
       setFileUploads,
-      setFocused,
       setGiphyActive,
       setImageUploads,
       setInputBoxRef,
@@ -204,7 +200,6 @@ export const useCreateMessageInputContext = <
       cooldownEndsAt,
       editingdep,
       fileUploadsValue,
-      focused,
       giphyActive,
       imageUploadsValue,
       maxMessageLength,