add

Author: li-jia-nan

docs/examples/components/LabelField.tsx

@@ -9,7 +9,7 @@ interface ErrorProps {
   children?: React.ReactNode[];
 }
 
-const Error = ({ children, warning }: ErrorProps) => (
+const Error: React.FC<ErrorProps> = ({ children, warning }) => (
   <ul style={{ color: warning ? 'orange' : 'red' }}>
     {children.map((error: React.ReactNode, index: number) => (
       <li key={index}>{error}</li>

docs/examples/renderProps.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/label-has-associated-control */
 import React from 'react';
 import Form from 'rc-field-form';
 import Input from './components/Input';
@@ -45,7 +44,6 @@ export default class Demo extends React.Component {
                   </div>
                 )}
               </Field>
-
               {list.map((_, index) => (
                 <Field key={index} name={`list_field_${index}`}>
                   <Input placeholder={`list_field_${index}`} />

docs/examples/validate.tsx

@@ -6,7 +6,11 @@ import Input from './components/Input';
 
 const { Field } = Form;
 
-const Error = ({ children }) => (
+interface ErrorProps {
+  children?: React.ReactNode[];
+}
+
+const Error: React.FC<ErrorProps> = ({ children }) => (
   <ul style={{ color: 'red' }}>
     {children.map((error, i) => (
       <li key={i}>{error}</li>
@@ -19,14 +23,7 @@ const FieldState = ({ form, name }) => {
   const validating = form.isFieldValidating(name);
 
   return (
-    <div
-      style={{
-        color: 'green',
-        position: 'absolute',
-        marginTop: -35,
-        left: 200,
-      }}
-    >
+    <div style={{ color: 'green', position: 'absolute', marginTop: -35, left: 200 }}>
       {touched ? <span>Touched!</span> : null}
       {validating ? <span>Validating!</span> : null}
     </div>

tests/list.test.tsx

@@ -316,8 +316,8 @@ describe('Form.List', () => {
       operation = opt;
       return (
         <div>
-          {fields.map((field, index) => (
-            <Field key={index} {...field}>
+          {fields.map(field => (
+            <Field {...field} key={field.key}>
               <Input />
             </Field>
           ))}
@@ -366,8 +366,8 @@ describe('Form.List', () => {
       const [, getList] = generateForm(
         fields => (
           <div>
-            {fields.map((field, index) => (
-              <Field {...field} key={index} rules={[{ required: true }]}>
+            {fields.map(field => (
+              <Field {...field} key={field.key} rules={[{ required: true }]}>
                 <Input />
               </Field>
             ))}
@@ -529,8 +529,8 @@ describe('Form.List', () => {
         operation = opt;
         return (
           <div>
-            {fields.map((field, index) => (
-              <Field {...field} key={index}>
+            {fields.map(field => (
+              <Field {...field} key={field.key}>
                 <Input />
               </Field>
             ))}
@@ -603,8 +603,8 @@ describe('Form.List', () => {
     const [wrapper] = generateForm(
       (fields, operation) => (
         <div>
-          {fields.map((field, index) => (
-            <Field {...field} key={index} name={[field.name, 'first']}>
+          {fields.map(field => (
+            <Field {...field} key={field.key} name={[field.name, 'first']}>
               <Input />
             </Field>
           ))}
@@ -662,8 +662,8 @@ describe('Form.List', () => {
       const [wrapper] = generateForm(
         fields => (
           <div>
-            {fields.map((field, index) => (
-              <Field {...field} key={index}>
+            {fields.map(field => (
+              <Field {...field} key={field.key}>
                 <Input />
               </Field>
             ))}
@@ -691,8 +691,8 @@ describe('Form.List', () => {
     it('List self change', () => {
       const [wrapper] = generateForm((fields, opt) => (
         <div>
-          {fields.map((field, index) => (
-            <Field {...field} key={index}>
+          {fields.map(field => (
+            <Field {...field} key={field.key}>
               <Input />
             </Field>
           ))}
@@ -723,8 +723,8 @@ describe('Form.List', () => {
     generateForm(
       fields => (
         <div>
-          {fields.map((field, index) => (
-            <Field {...field} key={index}>
+          {fields.map(field => (
+            <Field {...field} key={field.key}>
               <Input />
             </Field>
           ))}

tests/preserve.test.tsx

@@ -112,8 +112,8 @@ describe('Form.Preserve', () => {
             {(fields, { remove }) => {
               return (
                 <div>
-                  {fields.map((field, index) => (
-                    <Form.Field key={index} {...field}>
+                  {fields.map(field => (
+                    <Form.Field {...field} key={field.key}>
                       <input />
                     </Form.Field>
                   ))}
@@ -136,8 +136,8 @@ describe('Form.Preserve', () => {
           <Form.List name="list">
             {(fields, { remove }) => (
               <>
-                {fields.map((field, index) => (
-                  <Form.Field key={index} {...field} preserve={false}>
+                {fields.map(field => (
+                  <Form.Field {...field} key={field.key} preserve={false}>
                     <input />
                   </Form.Field>
                 ))}