Lift prop to a parent component to limit its scope

Expensify · Dec 8, 2024 · 0958370 · 0958370
1 parent c6f7fb6
commit 0958370
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 5 deletions.
diff --git 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<BaseTextInputProps, 'autoFocus'>;
+} & Pick<BaseTextInputProps, 'autoFocus' | 'autoGrowExtraSpace'>;
 
 function AmountTextInput(
     {

diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx
@@ -8,11 +8,11 @@ import * as CurrencyUtils from '@libs/CurrencyUtils';
 import getOperatingSystem from '@libs/getOperatingSystem';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
 import shouldIgnoreSelectionWhenUpdatedManually from '@libs/shouldIgnoreSelectionWhenUpdatedManually';
-import variables from '@styles/variables';
 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 +92,7 @@ type MoneyRequestAmountInputProps = {
 
     /** The width of inner content */
     contentWidth?: number;
-};
+} & Pick<TextInputWithCurrencySymbolProps, 'autoGrowExtraSpace'>;
 
 type Selection = {
     start: number;
@@ -127,6 +127,7 @@ function MoneyRequestAmountInput(
         hideFocusedState = true,
         shouldKeepUserInput = false,
         autoGrow = true,
+        autoGrowExtraSpace,
         contentWidth,
         ...props
     }: MoneyRequestAmountInputProps,
@@ -290,7 +291,7 @@ function MoneyRequestAmountInput(
     return (
         <TextInputWithCurrencySymbol
             autoGrow={autoGrow}
-            autoGrowExtraSpace={variables.w80}
+            autoGrowExtraSpace={autoGrowExtraSpace}
             disableKeyboard={disableKeyboard}
             formattedAmount={formattedAmount}
             onChangeAmount={setNewAmount}

diff --git a/src/pages/iou/MoneyRequestAmountForm.tsx b/src/pages/iou/MoneyRequestAmountForm.tsx
@@ -19,6 +19,7 @@ import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as MoneyRequestUtils 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';
@@ -259,6 +260,7 @@ function MoneyRequestAmountForm(
             >
                 <MoneyRequestAmountInput
                     amount={amount}
+                    autoGrowExtraSpace={variables.w80}
                     currency={currency}
                     isCurrencyPressable={isCurrencyPressable}
                     onCurrencyButtonPress={onCurrencyButtonPress}

diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
@@ -1292,7 +1292,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
 
     getAutoGrowWidthInputContainerStyles: (width: number, extraSpace: number): ViewStyle => {
         if (!!width && !!extraSpace) {
-            return {marginRight: -extraSpace, width: width + extraSpace}
+            return {marginRight: -extraSpace, width: width + extraSpace};
         }
         return {width};
     },