feat(renderer): add resolveProps option

Author: rvsia

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

@@ -57,8 +57,8 @@ const reducer = (state, { type, specialType, validate, arrayValidator, initialVa
   }
 };
 
-const useFieldApi = ({ name, initializeOnMount, component, render, validate, ...props }) => {
-  const { actionMapper, validatorMapper, formOptions } = useContext(RendererContext);
+const useFieldApi = ({ name, initializeOnMount, component, render, validate, resolveProps, ...props }) => {
+  const { validatorMapper, formOptions } = useContext(RendererContext);
 
   const [{ type, initialValue, validate: stateValidate, arrayValidator }, dispatch] = useReducer(
     reducer,
@@ -154,25 +154,14 @@ const useFieldApi = ({ name, initializeOnMount, component, render, validate, ...
     []
   );
 
-  /**
-   * Map actions to props
-   */
-  let overrideProps = {};
-  if (props.actions) {
-    Object.keys(props.actions).forEach((prop) => {
-      const [action, ...args] = props.actions[prop];
-      overrideProps[prop] = actionMapper[action](...args);
-    });
-  }
-
   const { initialValue: _initialValue, clearOnUnmount, dataType, clearedValue, isEqual: _isEqual, ...cleanProps } = props;
 
   /**
    * construct component props necessary that would live in field provider
    */
   return {
     ...cleanProps,
-    ...overrideProps,
+    ...(resolveProps ? resolveProps(cleanProps, fieldProps, formOptions) : {}),
     ...fieldProps,
     ...(arrayValidator ? { arrayValidator } : {}),
     input: {

packages/react-form-renderer/src/form-renderer/render-form.js

@@ -35,7 +35,7 @@ FormConditionWrapper.propTypes = {
 };
 
 const SingleField = ({ component, condition, hideField, ...rest }) => {
-  const { componentMapper } = useContext(RendererContext);
+  const { actionMapper, componentMapper } = useContext(RendererContext);
 
   let componentProps = {
     component,
@@ -47,15 +47,52 @@ const SingleField = ({ component, condition, hideField, ...rest }) => {
   if (typeof componentBinding === 'object' && Object.prototype.hasOwnProperty.call(componentBinding, 'component')) {
     const { component, ...mapperProps } = componentBinding;
     Component = component;
-    componentProps = { ...mapperProps, ...componentProps };
+    componentProps = {
+      ...mapperProps,
+      ...componentProps,
+      // merge mapper and field actions
+      ...(mapperProps.actions && rest.actions ? { actions: { ...mapperProps.actions, ...rest.actions } } : {}),
+      // merge mapper and field resolveProps
+      ...(mapperProps.resolveProps && rest.resolveProps
+        ? {
+            resolveProps: (...args) => ({
+              ...mapperProps.resolveProps(...args),
+              ...rest.resolveProps(...args)
+            })
+          }
+        : {})
+    };
   } else {
     Component = componentBinding;
   }
 
+  /**
+   * Map actions to props
+   */
+  let overrideProps = {};
+  let mergedResolveProps; // new object has to be created because of references
+  if (componentProps.actions) {
+    Object.keys(componentProps.actions).forEach((prop) => {
+      const [action, ...args] = componentProps.actions[prop];
+      overrideProps[prop] = actionMapper[action](...args);
+    });
+
+    // Merge componentProps resolve props and actions resolve props
+    if (componentProps.resolveProps && overrideProps.resolveProps) {
+      mergedResolveProps = (...args) => ({
+        ...componentProps.resolveProps(...args),
+        ...overrideProps.resolveProps(...args)
+      });
+    }
+
+    // do not pass actions object to components
+    delete componentProps.actions;
+  }
+
   return (
     <FormConditionWrapper condition={condition}>
       <FormFieldHideWrapper hideField={hideField}>
-        <Component {...componentProps} />
+        <Component {...componentProps} {...overrideProps} {...(mergedResolveProps && { resolveProps: mergedResolveProps })} />
       </FormFieldHideWrapper>
     </FormConditionWrapper>
   );
@@ -67,7 +104,11 @@ SingleField.propTypes = {
   hideField: PropTypes.bool,
   dataType: PropTypes.string,
   validate: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])),
-  initialValue: PropTypes.any
+  initialValue: PropTypes.any,
+  actions: PropTypes.shape({
+    [PropTypes.string]: PropTypes.func
+  }),
+  resolveProps: PropTypes.func
 };
 
 const renderForm = (fields) => fields.map((field) => (Array.isArray(field) ? renderForm(field) : <SingleField key={field.name} {...field} />));