Merge pull request #42241 from bernhardoj/fix/41751-split-amount-does…

…nt-animate-smoothly Fix split amount input does not animate smoothly
Expensify · May 29, 2024 · 0cce499 · 0cce499
2 parents d875e80 + f784e54
commit 0cce499
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx
@@ -24,6 +24,9 @@ type MoneyRequestAmountInputProps = {
     /** IOU amount saved in Onyx */
     amount?: number;
 
+    /** A callback to format the amount number */
+    onFormatAmount?: (amount: number, currency?: string) => string;
+
     /** Currency chosen by user or saved in Onyx */
     currency?: string;
 
@@ -74,6 +77,11 @@ type MoneyRequestAmountInputProps = {
 
     /** Hide the focus styles on TextInput */
     hideFocusedState?: boolean;
+
+    /**
+     * Autogrow input container length based on the entered text.
+     */
+    autoGrow?: boolean;
 };
 
 type Selection = {
@@ -89,6 +97,8 @@ const getNewSelection = (oldSelection: Selection, prevLength: number, newLength:
     return {start: cursorPosition, end: cursorPosition};
 };
 
+const defaultOnFormatAmount = (amount: number) => CurrencyUtils.convertToFrontendAmount(amount).toString();
+
 function MoneyRequestAmountInput(
     {
         amount = 0,
@@ -101,9 +111,11 @@ function MoneyRequestAmountInput(
         shouldUpdateSelection = true,
         moneyRequestAmountInputRef,
         disableKeyboard = true,
+        onFormatAmount = defaultOnFormatAmount,
         formatAmountOnBlur,
         maxLength,
         hideFocusedState = true,
+        autoGrow = true,
         ...props
     }: MoneyRequestAmountInputProps,
     forwardedRef: ForwardedRef<BaseTextInputRef>,
@@ -113,7 +125,7 @@ function MoneyRequestAmountInput(
     const textInput = useRef<BaseTextInputRef | null>(null);
 
     const decimals = CurrencyUtils.getCurrencyDecimals(currency);
-    const selectedAmountAsString = amount ? CurrencyUtils.convertToFrontendAmount(amount).toString() : '';
+    const selectedAmountAsString = amount ? onFormatAmount(amount, currency) : '';
 
     const [currentAmount, setCurrentAmount] = useState(selectedAmountAsString);
 
@@ -182,7 +194,7 @@ function MoneyRequestAmountInput(
         if (!currency || typeof amount !== 'number' || (formatAmountOnBlur && textInput.current?.isFocused())) {
             return;
         }
-        const frontendAmount = formatAmountOnBlur ? CurrencyUtils.convertToDisplayStringWithoutCurrency(amount, currency) : CurrencyUtils.convertToFrontendAmount(amount).toString();
+        const frontendAmount = onFormatAmount(amount, currency);
         setCurrentAmount(frontendAmount);
 
         // Only update selection if the amount prop was changed from the outside and is not the same as the current amount we just computed
@@ -233,7 +245,7 @@ function MoneyRequestAmountInput(
         if (!formatAmountOnBlur) {
             return;
         }
-        const formattedAmount = CurrencyUtils.convertToDisplayStringWithoutCurrency(amount, currency);
+        const formattedAmount = onFormatAmount(amount, currency);
         if (maxLength && formattedAmount.length > maxLength) {
             return;
         }
@@ -242,12 +254,13 @@ function MoneyRequestAmountInput(
             start: formattedAmount.length,
             end: formattedAmount.length,
         });
-    }, [amount, currency, formatAmountOnBlur, maxLength]);
+    }, [amount, currency, onFormatAmount, formatAmountOnBlur, maxLength]);
 
     const formattedAmount = MoneyRequestUtils.replaceAllDigits(currentAmount, toLocaleDigit);
 
     return (
         <TextInputWithCurrencySymbol
+            autoGrow={autoGrow}
             disableKeyboard={disableKeyboard}
             formattedAmount={formattedAmount}
             onChangeAmount={setNewAmount}

diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx
@@ -497,6 +497,7 @@ function MoneyRequestConfirmationList({
             isSelected: false,
             rightElement: (
                 <MoneyRequestAmountInput
+                    autoGrow={false}
                     amount={transaction?.splitShares?.[participantOption.accountID ?? 0]?.amount}
                     currency={iouCurrencyCode}
                     prefixCharacter={currencySymbol}
@@ -507,8 +508,9 @@ function MoneyRequestConfirmationList({
                     formatAmountOnBlur
                     prefixContainerStyle={[styles.pv0]}
                     inputStyle={[styles.optionRowAmountInput, amountWidth] as TextStyle[]}
-                    containerStyle={[styles.textInputContainer]}
+                    containerStyle={[styles.textInputContainer, amountWidth]}
                     touchableInputWrapperStyle={[styles.ml3]}
+                    onFormatAmount={CurrencyUtils.convertToDisplayStringWithoutCurrency}
                     onAmountChange={(value: string) => onSplitShareChange(participantOption.accountID ?? 0, Number(value))}
                     maxLength={formattedTotalAmount.length}
                 />

diff --git a/src/components/TextInputWithCurrencySymbol/types.ts b/src/components/TextInputWithCurrencySymbol/types.ts
@@ -72,6 +72,6 @@ type TextInputWithCurrencySymbolProps = {
 
     /** Hide the focus styles on TextInput */
     hideFocusedState?: boolean;
-} & Pick<BaseTextInputProps, 'autoFocus'>;
+} & Pick<BaseTextInputProps, 'autoFocus' | 'autoGrow'>;
 
 export default TextInputWithCurrencySymbolProps;