[TS Migration] Migrate Composer to TypeScript

src/components/Composer/index.android.js → src/components/Composer/index.android.tsx

@@ -1,100 +1,91 @@
-import PropTypes from 'prop-types';
-import React, {useCallback, useEffect, useMemo, useRef} from 'react';
-import {StyleSheet} from 'react-native';
-import _ from 'underscore';
+import React, {ForwardedRef, useCallback, useEffect, useMemo, useRef} from 'react';
+import {StyleProp, StyleSheet, TextInput, TextStyle} from 'react-native';
 import RNTextInput from '@components/RNTextInput';
 import * as ComposerUtils from '@libs/ComposerUtils';
 import themeColors from '@styles/themes/default';
+import {TextSelection} from './types';
 
-const propTypes = {
+type ComposerProps = {
     /** Maximum number of lines in the text input */
-    maxLines: PropTypes.number,
+    maxLines: number;
 
     /** If the input should clear, it actually gets intercepted instead of .clear() */
-    shouldClear: PropTypes.bool,
-
-    /** A ref to forward to the text input */
-    forwardedRef: PropTypes.func,
+    shouldClear: boolean;
 
     /** When the input has cleared whoever owns this input should know about it */
-    onClear: PropTypes.func,
+    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: PropTypes.bool,
+    autoFocus: boolean;
 
     /** Prevent edits and interactions like focus for this input. */
-    isDisabled: PropTypes.bool,
+    isDisabled: boolean;
 
     /** Selection Object */
-    selection: PropTypes.shape({
-        start: PropTypes.number,
-        end: PropTypes.number,
-    }),
+    selection: TextSelection;
 
     /** Whether the full composer can be opened */
-    isFullComposerAvailable: PropTypes.bool,
+    isFullComposerAvailable: boolean;
 
     /** Allow the full composer to be opened */
-    setIsFullComposerAvailable: PropTypes.func,
+    setIsFullComposerAvailable: () => void;
 
     /** Whether the composer is full size */
-    isComposerFullSize: PropTypes.bool,
+    isComposerFullSize: boolean;
 
     /** General styles to apply to the text input */
-    // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.any,
-};
-
-const defaultProps = {
-    shouldClear: false,
-    onClear: () => {},
-    autoFocus: false,
-    isDisabled: false,
-    forwardedRef: null,
-    selection: {
-        start: 0,
-        end: 0,
-    },
-    maxLines: undefined,
-    isFullComposerAvailable: false,
-    setIsFullComposerAvailable: () => {},
-    isComposerFullSize: false,
-    style: null,
+    style: StyleProp<TextStyle>;
 };
 
-function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isComposerFullSize, setIsFullComposerAvailable, ...props}) {
-    const textInput = useRef(null);
+function Composer(
+    {
+        shouldClear = false,
+        onClear = () => {},
+        isDisabled = false,
+        maxLines,
+        isComposerFullSize = false,
+        setIsFullComposerAvailable = () => {},
+        style,
+        autoFocus = false,
+        selection = {
+            start: 0,
+            end: 0,
+        },
+        isFullComposerAvailable = false,
+        ...props
+    }: ComposerProps,
+    ref: ForwardedRef<TextInput>,
+) {
+    const textInput = useRef<TextInput>();
 
     /**
      * Set the TextInput Ref
-     * @param {Element} el
      */
-    const setTextInputRef = useCallback((el) => {
+    const setTextInputRef = useCallback((el: TextInput) => {
         textInput.current = el;
-        if (!_.isFunction(forwardedRef) || textInput.current === null) {
+        if (typeof ref !== 'function' || textInput.current === null) {
             return;
         }
 
         // This callback prop is used by the parent component using the constructor to
         // get a ref to the inner textInput element e.g. if we do
         // <constructor ref={el => this.textInput = el} /> this will not
         // return a ref to the component, but rather the HTML element by default
-        forwardedRef(textInput.current);
+        ref(textInput.current);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     useEffect(() => {
         if (!shouldClear) {
             return;
         }
-        textInput.current.clear();
+        textInput.current?.clear();
         onClear();
     }, [shouldClear, onClear]);
 
     /**
      * Set maximum number of lines
-     * @return {Number}
      */
     const maxNumberOfLines = useMemo(() => {
         if (isComposerFullSize) {
@@ -103,9 +94,7 @@ function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isC
         return maxLines;
     }, [isComposerFullSize, maxLines]);
 
-    const composerStyles = useMemo(() => {
-        StyleSheet.flatten(props.style);
-    }, [props.style]);
+    const composerStyles = useMemo(() => StyleSheet.flatten(style), [style]);
 
     return (
         <RNTextInput
@@ -121,24 +110,16 @@ function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isC
             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}
         />
     );
 }
 
-Composer.propTypes = propTypes;
-Composer.defaultProps = defaultProps;
-
-const ComposerWithRef = React.forwardRef((props, ref) => (
-    <Composer
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        forwardedRef={ref}
-    />
-));
-
-ComposerWithRef.displayName = 'ComposerWithRef';
+Composer.displayName = 'Composer';
 
-export default ComposerWithRef;
+export default React.forwardRef(Composer);