feat: Add StateForm

.gitignore

@@ -23,5 +23,8 @@ node_modules
 build
 dist
 lib
+es
 coverage
-yarn.lock
+yarn.lock
+package-lock.json
+storybook

examples/StateForm-basic.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import StateForm from '../src/StateForm';
+import Input from './components/Input';
+
+const { Field } = StateForm;
+
+const list = new Array(1111).fill();
+
+export default class Demo extends React.Component {
+  state = {};
+
+  render() {
+    return (
+      <div>
+        <h3>State Form ({list.length} inputs)</h3>
+        <StateForm>
+          <Field name="username">
+            <Input placeholder="Username" />
+          </Field>
+          <Field name="password">
+            <Input placeholder="Password" />
+          </Field>
+          <Field name="username">
+            <Input placeholder="Shadow of Username" />
+          </Field>
+          <Field name={[ 'path1', 'path2' ]}>
+            <Input placeholder="nest" />
+          </Field>
+          <Field name={[ 'renderProps' ]}>
+            {(control) => (
+              <div>
+                I am render props
+                <Input {...control} placeholder="render props" />
+              </div>
+            )}
+          </Field>
+
+          <h4>Show additional field when `username` is `111`</h4>
+          <Field name="condition" shouldUpdate={(prev, next) => prev.username !== next.username}>
+            {(control, meta, context) => {
+              const { username } = context.getFieldsValue();
+              return username === '111' ? (
+                <Input {...control} placeholder="I am secret!" />
+              ) : null;
+            }}
+          </Field>
+
+          {list.map((_, index) => (
+            <Field key={index} name={`field_${index}`}>
+              <Input placeholder={`field_${index}`} />
+            </Field>
+          ))}
+        </StateForm>
+      </div>
+    );
+  }
+}

examples/StateForm-layout.js

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

examples/StateForm-redux.tsx

@@ -0,0 +1,79 @@
+/* eslint-disable react/prop-types */
+
+import React from 'react';
+import { connect, Provider } from 'react-redux';
+import { createStore } from 'redux';
+import StateForm from '../src/StateForm';
+import Input from './components/Input';
+import LabelField from './components/LabelField';
+
+function formReducer(fields = [], action: any) {
+  switch (action.type) {
+    case 'updateFields':
+      return [...action.fields];
+    default:
+      return fields;
+  }
+}
+
+const store = createStore(formReducer);
+
+let App: any = ({ dispatch, fields }) => {
+  console.log('=>', fields);
+
+  return (
+    <StateForm
+      fields={fields}
+      onValuesChange={(changedValues, allValues) => {
+        console.log('Value Change:', changedValues, allValues);
+      }}
+      onFieldsChange={(changedFields, allFields) => {
+        console.log('Field Change:', changedFields, allFields);
+        dispatch({
+          type: 'updateFields',
+          fields: allFields,
+        });
+      }}
+    >
+      <h3>Redux Form</h3>
+      <p>It's no need to put data into redux store. But you can still do this.</p>
+
+      <LabelField name="field">
+        <Input />
+      </LabelField>
+
+      <LabelField name="required" placeholder="required" rules={[{ required: true }]}>
+        <Input />
+      </LabelField>
+
+      <button
+        onClick={() => {
+          dispatch({
+            type: 'updateFields',
+            fields: [
+              {
+                name: 'field',
+                value: 'redux it!',
+                touched: true,
+                validating: true,
+              },
+            ],
+          });
+        }}
+      >
+        dispatch to change
+      </button>
+    </StateForm>
+  );
+};
+App = connect((fields: any) => ({ fields }))(App);
+
+const Demo = () => {
+  return (
+    <Provider store={store}>
+      <App />
+    </Provider>
+  );
+};
+
+export default Demo;

examples/StateForm-renderProps.js

