feat(renderer): add function for preparing single field props

Author: rvsia

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

@@ -5,6 +5,7 @@ import { Field } from 'react-final-form';
 import RendererContext from '../renderer-context';
 import Condition from '../condition';
 import getConditionTriggers from '../get-condition-triggers';
+import prepareComponentProps from '../prepare-component-props';
 
 const FormFieldHideWrapper = ({ hideField, children }) => (hideField ? <div hidden>{children}</div> : children);
 
@@ -87,57 +88,7 @@ FormConditionWrapper.propTypes = {
 const SingleField = ({ component, condition, hideField, ...rest }) => {
   const { actionMapper, componentMapper } = useContext(RendererContext);
 
-  let componentProps = {
-    component,
-    ...rest
-  };
-
-  const componentBinding = componentMapper[component];
-  let Component;
-  if (typeof componentBinding === 'object' && Object.prototype.hasOwnProperty.call(componentBinding, 'component')) {
-    const { component, ...mapperProps } = componentBinding;
-    Component = component;
-    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;
-  }
+  const { componentProps, Component, overrideProps, mergedResolveProps } = prepareComponentProps({ component, rest, componentMapper, actionMapper });
 
   return (
     <FormConditionWrapper condition={condition} field={componentProps}>

packages/react-form-renderer/src/prepare-component-props/index.d.ts

@@ -0,0 +1 @@
+export { default } from './prepare-component-props';

packages/react-form-renderer/src/prepare-component-props/index.js

@@ -0,0 +1 @@
+export { default } from './prepare-component-props';

packages/react-form-renderer/src/prepare-component-props/prepare-component-props.d.ts

@@ -0,0 +1,13 @@
+import { AnyObject, ComponentMapper } from "../common-types";
+import { ActionMapper } from "../form-renderer";
+
+export interface PrepareComponentPropsOptions {
+    component: string;
+    rest: AnyObject;
+    componentMapper: ComponentMapper;
+    actionMapper: ActionMapper;
+}
+
+declare function prepareComponentProps(PrepareComponentPropsOptions: AnyObject): AnyObject;
+
+export default prepareComponentProps;

packages/react-form-renderer/src/prepare-component-props/prepare-component-props.js

@@ -0,0 +1,62 @@
+const prepareComponentProps = ({ component, rest, componentMapper, actionMapper }) => {
+  let componentProps = {
+    component,
+    ...rest
+  };
+
+  const componentBinding = componentMapper[component];
+  let Component;
+  if (typeof componentBinding === 'object' && Object.prototype.hasOwnProperty.call(componentBinding, 'component')) {
+    const { component, ...mapperProps } = componentBinding;
+    Component = component;
+    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 {
+    componentProps,
+    overrideProps,
+    mergedResolveProps,
+    Component
+  };
+};
+
+export default prepareComponentProps;