statepicker refactored to compatible with form

src/components/StatePicker.js

@@ -1,9 +1,10 @@
 import _ from 'underscore';
-import React from 'react';
+import React, {forwardRef} from 'react';
 import PropTypes from 'prop-types';
 import {CONST} from 'expensify-common/lib/CONST';
 import Picker from './Picker';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import * as FormUtils from '../libs/FormUtils';
 
 const STATES = _.map(CONST.STATES, ({stateISO}) => ({
     value: stateISO,
@@ -14,31 +15,64 @@ const propTypes = {
     /** The label for the field */
     label: PropTypes.string,
 
-    /** A callback method that is called when the value changes and it received the selected value as an argument */
-    onChange: PropTypes.func.isRequired,
+    /** A callback method that is called when the value changes and it receives the selected value as an argument. */
+    onInputChange: PropTypes.func.isRequired,
 
     /** The value that needs to be selected */
     value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
+    /** Indicates that the input is being used with the Form component */
+    isFormInput: PropTypes.bool,
+
+    /**
+    * The ID used to uniquely identify the input
+    *
+    * @param {Object} props - props passed to the input
+    * @returns {Object} - returns an Error object if isFormInput is supplied but inputID is falsey or not a string
+    */
+    inputID: props => FormUtils.validateInputIDProps(props),
+
+    /** Saves a draft of the input value when used in a form */
+    shouldSaveDraft: PropTypes.bool,
+
+    /** Callback that is called when the text input is blurred */
+    onBlur: PropTypes.func,
+
+    /** Error text to display */
+    errorText: PropTypes.string,
+
+    /** The default value of the state picker */
+    defaultValue: PropTypes.string,
+
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     label: '',
-    value: '',
+    value: undefined,
+    defaultValue: undefined,
+    errorText: '',
+    shouldSaveDraft: false,
+    isFormInput: false,
+    inputID: undefined,
+    onBlur: () => {},
 };
 
-const StatePicker = props => (
+const StatePicker = forwardRef((props, ref) => (
     <Picker
+        ref={ref}
+        inputID={props.inputID}
         placeholder={{value: '', label: '-'}}
         items={STATES}
-        onInputChange={props.onChange}
-        value={props.value}
+        onInputChange={props.onInputChange}
+        value={props.value ? props.value : props.defaultValue}
         label={props.label || props.translate('common.state')}
-        hasError={props.hasError}
         errorText={props.errorText}
+        onBlur={props.onBlur}
+        isFormInput={props.isFormInput}
+        shouldSaveDraft={props.shouldSaveDraft}
     />
-);
+));
 
 StatePicker.propTypes = propTypes;
 StatePicker.defaultProps = defaultProps;

src/pages/ReimbursementAccount/AddressForm.js

@@ -70,9 +70,8 @@ const AddressForm = props => (
             <View style={[styles.flex1]}>
                 <StatePicker
                     value={props.values.state}
-                    onChange={value => props.onFieldChange({state: value})}
+                    onInputChange={value => props.onFieldChange({state: value})}
                     errorText={props.errors.state ? props.translate('bankAccount.error.addressState') : ''}
-                    hasError={Boolean(props.errors.state)}
                 />
             </View>
         </View>

src/pages/ReimbursementAccount/CompanyStep.js

@@ -85,6 +85,7 @@ class CompanyStep extends React.Component {
             incorporationDateFuture: 'bankAccount.error.incorporationDateFuture',
             incorporationType: 'bankAccount.error.companyType',
             hasNoConnectionToCannabis: 'bankAccount.error.restrictedBusiness',
+            incorporationState: 'bankAccount.error.incorporationState',
         };
 
         this.getErrorText = inputKey => ReimbursementAccountUtils.getErrorText(this.props, this.errorTranslationKeys, inputKey);
@@ -286,9 +287,9 @@ class CompanyStep extends React.Component {
                     <View style={styles.mt4}>
                         <StatePicker
                             label={this.props.translate('companyStep.incorporationState')}
-                            onChange={value => this.clearErrorAndSetValue('incorporationState', value)}
+                            onInputChange={value => this.clearErrorAndSetValue('incorporationState', value)}
                             value={this.state.incorporationState}
-                            hasError={this.getErrors().incorporationState}
+                            errorText={this.getErrorText('incorporationState')}
                         />
                     </View>
                     <CheckboxWithLabel

src/pages/settings/Payments/AddDebitCardPage.js

@@ -299,9 +299,9 @@ class DebitCardPage extends Component {
                                 </View>
                                 <View style={[styles.flex1]}>
                                     <StatePicker
-                                        onChange={value => this.clearErrorAndSetValue('addressState', value)}
+                                        onInputChange={value => this.clearErrorAndSetValue('addressState', value)}
                                         value={this.state.addressState}
-                                        hasError={lodashGet(this.state.errors, 'addressState', false)}
+                                        errorText={this.getErrorText('addressState')}
                                     />
                                 </View>
                             </View>

src/stories/Form.stories.js

@@ -2,6 +2,7 @@ import React, {useState} from 'react';
 import {View} from 'react-native';
 import TextInput from '../components/TextInput';
 import Picker from '../components/Picker';
+import StatePicker from '../components/StatePicker';
 import AddressSearch from '../components/AddressSearch';
 import DatePicker from '../components/DatePicker';
 import Form from '../components/Form';
@@ -23,6 +24,7 @@ const story = {
         AddressSearch,
         CheckboxWithLabel,
         Picker,
+        StatePicker,
         DatePicker,
     },
 };
@@ -105,6 +107,13 @@ const Template = (args) => {
                 ]}
                 isFormInput
             />
+            <View style={styles.mt4}>
+                <StatePicker
+                    inputID="pickState"
+                    shouldSaveDraft
+                    isFormInput
+                />
+            </View>
             <CheckboxWithLabel
                 inputID="checkbox"
                 style={[styles.mb4, styles.mt5]}
@@ -175,6 +184,9 @@ const defaultArgs = {
         if (!values.pickAnotherFruit) {
             errors.pickAnotherFruit = 'Please select a fruit';
         }
+        if (!values.pickState) {
+            errors.pickState = 'Please select a state';
+        }
         if (!values.checkbox) {
             errors.checkbox = 'You must accept the Terms of Service to continue';
         }
@@ -196,6 +208,7 @@ const defaultArgs = {
         dob: '1990-01-01',
         pickFruit: 'orange',
         pickAnotherFruit: 'apple',
+        pickState: 'AL',
         checkbox: false,
     },
 };
@@ -211,6 +224,7 @@ InputError.args = {
         pickFruit: '',
         dob: '',
         pickAnotherFruit: '',
+        pickState: '',
         checkbox: false,
     },
 };