Merge pull request #1071 from rvsia/standaloneValidation

Add ability to validate fields in the form schema separately

Author: Hyperkid123

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/get-validates/get-validates.d.ts

@@ -0,0 +1,12 @@
+import { Schema, AnyObject, ComponentMapper } from "../common-types";
+import { ActionMapper } from "../form-renderer";
+
+export interface GetValidatesOptions {
+    values: AnyObject;
+    componentMapper: ComponentMapper;
+    actionMapper: ActionMapper;
+}
+
+declare function getValidates(schema: Schema, options: GetValidatesOptions, validations?: AnyObject): AnyObject;
+
+export default getValidates;

packages/react-form-renderer/src/get-validates/get-validates.js

@@ -0,0 +1,56 @@
+import get from 'lodash/get';
+
+import prepareComponentProps from '../prepare-component-props';
+import { dataTypeValidator } from '../validators/validator-functions';
+
+const getValidates = (schema, { componentMapper, actionMapper, values }, validations = {}) => {
+  if (Array.isArray(schema)) {
+    schema.map((field) => getValidates(field, { componentMapper, actionMapper, values }, validations));
+  } else {
+    if (schema.component) {
+      let validate;
+
+      const { componentProps, overrideProps, mergedResolveProps } = prepareComponentProps({
+        component: schema.component,
+        rest: schema,
+        componentMapper,
+        actionMapper
+      });
+
+      let resolveProps = mergedResolveProps || overrideProps.resolveProps || componentProps.resolveProps;
+
+      // fake form state with only values
+      if (resolveProps) {
+        const { validate: resolvePropsValidate } = resolveProps(
+          schema,
+          { input: { value: get(values, schema.name) }, meta: {} },
+          { getState: () => ({ values }) }
+        );
+
+        validate = resolvePropsValidate;
+      }
+
+      validate = validate || overrideProps.validate || componentProps.validate;
+
+      if (schema.dataType) {
+        validate = [...(validate || []), dataTypeValidator(schema.dataType)()];
+      }
+
+      if (validate) {
+        if (validations[schema.name]) {
+          validations[schema.name].push(validate);
+        } else {
+          validations[schema.name] = [validate];
+        }
+      }
+    }
+
+    if (schema.fields) {
+      getValidates(schema.fields, { componentMapper, actionMapper, values }, validations);
+    }
+  }
+
+  return validations;
+};
+
+export default getValidates;

packages/react-form-renderer/src/get-validates/index.d.ts

@@ -0,0 +1 @@
+export { default } from './get-validates';

packages/react-form-renderer/src/get-validates/index.js

@@ -0,0 +1 @@
+export { default } from './get-validates';

packages/react-form-renderer/src/get-visible-fields/get-visible-fields.d.ts

@@ -0,0 +1,5 @@
+import { Schema, AnyObject } from "../common-types";
+
+declare function getVisibleFields(schema: Schema, values: AnyObject ): Schema;
+
+export default getVisibleFields;

packages/react-form-renderer/src/get-visible-fields/get-visible-fields.js

@@ -0,0 +1,27 @@
+import parseCondition from '../parse-condition';
+
+const getVisibleFields = (schema, values) => {
+  if (Array.isArray(schema)) {
+    return schema.map((field) => getVisibleFields(field, values)).filter(Boolean);
+  }
+
+  if (schema.condition) {
+    const result = parseCondition(schema.condition, values, schema);
+
+    if (result.visible) {
+      return {
+        ...schema,
+        ...(schema.fields && { fields: getVisibleFields(schema.fields, values).filter(Boolean) })
+      };
+    } else {
+      return null;
+    }
+  }
+
+  return {
+    ...schema,
+    ...(schema.fields && { fields: getVisibleFields(schema.fields, values).filter(Boolean) })
+  };
+};
+
+export default getVisibleFields;

packages/react-form-renderer/src/get-visible-fields/index.d.ts

@@ -0,0 +1 @@
+export { default } from './get-visible-fields';

packages/react-form-renderer/src/get-visible-fields/index.js

@@ -0,0 +1 @@
+export { default } from './get-visible-fields';

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

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