Merge pull request #88944 from callstack-internal/decompose/composer-pr6-suggestions-and-memo

ReportActionCompose 6/6: compound API + strip memo from Suggestions

Author: cristipaval

src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx

@@ -26,7 +26,7 @@ type ReportActionComposeProps = {
     reportID: string;
 };
 
-function ReportActionComposeInner({reportID}: ReportActionComposeProps) {
+function ComposerInner({reportID}: ReportActionComposeProps) {
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
@@ -39,41 +39,53 @@ function ReportActionComposeInner({reportID}: ReportActionComposeProps) {
 
     return (
         <View style={[isComposerFullSize && styles.chatItemFullComposeRow]}>
-            <ComposerLocalTime reportID={reportID} />
+            <Composer.LocalTime reportID={reportID} />
             <View style={isComposerFullSize ? styles.flex1 : {}}>
                 <OfflineWithFeedback
                     shouldDisableOpacity
                     pendingAction={pendingAction}
                     style={isComposerFullSize ? styles.chatItemFullComposeRow : {}}
                     contentContainerStyle={isComposerFullSize ? styles.flex1 : {}}
                 >
-                    <ComposerDropZone reportID={reportID}>
-                        <ComposerBox reportID={reportID}>
-                            <ComposerActionMenu reportID={reportID} />
-                            <ComposerInput reportID={reportID} />
-                            <ComposerEmojiPicker reportID={reportID} />
-                            <ComposerSendButton />
-                        </ComposerBox>
-                    </ComposerDropZone>
-                    <ComposerFooter>
+                    <Composer.DropZone reportID={reportID}>
+                        <Composer.Box reportID={reportID}>
+                            <Composer.ActionMenu reportID={reportID} />
+                            <Composer.Input reportID={reportID} />
+                            <Composer.EmojiPicker reportID={reportID} />
+                            <Composer.SendButton />
+                        </Composer.Box>
+                    </Composer.DropZone>
+                    <Composer.Footer>
                         {!shouldUseNarrowLayout && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
-                        <AgentZeroAwareTypingIndicator reportID={reportID} />
-                        <ComposerExceededLength />
-                    </ComposerFooter>
+                        <Composer.TypingIndicator reportID={reportID} />
+                        <Composer.ExceededLength />
+                    </Composer.Footer>
                 </OfflineWithFeedback>
-                <ComposerImportedState />
+                <Composer.ImportedState />
             </View>
         </View>
     );
 }
 
-function ReportActionCompose({reportID}: ReportActionComposeProps) {
+function Composer({reportID}: ReportActionComposeProps) {
     return (
         <ComposerProvider reportID={reportID}>
-            <ReportActionComposeInner reportID={reportID} />
+            <ComposerInner reportID={reportID} />
         </ComposerProvider>
     );
 }
 
-export default ReportActionCompose;
+Composer.LocalTime = ComposerLocalTime;
+Composer.DropZone = ComposerDropZone;
+Composer.Box = ComposerBox;
+Composer.ActionMenu = ComposerActionMenu;
+Composer.Input = ComposerInput;
+Composer.EmojiPicker = ComposerEmojiPicker;
+Composer.SendButton = ComposerSendButton;
+Composer.Footer = ComposerFooter;
+Composer.TypingIndicator = AgentZeroAwareTypingIndicator;
+Composer.ExceededLength = ComposerExceededLength;
+Composer.ImportedState = ComposerImportedState;
+
+export default Composer;
 export type {SuggestionsRef, ComposerRef, ReportActionComposeProps};

src/pages/inbox/report/ReportActionCompose/Suggestions.tsx

@@ -1,5 +1,5 @@
 import type {ForwardedRef} from 'react';
-import React, {useCallback, useEffect, useImperativeHandle, useRef} from 'react';
+import React, {useEffect, useImperativeHandle, useRef} from 'react';
 import type {TextInputSelectionChangeEvent} from 'react-native';
 import {View} from 'react-native';
 import type {MeasureParentContainerAndCursorCallback} from '@components/AutoCompleteSuggestions/types';
@@ -71,7 +71,7 @@ function Suggestions({
     const {isDraggingOver} = useDragAndDropState();
     const prevIsDraggingOver = usePrevious(isDraggingOver);
 
-    const getSuggestions = useCallback(() => {
+    const getSuggestions = () => {
         if (suggestionEmojiRef.current?.getSuggestions) {
             const emojiSuggestions = suggestionEmojiRef.current.getSuggestions();
             if (emojiSuggestions.length > 0) {
@@ -87,45 +87,45 @@ function Suggestions({
         }
 
         return [];
-    }, []);
+    };
 
     /**
      * Clean data related to EmojiSuggestions
      */
-    const resetSuggestions = useCallback(() => {
+    const resetSuggestions = () => {
         suggestionEmojiRef.current?.resetSuggestions();
         suggestionMentionRef.current?.resetSuggestions();
-    }, []);
+    };
 
     /**
      * Listens for keyboard shortcuts and applies the action
      */
-    const triggerHotkeyActions = useCallback((e: KeyboardEvent) => {
+    const triggerHotkeyActions = (e: KeyboardEvent) => {
         const emojiHandler = suggestionEmojiRef.current?.triggerHotkeyActions(e);
         const mentionHandler = suggestionMentionRef.current?.triggerHotkeyActions(e);
         return emojiHandler ?? mentionHandler;
-    }, []);
+    };
 
-    const onSelectionChange = useCallback((e: TextInputSelectionChangeEvent) => {
+    const onSelectionChange = (e: TextInputSelectionChangeEvent) => {
         const emojiHandler = suggestionEmojiRef.current?.onSelectionChange?.(e);
         suggestionMentionRef.current?.onSelectionChange?.(e);
         return emojiHandler;
-    }, []);
+    };
 
-    const updateShouldShowSuggestionMenuToFalse = useCallback(() => {
+    const updateShouldShowSuggestionMenuToFalse = () => {
         suggestionEmojiRef.current?.updateShouldShowSuggestionMenuToFalse();
         suggestionMentionRef.current?.updateShouldShowSuggestionMenuToFalse();
-    }, []);
+    };
 
-    const setShouldBlockSuggestionCalc = useCallback((shouldBlock: boolean) => {
+    const setShouldBlockSuggestionCalc = (shouldBlock: boolean) => {
         suggestionEmojiRef.current?.setShouldBlockSuggestionCalc(shouldBlock);
         suggestionMentionRef.current?.setShouldBlockSuggestionCalc(shouldBlock);
-    }, []);
-    const getIsSuggestionsMenuVisible = useCallback((): boolean => {
+    };
+    const getIsSuggestionsMenuVisible = (): boolean => {
         const isEmojiVisible = suggestionEmojiRef.current?.getIsSuggestionsMenuVisible() ?? false;
         const isSuggestionVisible = suggestionMentionRef.current?.getIsSuggestionsMenuVisible() ?? false;
         return isEmojiVisible || isSuggestionVisible;
-    }, []);
+    };
 
     useImperativeHandle(
         ref,