Merge pull request #380 from data-driven-forms/async-validator

breaking(renderer): Allow combining async validators with normal ones.

Author: rvsia

packages/react-form-renderer/demo/form-fields-mapper.js

@@ -7,17 +7,19 @@ import useFieldApi from '../src/hooks/use-field-api';
 const TextField = (props) => (
   <FieldProvider
     {...props}
-    render={({ input, meta, isVisible, label, helperText, isRequired, dataType, isDisabled, isReadOnly, ...rest }) => (
-      <div>
-        <label>{label} &nbsp;</label>
-        <input {...input} {...rest} />
-        {meta.error && (
-          <div>
-            <span>{meta.error}</span>
-          </div>
-        )}
-      </div>
-    )}
+    render={({ input, meta, isVisible, label, helperText, isRequired, dataType, isDisabled, isReadOnly, ...rest }) => {
+      return (
+        <div>
+          <label>{label} &nbsp;</label>
+          <input {...input} {...rest} />
+          {meta.error && (
+            <div>
+              <span>{meta.error}</span>
+            </div>
+          )}
+        </div>
+      );
+    }}
   />
 );
 

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

@@ -1,39 +1,65 @@
 /* eslint-disable camelcase */
-import React, { useState } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
-import FormRenderer from '../src';
+import FormRenderer, { validatorTypes } from '../src';
 import componentMapper from './form-fields-mapper';
 import FormTemplate from './form-template';
-import sandboxSchema from './sandbox';
+// import sandboxSchema from './sandbox';
 
 const intl = (name) => `translated ${name}`;
 
 const actionMapper = {
-  loadData: (data) => () => new Promise((resolve) => setTimeout(() => resolve({ custom: 'ererewr', ...data }), 1700)),
+  loadData: (data) => (...args) =>
+    new Promise((resolve) => {
+      setTimeout(() => resolve({ custom: 'ererewr', ...data }), 1700);
+    }),
   loadLabel: intl
 };
 
+const validatorMapper = {
+  asyncValidator: (url, attributes) => (value, allValues) =>
+    new Promise((resolve, reject) =>
+      setTimeout(() => {
+        if (value === 'error') {
+          reject('Async validation failed');
+        }
+
+        resolve('hola');
+      }, 1700)
+    )
+};
+
+const asyncValidatorSchema = {
+  fields: [
+    {
+      component: 'text-field',
+      name: 'async-validation-field',
+      label: 'Async validation field',
+      validate: [
+        { type: 'asyncValidator' },
+        { type: 'required-validator' },
+        {
+          type: validatorTypes.PATTERN_VALIDATOR,
+          pattern: '^Foo$',
+          flags: 'i'
+        }
+      ]
+    }
+  ]
+};
+
 const App = () => {
-  const [values, setValues] = useState({});
+  // const [values, setValues] = useState({});
   return (
     <div style={{ padding: 20 }}>
       <FormRenderer
-        initialValues={{
-          text_box_1: 'hue',
-          text_box_3: 'initial'
-        }}
-        clearedValue={'bla'}
+        validatorMapper={validatorMapper}
         componentMapper={componentMapper}
         onSubmit={(values) => console.log(values)}
-        onCancel={console.log}
-        canReset
-        onReset={() => console.log('i am resseting')}
-        schema={sandboxSchema}
-        debug={(state) => setValues(state.values)}
+        schema={asyncValidatorSchema}
         FormTemplate={FormTemplate}
         actionMapper={actionMapper}
       />
-      <div>{JSON.stringify(values, null, 2)}</div>
     </div>
   );
 };

packages/react-form-renderer/src/components/compose-validators.js

@@ -1,4 +1,14 @@
-const composeValidators = (validators = []) => (value, allValues) =>
-  validators.reduce((error, validator) => error || (typeof validator === 'function' ? validator(value, allValues) : undefined), undefined);
+const composeValidators = (validators = []) => (value, allValues) => {
+  const [initialValidator, ...sequenceValidators] = validators;
+  const resolveValidator = (error, validator) => error || (typeof validator === 'function' ? validator(value, allValues) : undefined);
+  if (initialValidator && typeof initialValidator === 'function') {
+    const result = initialValidator(value, allValues);
+    if (result && result.then) {
+      return result.then(() => sequenceValidators.reduce(resolveValidator, undefined)).catch((error) => error);
+    }
+  }
+
+  return validators.reduce((error, validator) => error || (typeof validator === 'function' ? validator(value, allValues) : undefined), undefined);
+};
 
 export default composeValidators;

packages/react-form-renderer/src/tests/validators/compose-validators.test.js

