From e870f17a979d9b516a2393b7fa451ff1406398cf Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Wed, 14 Feb 2024 20:13:55 +0530 Subject: [PATCH 1/3] fixed currency pressable ui and padding --- src/components/AmountForm.tsx | 8 ++++++-- src/components/CurrencySymbolButton.tsx | 12 ++++++++++-- .../BaseTextInputWithCurrencySymbol.js | 1 + .../textInputWithCurrencySymbolPropTypes.js | 4 ++++ .../reimburse/WorkspaceRateAndUnitPage/RatePage.tsx | 1 + 5 files changed, 22 insertions(+), 4 deletions(-) diff --git a/src/components/AmountForm.tsx b/src/components/AmountForm.tsx index 4214d804af068..992d4e7197de8 100644 --- a/src/components/AmountForm.tsx +++ b/src/components/AmountForm.tsx @@ -32,6 +32,9 @@ type AmountFormProps = { /** Fired when back button pressed, navigates to currency selection page */ onCurrencyButtonPress?: () => void; + + /** Whether the currency symbol is pressable */ + isCurrencyPressable?: boolean; }; /** @@ -47,7 +50,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.js b/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.js index bb1bb9c9bfa1f..5aee981835e69 100644 --- a/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.js +++ b/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.js @@ -17,6 +17,7 @@ function BaseTextInputWithCurrencySymbol(props) { ); 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/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} /> )} From 82bbe31f09abc5288305c1156da595da2ba19c59 Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Wed, 14 Feb 2024 20:32:38 +0530 Subject: [PATCH 2/3] minor correction to padding --- src/components/AmountForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AmountForm.tsx b/src/components/AmountForm.tsx index 992d4e7197de8..559e5f4d0ac28 100644 --- a/src/components/AmountForm.tsx +++ b/src/components/AmountForm.tsx @@ -217,7 +217,7 @@ function AmountForm( /> {!!errorText && ( From 605985d87e5f84b49b8f752374ba45cc9a02719a Mon Sep 17 00:00:00 2001 From: Jack Nam Date: Wed, 14 Feb 2024 14:07:48 -0800 Subject: [PATCH 3/3] Add changes to TSX files --- .../BaseTextInputWithCurrencySymbol.tsx | 2 ++ src/components/TextInputWithCurrencySymbol/types.ts | 3 +++ 2 files changed, 5 insertions(+) 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/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;