feat: Field support validateFirst (#71)

* inject validateFirst

* test case

Author: zombieJ

src/Field.tsx

@@ -66,6 +66,7 @@ export interface FieldProps {
   shouldUpdate?: ShouldUpdate;
   trigger?: string;
   validateTrigger?: string | string[] | false;
+  validateFirst?: boolean;
   valuePropName?: string;
   onReset?: () => void;
 }
@@ -271,6 +272,7 @@ class Field extends React.Component<FieldProps, FieldState> implements FieldEnti
   };
 
   public validateRules = (options?: ValidateOptions) => {
+    const { validateFirst } = this.props;
     const { triggerName } = (options || {}) as ValidateOptions;
     const namePath = this.getNamePath();
 
@@ -286,7 +288,7 @@ class Field extends React.Component<FieldProps, FieldState> implements FieldEnti
       });
     }
 
-    const promise = validateRules(namePath, this.getValue(), filteredRules, options);
+    const promise = validateRules(namePath, this.getValue(), filteredRules, options, validateFirst);
     this.validatePromise = promise;
     this.errors = [];
 

src/utils/validateUtil.ts

@@ -125,6 +125,7 @@ export function validateRules(
   value: StoreValue,
   rules: RuleObject[],
   options: ValidateOptions,
+  validateFirst?: boolean,
 ) {
   const name = namePath.join('.');
 
@@ -179,20 +180,40 @@ export function validateRules(
     };
   });
 
-  const summaryPromise: Promise<string[]> = Promise.all(
-    filledRules.map(rule => validateRule(name, value, rule, options)),
-  ).then((errorsList: string[][]): string[] | Promise<string[]> => {
-    const errors: string[] = [].concat(...errorsList);
+  const rulePromises = filledRules.map(rule => validateRule(name, value, rule, options));
 
-    if (!errors.length) {
-      return [];
-    }
+  const summaryPromise: Promise<string[]> = validateFirst
+    ? finishOnFirstFailed(rulePromises)
+    : finishOnAllFailed(rulePromises).then((errors: string[]): string[] | Promise<string[]> => {
+        if (!errors.length) {
+          return [];
+        }
 
-    return Promise.reject<string[]>(errors);
-  });
+        return Promise.reject<string[]>(errors);
+      });
 
   // Internal catch error to avoid console error log.
   summaryPromise.catch(e => e);
 
   return summaryPromise;
 }
+
+async function finishOnAllFailed(rulePromises: Promise<string[]>[]): Promise<string[]> {
+  return Promise.all(rulePromises).then((errorsList: string[][]): string[] | Promise<string[]> => {
+    const errors: string[] = [].concat(...errorsList);
+
+    return errors;
+  });
+}
+
+async function finishOnFirstFailed(rulePromises: Promise<string[]>[]): Promise<string[]> {
+  return new Promise(resolve => {
+    rulePromises.forEach(promise => {
+      promise.then(errors => {
+        if (errors.length) {
+          resolve(errors);
+        }
+      });
+    });
+  });
+}

tests/validate.test.js

@@ -325,5 +325,38 @@ describe('Form.Validate', () => {
 
     errorSpy.mockRestore();
   });
+
+  it('validateFirst', async () => {
+    let form;
+    const wrapper = mount(
+      <div>
+        <Form
+          ref={instance => {
+            form = instance;
+          }}
+        >
+          <InfoField
+            name="username"
+            validateFirst
+            rules={[
+              // Follow promise will never end
+              { validator: () => new Promise(() => null) },
+              { required: true },
+            ]}
+          />
+        </Form>
+      </div>,
+    );
+
+    await changeValue(wrapper, '');
+    matchError(wrapper, true);
+    expect(form.getFieldError('username')).toEqual(["'username' is required"]);
+    expect(form.getFieldsError()).toEqual([
+      {
+        name: ['username'],
+        errors: ["'username' is required"],
+      },
+    ]);
+  });
 });
 /* eslint-enable no-template-curly-in-string */