[TS migration] Migrate 'IOUMoneyRequest' page to TypeScript

src/languages/types.ts

@@ -105,7 +105,7 @@ type SettleExpensifyCardParams = {
     formattedAmount: string;
 };
 
-type RequestAmountParams = {amount: number};
+type RequestAmountParams = {amount: string};
 
 type RequestedAmountMessageParams = {formattedAmount: string; comment?: string};
 

src/pages/iou/steps/MoneyRequestAmountForm.js → src/pages/iou/steps/MoneyRequestAmountForm.tsx

@@ -1,12 +1,11 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
+import type {ForwardedRef} from 'react';
 import {ScrollView, View} from 'react-native';
-import _ from 'underscore';
+import type {NativeSyntheticEvent, TextInputSelectionChangeEventData} from 'react-native';
+import type {ValueOf} from 'type-fest';
 import BigNumberPad from '@components/BigNumberPad';
 import Button from '@components/Button';
 import FormHelpMessage from '@components/FormHelpMessage';
-import refPropTypes from '@components/refPropTypes';
 import TextInputWithCurrencySymbol from '@components/TextInputWithCurrencySymbol';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -15,78 +14,80 @@ import * as Browser from '@libs/Browser';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import getOperatingSystem from '@libs/getOperatingSystem';
+import type {MaybePhraseKey} from '@libs/Localize';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
 import Navigation from '@libs/Navigation/Navigation';
+import type {BaseTextInputRef} from '@src/components/TextInput/BaseTextInput/types';
 import CONST from '@src/CONST';
 
