7535 refactor picker compatible form

.storybook/main.js

@@ -6,6 +6,7 @@ module.exports = {
     addons: [
         '@storybook/addon-essentials',
         '@storybook/addon-a11y',
+        '@storybook/addon-react-native-web',
     ],
     staticDirs: [
         './public',

package.json

@@ -54,7 +54,7 @@
     "@react-native-firebase/crashlytics": "^12.3.0",
     "@react-native-firebase/perf": "^12.3.0",
     "@react-native-masked-view/masked-view": "^0.2.4",
-    "@react-native-picker/picker": "^1.9.11",
+    "@react-native-picker/picker": "^2.2.1",
     "@react-navigation/compat": "^5.3.20",
     "@react-navigation/drawer": "6.1.8",
     "@react-navigation/native": "6.0.8",
@@ -133,6 +133,7 @@
     "@react-native-community/eslint-config": "^2.0.0",
     "@storybook/addon-a11y": "^6.4.12",
     "@storybook/addon-essentials": "^6.4.12",
+    "@storybook/addon-react-native-web": "0.0.18",
     "@storybook/addons": "^6.4.12",
     "@storybook/react": "^6.4.12",
     "@storybook/theming": "^6.4.12",

src/components/InlineErrorText.js

@@ -19,7 +19,7 @@ const InlineErrorText = (props) => {
     }
 
     return (
-        <Text style={[styles.formError, styles.mt1]}>{props.children}</Text>
+        <Text style={[styles.formError, styles.mt1, styles.ml3]}>{props.children}</Text>
     );
 };
 

src/components/Picker/BasePicker/index.js

@@ -1,30 +1,72 @@
 import React from 'react';
 import RNPickerSelect from 'react-native-picker-select';
+import {View} from 'react-native';
+import _ from 'underscore';
 
 import styles from '../../../styles/styles';
 import * as basePickerPropTypes from './basePickerPropTypes';
 import basePickerStyles from './basePickerStyles';
 
-const BasePicker = props => (
-    <RNPickerSelect
-        onValueChange={props.onChange}
-        items={props.items}
-        style={props.size === 'normal' ? basePickerStyles(props.disabled, props.hasError, props.focused) : styles.pickerSmall}
-        useNativeAndroidPickerStyle={false}
-        placeholder={props.placeholder}
-        value={props.value}
-        Icon={() => props.icon(props.size)}
-        disabled={props.disabled}
-        fixAndroidTouchableBug
-        onOpen={props.onOpen}
-        onClose={props.onClose}
-        pickerProps={{
-            onFocus: props.onOpen,
-            onBlur: props.onClose,
-        }}
-    />
-);
+class BasePicker extends React.Component {
+    constructor(props) {
+        super(props);
 
+        this.state = {
+            selectValue: this.props.value || this.props.defaultValue,
+        };
+    }
+
+    componentDidMount() {
+        const viewRef = this.viewRef;
+        if (!viewRef) {
+            return;
+        }
+
+        if (typeof this.props.innerRef !== 'function') {
+            return;
+        }
+
+        // 'ref' is not exposed in Picker to focus on it. An alternative is getting a View container ref. View ref will return a <div>,
+        // apply 'focus()' on it will not scroll to it. Applying 'scrollIntoView(false)' will scroll to element. https://developer.mozilla.org/es/docs/Web/API/Element/scrollIntoView
+        const originalFocus = viewRef.focus;
+        viewRef.focus = function () {
+            // Execute original focus() using apply on ref context to prevent infinite focus() call stack and preserve original focus() functionality
+            originalFocus.apply(viewRef);
+            viewRef.scrollIntoView(false);
+        };
+        this.props.innerRef(viewRef);
+    }
+
+    handleChange = (value) => {
+        this.props.onChange(value);
+        this.setState({selectValue: value});
+    }
+
+    render() {
+        const hasError = !_.isEmpty(this.props.errorText);
+        return (
+            <View ref={ref => this.viewRef = ref}>
+                <RNPickerSelect
+                    onValueChange={this.handleChange}
+                    items={this.props.items}
+                    style={this.props.size === 'normal' ? basePickerStyles(this.props.disabled, hasError, this.props.focused) : styles.pickerSmall}
+                    useNativeAndroidPickerStyle={false}
+                    placeholder={this.props.placeholder}
+                    value={this.state.selectValue}
+                    Icon={() => this.props.icon(this.props.size)}
+                    disabled={this.props.disabled}
+                    fixAndroidTouchableBug
+                    onOpen={this.props.onOpen}
+                    onClose={this.props.onClose}
+                    pickerProps={{
+                        onFocus: this.props.onOpen,
+                        onBlur: this.props.onBlur,
+                    }}
+                />
+            </View>
+        );
+    }
+}
 
 BasePicker.propTypes = basePickerPropTypes.propTypes;
 BasePicker.defaultProps = basePickerPropTypes.defaultProps;

src/components/Picker/BasePicker/index.native.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import RNPickerSelect from 'react-native-picker-select';
+import _ from 'underscore';
+
+import styles from '../../../styles/styles';
+import * as basePickerPropTypes from './basePickerPropTypes';
+import basePickerStyles from './basePickerStyles';
+
+class BasePicker extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            selectValue: this.props.value || this.props.defaultValue,
+        };
+    }
+
+    handleChange = (value) => {
+        this.props.onChange(value);
+        this.setState({selectValue: value});
+    }
+
+    render() {
+        const hasError = !_.isEmpty(this.props.errorText);
+        return (
+            <RNPickerSelect
+                onValueChange={this.handleChange}
+                items={this.props.items}
+                style={this.props.size === 'normal' ? basePickerStyles(this.props.disabled, hasError, this.props.focused) : styles.pickerSmall}
+                useNativeAndroidPickerStyle={false}
+                placeholder={this.props.placeholder}
+                value={this.state.selectValue}
+                Icon={() => this.props.icon(this.props.size)}
+                disabled={this.props.disabled}
+                fixAndroidTouchableBug
+                onOpen={this.props.onOpen}
+                onClose={this.props.onClose}
+                pickerProps={{
+                    onFocus: this.props.onOpen,
+                    onBlur: this.props.onBlur,
+                    ref: this.props.innerRef,
+                }}
+            />
+        );
+    }
+}
+
+BasePicker.propTypes = basePickerPropTypes.propTypes;
+BasePicker.defaultProps = basePickerPropTypes.defaultProps;
+BasePicker.displayName = 'BasePicker';
+
+export default BasePicker;

