Refactor form component

src/hooks/useForm/FormProvider.js

@@ -8,7 +8,6 @@ import * as FormActions from '../../libs/actions/FormActions';
 import FormContext from './FormContext';
 import FormWrapper from './FormWrapper';
 import compose from '../../libs/compose';
-import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import {withNetwork} from '../../components/OnyxProvider';
 import stylePropTypes from '../../styles/stylePropTypes';
 import networkPropTypes from '../../components/networkPropTypes';
@@ -66,7 +65,9 @@ const propTypes = {
     /** Information about the network */
     network: networkPropTypes.isRequired,
 
-    ...withLocalizePropTypes,
+    shouldValidateOnBlur: PropTypes.bool,
+
+    shouldValidateOnChange: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -79,7 +80,9 @@ const defaultProps = {
     scrollContextEnabled: false,
     footerContent: null,
     style: [],
-    validate: () => ({}),
+    validate: () => {},
+    shouldValidateOnBlur: false,
+    shouldValidateOnChange: false,
 };
 
 function getInitialValueByType(valueType) {
@@ -99,7 +102,7 @@ function FormProvider({validate, shouldValidateOnBlur, shouldValidateOnChange, c
     const inputRefs = useRef({});
     const touchedInputs = useRef({});
     const [inputValues, setInputValues] = useState({});
-    const [errors, setErrors] = useState([]);
+    const [errors, setErrors] = useState({});
 
     const onValidate = useCallback(
         (values) => {
@@ -137,7 +140,7 @@ function FormProvider({validate, shouldValidateOnBlur, shouldValidateOnChange, c
         if (network.isOffline && !enabledWhenOffline) {
             return;
         }
-        // Call submit handler
+
         onSubmit(inputValues);
     }, [enabledWhenOffline, formState.isLoading, inputValues, network.isOffline, onSubmit, onValidate]);
 
@@ -146,18 +149,18 @@ function FormProvider({validate, shouldValidateOnBlur, shouldValidateOnChange, c
             const newRef = propsToParse.ref || createRef();
             inputRefs[inputID] = newRef;
 
-            // We want to initialize the input value if it's undefined
-            if (_.isUndefined(inputValues[inputID])) {
-                inputValues[inputID] = propsToParse.defaultValue || getInitialValueByType(propsToParse.valueType);
+            if (!_.isUndefined(propsToParse.value)) {
+                inputValues[inputID] = propsToParse.value;
             }
 
             // We force the form to set the input value from the defaultValue props if there is a saved valid value
-            if (propsToParse.shouldUseDefaultValue) {
+            else if (propsToParse.shouldUseDefaultValue) {
                 inputValues[inputID] = propsToParse.defaultValue;
             }
 
-            if (!_.isUndefined(propsToParse.value)) {
-                inputValues[inputID] = propsToParse.value;
+            // We want to initialize the input value if it's undefined
+            else if (_.isUndefined(inputValues[inputID])) {
+                inputValues[inputID] = _.isUndefined(propsToParse.defaultValue) ? getInitialValueByType(propsToParse.valueType) : propsToParse.defaultValue;
             }
 
             const errorFields = lodashGet(formState, 'errorFields', {});
@@ -190,7 +193,7 @@ function FormProvider({validate, shouldValidateOnBlur, shouldValidateOnChange, c
                     // Only run validation when user proactively blurs the input.
                     if (Visibility.isVisible() && Visibility.hasFocus()) {
                         // We delay the validation in order to prevent Checkbox loss of focus when
-                        // the user are focusing a TextInput and proceeds to toggle a CheckBox in
+                        // the user is focusing a TextInput and proceeds to toggle a CheckBox in
                         // web and mobile web platforms.
                         setTimeout(() => {
                             setTouchedInput(inputID);
@@ -237,6 +240,8 @@ function FormProvider({validate, shouldValidateOnBlur, shouldValidateOnChange, c
             <FormWrapper
                 {...rest}
                 onSubmit={submit}
+                inputRefs={inputRefs}
+                errors={errors}
             >
                 {children}
             </FormWrapper>
@@ -249,7 +254,6 @@ FormProvider.propTypes = propTypes;
 FormProvider.defaultProps = defaultProps;
 
 export default compose(
-    withLocalize,
     withNetwork(),
     withOnyx({
         formState: {

src/hooks/useForm/FormWrapper.js

@@ -11,8 +11,6 @@ import SafeAreaConsumer from '../../components/SafeAreaConsumer';
 import ScrollViewWithContext from '../../components/ScrollViewWithContext';
 
 import stylePropTypes from '../../styles/stylePropTypes';
-import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
-import compose from '../../libs/compose';
 
 const propTypes = {
     /** A unique Onyx key identifying the form */
@@ -61,7 +59,9 @@ const propTypes = {
     /** Custom content to display in the footer after submit button */
     footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 
-    ...withLocalizePropTypes,
+    errors: PropTypes.objectOf(PropTypes.string).isRequired,
+
+    inputRefs: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(Element)})])).isRequired,
 };
 
 const defaultProps = {
@@ -187,11 +187,8 @@ FormWrapper.displayName = 'FormWrapper';
 FormWrapper.propTypes = propTypes;
 FormWrapper.defaultProps = defaultProps;
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        formState: {
-            key: (props) => props.formID,
-        },
-    }),
-)(FormWrapper);
+export default withOnyx({
+    formState: {
+        key: (props) => props.formID,
+    },
+})(FormWrapper);

src/hooks/useForm/InputWrapper.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import FormContext from './FormContext';
 
 const propTypes = {
-    RenderInput: PropTypes.node.isRequired,
+    RenderInput: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
     inputID: PropTypes.string.isRequired,
     valueType: PropTypes.string,
     forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),