From e250e227c9fcdc67fd9d7639f1c08bc97d46df6f Mon Sep 17 00:00:00 2001
From: Wojciech Boman <wojciechboman@gmail.com>
Date: Thu, 4 Jan 2024 14:36:57 +0100
Subject: [PATCH] Migrate AmountTextInput to TS

---
 src/components/AmountTextInput.js             | 89 -------------------
 src/components/AmountTextInput.tsx            | 74 +++++++++++++++
 .../TextInput/BaseTextInput/types.ts          |  2 +-
 src/libs/ComposerUtils/index.ts               |  8 +-
 src/types/utils/TextInputSelection.ts         |  6 ++
 5 files changed, 83 insertions(+), 96 deletions(-)
 delete mode 100644 src/components/AmountTextInput.js
 create mode 100644 src/components/AmountTextInput.tsx
 create mode 100644 src/types/utils/TextInputSelection.ts

diff --git a/src/components/AmountTextInput.js b/src/components/AmountTextInput.js
deleted file mode 100644
index 25e1ce6f05ec..000000000000
--- a/src/components/AmountTextInput.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import useStyleUtils from '@hooks/useStyleUtils';
-import useThemeStyles from '@hooks/useThemeStyles';
-import CONST from '@src/CONST';
-import refPropTypes from './refPropTypes';
-import TextInput from './TextInput';
-
-const propTypes = {
-    /** Formatted amount in local currency  */
-    formattedAmount: PropTypes.string.isRequired,
-
-    /** A ref to forward to amount text input */
-    forwardedRef: refPropTypes,
-
-    /** Function to call when amount in text input is changed */
-    onChangeAmount: PropTypes.func.isRequired,
-
-    /** Placeholder value for amount text input */
-    placeholder: PropTypes.string.isRequired,
-
-    /** Selection Object */
-    selection: PropTypes.shape({
-        start: PropTypes.number,
-        end: PropTypes.number,
-    }),
-
-    /** Function to call when selection in text input is changed */
-    onSelectionChange: PropTypes.func,
-
-    /** Style for the input */
-    style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
-
-    /** Style for the container */
-    containerStyles: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
-
-    /** Function to call to handle key presses in the text input */
-    onKeyPress: PropTypes.func,
-};
-
-const defaultProps = {
-    forwardedRef: undefined,
-    selection: undefined,
-    onSelectionChange: () => {},
-    onKeyPress: () => {},
-    style: {},
-    containerStyles: {},
-};
-
-function AmountTextInput(props) {
-    const styles = useThemeStyles();
-    const StyleUtils = useStyleUtils();
-    return (
-        <TextInput
-            disableKeyboard
-            autoGrow
-            hideFocusedState
-            inputStyle={[styles.iouAmountTextInput, styles.p0, styles.noLeftBorderRadius, styles.noRightBorderRadius, ...StyleUtils.parseStyleAsArray(props.style)]}
-            textInputContainerStyles={[styles.borderNone, styles.noLeftBorderRadius, styles.noRightBorderRadius]}
-            onChangeText={props.onChangeAmount}
-            ref={props.forwardedRef}
-            value={props.formattedAmount}
-            placeholder={props.placeholder}
-            inputMode={CONST.INPUT_MODE.NUMERIC}
-            blurOnSubmit={false}
-            selection={props.selection}
-            onSelectionChange={props.onSelectionChange}
-            role={CONST.ROLE.PRESENTATION}
-            onKeyPress={props.onKeyPress}
-            containerStyles={[...StyleUtils.parseStyleAsArray(props.containerStyles)]}
-        />
-    );
-}
-
-AmountTextInput.propTypes = propTypes;
-AmountTextInput.defaultProps = defaultProps;
-AmountTextInput.displayName = 'AmountTextInput';
-
-const AmountTextInputWithRef = React.forwardRef((props, ref) => (
-    <AmountTextInput
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        forwardedRef={ref}
-    />
-));
-
-AmountTextInputWithRef.displayName = 'AmountTextInputWithRef';
-
-export default AmountTextInputWithRef;
diff --git a/src/components/AmountTextInput.tsx b/src/components/AmountTextInput.tsx
new file mode 100644
index 000000000000..d524bced5a2d
--- /dev/null
+++ b/src/components/AmountTextInput.tsx
@@ -0,0 +1,74 @@
+import type {ForwardedRef} from 'react';
+import React from 'react';
+import type {StyleProp, TextInput, TextStyle, ViewStyle} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import type TextInputSelection from '@src/types/utils/TextInputSelection';
+import TextInputComponent from './TextInput';
+
+type AmountTextInputProps = {
+    /** Formatted amount in local currency  */
+    formattedAmount: string;
+
+    /** A ref to forward to amount text input */
+    forwardedRef?: ForwardedRef<TextInput>;
+
+    /** Function to call when amount in text input is changed */
+    onChangeAmount: (amount: string) => void;
+
+    /** Placeholder value for amount text input */
+    placeholder: string;
+
+    /** Selection Object */
+    selection?: TextInputSelection;
+
+    /** Function to call when selection in text input is changed */
+    onSelectionChange?: () => void;
+
+    /** Style for the input */
+    style?: StyleProp<TextStyle>;
+
+    /** Style for the container */
+    containerStyles?: StyleProp<ViewStyle>;
+
+    /** Function to call to handle key presses in the text input */
+    onKeyPress?: () => void;
+};
+
+function AmountTextInput({
+    formattedAmount,
+    forwardedRef = undefined,
+    onChangeAmount,
+    placeholder,
+    selection = undefined,
+    onSelectionChange = () => {},
+    style = {},
+    containerStyles = {},
+    onKeyPress = () => {},
+}: AmountTextInputProps) {
+    const styles = useThemeStyles();
+    return (
+        <TextInputComponent
+            disableKeyboard
+            autoGrow
+            hideFocusedState
+            inputStyle={[styles.iouAmountTextInput, styles.p0, styles.noLeftBorderRadius, styles.noRightBorderRadius, style]}
+            textInputContainerStyles={[styles.borderNone, styles.noLeftBorderRadius, styles.noRightBorderRadius]}
+            onChangeText={onChangeAmount}
+            ref={forwardedRef}
+            value={formattedAmount}
+            placeholder={placeholder}
+            inputMode={CONST.INPUT_MODE.NUMERIC}
+            blurOnSubmit={false}
+            selection={selection}
+            onSelectionChange={onSelectionChange}
+            role={CONST.ROLE.PRESENTATION}
+            onKeyPress={onKeyPress}
+            containerStyles={containerStyles}
+        />
+    );
+}
+
+AmountTextInput.displayName = 'AmountTextInput';
+
+export default React.forwardRef(AmountTextInput);
diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts
index f8376219d80f..7530e7cbc2c4 100644
--- a/src/components/TextInput/BaseTextInput/types.ts
+++ b/src/components/TextInput/BaseTextInput/types.ts
@@ -24,7 +24,7 @@ type CustomBaseTextInputProps = {
     errorText?: MaybePhraseKey;
 
     /** Icon to display in right side of text input */
-    icon: IconAsset | null;
+    icon?: IconAsset | null;
 
     /** Customize the TextInput container */
     textInputContainerStyles?: StyleProp<ViewStyle>;
diff --git a/src/libs/ComposerUtils/index.ts b/src/libs/ComposerUtils/index.ts
index 32ebca9afee8..4f93c267a3fc 100644
--- a/src/libs/ComposerUtils/index.ts
+++ b/src/libs/ComposerUtils/index.ts
@@ -1,16 +1,12 @@
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import type TextInputSelection from '@src/types/utils/TextInputSelection';
 import getNumberOfLines from './getNumberOfLines';
 import updateNumberOfLines from './updateNumberOfLines';
 
-type Selection = {
-    start: number;
-    end: number;
-};
-
 /**
  * Replace substring between selection with a text.
  */
-function insertText(text: string, selection: Selection, textToInsert: string): string {
+function insertText(text: string, selection: TextInputSelection, textToInsert: string): string {
     return text.slice(0, selection.start) + textToInsert + text.slice(selection.end, text.length);
 }
 
diff --git a/src/types/utils/TextInputSelection.ts b/src/types/utils/TextInputSelection.ts
new file mode 100644
index 000000000000..8c7671a60ccc
--- /dev/null
+++ b/src/types/utils/TextInputSelection.ts
@@ -0,0 +1,6 @@
+type TextInputSelection = {
+    start: number;
+    end: number;
+};
+
+export default TextInputSelection;