From e56c2bb25cc447aedc035c35ded685a4cdfe7983 Mon Sep 17 00:00:00 2001 From: Artem Makushov Date: Tue, 3 Dec 2024 02:32:00 +0100 Subject: [PATCH 1/3] fix focus in SelectionScreen --- .../WorkspaceCompanyCardAccountSelectCardPage.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx index bb7d3249aad8..41ed4f6524d8 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx @@ -1,3 +1,4 @@ +import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useMemo, useState} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -11,7 +12,6 @@ import TextLink from '@components/TextLink'; import useLocalize from '@hooks/useLocalize'; import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; -import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import Navigation from '@navigation/Navigation'; import type {SettingsNavigatorParamList} from '@navigation/types'; @@ -23,7 +23,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import {getExportMenuItem} from './utils'; -type WorkspaceCompanyCardAccountSelectCardProps = PlatformStackScreenProps; +type WorkspaceCompanyCardAccountSelectCardProps = StackScreenProps; function WorkspaceCompanyCardAccountSelectCardPage({route}: WorkspaceCompanyCardAccountSelectCardProps) { const {translate} = useLocalize(); @@ -103,6 +103,7 @@ function WorkspaceCompanyCardAccountSelectCardPage({route}: WorkspaceCompanyCard onChangeText={setSearchText} onSelectRow={updateExportAccount} initiallyFocusedOptionKey={exportMenuItem?.data?.find((mode) => mode.isSelected)?.keyForList} + shouldUpdateFocusedIndex onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, cardID, bank))} headerTitleAlreadyTranslated={exportMenuItem?.description} listEmptyContent={listEmptyContent} From c44682ba881f6cc47370866af1d6721a769c560d Mon Sep 17 00:00:00 2001 From: Artem Makushov Date: Tue, 3 Dec 2024 02:42:00 +0100 Subject: [PATCH 2/3] revert changes --- .../WorkspaceCompanyCardAccountSelectCardPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx index 41ed4f6524d8..2c712698183a 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx @@ -1,4 +1,3 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useMemo, useState} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -12,6 +11,7 @@ import TextLink from '@components/TextLink'; import useLocalize from '@hooks/useLocalize'; import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import * as PolicyUtils from '@libs/PolicyUtils'; import Navigation from '@navigation/Navigation'; import type {SettingsNavigatorParamList} from '@navigation/types'; @@ -23,7 +23,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import {getExportMenuItem} from './utils'; -type WorkspaceCompanyCardAccountSelectCardProps = StackScreenProps; +type WorkspaceCompanyCardAccountSelectCardProps = PlatformStackScreenProps; function WorkspaceCompanyCardAccountSelectCardPage({route}: WorkspaceCompanyCardAccountSelectCardProps) { const {translate} = useLocalize(); From ff5a200d6fa454a2e8e2e90bebcf9cd16e39cb34 Mon Sep 17 00:00:00 2001 From: Artem Makushov Date: Thu, 12 Dec 2024 02:43:13 +0100 Subject: [PATCH 3/3] add new shouldResetFocusedIndex prop to resetIndex on changing export level type to 0 (default card) --- src/components/SelectionList/BaseSelectionList.tsx | 4 +++- src/components/SelectionList/types.ts | 3 +++ src/components/SelectionScreen.tsx | 5 +++++ .../WorkspaceCompanyCardAccountSelectCardPage.tsx | 2 +- 4 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index ad69d27e7385..f9186cb4a888 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -105,6 +105,7 @@ function BaseSelectionList( shouldDelayFocus = true, onArrowFocus = () => {}, shouldUpdateFocusedIndex = false, + shouldResetFocusedIndex = false, onLongPressRow, shouldShowTextInput = !!textInputLabel || !!textInputIconLeft, shouldShowListEmptyContent = true, @@ -666,7 +667,7 @@ function BaseSelectionList( // reseting the currrent page to 1 when the user types something setCurrentPage(1); - updateAndScrollToFocusedIndex(newSelectedIndex); + updateAndScrollToFocusedIndex(shouldResetFocusedIndex ? 0 : newSelectedIndex); }, [ canSelectMultiple, flattenedSections.allOptions.length, @@ -677,6 +678,7 @@ function BaseSelectionList( prevSelectedOptionsLength, prevAllOptionsLength, shouldUpdateFocusedIndex, + shouldResetFocusedIndex, ]); useEffect( diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 8e94b2f0069e..72da3ba8646b 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -395,6 +395,9 @@ type BaseSelectionListProps = Partial & { /** Whether to update the focused index on a row select */ shouldUpdateFocusedIndex?: boolean; + /** Whether to reset the focused index to zero */ + shouldResetFocusedIndex?: boolean; + /** Optional callback function triggered upon pressing a checkbox. If undefined and the list displays checkboxes, checkbox interactions are managed by onSelectRow, allowing for pressing anywhere on the list. */ onCheckboxPress?: (item: TItem) => void; diff --git a/src/components/SelectionScreen.tsx b/src/components/SelectionScreen.tsx index 020796085ba4..051e99e1e674 100644 --- a/src/components/SelectionScreen.tsx +++ b/src/components/SelectionScreen.tsx @@ -94,6 +94,9 @@ type SelectionScreenProps = { /** Whether to update the focused index on a row select */ shouldUpdateFocusedIndex?: boolean; + /** Whether to reset the focused index to zero */ + shouldResetFocusedIndex?: boolean; + /** Whether to show the text input */ shouldShowTextInput?: boolean; @@ -134,6 +137,7 @@ function SelectionScreen({ onChangeText, shouldShowTextInput, shouldUpdateFocusedIndex = false, + shouldResetFocusedIndex = false, }: SelectionScreenProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); @@ -179,6 +183,7 @@ function SelectionScreen({ sectionListStyle={!!sections.length && [styles.flexGrow0]} shouldSingleExecuteRowSelect={shouldSingleExecuteRowSelect} shouldUpdateFocusedIndex={shouldUpdateFocusedIndex} + shouldResetFocusedIndex={shouldResetFocusedIndex} isAlternateTextMultilineSupported > mode.isSelected)?.keyForList} - shouldUpdateFocusedIndex + shouldResetFocusedIndex onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, cardID, bank))} headerTitleAlreadyTranslated={exportMenuItem?.description} listEmptyContent={listEmptyContent}