diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 675438072ce1..48e732d4a182 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -45,6 +45,7 @@ function BaseSelectionList({ onEndReached, onEndReachedThreshold, confirmButtonOptions, + children, customListHeader, customListHeaderContent, footerContent, @@ -445,6 +446,7 @@ function BaseSelectionList({ } /> + {children} )} diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 11af124c21d4..3823399aad25 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -1,9 +1,10 @@ import type {ReactElement, RefObject} from 'react'; import type {GestureResponderEvent, InputModeOptions, StyleProp, TextStyle, ViewStyle} from 'react-native'; import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types'; +import type ChildrenProps from '@src/types/utils/ChildrenProps'; import type {ListItem, ValidListItem} from './ListItem/types'; -type SelectionListProps = { +type SelectionListProps = Partial & { /** Array of items to display in the list */ data: TItem[]; diff --git a/src/pages/workspace/companyCards/addNew/SelectBankStep.tsx b/src/pages/workspace/companyCards/addNew/SelectBankStep.tsx index 3050a1dcd3d7..db1071566bf1 100644 --- a/src/pages/workspace/companyCards/addNew/SelectBankStep.tsx +++ b/src/pages/workspace/companyCards/addNew/SelectBankStep.tsx @@ -1,13 +1,13 @@ import {useRoute} from '@react-navigation/native'; -import React, {useEffect, useState} from 'react'; +import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; import FormHelpMessage from '@components/FormHelpMessage'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import Icon from '@components/Icon'; import ScreenWrapper from '@components/ScreenWrapper'; -import SelectionList from '@components/SelectionListWithSections'; -import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; @@ -38,7 +38,7 @@ function SelectBankStep() { const [hasError, setHasError] = useState(false); const isOtherBankSelected = bankSelected === CONST.COMPANY_CARDS.BANKS.OTHER; - const submit = () => { + const submit = useCallback(() => { if (!bankSelected) { setHasError(true); } else { @@ -55,7 +55,7 @@ function SelectBankStep() { isEditing: false, }); } - }; + }, [addNewCard?.data.selectedBank, bankSelected, isBetaEnabled, isOtherBankSelected]); useEffect(() => { setBankSelected(addNewCard?.data.selectedBank); @@ -88,6 +88,17 @@ function SelectBankStep() { ), })); + const confirmButtonOptions = useMemo( + () => ({ + showButton: true, + text: translate('common.next'), + onConfirm: submit, + isDisabled: isOffline, + style: !hasError && styles.mt5, + }), + [hasError, isOffline, styles.mt5, submit, translate], + ); + return ( {translate('workspace.companyCards.addNewCard.whoIsYourBankAccount')} { setBankSelected(value); setHasError(false); }} - sections={[{data}]} + initiallyFocusedItemKey={addNewCard?.data.selectedBank ?? undefined} + confirmButtonOptions={confirmButtonOptions} shouldSingleExecuteRowSelect - initiallyFocusedOptionKey={addNewCard?.data.selectedBank} shouldUpdateFocusedIndex - showConfirmButton - confirmButtonText={translate('common.next')} - onConfirm={submit} - isConfirmButtonDisabled={isOffline} - confirmButtonStyles={!hasError && styles.mt5} addBottomSafeAreaPadding > {hasError && (