Merge pull request Expensify#42019 from Krishna2323/krishna2323/issue…

…/41326 fix: Workflows - Offline indicator is present below the last option instead of page bottom.
tienifr · May 31, 2024 · 5699ae3 · 5699ae3
2 parents e5716bd + cf0be8a
commit 5699ae3
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 48 deletions.
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -414,29 +414,32 @@ function BaseSelectionList<TItem extends ListItem>(
         const showTooltip = shouldShowTooltips && normalizedIndex < 10;
 
         return (
-            <ListItem
-                item={item}
-                isFocused={isItemFocused}
-                isDisabled={isDisabled}
-                showTooltip={showTooltip}
-                canSelectMultiple={canSelectMultiple}
-                onSelectRow={() => 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={() => {
-                    if (isDisabled) {
-                        return;
-                    }
-                    setFocusedIndex(normalizedIndex);
-                }}
-                shouldSyncFocus={!isTextInputFocusedRef.current}
-            />
+            <>
+                <ListItem
+                    item={item}
+                    isFocused={isItemFocused}
+                    isDisabled={isDisabled}
+                    showTooltip={showTooltip}
+                    canSelectMultiple={canSelectMultiple}
+                    onSelectRow={() => 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={() => {
+                        if (isDisabled) {
+                            return;
+                        }
+                        setFocusedIndex(normalizedIndex);
+                    }}
+                    shouldSyncFocus={!isTextInputFocusedRef.current}
+                />
+                {item.footerContent && item.footerContent}
+            </>
         );
     };
 

diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
@@ -127,6 +127,9 @@ type ListItem = {
     /** Whether the brick road indicator should be shown */
     brickRoadIndicator?: BrickRoad | '' | null;
 
+    /** Element to render below the ListItem */
+    footerContent?: ReactNode;
+
     /** Whether item pressable wrapper should be focusable */
     tabIndex?: 0 | -1;
 };

diff --git 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<AutoReportingFrequencyKey, string>;
@@ -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
         </OfflineWithFeedback>
     );
 
-    const renderItem = ({item}: {item: WorkspaceAutoReportingFrequencyPageItem}) => (
-        <>
-            <RadioListItem
-                item={item}
-                onSelectRow={() => 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,
+            footerContent: isMonthlyFrequency && frequencyKey === CONST.POLICY.AUTO_REPORTING_FREQUENCIES.MONTHLY ? monthlyFrequencyDetails() : null,
+        };
+    });
 
     return (
         <AccessOrNotFoundWrapper
@@ -140,11 +131,14 @@ 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}
                     >
-                        <FlatList
-                            data={autoReportingFrequencyItems}
-                            renderItem={renderItem}
-                            keyExtractor={(item: WorkspaceAutoReportingFrequencyPageItem) => item.text}
+                        <SelectionList
+                            ListItem={RadioListItem}
+                            sections={[{data: autoReportingFrequencyItems}]}
+                            onSelectRow={onSelectAutoReportingFrequency}
+                            initiallyFocusedOptionKey={policy?.autoReportingFrequency}
                         />
                     </OfflineWithFeedback>
                 </FullPageNotFoundView>