diff --git a/src/components/AmountForm.tsx b/src/components/AmountForm.tsx index 275565a5bb277..8ae8f06740126 100644 --- a/src/components/AmountForm.tsx +++ b/src/components/AmountForm.tsx @@ -33,6 +33,9 @@ type AmountFormProps = { /** Fired when back button pressed, navigates to currency selection page */ onCurrencyButtonPress?: () => void; + + /** Whether the currency symbol is pressable */ + isCurrencyPressable?: boolean; }; /** @@ -48,7 +51,7 @@ const NUM_PAD_CONTAINER_VIEW_ID = 'numPadContainerView'; const NUM_PAD_VIEW_ID = 'numPadView'; function AmountForm( - {value: amount, currency = CONST.CURRENCY.USD, extraDecimals = 0, errorText, onInputChange, onCurrencyButtonPress}: AmountFormProps, + {value: amount, currency = CONST.CURRENCY.USD, extraDecimals = 0, errorText, onInputChange, onCurrencyButtonPress, isCurrencyPressable = true}: AmountFormProps, forwardedRef: ForwardedRef, ) { const styles = useThemeStyles(); @@ -210,10 +213,11 @@ function AmountForm( setSelection(e.nativeEvent.selection); }} onKeyPress={textInputKeyPress} + isCurrencyPressable={isCurrencyPressable} /> {!!errorText && ( diff --git a/src/components/CurrencySymbolButton.tsx b/src/components/CurrencySymbolButton.tsx index e913b415c3289..2b736c2ef5275 100644 --- a/src/components/CurrencySymbolButton.tsx +++ b/src/components/CurrencySymbolButton.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import {View} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -15,13 +16,16 @@ type CurrencySymbolButtonProps = { /** Function to call when currency button is pressed */ onCurrencyButtonPress: () => void; + + /** Whether the currency button is pressable or not */ + isCurrencyPressable?: boolean; }; -function CurrencySymbolButton({onCurrencyButtonPress, currencySymbol}: CurrencySymbolButtonProps) { +function CurrencySymbolButton({onCurrencyButtonPress, currencySymbol, isCurrencyPressable = true}: CurrencySymbolButtonProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const theme = useTheme(); - return ( + return isCurrencyPressable ? ( {currencySymbol} + ) : ( + + {currencySymbol} + ); } diff --git a/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.tsx b/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.tsx index 3fb75cb35fd28..b6509d5c3f474 100644 --- a/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.tsx +++ b/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.tsx @@ -19,6 +19,7 @@ function BaseTextInputWithCurrencySymbol( selection, onSelectionChange = () => {}, onKeyPress = () => {}, + isCurrencyPressable = true, }: TextInputWithCurrencySymbolProps, ref: React.ForwardedRef, ) { @@ -31,6 +32,7 @@ function BaseTextInputWithCurrencySymbol( ); diff --git a/src/components/TextInputWithCurrencySymbol/textInputWithCurrencySymbolPropTypes.js b/src/components/TextInputWithCurrencySymbol/textInputWithCurrencySymbolPropTypes.js index 656561c14b146..bf292b331b81d 100644 --- a/src/components/TextInputWithCurrencySymbol/textInputWithCurrencySymbolPropTypes.js +++ b/src/components/TextInputWithCurrencySymbol/textInputWithCurrencySymbolPropTypes.js @@ -31,6 +31,9 @@ const propTypes = { /** Function to call to handle key presses in the text input */ onKeyPress: PropTypes.func, + + /** Whether the currency symbol is pressable */ + isCurrencyPressable: PropTypes.bool, }; const defaultProps = { @@ -40,6 +43,7 @@ const defaultProps = { selection: undefined, onSelectionChange: () => {}, onKeyPress: () => {}, + isCurrencyPressable: true, }; export {propTypes, defaultProps}; diff --git a/src/components/TextInputWithCurrencySymbol/types.ts b/src/components/TextInputWithCurrencySymbol/types.ts index e7f0b05819fac..5cd088a10edb2 100644 --- a/src/components/TextInputWithCurrencySymbol/types.ts +++ b/src/components/TextInputWithCurrencySymbol/types.ts @@ -25,6 +25,9 @@ type TextInputWithCurrencySymbolProps = { /** Function to call to handle key presses in the text input */ onKeyPress?: (event: NativeSyntheticEvent) => void; + + /** Whether the currency symbol is pressable */ + isCurrencyPressable: boolean; }; export default TextInputWithCurrencySymbolProps; diff --git a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/RatePage.tsx b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/RatePage.tsx index 2d9d52c63e26d..d78ccb82d704f 100644 --- a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/RatePage.tsx +++ b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage/RatePage.tsx @@ -101,6 +101,7 @@ function WorkspaceRatePage(props: WorkspaceRatePageProps) { defaultValue={( (typeof props.workspaceRateAndUnit?.rate === 'string' ? parseFloat(props.workspaceRateAndUnit.rate) : defaultValue) / CONST.POLICY.CUSTOM_UNIT_RATE_BASE_OFFSET ).toFixed(3)} + isCurrencyPressable={false} /> )}