From 73294759252c77bf10ce4b081ead0f4c34510d2c Mon Sep 17 00:00:00 2001 From: mhawryluk Date: Tue, 12 May 2026 15:56:02 +0200 Subject: [PATCH 1/5] Migrate AmountSelectorModal to be nav RHP --- src/ROUTES.ts | 4 + src/SCREENS.ts | 1 + src/components/AmountPicker.tsx | 49 +++++++++ .../AmountPicker/AmountSelectorModal.tsx | 89 ----------------- src/components/AmountPicker/index.tsx | 56 ----------- src/components/AmountPicker/types.ts | 61 ------------ .../ModalStackNavigators/index.tsx | 1 + .../RELATIONS/WORKSPACE_TO_RHP.ts | 1 + src/libs/Navigation/linkingConfig/config.ts | 3 + src/libs/Navigation/types.ts | 3 + .../taxes/WorkspaceCreateTaxPage.tsx | 18 ++-- .../taxes/WorkspaceCreateTaxValuePage.tsx | 99 +++++++++++++++++++ 12 files changed, 167 insertions(+), 218 deletions(-) create mode 100644 src/components/AmountPicker.tsx delete mode 100644 src/components/AmountPicker/AmountSelectorModal.tsx delete mode 100644 src/components/AmountPicker/index.tsx delete mode 100644 src/components/AmountPicker/types.ts create mode 100644 src/pages/workspace/taxes/WorkspaceCreateTaxValuePage.tsx diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 3db413fbb79e..ae086d0b0a5a 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -2631,6 +2631,10 @@ const ROUTES = { route: 'workspaces/:policyID/taxes/new', getRoute: (policyID: string) => `workspaces/${policyID}/taxes/new` as const, }, + WORKSPACE_TAX_CREATE_VALUE: { + route: 'workspaces/:policyID/taxes/new/value', + getRoute: (policyID: string) => `workspaces/${policyID}/taxes/new/value` as const, + }, WORKSPACE_TAX_EDIT: { route: 'workspaces/:policyID/tax/:taxID', getRoute: (policyID: string, taxID: string) => `workspaces/${policyID}/tax/${encodeURIComponent(taxID)}` as const, diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 9ed276e2313c..5c2e02851b38 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -766,6 +766,7 @@ const SCREENS = { TAXES_SETTINGS_WORKSPACE_CURRENCY_DEFAULT: 'Workspace_Taxes_Settings_WorkspaceCurrency', TAXES_SETTINGS_FOREIGN_CURRENCY_DEFAULT: 'Workspace_Taxes_Settings_ForeignCurrency', TAX_CREATE: 'Workspace_Tax_Create', + TAX_CREATE_VALUE: 'Workspace_Tax_Create_Value', TAG_CREATE: 'Tag_Create', TAG_SETTINGS: 'Tag_Settings', TAG_APPROVER: 'Tag_Approver', diff --git a/src/components/AmountPicker.tsx b/src/components/AmountPicker.tsx new file mode 100644 index 000000000000..c71154d216a4 --- /dev/null +++ b/src/components/AmountPicker.tsx @@ -0,0 +1,49 @@ +import React, {ForwardedRef} from 'react'; +import {View} from 'react-native'; +import {MenuItemBaseProps} from '@components/MenuItem'; +import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; +import Navigation from '@libs/Navigation/Navigation'; +import CONST from '@src/CONST'; +import {Route} from '@src/ROUTES'; +import callOrReturn from '@src/types/utils/callOrReturn'; + +type AmountPickerProps = { + /** Item to display */ + value?: string; + + /** A placeholder value to display */ + title?: string | ((value?: string) => string); + + /** Form Error description */ + errorText?: string; + + /** Callback to call when the input changes */ + onInputChange?: (value: string | undefined) => void; + + /** Route to navigate to for the amount form page */ + amountRoute: Route; + + /** Reference to the outer element */ + ref?: ForwardedRef; +} & Pick; + +function AmountPicker({value, description, title, errorText = '', rightLabel, amountRoute, ref}: AmountPickerProps) { + return ( + + { + Navigation.navigate(amountRoute); + }} + brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} + rightLabel={rightLabel} + errorText={errorText} + /> + + ); +} + +export default AmountPicker; diff --git a/src/components/AmountPicker/AmountSelectorModal.tsx b/src/components/AmountPicker/AmountSelectorModal.tsx deleted file mode 100644 index 0aec31b250b9..000000000000 --- a/src/components/AmountPicker/AmountSelectorModal.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import {useFocusEffect} from '@react-navigation/native'; -import React, {useCallback, useRef, useState} from 'react'; -import {View} from 'react-native'; -import Button from '@components/Button'; -import HeaderWithBackButton from '@components/HeaderWithBackButton'; -import Modal from '@components/Modal'; -import NumberWithSymbolForm from '@components/NumberWithSymbolForm'; -import ScreenWrapper from '@components/ScreenWrapper'; -import ScrollView from '@components/ScrollView'; -import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types'; -import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@hooks/useThemeStyles'; -import CONST from '@src/CONST'; -import type {AmountSelectorModalProps} from './types'; - -function AmountSelectorModal({value, description = '', onValueSelected, isVisible, onClose, ...rest}: AmountSelectorModalProps) { - const {translate} = useLocalize(); - const styles = useThemeStyles(); - - const [currentValue, setValue] = useState(value); - const inputRef = useRef(null); - const focusTimeoutRef = useRef(null); - - const inputCallbackRef = (ref: BaseTextInputRef | null) => { - inputRef.current = ref; - }; - - useFocusEffect( - useCallback(() => { - focusTimeoutRef.current = setTimeout(() => { - if (inputRef.current && isVisible) { - inputRef.current.focus(); - } - return () => { - if (!focusTimeoutRef.current || !isVisible) { - return; - } - clearTimeout(focusTimeoutRef.current); - }; - }, CONST.ANIMATED_TRANSITION); - }, [isVisible, inputRef]), - ); - - return ( - - - - - - inputCallbackRef(ref)} - /> -