-const propTypes = {
+type MoneyRequestAmountFormProps = {
     /** IOU amount saved in Onyx */
-    amount: PropTypes.number,
+    amount?: number;
 
     /** Calculated tax amount based on selected tax rate */
-    taxAmount: PropTypes.number,
+    taxAmount?: number;
 
     /** Currency chosen by user or saved in Onyx */
-    currency: PropTypes.string,
+    currency?: string;
 
     /** Whether the amount is being edited or not */
-    isEditing: PropTypes.bool,
-
-    /** Refs forwarded to the TextInputWithCurrencySymbol */
-    forwardedRef: refPropTypes,
+    isEditing?: boolean;
 
     /** Fired when back button pressed, navigates to currency selection page */
-    onCurrencyButtonPress: PropTypes.func.isRequired,
+    onCurrencyButtonPress: () => void;
 
     /** Fired when submit button pressed, saves the given amount and navigates to the next page */
-    onSubmitButtonPress: PropTypes.func.isRequired,
+    onSubmitButtonPress: ({amount, currency}: {amount: string; currency: string}) => void;
 
     /** The current tab we have navigated to in the request modal. String that corresponds to the request type. */
-    selectedTab: PropTypes.oneOf([CONST.TAB_REQUEST.DISTANCE, CONST.TAB_REQUEST.MANUAL, CONST.TAB_REQUEST.SCAN]),
+    selectedTab?: ValueOf<typeof CONST.TAB_REQUEST>;
 };
 
-const defaultProps = {
-    amount: 0,
-    taxAmount: 0,
-    currency: CONST.CURRENCY.USD,
-    forwardedRef: null,
-    isEditing: false,
-    selectedTab: CONST.TAB_REQUEST.MANUAL,
+type Selection = {
+    start: number;
+    end: number;
 };
 
 /**
  * Returns the new selection object based on the updated amount's length
- *
- * @param {Object} oldSelection
- * @param {Number} prevLength
- * @param {Number} newLength
- * @returns {Object}
  */
-const getNewSelection = (oldSelection, prevLength, newLength) => {
+const getNewSelection = (oldSelection: Selection, prevLength: number, newLength: number): Selection => {
     const cursorPosition = oldSelection.end + (newLength - prevLength);
     return {start: cursorPosition, end: cursorPosition};
 };
 
-const isAmountInvalid = (amount) => !amount.length || parseFloat(amount) < 0.01;
-const isTaxAmountInvalid = (currentAmount, taxAmount, isTaxAmountForm) => isTaxAmountForm && currentAmount > CurrencyUtils.convertToFrontendAmount(taxAmount);
+const isAmountInvalid = (amount: string) => !amount.length || parseFloat(amount) < 0.01;
+const isTaxAmountInvalid = (currentAmount: string, taxAmount: number, isTaxAmountForm: boolean) =>
+    isTaxAmountForm && Number.parseFloat(currentAmount) > CurrencyUtils.convertToFrontendAmount(taxAmount);
 
 const AMOUNT_VIEW_ID = 'amountView';
 const NUM_PAD_CONTAINER_VIEW_ID = 'numPadContainerView';
 const NUM_PAD_VIEW_ID = 'numPadView';
 
-function MoneyRequestAmountForm({amount, taxAmount, currency, isEditing, forwardedRef, onCurrencyButtonPress, onSubmitButtonPress, selectedTab}) {
+function MoneyRequestAmountForm(
+    {
+        amount = 0,
+        taxAmount = 0,
+        currency = CONST.CURRENCY.USD,
+        isEditing = false,
+        onCurrencyButtonPress,
+        onSubmitButtonPress,
+        selectedTab = CONST.TAB_REQUEST.MANUAL,
+    }: MoneyRequestAmountFormProps,
+    forwardedRef: ForwardedRef<BaseTextInputRef>,
+) {
     const styles = useThemeStyles();
     const {isExtraSmallScreenHeight} = useWindowDimensions();
     const {translate, toLocaleDigit, numberFormat} = useLocalize();
 
-    const textInput = useRef(null);
+    const textInput = useRef<BaseTextInputRef | null>(null);
     const isTaxAmountForm = Navigation.getActiveRoute().includes('taxAmount');
 
     const decimals = CurrencyUtils.getCurrencyDecimals(currency);
     const selectedAmountAsString = amount ? CurrencyUtils.convertToFrontendAmount(amount).toString() : '';
 
     const [currentAmount, setCurrentAmount] = useState(selectedAmountAsString);
-    const [formError, setFormError] = useState('');
+    const [formError, setFormError] = useState<MaybePhraseKey>('');
     const [shouldUpdateSelection, setShouldUpdateSelection] = useState(true);
 
     const [selection, setSelection] = useState({
@@ -100,15 +101,13 @@ function MoneyRequestAmountForm({amount, taxAmount, currency, isEditing, forward
 
     /**
      * Event occurs when a user presses a mouse button over an DOM element.
-     *
-     * @param {Event} event
-     * @param {Array<string>} ids
      */
-    const onMouseDown = (event, ids) => {
-        const relatedTargetId = lodashGet(event, 'nativeEvent.target.id');
-        if (!_.contains(ids, relatedTargetId)) {
+    const onMouseDown = (event: React.MouseEvent<Element, MouseEvent>, ids: string[]) => {
+        const relatedTargetId = (event.nativeEvent?.target as HTMLElement)?.id;
+        if (ids.includes(relatedTargetId)) {
             return;
         }
+
         event.preventDefault();
         if (!textInput.current) {
             return;
@@ -118,7 +117,7 @@ function MoneyRequestAmountForm({amount, taxAmount, currency, isEditing, forward
         }
     };
 
-    const initializeAmount = useCallback((newAmount) => {
+    const initializeAmount = useCallback((newAmount: number) => {
         const frontendAmount = newAmount ? CurrencyUtils.convertToFrontendAmount(newAmount).toString() : '';
         setCurrentAmount(frontendAmount);
         setSelection({
@@ -128,7 +127,7 @@ function MoneyRequestAmountForm({amount, taxAmount, currency, isEditing, forward
     }, []);
 
     useEffect(() => {
-        if (!currency || !_.isNumber(amount)) {
+        if (!currency || typeof amount === 'number') {
             return;
         }
         initializeAmount(amount);
@@ -141,7 +140,7 @@ function MoneyRequestAmountForm({amount, taxAmount, currency, isEditing, forward
      * @param {String} newAmount - Changed amount from user input
      */
     const setNewAmount = useCallback(
-        (newAmount) => {
+        (newAmount: string) => {
             // Remove spaces from the newAmount value because Safari on iOS adds spaces when pasting a copied value
             // More info: https://github.com/Expensify/App/issues/16974
             const newAmountWithoutSpaces = MoneyRequestUtils.stripSpacesFromAmount(newAmount);
@@ -151,7 +150,7 @@ function MoneyRequestAmountForm({amount, taxAmount, currency, isEditing, forward
                 setSelection((prevSelection) => ({...prevSelection}));
                 return;
             }
-            if (!_.isEmpty(formError)) {
+            if (formError) {
                 setFormError('');
             }
 
@@ -188,13 +187,11 @@ function MoneyRequestAmountForm({amount, taxAmount, currency, isEditing, forward
     /**
      * Update amount with number or Backspace pressed for BigNumberPad.
      * Validate new amount with decimal number regex up to 6 digits and 2 decimal digit to enable Next button
-     *
-     * @param {String} key
      */
     const updateAmountNumberPad = useCallback(
-        (key) => {
-            if (shouldUpdateSelection && !textInput.current.isFocused()) {
-                textInput.current.focus();
+        (key: string) => {
+            if (shouldUpdateSelection && !textInput.current?.isFocused()) {
+                textInput.current?.focus();
             }
             // Backspace button is pressed
             if (key === '<' || key === 'Backspace') {
@@ -214,12 +211,12 @@ function MoneyRequestAmountForm({amount, taxAmount, currency, isEditing, forward
     /**
      * Update long press value, to remove items pressing on <
      *
-     * @param {Boolean} value - Changed text from user input
+     * @param value - Changed text from user input
      */
-    const updateLongPressHandlerState = useCallback((value) => {
+    const updateLongPressHandlerState = useCallback((value: boolean) => {
         setShouldUpdateSelection(!value);
-        if (!value && !textInput.current.isFocused()) {
-            textInput.current.focus();
+        if (!value && !textInput.current?.isFocused()) {
+            textInput.current?.focus();
         }
     }, []);
 
@@ -248,8 +245,8 @@ function MoneyRequestAmountForm({amount, taxAmount, currency, isEditing, forward
     /**
      * Input handler to check for a forward-delete key (or keyboard shortcut) press.
      */
-    const textInputKeyPress = ({nativeEvent}) => {
-        const key = nativeEvent.key.toLowerCase();
+    const textInputKeyPress = ({nativeEvent}: NativeSyntheticEvent<KeyboardEvent>) => {
+        const key = nativeEvent?.key.toLowerCase();
         if (Browser.isMobileSafari() && key === CONST.PLATFORM_SPECIFIC_KEYS.CTRL.DEFAULT) {
             // Optimistically anticipate forward-delete on iOS Safari (in cases where the Mac Accessiblity keyboard is being
             // used for input). If the Control-D shortcut doesn't get sent, the ref will still be reset on the next key press.
@@ -258,7 +255,8 @@ function MoneyRequestAmountForm({amount, taxAmount, currency, isEditing, forward
         }
         // Control-D on Mac is a keyboard shortcut for forward-delete. See https://support.apple.com/en-us/HT201236 for Mac keyboard shortcuts.
         // Also check for the keyboard shortcut on iOS in cases where a hardware keyboard may be connected to the device.
-        forwardDeletePressedRef.current = key === 'delete' || (_.contains([CONST.OS.MAC_OS, CONST.OS.IOS], getOperatingSystem()) && nativeEvent.ctrlKey && key === 'd');
+        const operatingSystem = getOperatingSystem();
+        forwardDeletePressedRef.current = key === 'delete' || ((operatingSystem === CONST.OS.MAC_OS || operatingSystem === CONST.OS.IOS) && nativeEvent?.ctrlKey && key === 'd');
     };
 
     const formattedAmount = MoneyRequestUtils.replaceAllDigits(currentAmount, toLocaleDigit);
@@ -284,15 +282,15 @@ function MoneyRequestAmountForm({amount, taxAmount, currency, isEditing, forward
                     ref={(ref) => {
                         if (typeof forwardedRef === 'function') {
                             forwardedRef(ref);
-                        } else if (forwardedRef && _.has(forwardedRef, 'current')) {
+                        } else if (forwardedRef?.current) {
                             // eslint-disable-next-line no-param-reassign
                             forwardedRef.current = ref;
                         }
                         textInput.current = ref;
                     }}
                     selectedCurrencyCode={currency}
                     selection={selection}
-                    onSelectionChange={(e) => {
+                    onSelectionChange={(e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
                         if (!shouldUpdateSelection) {
                             return;
                         }
@@ -302,8 +300,9 @@ function MoneyRequestAmountForm({amount, taxAmount, currency, isEditing, forward
                         setSelection({start, end});
                     }}
                     onKeyPress={textInputKeyPress}
+                    isCurrencyPressable
                 />
-                {!_.isEmpty(formError) && (
+                {!!formError && (
                     <FormHelpMessage
                         style={[styles.pAbsolute, styles.b0, styles.mb0, styles.ph5, styles.w100]}
                         isError
@@ -338,18 +337,6 @@ function MoneyRequestAmountForm({amount, taxAmount, currency, isEditing, forward
     );
 }
 
-MoneyRequestAmountForm.propTypes = propTypes;
-MoneyRequestAmountForm.defaultProps = defaultProps;
 MoneyRequestAmountForm.displayName = 'MoneyRequestAmountForm';
 
-const MoneyRequestAmountFormWithRef = React.forwardRef((props, ref) => (
-    <MoneyRequestAmountForm
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        forwardedRef={ref}
-    />
-));
-
-MoneyRequestAmountFormWithRef.displayName = 'MoneyRequestAmountFormWithRef';
-
-export default MoneyRequestAmountFormWithRef;
+export default React.forwardRef(MoneyRequestAmountForm);