Merge pull request #8887 from Expensify/cmartins-rmIsFormInput

Remove isFormInput prop

Author: Gonals

FORMS.md

@@ -187,27 +187,24 @@ function onSubmit(values) {
             label="Routing number"
             inputID="routingNumber"
             maxLength={8}
-            isFormInput
             shouldSaveDraft
         />
     </View>
     <TextInput
         label="Account number"
         inputID="accountNumber"
         containerStyles={[styles.mt4]}
-        isFormInput
     />
 </Form>
 ```
 
 ### Props provided to Form inputs
 
-The following props are available to form inputs:
+The following prop is available to form inputs:
 
 - inputID: An unique identifier for the input.
-- isFormInput: A flag that indicates that this input is being used with Form.js.
 
-Form.js will automatically provide the following props to any input flagged with the isFormInput prop.
+Form.js will automatically provide the following props to any input with the inputID prop.
 
 - ref: A React ref that must be attached to the input.
 - defaultValue: The input default value.

src/components/AddressSearch.js

@@ -9,24 +9,15 @@ import styles from '../styles/styles';
 import TextInput from './TextInput';
 import Log from '../libs/Log';
 import * as GooglePlacesUtils from '../libs/GooglePlacesUtils';
-import * as FormUtils from '../libs/FormUtils';
 
 // The error that's being thrown below will be ignored until we fork the
 // react-native-google-places-autocomplete repo and replace the
 // VirtualizedList component with a VirtualizedList-backed instead
 LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
 
 const propTypes = {
-    /** 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),
+    /** The ID used to uniquely identify the input in a Form */
+    inputID: PropTypes.string,
 
     /** Saves a draft of the input value when used in a form */
     shouldSaveDraft: PropTypes.bool,
@@ -59,7 +50,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-    isFormInput: false,
     inputID: undefined,
     shouldSaveDraft: false,
     onBlur: () => {},
@@ -174,13 +164,12 @@ const AddressSearch = (props) => {
                         hint: props.hint,
                         value: props.value,
                         defaultValue: props.defaultValue,
-                        isFormInput: props.isFormInput,
                         inputID: props.inputID,
                         shouldSaveDraft: props.shouldSaveDraft,
                         onBlur: props.onBlur,
                         autoComplete: 'off',
                         onInputChange: (text) => {
-                            if (props.isFormInput) {
+                            if (props.inputID) {
                                 props.onInputChange(text);
                             } else {
                                 props.onInputChange({street: text});

src/components/CheckboxWithLabel.js

@@ -6,7 +6,6 @@ import styles from '../styles/styles';
 import Checkbox from './Checkbox';
 import Text from './Text';
 import InlineErrorText from './InlineErrorText';
-import * as FormUtils from '../libs/FormUtils';
 
 const propTypes = {
     /** Whether the checkbox is checked */
@@ -27,29 +26,20 @@ const propTypes = {
     /** Error text to display */
     errorText: PropTypes.string,
 
-    /** Indicates that the input is being used with the Form component */
-    isFormInput: PropTypes.bool,
-
     /** The default value for the checkbox */
     defaultValue: PropTypes.bool,
 
     /** React ref being forwarded to the Checkbox input */
     forwardedRef: PropTypes.func,
 
-    /**
-     * 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),
+    /** The ID used to uniquely identify the input in a Form */
+    inputID: PropTypes.string,
 
     /** Saves a draft of the input value when used in a form */
     shouldSaveDraft: PropTypes.bool,
 };
 
 const defaultProps = {
-    isFormInput: false,
     inputID: undefined,
     style: [],
     label: undefined,
@@ -86,7 +76,6 @@ const CheckboxWithLabel = (props) => {
                     label={props.label}
                     hasError={Boolean(props.errorText)}
                     forwardedRef={props.forwardedRef}
-                    isFormInput={props.isFormInput}
                     inputID={props.inputID}
                     shouldSaveDraft={props.shouldSaveDraft}
                 />

src/components/Form.js

@@ -135,9 +135,9 @@ class Form extends React.Component {
                 });
             }
 
-            // We check if the child has the isFormInput prop.
+            // We check if the child has the inputID prop.
             // We don't want to pass form props to non form components, e.g. View, Text, etc
-            if (!child.props.isFormInput) {
+            if (!child.props.inputID) {
                 return child;
             }
 

src/components/Picker/index.js

@@ -6,7 +6,6 @@ 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 */
@@ -24,16 +23,8 @@ const propTypes = {
     /** 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.validateInputIDProps(props),
+    /** The ID used to uniquely identify the input in a Form */
+    inputID: PropTypes.string,
 
     /** Saves a draft of the input value when used in a form */
     shouldSaveDraft: PropTypes.bool,
@@ -44,7 +35,6 @@ const defaultProps = {
     isDisabled: false,
     errorText: '',
     containerStyles: [],
-    isFormInput: false,
     inputID: undefined,
     shouldSaveDraft: false,
     value: undefined,

src/components/StatePicker.js

@@ -4,7 +4,6 @@ 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,
@@ -21,16 +20,8 @@ const propTypes = {
     /** 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),
+    /** The ID used to uniquely identify the input in a Form */
+    inputID: PropTypes.string,
 
     /** Saves a draft of the input value when used in a form */
     shouldSaveDraft: PropTypes.bool,
@@ -53,7 +44,6 @@ const defaultProps = {
     defaultValue: undefined,
     errorText: '',
     shouldSaveDraft: false,
-    isFormInput: false,
     inputID: undefined,
     onBlur: () => {},
 };
@@ -69,7 +59,6 @@ const StatePicker = forwardRef((props, ref) => (
         label={props.label || props.translate('common.state')}
         errorText={props.errorText}
         onBlur={props.onBlur}
-        isFormInput={props.isFormInput}
         shouldSaveDraft={props.shouldSaveDraft}
     />
 ));

src/components/TextInput/baseTextInputPropTypes.js

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import * as FormUtils from '../../libs/FormUtils';
 
 const propTypes = {
     /** Input label */
@@ -57,16 +56,8 @@ const propTypes = {
     prefixCharacter: PropTypes.string,
 
     /** Form props */
-    /** 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),
+    /** The ID used to uniquely identify the input in a Form */
+    inputID: PropTypes.string,
 
     /** Saves a draft of the input value when used in a form */
     shouldSaveDraft: PropTypes.bool,
@@ -76,7 +67,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-    isFormInput: false,
     label: '',
     name: '',
     errorText: '',

src/libs/FormUtils.js

@@ -42,28 +42,24 @@ const Template = (args) => {
                 <TextInput
                     label="Routing number"
                     inputID="routingNumber"
-                    isFormInput
                     shouldSaveDraft
                 />
             </View>
             <TextInput
                 label="Account number"
                 inputID="accountNumber"
                 containerStyles={[styles.mt4]}
-                isFormInput
             />
             <AddressSearch
                 label="Street"
                 inputID="street"
                 containerStyles={[styles.mt4]}
                 hint="No PO box"
-                isFormInput
             />
             <DatePicker
                 label="Date of birth"
                 inputID="dob"
                 containerStyles={[styles.mt4]}
-                isFormInput
             />
             <View>
                 <Picker
@@ -85,7 +81,6 @@ const Template = (args) => {
                             value: 'apple',
                         },
                     ]}
-                    isFormInput
                 />
             </View>
             <Picker
@@ -106,19 +101,16 @@ const Template = (args) => {
                         value: 'apple',
                     },
                 ]}
-                isFormInput
             />
             <View style={styles.mt4}>
                 <StatePicker
                     inputID="pickState"
                     shouldSaveDraft
-                    isFormInput
                 />
             </View>
             <CheckboxWithLabel
                 inputID="checkbox"
                 style={[styles.mb4, styles.mt5]}
-                isFormInput
                 shouldSaveDraft
                 LabelComponent={() => (
                     <Text>I accept the Expensify Terms of Service</Text>
@@ -148,7 +140,6 @@ const WithNativeEventHandler = (args) => {
                 label="Routing number"
                 inputID="routingNumber"
                 onChangeText={setLog}
-                isFormInput
                 shouldSaveDraft
             />
             <Text>