chore: Full test coverage

.eslintrc.js

@@ -7,5 +7,6 @@ module.exports = {
     'no-template-curly-in-string': 0,
     'prefer-promise-reject-errors': 0,
     'react/no-array-index-key': 0,
+    'react/sort-comp': 0,
   },
 };

README.md

@@ -37,7 +37,7 @@ open http://localhost:9001/
 ```js
 import Form, { Field } from 'rc-field-form';
 
-<StateForm
+<Form
   onFinish={values => {
     console.log('Finish:', values);
   }}
@@ -50,7 +50,7 @@ import Form, { Field } from 'rc-field-form';
   </Field>
 
   <button>Submit</button>
-</StateForm>;
+</Form>;
 
 export default Demo;
 ```

examples/StateForm-basic.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import StateForm, { Field } from '../src/';
+import Form, { Field } from '../src/';
 import Input from './components/Input';
 
 
@@ -12,7 +12,7 @@ export default class Demo extends React.Component {
     return (
       <div>
         <h3>State Form ({list.length} inputs)</h3>
-        <StateForm>
+        <Form>
           <Field name="username">
             <Input placeholder="Username" />
           </Field>
@@ -48,7 +48,7 @@ export default class Demo extends React.Component {
               <Input placeholder={`field_${index}`} />
             </Field>
           ))}
-        </StateForm>
+        </Form>
       </div>
     );
   }

examples/StateForm-context.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 
 import React from 'react';
-import StateForm, { FormProvider } from '../src';
+import Form, { FormProvider } from '../src';
 import Input from './components/Input';
 import LabelField from './components/LabelField';
 import { ValidateMessages } from '../src/interface';