@@ -0,0 +1,45 @@
+import composeValidators from '../../components/compose-validators';
+
+describe('Compose validators', () => {
+  const syncValidator = (value) => (value === 'sync-error' ? 'sync-error' : undefined);
+  const asyncValidator = (value, allValues) =>
+    new Promise((resolve, reject) =>
+      setTimeout(() => {
+        if (value === 'error') {
+          reject('Async validation failed');
+        }
+
+        resolve('hola');
+      })
+    );
+
+  it('should pass async validator', () => {
+    return composeValidators([asyncValidator])('Good value').then((result) => {
+      expect(result).toBeUndefined();
+    });
+  });
+
+  it('should fail async validator', () => {
+    return composeValidators([asyncValidator])('error').then((result) => {
+      expect(result).toBe('Async validation failed');
+    });
+  });
+
+  it('should pass async validator but fail sync sequence', () => {
+    return composeValidators([asyncValidator, syncValidator])('sync-error').then((result) => {
+      expect(result).toBe('sync-error');
+    });
+  });
+
+  it('should fail async validator before running sync', () => {
+    return composeValidators([asyncValidator, syncValidator])('error').then((result) => {
+      expect(result).toBe('Async validation failed');
+    });
+  });
+
+  it('should pass async and sync validation', () => {
+    return composeValidators([asyncValidator, syncValidator])('good').then((result) => {
+      expect(result).toBeUndefined();
+    });
+  });
+});

packages/react-renderer-demo/src/app/pages/renderer/migration-guide.md

@@ -141,6 +141,10 @@ import { componentMapper } from '@data-driven-forms/pf4-component-mapper'
 -   "select-field" -> "select"
 -   removed duplicate constants SELECT_COMPONENT etc.
 
+### Async validators changed
+-   Failed async validator must now throw an error. Error must be a string! Thrown string will be shown as a validation message in form.
+-   Succesfully resolved promise with message is ignored.
+
 ### PF4/PF3/MUI Wizard doesn't use 'stepKey' anymore
 
 -   stepKey prop is replaced by name

packages/react-renderer-demo/src/app/pages/renderer/validators.md

@@ -46,9 +46,9 @@ The function takes `value` as an argument and should return undefined when pases
 
 ## Async validator
 
-You can use a Async function as a validator. However, the returned promise will overwrite all other validators
-(because it is returned last),
-so you need combine all validators into one function.
+You can use a Async function as a validator. But it **must be first in the validate array**. Other async validators will be ignored. This rule was created to prevent long asynchronous validation sequences.
+
+You can either use custom function, or custom validator from validator mapper.
 
 <RawComponent source="validators/async-validator" />
 
@@ -83,7 +83,7 @@ const schema = {
 
 ```
 
-It is designed to return functions returning functions, so you can easily cached or debounce results.
+Validator in a mapper must be a function which returns a function. This makes validator easily configurable (different messages for same validator).
 
 The higher order function receives the whole validator object.
 

packages/react-renderer-demo/src/app/src/doc-components/validators/async-validator.js

@@ -1,41 +1,43 @@
 import React from 'react';
 import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
 import { FormTemplate, componentMapper } from '@data-driven-forms/pf4-component-mapper';
-const mockEndpoint = value => new Promise((resolve, reject) => {
-  setTimeout(() => {
-    if (value === 'John') {
-      reject({ message: 'John is not allowed' });
-    }
+const mockEndpoint = (value) =>
+  new Promise((resolve, reject) => {
+    setTimeout(() => {
+      if (value === 'John') {
+        reject({ message: 'John is not allowed' });
+      }
 
-    resolve({ message: 'validation sucesfull' });
-  }, 2000);
-});
+      resolve({ message: 'validation sucesfull' });
+    }, 2000);
+  });
 
-const asyncValidator = value => mockEndpoint(value).then(response => {
-  //do something with response but do not return any value!
-}).catch(error => {
-  return error.message;
-});
+const asyncValidator = (value) =>
+  mockEndpoint(value)
+    .catch(({ message }) => {
+      // error must only throw valid react child eg: string, number, node, etc.
+      throw message;
+    })
+    .then(() => {
+      // possible success handler
+    });
 
 const schema = {
   title: 'Start typing',
-  fields: [{
-    component: componentTypes.TEXT_FIELD,
-    name: 'async-validator',
-    label: 'Async validator',
-    helperText: 'Type name John to fail validation. Validation will take 2 seconds.',
-    validate: [ asyncValidator ],
-  }],
+  fields: [
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'async-validator',
+      label: 'Async validator',
+      helperText: 'Type name John to fail validation. Validation will take 2 seconds.',
+      validate: [asyncValidator]
+    }
+  ]
 };
 
 const AsyncValidator = () => (
   <div className="pf4">
-    <FormRenderer
-      FormTemplate={ FormTemplate }
-      componentMapper={ componentMapper }
-      schema={ schema }
-      onSubmit={ console.log }
-    />
+    <FormRenderer FormTemplate={FormTemplate} componentMapper={componentMapper} schema={schema} onSubmit={console.log} />
   </div>
 );