[TS Migration] Migrate Composer to TypeScript

src/components/Composer/index.android.tsx

@@ -1,42 +1,9 @@
 import React, {ForwardedRef, useCallback, useEffect, useMemo, useRef} from 'react';
-import {StyleProp, StyleSheet, TextInput, TextStyle} from 'react-native';
+import {StyleSheet, TextInput} from 'react-native';
 import RNTextInput from '@components/RNTextInput';
 import * as ComposerUtils from '@libs/ComposerUtils';
 import themeColors from '@styles/themes/default';
-import {TextSelection} from './types';
-
-type ComposerProps = {
-    /** Maximum number of lines in the text input */
-    maxLines: number;
-
-    /** If the input should clear, it actually gets intercepted instead of .clear() */
-    shouldClear: boolean;
-
-    /** When the input has cleared whoever owns this input should know about it */
-    onClear: () => void;
-
-    /** Set focus to this component the first time it renders.
-     * Override this in case you need to set focus on one field out of many, or when you want to disable autoFocus */
-    autoFocus: boolean;
-
-    /** Prevent edits and interactions like focus for this input. */
-    isDisabled: boolean;
-
-    /** Selection Object */
-    selection: TextSelection;
-
-    /** Whether the full composer can be opened */
-    isFullComposerAvailable: boolean;
-
-    /** Allow the full composer to be opened */
-    setIsFullComposerAvailable: () => void;
-
-    /** Whether the composer is full size */
-    isComposerFullSize: boolean;
-
-    /** General styles to apply to the text input */
-    style: StyleProp<TextStyle>;
-};
+import {ComposerProps} from './types';
 
 function Composer(
     {
@@ -57,7 +24,7 @@ function Composer(
     }: ComposerProps,
     ref: ForwardedRef<TextInput>,
 ) {
-    const textInput = useRef<TextInput>();
+    const textInput = useRef<TextInput | null>(null);
 
     /**
      * Set the TextInput Ref
@@ -110,12 +77,12 @@ function Composer(
             maxNumberOfLines={maxNumberOfLines}
             textAlignVertical="center"
             style={[composerStyles]}
-            readOnly={isDisabled}
             autoFocus={autoFocus}
             selection={selection}
             isFullComposerAvailable={isFullComposerAvailable}
             /* eslint-disable-next-line react/jsx-props-no-spreading */
             {...props}
+            readOnly={isDisabled}
         />
     );
 }

src/components/Composer/index.ios.tsx

@@ -21,7 +21,7 @@ function Composer(
     }: ComposerProps,
     ref: ForwardedRef<TextInput>,
 ) {
-    const textInput = useRef<TextInput>();
+    const textInput = useRef<TextInput | null>(null);
 
     const styles = useThemeStyles();
     const themeColors = useTheme();
@@ -78,11 +78,11 @@ function Composer(
             smartInsertDelete={false}
             style={[composerStyles, styles.verticalAlignMiddle]}
             maxNumberOfLines={maxNumberOfLines}
-            readOnly={isDisabled}
             autoFocus={autoFocus}
             isFullComposerAvailable={isFullComposerAvailable}
             /* eslint-disable-next-line react/jsx-props-no-spreading */
             {...propsToPass}
+            readOnly={isDisabled}
         />
     );
 }

src/components/Composer/index.tsx

@@ -89,7 +89,7 @@ function Composer(
     const {windowWidth} = useWindowDimensions();
     const navigation = useNavigation();
     const textRef = useRef<HTMLElement & RNText>(null);
-    const textInput = useRef<HTMLTextAreaElement & TextInput>();
+    const textInput = useRef<(HTMLTextAreaElement & TextInput) | null>(null);
     const initialValue = defaultValue ? `${defaultValue}` : `${value ?? ''}`;
     const [numberOfLines, setNumberOfLines] = useState(numberOfLinesProp);
     const [selection, setSelection] = useState<
@@ -118,7 +118,7 @@ function Composer(
     useEffect(() => {
         setSelection((prevSelection) => {
             if (!!prevSelection && selectionProp.start === prevSelection.start && selectionProp.end === prevSelection.end) {
-                return prevSelection;
+                return;
             }
             return selectionProp;
         });

src/components/Composer/types.ts

@@ -51,7 +51,7 @@ type ComposerProps = {
     isFullComposerAvailable?: boolean;
 
     /** Allow the full composer to be opened */
-    setIsFullComposerAvailable?: () => void;
+    setIsFullComposerAvailable?: (value: boolean) => void;
 
     /** Should we calculate the caret position */
     shouldCalculateCaretPosition?: boolean;

src/libs/ComposerUtils/updateIsFullComposerAvailable.ts

@@ -1,5 +1,5 @@
+import {ComposerProps} from '@components/Composer/types';
 import CONST from '@src/CONST';
-import ComposerProps from './types';
 
 /**
  * Update isFullComposerAvailable if needed
@@ -8,7 +8,7 @@ import ComposerProps from './types';
 function updateIsFullComposerAvailable(props: ComposerProps, numberOfLines: number) {
     const isFullComposerAvailable = numberOfLines >= CONST.COMPOSER.FULL_COMPOSER_MIN_LINES;
     if (isFullComposerAvailable !== props.isFullComposerAvailable) {
-        props.setIsFullComposerAvailable(isFullComposerAvailable);
+        props.setIsFullComposerAvailable?.(isFullComposerAvailable);
     }
 }
 

src/libs/ComposerUtils/updateNumberOfLines/types.ts

@@ -1,5 +1,5 @@
 import {NativeSyntheticEvent, TextInputContentSizeChangeEventData} from 'react-native';
-import ComposerProps from '@libs/ComposerUtils/types';
+import {ComposerProps} from '@components/Composer/types';
 
 type UpdateNumberOfLines = (props: ComposerProps, event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => void;
 

src/types/modules/react-native.d.ts

@@ -284,6 +284,7 @@ declare module 'react-native' {
         readOnly?: boolean;
     }
     interface TextInputProps extends WebTextInputProps {
+        // TODO: remove once the app is updated to RN 0.73
         smartInsertDelete?: boolean;
         isFullComposerAvailable?: boolean;
     }