diff --git a/src/components/AmountTextInput.tsx b/src/components/AmountTextInput.tsx index 256d95ba8419..5bd48781ccb3 100644 --- a/src/components/AmountTextInput.tsx +++ b/src/components/AmountTextInput.tsx @@ -39,7 +39,7 @@ type AmountTextInputProps = { /** Hide the focus styles on TextInput */ hideFocusedState?: boolean; -} & Pick; +} & Pick; function AmountTextInput( { diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx index 717659c16fd3..a896ee3556bd 100644 --- a/src/components/MoneyRequestAmountInput.tsx +++ b/src/components/MoneyRequestAmountInput.tsx @@ -3,16 +3,15 @@ import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} fr import type {NativeSyntheticEvent, StyleProp, TextStyle, ViewStyle} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import {useMouseContext} from '@hooks/useMouseContext'; -import * as Browser from '@libs/Browser'; -import * as CurrencyUtils from '@libs/CurrencyUtils'; +import {isMobileSafari} from '@libs/Browser'; +import {convertToFrontendAmountAsString, getCurrencyDecimals} from '@libs/CurrencyUtils'; import getOperatingSystem from '@libs/getOperatingSystem'; -import * as MoneyRequestUtils from '@libs/MoneyRequestUtils'; +import {replaceAllDigits, replaceCommasWithPeriod, stripCommaFromAmount, stripDecimalsFromAmount, stripSpacesFromAmount, validateAmount} from '@libs/MoneyRequestUtils'; import shouldIgnoreSelectionWhenUpdatedManually from '@libs/shouldIgnoreSelectionWhenUpdatedManually'; import CONST from '@src/CONST'; import isTextInputFocused from './TextInput/BaseTextInput/isTextInputFocused'; import type {BaseTextInputRef} from './TextInput/BaseTextInput/types'; import TextInputWithCurrencySymbol from './TextInputWithCurrencySymbol'; -import type {TextInputWithCurrencySymbolProps} from './TextInputWithCurrencySymbol/types'; type CurrentMoney = {amount: string; currency: string}; @@ -92,7 +91,7 @@ type MoneyRequestAmountInputProps = { /** The width of inner content */ contentWidth?: number; -} & Pick; +}; type Selection = { start: number; @@ -107,7 +106,7 @@ const getNewSelection = (oldSelection: Selection, prevLength: number, newLength: return {start: cursorPosition, end: cursorPosition}; }; -const defaultOnFormatAmount = (amount: number, currency?: string) => CurrencyUtils.convertToFrontendAmountAsString(amount, currency ?? CONST.CURRENCY.USD); +const defaultOnFormatAmount = (amount: number, currency?: string) => convertToFrontendAmountAsString(amount, currency ?? CONST.CURRENCY.USD); function MoneyRequestAmountInput( { @@ -127,7 +126,6 @@ function MoneyRequestAmountInput( hideFocusedState = true, shouldKeepUserInput = false, autoGrow = true, - autoGrowExtraSpace, contentWidth, ...props }: MoneyRequestAmountInputProps, @@ -139,7 +137,7 @@ function MoneyRequestAmountInput( const amountRef = useRef(undefined); - const decimals = CurrencyUtils.getCurrencyDecimals(currency); + const decimals = getCurrencyDecimals(currency); const selectedAmountAsString = amount ? onFormatAmount(amount, currency) : ''; const [currentAmount, setCurrentAmount] = useState(selectedAmountAsString); @@ -161,13 +159,11 @@ function MoneyRequestAmountInput( (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); - const finalAmount = newAmountWithoutSpaces.includes('.') - ? MoneyRequestUtils.stripCommaFromAmount(newAmountWithoutSpaces) - : MoneyRequestUtils.replaceCommasWithPeriod(newAmountWithoutSpaces); + const newAmountWithoutSpaces = stripSpacesFromAmount(newAmount); + const finalAmount = newAmountWithoutSpaces.includes('.') ? stripCommaFromAmount(newAmountWithoutSpaces) : replaceCommasWithPeriod(newAmountWithoutSpaces); // Use a shallow copy of selection to trigger setSelection // More info: https://github.com/Expensify/App/issues/16385 - if (!MoneyRequestUtils.validateAmount(finalAmount, decimals)) { + if (!validateAmount(finalAmount, decimals)) { setSelection((prevSelection) => ({...prevSelection})); return; } @@ -176,7 +172,7 @@ function MoneyRequestAmountInput( willSelectionBeUpdatedManually.current = true; let hasSelectionBeenSet = false; - const strippedAmount = MoneyRequestUtils.stripCommaFromAmount(finalAmount); + const strippedAmount = stripCommaFromAmount(finalAmount); amountRef.current = strippedAmount; setCurrentAmount((prevAmount) => { const isForwardDelete = prevAmount.length > strippedAmount.length && forwardDeletePressedRef.current; @@ -233,12 +229,12 @@ function MoneyRequestAmountInput( // Modifies the amount to match the decimals for changed currency. useEffect(() => { // If the changed currency supports decimals, we can return - if (MoneyRequestUtils.validateAmount(currentAmount, decimals)) { + if (validateAmount(currentAmount, decimals)) { return; } // If the changed currency doesn't support decimals, we can strip the decimals - setNewAmount(MoneyRequestUtils.stripDecimalsFromAmount(currentAmount)); + setNewAmount(stripDecimalsFromAmount(currentAmount)); // we want to update only when decimals change (setNewAmount also changes when decimals change). // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps @@ -249,7 +245,7 @@ function MoneyRequestAmountInput( */ const textInputKeyPress = ({nativeEvent}: NativeSyntheticEvent) => { const key = nativeEvent?.key.toLowerCase(); - if (Browser.isMobileSafari() && key === CONST.PLATFORM_SPECIFIC_KEYS.CTRL.DEFAULT) { + if (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. forwardDeletePressedRef.current = true; @@ -276,7 +272,7 @@ function MoneyRequestAmountInput( }); }, [amount, currency, onFormatAmount, formatAmountOnBlur, maxLength]); - const formattedAmount = MoneyRequestUtils.replaceAllDigits(currentAmount, toLocaleDigit); + const formattedAmount = replaceAllDigits(currentAmount, toLocaleDigit); const {setMouseDown, setMouseUp} = useMouseContext(); const handleMouseDown = (e: React.MouseEvent) => { @@ -291,7 +287,6 @@ function MoneyRequestAmountInput( return ( )} - {/* - Text input component doesn't support auto grow by default. - This text view is used to calculate width or height of the input value given textStyle in this component. - This Text component is intentionally positioned out of the screen. - */} - {(!!autoGrow || autoGrowHeight) && !isAutoGrowHeightMarkdown && ( - { - if (e.nativeEvent.layout.width === 0 && e.nativeEvent.layout.height === 0) { - return; - } - // Add +2 to width so that cursor is not cut off / covered at the end of text content - setTextInputWidth(e.nativeEvent.layout.width + 2); - setTextInputHeight(e.nativeEvent.layout.height); - }} - > - {/* \u200B added to solve the issue of not expanding the text input enough when the value ends with '\n' (https://github.com/Expensify/App/issues/21271) */} - {value ? `${value}${value.endsWith('\n') ? '\u200B' : ''}` : placeholder} - - )} ); } diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index 75b12c4593be..2eb296f92500 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -56,9 +56,6 @@ type CustomBaseTextInputProps = { */ autoGrow?: boolean; - /** If autoGrow is enabled, this reserves extra space for incoming characters to prevent flickering on native platforms. */ - autoGrowExtraSpace?: number; - /** * Autogrow input container height based on the entered text */ diff --git a/src/components/TextInputWithCurrencySymbol/types.ts b/src/components/TextInputWithCurrencySymbol/types.ts index 3988654584d0..401af75b16cd 100644 --- a/src/components/TextInputWithCurrencySymbol/types.ts +++ b/src/components/TextInputWithCurrencySymbol/types.ts @@ -77,7 +77,7 @@ type BaseTextInputWithCurrencySymbolProps = { /** Hide the focus styles on TextInput */ hideFocusedState?: boolean; -} & Pick; +} & Pick; type TextInputWithCurrencySymbolProps = Omit & { onSelectionChange?: (start: number, end: number) => void; diff --git a/src/pages/iou/MoneyRequestAmountForm.tsx b/src/pages/iou/MoneyRequestAmountForm.tsx index a948e43d8656..932fced3992b 100644 --- a/src/pages/iou/MoneyRequestAmountForm.tsx +++ b/src/pages/iou/MoneyRequestAmountForm.tsx @@ -19,7 +19,6 @@ import {convertToDisplayString, convertToFrontendAmountAsInteger, convertToFront import {canUseTouchScreen as canUseTouchScreenUtil} from '@libs/DeviceCapabilities'; import {addLeadingZero} from '@libs/MoneyRequestUtils'; import Navigation from '@libs/Navigation/Navigation'; -import variables from '@styles/variables'; import type {BaseTextInputRef} from '@src/components/TextInput/BaseTextInput/types'; import CONST from '@src/CONST'; import type {Route} from '@src/ROUTES'; @@ -257,7 +256,6 @@ function MoneyRequestAmountForm( >