feat: Form.List support rules (#195)

* init list rule define

* support error of List

* add test case

Author: zombieJ

examples/list.tsx

@@ -25,8 +25,20 @@ const Demo = () => {
       >
         <Form.Field shouldUpdate>{() => JSON.stringify(form.getFieldsValue(), null, 2)}</Form.Field>
 
-        <List name="users">
-          {(fields, { add, remove }) => {
+        <List
+          name="users"
+          rules={[
+            {
+              message: 'Must have at least 2 user!',
+              validator: async (_, value) => {
+                if (value.length < 2) {
+                  throw new Error();
+                }
+              },
+            },
+          ]}
+        >
+          {(fields, { add, remove }, { errors }) => {
             console.log('Demo Fields:', fields);
             return (
               <div>
@@ -49,6 +61,12 @@ const Demo = () => {
                   </LabelField>
                 ))}
 
+                <ul>
+                  {errors.map(err => (
+                    <li key={err}>{err}</li>
+                  ))}
+                </ul>
+
                 <button
                   type="button"
                   onClick={() => {

src/List.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import warning from 'rc-util/lib/warning';
-import { InternalNamePath, NamePath, StoreValue } from './interface';
+import { InternalNamePath, NamePath, StoreValue, ValidatorRule, Meta } from './interface';
 import FieldContext from './FieldContext';
 import Field from './Field';
 import { move, getNamePath } from './utils/valueUtil';
@@ -19,10 +19,16 @@ interface ListOperations {
 
 interface ListProps {
   name: NamePath;
-  children?: (fields: ListField[], operations: ListOperations) => JSX.Element | React.ReactNode;
+  rules?: ValidatorRule[];
+  validateTrigger?: string | string[] | false;
+  children?: (
+    fields: ListField[],
+    operations: ListOperations,
+    meta: Meta,
+  ) => JSX.Element | React.ReactNode;
 }
 
-const List: React.FunctionComponent<ListProps> = ({ name, children }) => {
+const List: React.FunctionComponent<ListProps> = ({ name, children, rules, validateTrigger }) => {
   const context = React.useContext(FieldContext);
   const keyRef = React.useRef({
     keys: [],
@@ -48,8 +54,8 @@ const List: React.FunctionComponent<ListProps> = ({ name, children }) => {
 
   return (
     <FieldContext.Provider value={{ ...context, prefixName }}>
-      <Field name={[]} shouldUpdate={shouldUpdate}>
-        {({ value = [], onChange }) => {
+      <Field name={[]} shouldUpdate={shouldUpdate} rules={rules} validateTrigger={validateTrigger}>
+        {({ value = [], onChange }, meta) => {
           const { getFieldValue } = context;
           const getNewValue = () => {
             const values = getFieldValue(prefixName || []) as StoreValue[];
@@ -142,6 +148,7 @@ const List: React.FunctionComponent<ListProps> = ({ name, children }) => {
               },
             ),
             operations,
+            meta,
           );
         }}
       </Field>

src/interface.ts

@@ -50,6 +50,11 @@ type Validator = (
 
 export type RuleRender = (form: FormInstance) => RuleObject;
 
+export interface ValidatorRule {
+  message?: string | ReactElement;
+  validator: Validator;
+}
+
 interface BaseRule {
   enum?: StoreValue[];
   len?: number;
@@ -60,19 +65,20 @@ interface BaseRule {
   required?: boolean;
   transform?: (value: StoreValue) => StoreValue;
   type?: RuleType;
-  validator?: Validator;
   whitespace?: boolean;
 
   /** Customize rule level `validateTrigger`. Must be subset of Field `validateTrigger` */
   validateTrigger?: string | string[];
 }
 
-interface ArrayRule extends Omit<BaseRule, 'type'> {
+type AggregationRule = BaseRule & Partial<ValidatorRule>;
+
+interface ArrayRule extends Omit<AggregationRule, 'type'> {
   type: 'array';
   defaultField?: RuleObject;
 }
 
-export type RuleObject = BaseRule | ArrayRule;
+export type RuleObject = AggregationRule | ArrayRule;
 
 export type Rule = RuleObject | RuleRender;
 

src/utils/validateUtil.ts

@@ -181,7 +181,7 @@ export function validateRules(
               callback();
             })
             .catch(err => {
-              callback(err);
+              callback(err || ' ');
             });
         }
       },

tests/list.test.js

@@ -5,11 +5,12 @@ import { resetWarned } from 'rc-util/lib/warning';
 import Form, { Field, List } from '../src';
 import { Input } from './common/InfoField';
 import { changeValue, getField } from './common';
+import timeout from './common/timeout';
 
 describe('Form.List', () => {
   let form;
 
-  function generateForm(renderList, formProps) {
+  function generateForm(renderList, formProps, listProps) {
     const wrapper = mount(
       <div>
         <Form
@@ -18,7 +19,9 @@ describe('Form.List', () => {
           }}
           {...formProps}
         >
-          <List name="list">{renderList}</List>
+          <List name="list" {...listProps}>
+            {renderList}
+          </List>
         </Form>
       </div>,
     );
@@ -567,4 +570,39 @@ describe('Form.List', () => {
     wrapper.update();
     expect(wrapper.find(Input)).toHaveLength(1);
   });
+
+  it('list support validator', async () => {
+    let operation;
+    let currentMeta;
+    let currentValue;
+
+    const [wrapper] = generateForm(
+      (_, opt, meta) => {
+        operation = opt;
+        currentMeta = meta;
+        return null;
+      },
+      null,
+      {
+        rules: [
+          {
+            validator(_, value) {
+              currentValue = value;
+              return Promise.reject();
+            },
+            message: 'Bamboo Light',
+          },
+        ],
+      },
+    );
+
+    await act(async () => {
+      operation.add();
+      await timeout();
+      wrapper.update();
+    });
+
+    expect(currentValue).toEqual([undefined]);
+    expect(currentMeta.errors).toEqual(['Bamboo Light']);
+  });
 });