From 422ba5563e3d3b39683d27c927d0371a8923736b Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Sat, 11 May 2024 22:26:59 +0530 Subject: [PATCH 1/8] fix: Workflows - Offline indicator is present below the last option instead of page bottom. Signed-off-by: Krishna Gupta --- .../SelectionList/BaseSelectionList.tsx | 39 +++++++++-------- src/components/SelectionList/types.ts | 3 ++ .../WorkspaceAutoReportingFrequencyPage.tsx | 42 ++++++++----------- 3 files changed, 41 insertions(+), 43 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 76c54d3c37cb..4ac553c7328d 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -344,24 +344,27 @@ function BaseSelectionList( const showTooltip = shouldShowTooltips && normalizedIndex < 10; return ( - selectRow(item)} - onCheckboxPress={onCheckboxPress ? () => onCheckboxPress?.(item) : undefined} - onDismissError={() => onDismissError?.(item)} - shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} - // We're already handling the Enter key press in the useKeyboardShortcut hook, so we don't want the list item to submit the form - shouldPreventEnterKeySubmit - rightHandSideComponent={rightHandSideComponent} - keyForList={item.keyForList ?? ''} - isMultilineSupported={isRowMultilineSupported} - onFocus={() => setFocusedIndex(normalizedIndex)} - shouldSyncFocus={!isTextInputFocusedRef.current} - /> + <> + selectRow(item)} + onCheckboxPress={onCheckboxPress ? () => onCheckboxPress?.(item) : undefined} + onDismissError={() => onDismissError?.(item)} + shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} + // We're already handling the Enter key press in the useKeyboardShortcut hook, so we don't want the list item to submit the form + shouldPreventEnterKeySubmit + rightHandSideComponent={rightHandSideComponent} + keyForList={item.keyForList ?? ''} + isMultilineSupported={isRowMultilineSupported} + onFocus={() => setFocusedIndex(normalizedIndex)} + shouldSyncFocus={!isTextInputFocusedRef.current} + /> + {item.footerComponent ?? item.footerComponent} + ); }; diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 8a2a1efdd030..3dbee0eb37de 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -126,6 +126,9 @@ type ListItem = { /** Whether the brick road indicator should be shown */ brickRoadIndicator?: BrickRoad | '' | null; + + /** Element to render below the ListItem */ + footerComponent?: ReactNode; }; type TransactionListItemType = ListItem & { diff --git a/src/pages/workspace/workflows/WorkspaceAutoReportingFrequencyPage.tsx b/src/pages/workspace/workflows/WorkspaceAutoReportingFrequencyPage.tsx index 07553baba356..7410ebd6ccbc 100644 --- a/src/pages/workspace/workflows/WorkspaceAutoReportingFrequencyPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceAutoReportingFrequencyPage.tsx @@ -1,12 +1,12 @@ import type {StackScreenProps} from '@react-navigation/stack'; import React, {useState} from 'react'; -import {FlatList} from 'react-native-gesture-handler'; import type {ValueOf} from 'type-fest'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import MenuItem from '@components/MenuItem'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import ScreenWrapper from '@components/ScreenWrapper'; +import SelectionList from '@components/SelectionList'; import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -33,6 +33,7 @@ type WorkspaceAutoReportingFrequencyPageItem = { text: string; keyForList: string; isSelected: boolean; + footerComponent?: React.ReactNode | null; }; type AutoReportingFrequencyDisplayNames = Record; @@ -51,16 +52,6 @@ function WorkspaceAutoReportingFrequencyPage({policy, route}: WorkspaceAutoRepor const styles = useThemeStyles(); const [isMonthlyFrequency, setIsMonthlyFrequency] = useState(policy?.autoReportingFrequency === CONST.POLICY.AUTO_REPORTING_FREQUENCIES.MONTHLY); - const autoReportingFrequencyItems: WorkspaceAutoReportingFrequencyPageItem[] = Object.keys(getAutoReportingFrequencyDisplayNames(preferredLocale)).map((frequencyKey) => { - const isSelected = policy?.autoReportingFrequency === frequencyKey; - - return { - text: getAutoReportingFrequencyDisplayNames(preferredLocale)[frequencyKey as AutoReportingFrequencyKey] || '', - keyForList: frequencyKey, - isSelected, - }; - }); - const onSelectAutoReportingFrequency = (item: WorkspaceAutoReportingFrequencyPageItem) => { Policy.setWorkspaceAutoReportingFrequency(policy?.id ?? '', item.keyForList as AutoReportingFrequencyKey); @@ -106,16 +97,16 @@ function WorkspaceAutoReportingFrequencyPage({policy, route}: WorkspaceAutoRepor ); - const renderItem = ({item}: {item: WorkspaceAutoReportingFrequencyPageItem}) => ( - <> - onSelectAutoReportingFrequency(item)} - showTooltip={false} - /> - {isMonthlyFrequency && item.keyForList === CONST.POLICY.AUTO_REPORTING_FREQUENCIES.MONTHLY ? monthlyFrequencyDetails() : null} - - ); + const autoReportingFrequencyItems: WorkspaceAutoReportingFrequencyPageItem[] = Object.keys(getAutoReportingFrequencyDisplayNames(preferredLocale)).map((frequencyKey) => { + const isSelected = policy?.autoReportingFrequency === frequencyKey; + + return { + text: getAutoReportingFrequencyDisplayNames(preferredLocale)[frequencyKey as AutoReportingFrequencyKey] || '', + keyForList: frequencyKey, + isSelected, + footerComponent: isMonthlyFrequency && frequencyKey === CONST.POLICY.AUTO_REPORTING_FREQUENCIES.MONTHLY ? monthlyFrequencyDetails() : null, + }; + }); return ( Policy.clearPolicyErrorField(policy?.id ?? '', CONST.POLICY.COLLECTION_KEYS.AUTOREPORTING_FREQUENCY)} > - item.text} + From 6ddaad44c555b0816247e15f92e37278c6003a3b Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Sat, 11 May 2024 22:32:12 +0530 Subject: [PATCH 2/8] minor update. Signed-off-by: Krishna Gupta --- src/components/SelectionList/BaseSelectionList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 4ac553c7328d..30006e62dced 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -363,7 +363,7 @@ function BaseSelectionList( onFocus={() => setFocusedIndex(normalizedIndex)} shouldSyncFocus={!isTextInputFocusedRef.current} /> - {item.footerComponent ?? item.footerComponent} + {item.footerComponent && item.footerComponent} ); }; From 47abac3c7eeb26b432477eb23d494392d488728c Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Sun, 12 May 2024 11:00:27 +0530 Subject: [PATCH 3/8] minor fix. Signed-off-by: Krishna Gupta --- .../workspace/workflows/WorkspaceAutoReportingFrequencyPage.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/workspace/workflows/WorkspaceAutoReportingFrequencyPage.tsx b/src/pages/workspace/workflows/WorkspaceAutoReportingFrequencyPage.tsx index 7410ebd6ccbc..5663ca4fc18b 100644 --- a/src/pages/workspace/workflows/WorkspaceAutoReportingFrequencyPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceAutoReportingFrequencyPage.tsx @@ -131,6 +131,8 @@ function WorkspaceAutoReportingFrequencyPage({policy, route}: WorkspaceAutoRepor pendingAction={policy?.pendingFields?.autoReportingFrequency} errors={ErrorUtils.getLatestErrorField(policy ?? {}, CONST.POLICY.COLLECTION_KEYS.AUTOREPORTING_FREQUENCY)} onClose={() => Policy.clearPolicyErrorField(policy?.id ?? '', CONST.POLICY.COLLECTION_KEYS.AUTOREPORTING_FREQUENCY)} + style={styles.flex1} + contentContainerStyle={styles.flex1} > Date: Sun, 12 May 2024 11:29:27 +0530 Subject: [PATCH 4/8] update focus index when initialFocusedIndex changes. Signed-off-by: Krishna Gupta --- src/hooks/useArrowKeyFocusManager.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/hooks/useArrowKeyFocusManager.ts b/src/hooks/useArrowKeyFocusManager.ts index 28a137656cfa..ec643d054017 100644 --- a/src/hooks/useArrowKeyFocusManager.ts +++ b/src/hooks/useArrowKeyFocusManager.ts @@ -70,6 +70,10 @@ export default function useArrowKeyFocusManager({ // eslint-disable-next-line react-hooks/exhaustive-deps useEffect(() => onFocusedIndexChange(focusedIndex), [focusedIndex]); + useEffect(() => { + setFocusedIndex(initialFocusedIndex); + }, [initialFocusedIndex]); + const arrowUpCallback = useCallback(() => { if (maxIndex < 0 || !isFocused) { return; From 9350a319bdc044e0b2b6f0d055f982e45d32fc9d Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Mon, 20 May 2024 16:03:09 +0530 Subject: [PATCH 5/8] remove redundant code. Signed-off-by: Krishna Gupta --- src/hooks/useArrowKeyFocusManager.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/hooks/useArrowKeyFocusManager.ts b/src/hooks/useArrowKeyFocusManager.ts index ec643d054017..28a137656cfa 100644 --- a/src/hooks/useArrowKeyFocusManager.ts +++ b/src/hooks/useArrowKeyFocusManager.ts @@ -70,10 +70,6 @@ export default function useArrowKeyFocusManager({ // eslint-disable-next-line react-hooks/exhaustive-deps useEffect(() => onFocusedIndexChange(focusedIndex), [focusedIndex]); - useEffect(() => { - setFocusedIndex(initialFocusedIndex); - }, [initialFocusedIndex]); - const arrowUpCallback = useCallback(() => { if (maxIndex < 0 || !isFocused) { return; From 2cbeb45ed712cffd8bfd070c42d71b7ce9967b4b Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Mon, 20 May 2024 16:11:10 +0530 Subject: [PATCH 6/8] rename footerComponent to footerContent. Signed-off-by: Krishna Gupta --- src/components/SelectionList/BaseSelectionList.tsx | 2 +- src/components/SelectionList/types.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 4f0b4df3d616..3ed5e10b082d 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -365,7 +365,7 @@ function BaseSelectionList( onFocus={() => setFocusedIndex(normalizedIndex)} shouldSyncFocus={!isTextInputFocusedRef.current} /> - {item.footerComponent && item.footerComponent} + {item.footerContent && item.footerContent} ); }; diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 7ea1a509239e..99942d7dfb03 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -127,7 +127,7 @@ type ListItem = { brickRoadIndicator?: BrickRoad | '' | null; /** Element to render below the ListItem */ - footerComponent?: ReactNode; + footerContent?: ReactNode; }; type TransactionListItemType = ListItem & From df2b6b7e0e3869e820a3b9d4ea3ed9f5700f50a8 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Wed, 22 May 2024 20:27:18 +0530 Subject: [PATCH 7/8] fix typo. Signed-off-by: Krishna Gupta --- .../workspace/workflows/WorkspaceAutoReportingFrequencyPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/workflows/WorkspaceAutoReportingFrequencyPage.tsx b/src/pages/workspace/workflows/WorkspaceAutoReportingFrequencyPage.tsx index 33fd1aa4acf3..9ac435c13839 100644 --- a/src/pages/workspace/workflows/WorkspaceAutoReportingFrequencyPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceAutoReportingFrequencyPage.tsx @@ -104,7 +104,7 @@ function WorkspaceAutoReportingFrequencyPage({policy, route}: WorkspaceAutoRepor text: getAutoReportingFrequencyDisplayNames(preferredLocale)[frequencyKey as AutoReportingFrequencyKey] || '', keyForList: frequencyKey, isSelected, - footerComponent: isMonthlyFrequency && frequencyKey === CONST.POLICY.AUTO_REPORTING_FREQUENCIES.MONTHLY ? monthlyFrequencyDetails() : null, + footerContent: isMonthlyFrequency && frequencyKey === CONST.POLICY.AUTO_REPORTING_FREQUENCIES.MONTHLY ? monthlyFrequencyDetails() : null, }; }); From 0f58c9a63526b32b21beb681eba2acdd04e75083 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Fri, 31 May 2024 03:59:02 +0530 Subject: [PATCH 8/8] remove extra line break. Signed-off-by: Krishna Gupta --- src/components/SelectionList/BaseSelectionList.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index f6370fcb0313..0d4487d5237e 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -440,7 +440,6 @@ function BaseSelectionList( /> {item.footerContent && item.footerContent} - ); };