Merge pull request #32276 from software-mansion-labs/form-migration/a…

…ddress-form [Form Provider Refactor] AddressForm and AddressPage
Expensify · Dec 11, 2023 · 71ce19d · 71ce19d
2 parents 14ef2a2 + 8f7c76b
commit 71ce19d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/src/components/AddressForm.js b/src/components/AddressForm.js
@@ -11,7 +11,8 @@ import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import AddressSearch from './AddressSearch';
 import CountrySelector from './CountrySelector';
-import Form from './Form';
+import FormProvider from './Form/FormProvider';
+import InputWrapper from './Form/InputWrapper';
 import StatePicker from './StatePicker';
 import TextInput from './TextInput';
 
@@ -115,7 +116,7 @@ function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldS
     }, []);
 
     return (
-        <Form
+        <FormProvider
             style={[styles.flexGrow1, styles.mh5]}
             formID={formID}
             validate={validator}
@@ -124,7 +125,8 @@ function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldS
             enabledWhenOffline
         >
             <View>
-                <AddressSearch
+                <InputWrapper
+                    InputComponent={AddressSearch}
                     inputID="addressLine1"
                     label={translate('common.addressLine', {lineNumber: 1})}
                     onValueChange={(data, key) => {
@@ -146,7 +148,8 @@ function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldS
                 />
             </View>
             <View style={styles.formSpaceVertical} />
-            <TextInput
+            <InputWrapper
+                InputComponent={TextInput}
                 inputID="addressLine2"
                 label={translate('common.addressLine', {lineNumber: 2})}
                 aria-label={translate('common.addressLine', {lineNumber: 2})}
@@ -158,7 +161,8 @@ function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldS
             />
             <View style={styles.formSpaceVertical} />
             <View style={styles.mhn5}>
-                <CountrySelector
+                <InputWrapper
+                    InputComponent={CountrySelector}
                     inputID="country"
                     value={country}
                     shouldSaveDraft={shouldSaveDraft}
@@ -167,15 +171,17 @@ function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldS
             <View style={styles.formSpaceVertical} />
             {isUSAForm ? (
                 <View style={styles.mhn5}>
-                    <StatePicker
+                    <InputWrapper
+                        InputComponent={StatePicker}
                         inputID="state"
                         defaultValue={state}
                         onValueChange={onAddressChanged}
                         shouldSaveDraft={shouldSaveDraft}
                     />
                 </View>
             ) : (
-                <TextInput
+                <InputWrapper
+                    InputComponent={TextInput}
                     inputID="state"
                     label={translate('common.stateOrProvince')}
                     aria-label={translate('common.stateOrProvince')}
@@ -188,7 +194,8 @@ function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldS
                 />
             )}
             <View style={styles.formSpaceVertical} />
-            <TextInput
+            <InputWrapper
+                InputComponent={TextInput}
                 inputID="city"
                 label={translate('common.city')}
                 aria-label={translate('common.city')}
@@ -200,7 +207,8 @@ function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldS
                 shouldSaveDraft={shouldSaveDraft}
             />
             <View style={styles.formSpaceVertical} />
-            <TextInput
+            <InputWrapper
+                InputComponent={TextInput}
                 inputID="zipPostCode"
                 label={translate('common.zipPostCode')}
                 aria-label={translate('common.zipPostCode')}
@@ -212,7 +220,7 @@ function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldS
                 onValueChange={onAddressChanged}
                 shouldSaveDraft={shouldSaveDraft}
             />
-        </Form>
+        </FormProvider>
     );
 }
 

diff --git a/src/components/CountrySelector.js b/src/components/CountrySelector.js
@@ -7,6 +7,7 @@ import useThemeStyles from '@styles/useThemeStyles';
 import ROUTES from '@src/ROUTES';
 import FormHelpMessage from './FormHelpMessage';
 import MenuItemWithTopDescription from './MenuItemWithTopDescription';
+import refPropTypes from './refPropTypes';
 
 const propTypes = {
     /** Form error text. e.g when no country is selected */
@@ -23,7 +24,7 @@ const propTypes = {
     inputID: PropTypes.string.isRequired,
 
     /** React ref being forwarded to the MenuItemWithTopDescription */
-    forwardedRef: PropTypes.func,
+    forwardedRef: refPropTypes,
 };
 
 const defaultProps = {