@@ -16,10 +16,10 @@ const formStyle: React.CSSProperties = {
 };
 
 const Form1 = () => {
-  const [form] = StateForm.useForm();
+  const [form] = Form.useForm();
 
   return (
-    <StateForm form={form} style={{ ...formStyle, border: '1px solid #000' }} name="first">
+    <Form form={form} style={{ ...formStyle, border: '1px solid #000' }} name="first">
       <h4>Form 1</h4>
       <p>Change me!</p>
       <LabelField name="username" rules={[{ required: true }]}>
@@ -30,15 +30,15 @@ const Form1 = () => {
       </LabelField>
 
       <button type="submit">Submit</button>
-    </StateForm>
+    </Form>
   );
 };
 
 const Form2 = () => {
-  const [form] = StateForm.useForm();
+  const [form] = Form.useForm();
 
   return (
-    <StateForm form={form} style={{ ...formStyle, border: '1px solid #F00' }} name="second">
+    <Form form={form} style={{ ...formStyle, border: '1px solid #F00' }} name="second">
       <h4>Form 2</h4>
       <p>Will follow Form 1 but not sync back</p>
       <LabelField name="username" rules={[{ required: true }]}>
@@ -49,7 +49,7 @@ const Form2 = () => {
       </LabelField>
 
       <button type="submit">Submit</button>
-    </StateForm>
+    </Form>
   );
 };
 

examples/StateForm-layout.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/label-has-associated-control, react/prop-types */
 
 import React from 'react';
-import StateForm from '../src';
+import Form from '../src';
 import Input from './components/Input';
 import LabelField from './components/LabelField';
 
@@ -14,7 +14,7 @@ export default class Demo extends React.Component {
     return (
       <div>
         <h3>State Form ({list.length} inputs)</h3>
-        <StateForm>
+        <Form>
           <LabelField name="username">
             <Input placeholder="Username" />
           </LabelField>
@@ -24,7 +24,7 @@ export default class Demo extends React.Component {
           <LabelField name={['path1', 'path2']} label="Nest Path" rules={[ { required: true } ]}>
             <Input placeholder="nest" />
           </LabelField>
-        </StateForm>
+        </Form>
       </div>
     );
   }

examples/StateForm-list.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable react/prop-types */
 
 import React from 'react';
-import StateForm from '../src/';
+import Form from '../src/';
 import Input from './components/Input';
 import LabelField from './components/LabelField';
 
-const { List, useForm } = StateForm;
+const { List, useForm } = Form;
 
 const Demo = () => {
   const [form] = useForm();
@@ -15,7 +15,7 @@ const Demo = () => {
       <h3>List of Form</h3>
       <p>You can set Field as List</p>
 
-      <StateForm
+      <Form
         form={form}
         onValuesChange={(_, values) => {
           console.log('values:', values);
@@ -62,7 +62,7 @@ const Demo = () => {
             );
           }}
         </List>
-      </StateForm>
+      </Form>
 
       <div style={{ border: '1px solid #000', padding: 15 }}>
         <h4>Out Of Form</h4>

examples/StateForm-redux.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import { connect, Provider } from 'react-redux';
 import { createStore } from 'redux';
-import StateForm from '../src/';
+import Form from '../src/';
 import Input from './components/Input';
 import LabelField from './components/LabelField';
 
@@ -22,7 +22,7 @@ let App: any = ({ dispatch, fields }) => {
   console.log('=>', fields);
 
   return (
-    <StateForm
+    <Form
       fields={fields}
       onValuesChange={(changedValues, allValues) => {
         console.log('Value Change:', changedValues, allValues);
@@ -42,8 +42,8 @@ let App: any = ({ dispatch, fields }) => {
         <Input />
       </LabelField>
 
-      <LabelField name="required" placeholder="required" rules={[{ required: true }]}>
-        <Input />
+      <LabelField name="required" rules={[{ required: true }]}>
+        <Input placeholder="required" />
       </LabelField>
 
       <button
@@ -71,7 +71,7 @@ let App: any = ({ dispatch, fields }) => {
       >
         dispatch to change
       </button>
-    </StateForm>
+    </Form>
   );
 };
 App = connect((fields: any) => ({ fields }))(App);

examples/StateForm-renderProps.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import React from 'react';
-import StateForm from '../src';
+import Form from '../src';
 import Input from './components/Input';
 
-const { Field } = StateForm;
+const { Field } = Form;
 
 const list = new Array(1111).fill(() => undefined);
 
@@ -15,7 +15,7 @@ export default class Demo extends React.Component {
       <div>
         <h3>Render Props ({list.length} inputs)</h3>
         <p>Render Props is easy to use but bad performance</p>
-        <StateForm>
+        <Form>
           {(values) => {
             return (
               <React.Fragment>
@@ -55,7 +55,7 @@ export default class Demo extends React.Component {
               </React.Fragment>
             );
           }}
-        </StateForm>
+        </Form>
       </div>
     );
   }

examples/StateForm-reset.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import StateForm from '../src';
+import Form from '../src';
 import Input from './components/Input';
 
-const { Field } = StateForm;
+const { Field } = Form;
 
 function Item({ children, ...restProps }) {
   return (
@@ -24,11 +24,11 @@ function Item({ children, ...restProps }) {
 }
 
 const Demo = () => {
-  const [form] = StateForm.useForm();
+  const [form] = Form.useForm();
   return (
     <div>
       <h3>Reset / Set Form</h3>
-      <StateForm form={form} initialValues={{ username: 'strange', path1: { path2: '233' } }}>
+      <Form form={form} initialValues={{ username: 'strange', path1: { path2: '233' } }}>
         <Item name="username" rules={[{ required: true }]}>
           <Input placeholder="Username" />
         </Item>
@@ -64,7 +64,7 @@ const Demo = () => {
         >
           Set Password with Errors
         </button>
-      </StateForm>
+      </Form>
     </div>
   );
 };

examples/StateForm-useForm.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import StateForm from '../src';
+import Form from '../src';
 import Input from './components/Input';
 
-const { Field, useForm } = StateForm;
+const { Field, useForm } = Form;
 
 const list = new Array(0).fill(() => undefined);
 
@@ -22,7 +22,7 @@ export default () => {
         Fill Values
       </button>
 
-      <StateForm form={form}>
+      <Form form={form}>
         <React.Fragment>
           <Field name="username">
             <Input placeholder="Username" />
@@ -43,7 +43,7 @@ export default () => {
             </Field>
           ))}
         </React.Fragment>
-      </StateForm>
+      </Form>
     </div>
   );
 };

examples/StateForm-validate-perf.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 
 import React from 'react';
-import StateForm, { FormInstance } from '../src/';
+import Form, { FormInstance } from '../src/';
 import Input from './components/Input';
 import LabelField from './components/LabelField';
 import { ValidateMessages } from '../src/interface';
@@ -34,7 +34,7 @@ export default class Demo extends React.Component {
     return (
       <div>
         <h3>High Perf Validate Form</h3>
-        <StateForm
+        <Form
           ref={this.setForm}
           style={{ padding: 16 }}
           onFinish={this.onFinish}
@@ -87,7 +87,7 @@ export default class Demo extends React.Component {
           >
             Reset
           </button>
-        </StateForm>
+        </Form>
       </div>
     );
   }

examples/StateForm-validate.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react/prop-types */
 
 import React from 'react';
-import StateForm from '../src';
+import Form from '../src';
 import Input from './components/Input';
 
-const { Field } = StateForm;
+const { Field } = Form;
 
 const Error = ({ children }) => (
   <ul style={{ color: 'red' }}>
@@ -35,7 +35,7 @@ export default class Demo extends React.Component {
     return (
       <div>
         <h3>Validate Form</h3>
-        <StateForm style={{ padding: 16 }} onFinish={this.onFinish}>
+        <Form style={{ padding: 16 }} onFinish={this.onFinish}>
           {(values, form) => {
             const usernameError = form.getFieldError('username');
             const passwordError = form.getFieldError('password');
@@ -161,7 +161,7 @@ export default class Demo extends React.Component {
               </React.Fragment>
             );
           }}
-        </StateForm>
+        </Form>
       </div>
     );
   }

examples/components/LabelField.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import StateForm, { FormInstance } from '../../src/';
+import Form, { FormInstance } from '../../src/';
 import { FieldProps } from '../../src/Field';
 
-const { Field } = StateForm;
+const { Field } = Form;
 
 const Error = ({ children }) => (
   <ul style={{ color: 'red' }}>