1
1
import React , { useCallback , useMemo , useState } from 'react' ;
2
2
import { View } from 'react-native' ;
3
+ import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton' ;
3
4
import SelectionList from '@components/SelectionList' ;
4
5
import RadioListItem from '@components/SelectionList/RadioListItem' ;
5
6
import useLocalize from '@hooks/useLocalize' ;
@@ -48,6 +49,19 @@ function AccountType({isEditing, onNext, formValues, fieldsMap}: CustomSubStepPr
48
49
[ fieldData . valueSet , currentAccountType ] ,
49
50
) ;
50
51
52
+ const button = useMemo ( ( ) => {
53
+ const buttonText = isEditing ? translate ( 'common.confirm' ) : translate ( 'common.next' ) ;
54
+ return (
55
+ < FormAlertWithSubmitButton
56
+ isDisabled = { fieldData . isRequired && ! currentAccountType }
57
+ buttonText = { buttonText }
58
+ onSubmit = { onAccountTypeSelected }
59
+ containerStyles = { [ styles . flexReset , styles . flexGrow0 , styles . flexShrink0 , styles . flexBasisAuto ] }
60
+ enabledWhenOffline
61
+ />
62
+ ) ;
63
+ } , [ currentAccountType , fieldData . isRequired , isEditing , onAccountTypeSelected , styles . flexBasisAuto , styles . flexGrow0 , styles . flexReset , styles . flexShrink0 , translate ] ) ;
64
+
51
65
return (
52
66
< >
53
67
< View style = { styles . ph5 } >
@@ -56,15 +70,13 @@ function AccountType({isEditing, onNext, formValues, fieldsMap}: CustomSubStepPr
56
70
< SelectionList
57
71
sections = { [ { data : options } ] }
58
72
onSelectRow = { onSelectionChange }
59
- onConfirm = { onAccountTypeSelected }
60
73
ListItem = { RadioListItem }
61
74
initiallyFocusedOptionKey = { currentAccountType }
75
+ footerContent = { button }
62
76
shouldSingleExecuteRowSelect
63
77
shouldStopPropagation
64
78
shouldUseDynamicMaxToRenderPerBatch
65
- showConfirmButton
66
79
shouldUpdateFocusedIndex
67
- confirmButtonText = { isEditing ? translate ( 'common.confirm' ) : translate ( 'common.next' ) }
68
80
/>
69
81
</ >
70
82
) ;
0 commit comments