diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index f701f11c25b4..0d4487d5237e 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -414,29 +414,32 @@ 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={() => { - if (isDisabled) { - return; - } - 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={() => { + 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 index 99aa96d4edbe..b3bee8fb15c5 100644 --- 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 index 633404cc4d32..39e4cf0986c8 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, + footerContent: isMonthlyFrequency && frequencyKey === CONST.POLICY.AUTO_REPORTING_FREQUENCIES.MONTHLY ? monthlyFrequencyDetails() : null, + }; + }); return ( Policy.clearPolicyErrorField(policy?.id ?? '', CONST.POLICY.COLLECTION_KEYS.AUTOREPORTING_FREQUENCY)} + style={styles.flex1} + contentContainerStyle={styles.flex1} > - item.text} +