fix: refine the implementation

Author: khushal87

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -1,5 +1,12 @@
-import React, { useEffect, useState } from 'react';
-import { I18nManager, StyleSheet, TextInput, TextInputProps } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  I18nManager,
+  NativeSyntheticEvent,
+  StyleSheet,
+  TextInput,
+  TextInputContentSizeChangeEventData,
+  TextInputSelectionChangeEventData,
+} from 'react-native';
 
 import { TextComposerState } from 'stream-chat';
 
@@ -34,6 +41,7 @@ type AutoCompleteInputPropsWithContext = Pick<
   | 'giphyEnabled'
   | 'maxMessageLength'
   | 'numberOfLines'
+  | 'onChangeText'
   | 'setGiphyActive'
   | 'setInputBoxRef'
 > &
@@ -59,44 +67,70 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
     giphyEnabled,
     maxMessageLength,
     numberOfLines,
+    onChangeText,
     setGiphyActive,
     setInputBoxRef,
     t,
   } = props;
   const [localText, setLocalText] = useState('');
   const [selection, setSelection] = useState({ end: 0, start: 0 });
+  const [textHeight, setTextHeight] = useState(0);
   const messageComposer = useMessageComposer();
+  const { textComposer } = messageComposer;
 
-  const { text } = useStateStore(messageComposer.textComposer.state, messageComposerStateSelector);
+  const { text } = useStateStore(textComposer.state, messageComposerStateSelector);
 
   useEffect(() => {
     setLocalText(text);
   }, [text]);
 
-  const handleSelectionChange: TextInputProps['onSelectionChange'] = ({
-    nativeEvent: { selection },
-  }) => {
-    setSelection(selection);
-  };
-
-  const onTextChangeHandler = async (newText: string) => {
-    setLocalText(newText);
-    const isGiphy = giphyEnabled && newText && newText.startsWith('/giphy ');
-
-    if (isGiphy) {
-      setGiphyActive(true);
-    }
-
-    await messageComposer.textComposer.handleChange({
-      selection: {
-        end: selection.end + 1,
-        start: selection.start + 1,
-      },
-      text: isGiphy ? newText.slice(7) : newText,
-    });
-  };
+  const handleSelectionChange = useCallback(
+    (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+      const { selection } = e.nativeEvent;
+      if (additionalTextInputProps?.onSelectionChange) {
+        additionalTextInputProps.onSelectionChange(e);
+        return;
+      }
+      setSelection(selection);
+    },
+    [additionalTextInputProps],
+  );
 
-  const [textHeight, setTextHeight] = useState(0);
+  const onTextChangeHandler = useCallback(
+    async (newText: string) => {
+      if (onChangeText) {
+        onChangeText(newText);
+        return;
+      }
+      if (additionalTextInputProps?.onChangeText) {
+        additionalTextInputProps.onChangeText(newText);
+        return;
+      }
+      setLocalText(newText);
+      const isGiphy = giphyEnabled && newText && newText.startsWith('/giphy ');
+
+      if (isGiphy) {
+        setGiphyActive(true);
+      }
+
+      await textComposer.handleChange({
+        selection: {
+          end: selection.end + 1,
+          start: selection.start + 1,
+        },
+        text: isGiphy ? newText.slice(7) : newText,
+      });
+    },
+    [
+      additionalTextInputProps,
+      giphyEnabled,
+      onChangeText,
+      textComposer,
+      selection.end,
+      selection.start,
+      setGiphyActive,
+    ],
+  );
 
   const {
     theme: {
@@ -105,27 +139,30 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
     },
   } = useTheme();
 