@@ -0,0 +1,62 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React from 'react';
+import StateForm from '../src/StateForm';
+import Input from './components/Input';
+
+const { Field } = StateForm;
+
+const list = new Array(1111).fill();
+
+export default class Demo extends React.Component {
+  state = {};
+
+  render() {
+    return (
+      <div>
+        <h3>Render Props ({list.length} inputs)</h3>
+        <p>Render Props is easy to use but bad performance</p>
+        <StateForm>
+          {(store) => {
+            return (
+              <React.Fragment>
+                {JSON.stringify(store, null, 2)}
+                <Field name="field_1">
+                  <Input placeholder="Field 1" />
+                </Field>
+                <Field name="field_1">
+                  <Input placeholder="Shadow of Field 1" />
+                </Field>
+                <Field name="field_2">
+                  <Input placeholder="Field 2" />
+                </Field>
+
+                <h4>Show additional field when field 1 is `222`</h4>
+                {store.field_1 === '222' ? (
+                  <Field name="secret">
+                    <Input placeholder="Field Secret!" />
+                  </Field>
+                ) : 'Nothing yet...'}
+
+                <Field name="bad">
+                  {(control) => {
+                    return (
+                      <div>
+                        Field Render Props: <Input {...control} />
+                      </div>
+                    );
+                  }}
+                </Field>
+
+                {list.map((_, index) => (
+                  <Field key={index} name={`list_field_${index}`}>
+                    <Input placeholder={`list_field_${index}`} />
+                  </Field>
+                ))}
+              </React.Fragment>
+            );
+          }}
+        </StateForm>
+      </div>
+    );
+  }
+}

examples/StateForm-reset.js

@@ -0,0 +1,72 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import StateForm from '../src/StateForm';
+import Input from './components/Input';
+
+const { Field } = StateForm;
+
+function Item({ children, ...restProps }) {
+  return (
+    <Field {...restProps}>
+      {(control, meta) => {
+        return (
+          <div>
+            <div>{React.cloneElement(children, { ...control })}</div>
+
+            {meta.touched && 'touched!'}
+            {meta.validating && 'validating!'}
+            {meta.errors}
+          </div>
+        );
+      }}
+    </Field>
+  );
+}
+
+const Demo = () => {
+  const [form] = StateForm.useForm();
+  return (
+    <div>
+      <h3>Reset / Set Form</h3>
+      <StateForm form={form} initialValues={{ username: 'strange', path1: { path2: '233' } }}>
+        <Item name="username" rules={[{ required: true }]}>
+          <Input placeholder="Username" />
+        </Item>
+        <Item name="password" rules={[{ required: true }]}>
+          <Input placeholder="Password" />
+        </Item>
+        <Item name={['path1', 'path2']} rules={[{ required: true }]}>
+          <Input placeholder="nest" />
+        </Item>
+        <button
+          type="button"
+          onClick={() => {
+            form.resetFields(['password']);
+          }}
+        >
+          Reset Password
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            form.resetFields();
+          }}
+        >
+          Reset All
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            form.setFields([
+              { name: 'password', value: 'ERROR ME', touched: false, errors: ['Good for you!', 'Good for me!'] },
+            ]);
+          }}
+        >
+          Set Password with Errors
+        </button>
+      </StateForm>
+    </div>
+  );
+};
+
+export default Demo;

examples/StateForm-useForm.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import StateForm from '../src/StateForm';
+import Input from './components/Input';
+
+const { Field, useForm } = StateForm;
+
+const list = new Array(0).fill();
+
+export default () => {
+  const [form] = useForm();
+
+  return (
+    <div>
+      <h3>useForm ({list.length} inputs)</h3>
+
+      <button type="button" onClick={() => {
+        form.setFieldsValue({
+          username: 'light',
+          password: 'bamboo',
+        });
+      }}>
+        Fill Values
+      </button>
+
+      <StateForm form={form}>
+        <React.Fragment>
+          <Field name="username">
+            <Input placeholder="Username" />
+          </Field>
+          <Field name="password">
+            <Input placeholder="Password" />
+          </Field>
+          <Field name="username">
+            <Input placeholder="Shadow of Username" />
+          </Field>
+          <Field name={[ 'path1', 'path2' ]}>
+            <Input placeholder="nest" />
+          </Field>
+
+          {list.map((_, index) => (
+            <Field key={index} name={`field_${index}`}>
+              <Input placeholder={`field_${index}`} />
+            </Field>
+          ))}
+        </React.Fragment>
+      </StateForm>
+    </div>
+  );
+};