src/components/Picker/index.js

@@ -6,6 +6,7 @@ import BasePicker from './BasePicker';
 import Text from '../Text';
 import styles from '../../styles/styles';
 import InlineErrorText from '../InlineErrorText';
+import * as FormUtils from '../../libs/FormUtils';
 
 const propTypes = {
     /** Picker label */
@@ -14,22 +15,40 @@ const propTypes = {
     /** Should the picker appear disabled? */
     isDisabled: PropTypes.bool,
 
-    /** Should the input be styled for errors  */
-    hasError: PropTypes.bool,
+    /** Input value */
+    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
     /** Error text to display */
     errorText: PropTypes.string,
 
     /** Customize the Picker container */
     containerStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** 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.getInputIDPropTypes(props),
+
+    /** Saves a draft of the input value when used in a form */
+    shouldSaveDraft: PropTypes.bool,
 };
 
 const defaultProps = {
     label: '',
     isDisabled: false,
-    hasError: false,
     errorText: '',
     containerStyles: [],
+    isFormInput: false,
+    inputID: undefined,
+    shouldSaveDraft: false,
+    value: undefined,
+
 };
 
 class Picker extends PureComponent {
@@ -48,6 +67,7 @@ class Picker extends PureComponent {
                     style={[
                         styles.pickerContainer,
                         this.props.isDisabled && styles.inputDisabled,
+                        ...this.props.containerStyles,
                     ]}
                 >
                     {this.props.label && (
@@ -58,7 +78,8 @@ class Picker extends PureComponent {
                         onClose={() => this.setState({isOpen: false})}
                         disabled={this.props.isDisabled}
                         focused={this.state.isOpen}
-                        hasError={this.props.hasError}
+                        errorText={this.props.errorText}
+                        value={this.props.value}
                         // eslint-disable-next-line react/jsx-props-no-spreading
                         {...pickerProps}
                     />
@@ -76,4 +97,5 @@ class Picker extends PureComponent {
 Picker.propTypes = propTypes;
 Picker.defaultProps = defaultProps;
 
-export default Picker;
+// eslint-disable-next-line react/jsx-props-no-spreading
+export default React.forwardRef((props, ref) => <Picker {...props} innerRef={ref} key={props.inputID} />);

src/stories/Form.stories.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import TextInput from '../components/TextInput';
+import Picker from '../components/Picker';
 import Form from '../components/Form';
 import * as FormActions from '../libs/actions/FormActions';
 import styles from '../styles/styles';
@@ -13,7 +14,7 @@ import styles from '../styles/styles';
 const story = {
     title: 'Components/Form',
     component: Form,
-    subcomponents: {TextInput},
+    subcomponents: {TextInput, Picker},
 };
 
 const Template = (args) => {
@@ -39,6 +40,49 @@ const Template = (args) => {
                 containerStyles={[styles.mt4]}
                 isFormInput
             />
+            <View>
+                <Picker
+                    label="Fruit"
+                    inputID="pickFruit"
+                    containerStyles={[styles.mt4]}
+                    shouldSaveDraft
+                    items={[
+                        {
+                            label: 'Select a Fruit',
+                            value: '',
+                        },
+                        {
+                            label: 'Orange',
+                            value: 'orange',
+                        },
+                        {
+                            label: 'Apple',
+                            value: 'apple',
+                        },
+                    ]}
+                    isFormInput
+                />
+            </View>
+            <Picker
+                label="Another Fruit"
+                inputID="pickAnotherFruit"
+                containerStyles={[styles.mt4]}
+                items={[
+                    {
+                        label: 'Select a Fruit',
+                        value: '',
+                    },
+                    {
+                        label: 'Orange',
+                        value: 'orange',
+                    },
+                    {
+                        label: 'Apple',
+                        value: 'apple',
+                    },
+                ]}
+                isFormInput
+            />
         </Form>
     );
 };
@@ -61,6 +105,12 @@ const defaultArgs = {
         if (!values.accountNumber) {
             errors.accountNumber = 'Please enter an account number';
         }
+        if (!values.pickFruit) {
+            errors.pickFruit = 'Please select a fruit';
+        }
+        if (!values.pickAnotherFruit) {
+            errors.pickAnotherFruit = 'Please select a fruit';
+        }
         return errors;
     },
     onSubmit: (values) => {
@@ -76,13 +126,20 @@ const defaultArgs = {
     draftValues: {
         routingNumber: '00001',
         accountNumber: '1111222233331111',
+        pickFruit: 'orange',
+        pickAnotherFruit: 'apple',
     },
 };
 
 Default.args = defaultArgs;
 Loading.args = {...defaultArgs, formState: {isSubmitting: true}};
 ServerError.args = {...defaultArgs, formState: {isSubmitting: false, serverErrorMessage: 'There was an unexpected error. Please try again later.'}};
-InputError.args = {...defaultArgs, draftValues: {routingNumber: '', accountNumber: ''}};
+InputError.args = {
+    ...defaultArgs,
+    draftValues: {
+        routingNumber: '', accountNumber: '', pickFruit: '', pickAnotherFruit: '',
+    },
+};
 
 export default story;
 export {