Merge pull request #33955 from software-mansion-labs/ts-amount-text-i…

…nput

[TS migration] Migrate 'AmountTextInput' component to TypeScript

src/components/AmountTextInput.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import type {TextSelection} from './Composer/types';
+import TextInput from './TextInput';
+import type {BaseTextInputRef} from './TextInput/BaseTextInput/types';
+
+type AmountTextInputProps = {
+    /** Formatted amount in local currency  */
+    formattedAmount: string;
+
+    /** 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?: TextSelection;
+
+    /** Function to call when selection in text input is changed */
+    onSelectionChange?: () => void;
+
+    /** Style for the input */
+    style?: StyleProp<TextStyle>;
+
+    /** Style for the container */
+    touchableInputWrapperStyle?: StyleProp<ViewStyle>;
+
+    /** Function to call to handle key presses in the text input */
+    onKeyPress?: () => void;
+};
+
+function AmountTextInput(
+    {formattedAmount, onChangeAmount, placeholder, selection, onSelectionChange, style, touchableInputWrapperStyle, onKeyPress}: AmountTextInputProps,
+    ref: BaseTextInputRef,
+) {
+    const styles = useThemeStyles();
+    return (
+        <TextInput
+            disableKeyboard
+            autoGrow
+            hideFocusedState
+            inputStyle={[styles.iouAmountTextInput, styles.p0, styles.noLeftBorderRadius, styles.noRightBorderRadius, style]}
+            textInputContainerStyles={[styles.borderNone, styles.noLeftBorderRadius, styles.noRightBorderRadius]}
+            onChangeText={onChangeAmount}
+            ref={ref}
+            value={formattedAmount}
+            placeholder={placeholder}
+            inputMode={CONST.INPUT_MODE.NUMERIC}
+            blurOnSubmit={false}
+            selection={selection}
+            onSelectionChange={onSelectionChange}
+            role={CONST.ROLE.PRESENTATION}
+            onKeyPress={onKeyPress}
+            touchableInputWrapperStyle={touchableInputWrapperStyle}
+        />
+    );
+}
+
+AmountTextInput.displayName = 'AmountTextInput';
+
+export default React.forwardRef(AmountTextInput);

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>;