Merge pull request #610 from react-component/rec

feat: support `recursive` validation

Author: chenshuai2144

src/interface.ts

@@ -132,6 +132,11 @@ export interface ValidateOptions {
    * Validate only and not trigger UI and Field status update
    */
   validateOnly?: boolean;
+  /**
+   * Recursive validate. It will validate all the name path that contains the provided one.
+   * e.g. [['a']] will validate ['a'] , ['a', 'b'] and ['a', 1].
+   */
+  recursive?: boolean;
 }
 
 export type ValidateFields<Values = any> = {
@@ -142,11 +147,6 @@ export type ValidateFields<Values = any> = {
 export interface InternalValidateOptions extends ValidateOptions {
   triggerName?: string;
   validateMessages?: ValidateMessages;
-  /**
-   * Recursive validate. It will validate all the name path that contains the provided one.
-   * e.g. ['a'] will validate ['a'] , ['a', 'b'] and ['a', 1].
-   */
-  recursive?: boolean;
 }
 
 export type InternalValidateFields<Values = any> = {

src/useForm.ts

@@ -885,27 +885,14 @@ export class FormStore {
     const TMP_SPLIT = String(Date.now());
     const validateNamePathList = new Set<string>();
 
+    const recursive = options?.recursive;
+
     this.getFieldEntities(true).forEach((field: FieldEntity) => {
       // Add field if not provide `nameList`
       if (!provideNameList) {
         namePathList.push(field.getNamePath());
       }
 
-      /**
-       * Recursive validate if configured.
-       * TODO: perf improvement @zombieJ
-       */
-      if (options?.recursive && provideNameList) {
-        const namePath = field.getNamePath();
-        if (
-          // nameList[i] === undefined 说明是以 nameList 开头的
-          // ['name'] -> ['name','list']
-          namePath.every((nameUnit, i) => nameList[i] === nameUnit || nameList[i] === undefined)
-        ) {
-          namePathList.push(namePath);
-        }
-      }
-
       // Skip if without rule
       if (!field.props.rules || !field.props.rules.length) {
         return;
@@ -915,7 +902,7 @@ export class FormStore {
       validateNamePathList.add(fieldNamePath.join(TMP_SPLIT));
 
       // Add field validate rule in to promise list
-      if (!provideNameList || containsNamePath(namePathList, fieldNamePath)) {
+      if (!provideNameList || containsNamePath(namePathList, fieldNamePath, recursive)) {
         const promise = field.validateRules({
           validateMessages: {
             ...defaultValidateMessages,

src/utils/valueUtil.ts

@@ -26,18 +26,40 @@ export function cloneByNamePathList(store: Store, namePathList: InternalNamePath
   return newStore;
 }
 
-export function containsNamePath(namePathList: InternalNamePath[], namePath: InternalNamePath) {
-  return namePathList && namePathList.some(path => matchNamePath(path, namePath));
+/**
+ * Check if `namePathList` includes `namePath`.
+ * @param namePathList A list of `InternalNamePath[]`
+ * @param namePath Compare `InternalNamePath`
+ * @param partialMatch True will make `[a, b]` match `[a, b, c]`
+ */
+export function containsNamePath(
+  namePathList: InternalNamePath[],
+  namePath: InternalNamePath,
+  partialMatch = false,
+) {
+  return namePathList && namePathList.some(path => matchNamePath(namePath, path, partialMatch));
 }
 
+/**
+ * Check if `namePath` is super set or equal of `subNamePath`.
+ * @param namePath A list of `InternalNamePath[]`
+ * @param subNamePath Compare `InternalNamePath`
+ * @param partialMatch True will make `[a, b]` match `[a, b, c]`
+ */
 export function matchNamePath(
   namePath: InternalNamePath,
-  changedNamePath: InternalNamePath | null,
+  subNamePath: InternalNamePath | null,
+  partialMatch = false,
 ) {
-  if (!namePath || !changedNamePath || namePath.length !== changedNamePath.length) {
+  if (!namePath || !subNamePath) {
     return false;
   }
-  return namePath.every((nameUnit, i) => changedNamePath[i] === nameUnit);
+
+  if (!partialMatch && namePath.length !== subNamePath.length) {
+    return false;
+  }
+
+  return subNamePath.every((nameUnit, i) => namePath[i] === nameUnit);
 }
 
 // Like `shallowEqual`, but we not check the data which may cause re-render

tests/validate.test.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import Form, { Field, useForm } from '../src';
@@ -694,8 +694,8 @@ describe('Form.Validate', () => {
   });
 
   it('validate support recursive', async () => {
-    let form;
-    const wrapper = mount(
+    let form: FormInstance;
+    const { container } = render(
       <div>
         <Form
           ref={instance => {
@@ -708,24 +708,46 @@ describe('Form.Validate', () => {
       </div>,
     );
 
-    wrapper
-      .find('input')
-      .at(0)
-      .simulate('change', { target: { value: '' } });
-    await act(async () => {
-      await timeout();
-    });
-    wrapper.update();
+    async function changeInputValue(input: HTMLElement, value = '') {
+      fireEvent.change(input, {
+        target: {
+          value: '2',
+        },
+      });
+      fireEvent.change(input, {
+        target: {
+          value,
+        },
+      });
+
+      await act(async () => {
+        await timeout();
+      });
+    }
+
+    await changeInputValue(container.querySelector('input'));
 
     try {
-      const values = await form.validateFields(['username'], { recursive: true });
-      expect(values.username.do).toBe('');
+      await form.validateFields([['username']], { recursive: true });
+
+      // Should not reach this
+      expect(false).toBeTruthy();
     } catch (error) {
       expect(error.errorFields.length).toBe(2);
+      expect(error.errorFields[0].errors).toEqual(["'username.do' is required"]);
+      expect(error.errorFields[1].errors).toEqual(["'username.list' is required"]);
     }
 
-    const values = await form.validateFields(['username']);
-    expect(values.username.do).toBe('');
+    await act(async () => {
+      await timeout();
+    });
+
+    // Passed
+    await changeInputValue(container.querySelectorAll('input')[0], 'do');
+    await changeInputValue(container.querySelectorAll('input')[1], 'list');
+
+    const passedValues = await form.validateFields([['username']], { recursive: true });
+    expect(passedValues).toEqual({ username: { do: 'do', list: 'list' } });
   });
 
   it('not trigger validator', async () => {