-  const placeholderText = giphyActive
-    ? t('Search GIFs')
-    : cooldownActive
-      ? t('Slow mode ON')
-      : t('Send a message');
+  const placeholderText = useMemo(() => {
+    return giphyActive
+      ? t('Search GIFs')
+      : cooldownActive
+        ? t('Slow mode ON')
+        : t('Send a message');
+  }, [cooldownActive, giphyActive, t]);
+
+  const handleContentSizeChange = useCallback(
+    ({
+      nativeEvent: { contentSize },
+    }: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+      setTextHeight(contentSize.height);
+    },
+    [],
+  );
 
   return (
     <TextInput
       autoFocus={giphyActive}
       maxLength={maxMessageLength}
       multiline
       onChangeText={onTextChangeHandler}
-      onContentSizeChange={({
-        nativeEvent: {
-          contentSize: { height },
-        },
-      }) => {
-        if (!textHeight) {
-          setTextHeight(height);
-        }
-      }}
+      onContentSizeChange={handleContentSizeChange}
       onSelectionChange={handleSelectionChange}
       placeholder={placeholderText}
       placeholderTextColor={grey}
@@ -183,6 +220,7 @@ export const AutoCompleteInput = (props: AutoCompleteInputProps) => {
     giphyActive,
     maxMessageLength,
     numberOfLines,
+    onChangeText,
     setGiphyActive,
     setInputBoxRef,
   } = useMessageInputContext();
@@ -196,6 +234,7 @@ export const AutoCompleteInput = (props: AutoCompleteInputProps) => {
         giphyEnabled,
         maxMessageLength,
         numberOfLines,
+        onChangeText,
         setGiphyActive,
         setInputBoxRef,
         t,

package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx

@@ -8,8 +8,8 @@ import { Lightning } from '../../icons/Lightning';
 import { Smile } from '../../icons/Smile';
 
 export type AutoCompleteSuggestionHeaderProps = {
-  queryText: string;
-  triggerType: string;
+  queryText?: string;
+  triggerType?: string;
 };
 
 const styles = StyleSheet.create({

package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { CommandSuggestion, TextComposerSuggestion, UserSuggestion } from 'stream-chat';
 
 import { AutoCompleteSuggestionCommandIcon } from './AutoCompleteSuggestionCommandIcon';
 
+import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import type { Emoji } from '../../emoji-data';
 import { AtMentions } from '../../icons/AtMentions';
@@ -13,7 +14,7 @@ import { Avatar } from '../Avatar/Avatar';
 
 export type AutoCompleteSuggestionItemProps = {
   itemProps: TextComposerSuggestion;
-  triggerType: string;
+  triggerType?: string;
 };
 
 export const MentionSuggestionItem = (item: UserSuggestion) => {
@@ -91,22 +92,44 @@ const CommandSuggestionItem = (item: CommandSuggestion) => {
   );
 };
 
-export const AutoCompleteSuggestionItem = ({
-  itemProps,
-  triggerType,
-}: AutoCompleteSuggestionItemProps) => {
+const renderSuggestionItem = (item: TextComposerSuggestion, triggerType?: string) => {
   switch (triggerType) {
     case 'mention':
-      return <MentionSuggestionItem {...(itemProps as UserSuggestion)} />;
+      return <MentionSuggestionItem {...(item as UserSuggestion)} />;
     case 'emoji':
-      return <EmojiSuggestionItem {...(itemProps as Emoji)} />;
+      return <EmojiSuggestionItem {...(item as Emoji)} />;
     case 'command':
-      return <CommandSuggestionItem {...itemProps} />;
+      return <CommandSuggestionItem {...(item as CommandSuggestion)} />;
     default:
       return null;
   }
 };
 
+export const AutoCompleteSuggestionItem = ({
+  itemProps,
+  triggerType,
+}: AutoCompleteSuggestionItemProps) => {
+  const messageComposer = useMessageComposer();
+  const { textComposer } = messageComposer;
+
+  const {
+    theme: {
+      messageInput: {
+        suggestions: { item: itemStyle },
+      },
+    },
+  } = useTheme();
+
+  return (
+    <Pressable
+      onPress={() => textComposer.handleSelect(itemProps)}
+      style={({ pressed }) => [{ opacity: pressed ? 0.2 : 1 }, itemStyle]}
+    >
+      {renderSuggestionItem(itemProps, triggerType)}
+    </Pressable>
+  );
+};
+
 const styles = StyleSheet.create({
   args: {
     fontSize: 14,