fix(renderer): move resolve props to top

Author: rvsia

packages/react-form-renderer/demo/form-template.js

@@ -12,8 +12,9 @@ const FormTemplate = ({ schema: { title, description }, formFields }) => {
       {description && <h2>{description}</h2>}
       {formFields}
       <FormSpy>
-        {({ submitting, pristine, validating, form: { reset }, values }) => (
+        {({ submitting, pristine, validating, valid, form: { reset }, values }) => (
           <React.Fragment>
+            {JSON.stringify({ pristine, valid })}
             <button key="form-submit" type="submit" disabled={submitting || validating || isDisabled(['invalid'], getState)}>
               Submit
             </button>

packages/react-form-renderer/demo/index.js

@@ -1,27 +1,54 @@
 /* eslint-disable camelcase */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import FormRenderer, { useFieldApi, validatorTypes, componentTypes } from '../src';
+import FormRenderer, { useFieldApi, componentTypes, validatorTypes } from '../src';
 import componentMapper from './form-fields-mapper';
 import FormTemplate from './form-template';
 
 // eslint-disable-next-line react/prop-types
-const TextField = ({ name, label }) => {
-  const { input } = useFieldApi({ name, validate: [{ type: validatorTypes.REQUIRED }] });
+const TextField = (props) => {
+  const { input, label, isRequired } = useFieldApi(props);
   return (
     <div>
-      <label>{label}</label>
+      <label>
+        {label}
+        {isRequired && '*'}
+      </label>
       <input {...input} />
     </div>
   );
 };
 
+let key;
+
 const fileSchema = {
   fields: [
     {
       component: 'text-field',
-      name: 'foo',
-      label: 'Foo'
+      name: 'required',
+      label: 'required'
+    },
+    {
+      component: 'text-field',
+      name: 'field',
+      label: 'field',
+      resolveProps: (y, x, formOptions) => {
+        const value = formOptions.getFieldState('required')?.value;
+
+        //console.log({ value });
+
+        if (value) {
+          key = key || Date.now();
+
+          return {
+            isRequired: true,
+            validate: [{ type: validatorTypes.REQUIRED }],
+            key
+          };
+        } else {
+          key = undefined;
+        }
+      }
     }
   ]
 };
@@ -38,6 +65,7 @@ const App = () => {
         onSubmit={(values, ...args) => console.log(values, args)}
         FormTemplate={FormTemplate}
         schema={fileSchema}
+        subscription={{ values: true }}
       />
     </div>
   );

packages/react-form-renderer/src/files/use-field-api.js

@@ -57,12 +57,27 @@ const reducer = (state, { type, specialType, validate, arrayValidator, initialVa
   }
 };
 
+const createFieldProps = (name, formOptions) => {
+  const { value, blur, change, focus, ...meta } = formOptions.getFieldState(name) || {};
+
+  return {
+    meta,
+    input: { name, value }
+  };
+};
+
 const useFieldApi = ({ name, initializeOnMount, component, render, validate, resolveProps, ...props }) => {
   const { validatorMapper, formOptions } = useContext(RendererContext);
 
+  const { validate: resolvePropsValidate, ...resolvedProps } = resolveProps
+    ? resolveProps(props, createFieldProps(name, formOptions), formOptions) || {}
+    : {};
+
+  const finalValidate = resolvePropsValidate || validate;
+
   const [{ type, initialValue, validate: stateValidate, arrayValidator }, dispatch] = useReducer(
     reducer,
-    { props, validate, component, validatorMapper },
+    { props: { ...props, ...resolvedProps }, validate: finalValidate, component, validatorMapper },
     init
   );
 
@@ -71,6 +86,7 @@ const useFieldApi = ({ name, initializeOnMount, component, render, validate, res
   const enhancedProps = {
     type,
     ...props,
+    ...resolvedProps,
     ...(initialValue ? { initialValue } : {}),
     ...(stateValidate ? { validate: stateValidate } : {})
   };
@@ -92,8 +108,8 @@ const useFieldApi = ({ name, initializeOnMount, component, render, validate, res
     if (mounted.current) {
       dispatch({
         type: 'setValidators',
-        validate: calculateValidate(props, validate, component, validatorMapper),
-        arrayValidator: calculateArrayValidator(props, validate, component, validatorMapper)
+        validate: calculateValidate(enhancedProps, finalValidate, component, validatorMapper),
+        arrayValidator: calculateArrayValidator(enhancedProps, finalValidate, component, validatorMapper)
       });
     }
     /**
@@ -102,20 +118,20 @@ const useFieldApi = ({ name, initializeOnMount, component, render, validate, res
      * Using stringify is acceptable here since the array is usually very small.
      * If we notice performance hit, we can implement custom hook with a deep equal functionality.
      */
-  }, [validate ? JSON.stringify(validate) : false, component, props.dataType]);
+  }, [finalValidate ? JSON.stringify(finalValidate) : false, component, enhancedProps.dataType]);
 
   /** Re-convert initialValue when changed */
   useEffect(() => {
     if (mounted.current) {
-      const newInitialValue = calculateInitialValue(props);
+      const newInitialValue = calculateInitialValue(enhancedProps);
       if (!isEqual(initialValue, newInitialValue)) {
         dispatch({
           type: 'setInitialValue',
           initialValue: newInitialValue
         });
       }
     }
-  }, [props.initialValue, props.dataType]);
+  }, [enhancedProps.initialValue, enhancedProps.dataType]);
 
   useEffect(() => {
     /**
@@ -160,14 +176,22 @@ const useFieldApi = ({ name, initializeOnMount, component, render, validate, res
     []
   );
 
-  const { initialValue: _initialValue, clearOnUnmount, dataType, clearedValue, isEqual: _isEqual, ...cleanProps } = props;
+  const {
+    initialValue: _initialValue,
+    clearOnUnmount,
+    dataType,
+    clearedValue,
+    isEqual: _isEqual,
+    validate: _validate,
+    type: _type,
+    ...cleanProps
+  } = enhancedProps;
 
   /**
    * construct component props necessary that would live in field provider
    */
   return {
     ...cleanProps,
-    ...(resolveProps ? resolveProps(cleanProps, fieldProps, formOptions) : {}),
     ...fieldProps,
     ...(arrayValidator ? { arrayValidator } : {}),
     input: {