ChenQiao-happy · ChenQiao-happy · Dec 5, 2019 · Oct 24, 2019 · Oct 24, 2019 · Oct 25, 2019
diff --git a/.eslintrc b/.eslintrc
@@ -12,5 +12,5 @@
     "ecmaFeatures": {
       "jsx": true
     }
-  }
+  },
 }
diff --git a/README.md b/README.md
@@ -39,9 +39,42 @@ Use Fusion Design：
 npm install --save @alifd/next @uform/next
 ```
 
+Use uform react render engine pacakge:
+
+```bash
+npm install --save @uform/react-schema-renderer
+```
+
+Use uform react package:
+
+```bash
+npm install --save @uform/react
+```
+
+Use uform core package:
+
+```bash
+npm install --save @uform/core
+```
+
+## Architecture
+
+![](https://img.alicdn.com/tfs/TB1i9nmolv0gK0jSZKbXXbK2FXa-1882-1144.png)
+
+
+## WebSite
+
+https://uformjs.org (0.x)
+
+https://uform-next.netlify.com (1.x)
+
 ## Documents
 
-https://uformjs.org
+- [@uform/antd](./packages/antd/README.md)
+- [@uform/next](./packages/next/README.md)
+- [@uform/react-schema-renderer](./packages/react-schema-renderer/README.md)
+- [@uform/react](./packages/react/README.md)
+- [@uform/core](./packages/core/README.md)
 
 
 ## Demo
@@ -72,17 +105,6 @@ Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com
 
 Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/uform#sponsor)]
 
-<a href="https://opencollective.com/uform/sponsor/0/website" target="_blank"><img src="https://opencollective.com/uform/sponsor/0/avatar.svg"></a>
-<a href="https://opencollective.com/uform/sponsor/1/website" target="_blank"><img src="https://opencollective.com/uform/sponsor/1/avatar.svg"></a>
-<a href="https://opencollective.com/uform/sponsor/2/website" target="_blank"><img src="https://opencollective.com/uform/sponsor/2/avatar.svg"></a>
-<a href="https://opencollective.com/uform/sponsor/3/website" target="_blank"><img src="https://opencollective.com/uform/sponsor/3/avatar.svg"></a>
-<a href="https://opencollective.com/uform/sponsor/4/website" target="_blank"><img src="https://opencollective.com/uform/sponsor/4/avatar.svg"></a>
-<a href="https://opencollective.com/uform/sponsor/5/website" target="_blank"><img src="https://opencollective.com/uform/sponsor/5/avatar.svg"></a>
-<a href="https://opencollective.com/uform/sponsor/6/website" target="_blank"><img src="https://opencollective.com/uform/sponsor/6/avatar.svg"></a>
-<a href="https://opencollective.com/uform/sponsor/7/website" target="_blank"><img src="https://opencollective.com/uform/sponsor/7/avatar.svg"></a>
-<a href="https://opencollective.com/uform/sponsor/8/website" target="_blank"><img src="https://opencollective.com/uform/sponsor/8/avatar.svg"></a>
-<a href="https://opencollective.com/uform/sponsor/9/website" target="_blank"><img src="https://opencollective.com/uform/sponsor/9/avatar.svg"></a>
-
 
 
 ## LICENSE

diff --git a/README.zh-cn.md b/README.zh-cn.md
@@ -41,9 +41,42 @@ npm install --save antd @uform/antd
 npm install --save @alifd/next @uform/next
 ```
 
+使用UForm React渲染引擎包:
+
+```bash
+npm install --save @uform/react-schema-renderer
+```
+
+使用 UForm React包:
+
+```bash
+npm install --save @uform/react
+```
+
+使用 UForm 核心包:
+
+```bash
+npm install --save @uform/core
+```
+
+## 官网
+
+https://uformjs.org (0.x)
+
+https://uform-next.netlify.com (1.x)
+
+## 架构
+
+![](https://img.alicdn.com/tfs/TB1i9nmolv0gK0jSZKbXXbK2FXa-1882-1144.png)
+
 ## 文档
 
-https://uformjs.org
+- [@uform/antd](./packages/antd/README.zh-cn.md)
+- [@uform/next](./packages/next/README.zh-cn.md)
+- [@uform/react-schema-renderer](./packages/react-schema-renderer/README.zh-cn.md)
+- [@uform/react](./packages/react/README.zh-cn.md)
+- [@uform/core](./packages/core/README.zh-cn.md)
+
 
 ## 入门案例
 
@@ -73,19 +106,6 @@ Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com
 
 Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/uform#sponsor)]
 
-<a href="https://opencollective.com/uform/sponsor/0/website" target="_blank"><img src="https://opencollective.com/uform/sponsor/0/avatar.svg"></a>
-<a href="https://opencollective.com/uform/sponsor/1/website" target="_blank"><img src="https://opencollective.com/uform/sponsor/1/avatar.svg"></a>
-<a href="https://opencollective.com/uform/sponsor/2/website" target="_blank"><img src="https://opencollective.com/uform/sponsor/2/avatar.svg"></a>
-<a href="https://opencollective.com/uform/sponsor/3/website" target="_blank"><img src="https://opencollective.com/uform/sponsor/3/avatar.svg"></a>
-<a href="https://opencollective.com/uform/sponsor/4/website" target="_blank"><img src="https://opencollective.com/uform/sponsor/4/avatar.svg"></a>
-<a href="https://opencollective.com/uform/sponsor/5/website" target="_blank"><img src="https://opencollective.com/uform/sponsor/5/avatar.svg"></a>
-<a href="https://opencollective.com/uform/sponsor/6/website" target="_blank"><img src="https://opencollective.com/uform/sponsor/6/avatar.svg"></a>
-<a href="https://opencollective.com/uform/sponsor/7/website" target="_blank"><img src="https://opencollective.com/uform/sponsor/7/avatar.svg"></a>
-<a href="https://opencollective.com/uform/sponsor/8/website" target="_blank"><img src="https://opencollective.com/uform/sponsor/8/avatar.svg"></a>
-<a href="https://opencollective.com/uform/sponsor/9/website" target="_blank"><img src="https://opencollective.com/uform/sponsor/9/avatar.svg"></a>
-
-
-
 
 ## LICENSE
 

diff --git a/docs/Examples/antd/Deconstruction.md b/docs/Examples/antd/Deconstruction.md
@@ -224,7 +224,7 @@ const App = () => (
   <Printer>
     <SchemaForm
       effects={($, { setFieldState }) => {
-        $('onFieldChange', 'wrapper.relation').subscribe(({ value }) => {
+        $('onFieldValueChange', 'wrapper.relation').subscribe(({ value }) => {
           setFieldState(
             FormPath.match(
               'wrapper.[[{aa:{bb:{cc:destructor1,dd:\\[destructor2,destructor3\\],ee}}}]]'

diff --git a/docs/Examples/antd/Layout.md b/docs/Examples/antd/Layout.md
@@ -164,7 +164,7 @@ import Printer from '@uform/printer'
 import 'antd/dist/antd.css'
 
 const App = () => {
-  const [state, setState] = useState({ editable: true })  
+  const [state, setState] = useState({ editable: true })
   return (
     <Printer>
       <SchemaForm
@@ -203,16 +203,16 @@ const App = () => {
             <Field name="ddd2" type="string" title="字段5" />
             <Field name="eee2" type="string" title="字段6" />
           </FormBlock>
-        </FormCard>
-        <FormButtonGroup offset={8} sticky>
+        </FormCard>
+        <FormButtonGroup offset={8} sticky>
            <Submit>提交</Submit>
-           <Button
-             type="primary"
-             onClick={() => setState({ editable: !state.editable })}
-           >
+          <Button
+            type="primary"
+            onClick={() => setState({ editable: !state.editable })}
+          >
             {state.editable ? '详情' : '编辑'}
-           </Button>
-           <Reset>重置</Reset>
+          </Button>
+          <Reset>重置</Reset>
         </FormButtonGroup>
       </SchemaForm>
     </Printer>
@@ -241,6 +241,7 @@ import {
   FormPath,
   FormBlock,
   FormLayout,
+  FormTextBox,
   createFormActions
 } from '@uform/antd'
 import { Button } from 'antd'
@@ -268,3 +269,94 @@ const App = () => (
 )
 ReactDOM.render(<App />, document.getElementById('root'))
 ```
+
+## 分步表单
+
+```jsx
+import {
+  SchemaForm,
+  Field,
+  FormButtonGroup,
+  Submit,
+  FormEffectHooks,
+  createFormActions,
+  FormGridRow,
+  FormItemGrid,
+  FormGridCol,
+  FormPath,
+  FormLayout,
+  FormBlock,
+  FormCard,
+  FormTextBox,
+  FormStep
+} from '@uform/antd'
+import { Button } from 'antd'
+import 'antd/dist/antd.css'
+
+const { onFormInit$ } = FormEffectHooks
+
+const actions = createFormActions()
+
+let cache = {}
+
+export default () => (
+  <SchemaForm
+    onSubmit={values => {
+      console.log('提交')
+      console.log(values)
+    }}
+    actions={actions}
+    labelCol={{ span: 8 }}
+    wrapperCol={{ span: 6 }}
+    validateFirst
+    effects={({ setFieldState, getFormGraph }) => {
+      onFormInit$().subscribe(() => {
+        setFieldState('col1', state => {
+          state.visible = false
+        })
+      })
+    }}
+  >
+    <FormStep
+      style={{ marginBottom: 20 }}
+      dataSource={[
+        { title: '基本信息', name: 'step-1' },
+        { title: '财务信息', name: 'step-2' },
+        { title: '条款信息', name: 'step-3' }
+      ]}
+    />
+    <FormCard name="step-1" title="基本信息">
+      <Field name="a1" required title="A1" type="string" />
+    </FormCard>
+    <FormCard name="step-2" title="财务信息">
+      <Field name="a2" required title="A2" type="string" />
+    </FormCard>
+    <FormCard name="step-3" title="条款信息">
+      <Field name="a3" required title="A3" type="string" />
+    </FormCard>
+    <FormButtonGroup>
+      <Submit>提交</Submit>
+      <Button onClick={() => actions.dispatch(FormStep.ON_FORM_STEP_PREVIOUS)}>
+        上一步
+      </Button>
+      <Button onClick={() => actions.dispatch(FormStep.ON_FORM_STEP_NEXT)}>
+        下一步
+      </Button>
+      <Button
+        onClick={() => {
+          cache = actions.getFormGraph()
+        }}
+      >
+        存储当前状态
+      </Button>
+      <Button
+        onClick={() => {
+          actions.setFormGraph(cache)
+        }}
+      >
+        回滚状态
+      </Button>
+    </FormButtonGroup>
+  </SchemaForm>
+)
+```
diff --git a/docs/Examples/antd/List.md b/docs/Examples/antd/List.md
@@ -3,10 +3,11 @@
 > 数组场景，区块型数组，能解决大量字段的聚合输入，但是对于数据的对比化展示，区分
 > 度不够明显
 
-下面对于List场景我们主要封装了
-- Array类型组件
-- Table类型组件
-- Card类型组件
+下面对于 List 场景我们主要封装了
+
+- Array 类型组件
+- Table 类型组件
+- Card 类型组件
 
 这些组件你都可以对其做简单的定制来适应你当前的业务需求，比如
 
@@ -66,8 +67,8 @@ const App = () => {
           maxItems={3}
           type="array"
           x-props={{
-            renderAddition:'这是定制的添加文案',
-            renderRemove:'这是定制的删除文案'
+            renderAddition: '这是定制的添加文案',
+            renderRemove: '这是定制的删除文案'
           }}
         >
           <Field type="object">
@@ -82,11 +83,7 @@ const App = () => {
               </FormLayout>
             </FormBlock>
             <FormBlock title="嵌套数组">
-              <Field
-                name="array2"
-                maxItems={3}
-                type="array"
-              >
+              <Field name="array2" maxItems={3} type="array">
                 <Field type="object">
                   <FormLayout labelCol={9} wrapperCol={6}>
                     <Field name="aa" type="string" title="字段1" />
@@ -149,11 +146,23 @@ const App = () => (
         maxItems={3}
         type="array"
         x-component="table"
-         x-props={{
-          renderExtraOperations(){
-            return <div>Hello worldasdasdasdasd</div>
+        x-props={{
+          scroll: { x: '200%' },
+          renderExtraOperations() {
+            return (
+              <div
+                style={{
+                  whiteSpace: 'nowrap',
+                  textOverflow: 'ellipsis',
+                  overflow: 'hidden',
+                  lineHeight: '32px'
+                }}
+              >
+                Hello worldasdasdasdasd
+              </div>
+            )
           },
-          operationsWidth:400
+          operationsWidth: 400
         }}
       >
         <Field type="object">
@@ -169,7 +178,7 @@ const App = () => (
           <Field name="dd" type="string" title="字段5" />
           <Field name="ee" type="string" title="字段6" />
           <Field name="ff" type="string" title="字段7" />
-          <Field name="gg" type="daterange" title="字段8" width={400}  />
+          <Field name="gg" type="daterange" title="字段8" width={400} />
         </Field>
       </Field>
     </SchemaForm>
@@ -207,12 +216,17 @@ import 'antd/dist/antd.css'
 const App = () => (
   <Printer>
     <SchemaForm>
-      <Field name="array" maxItems={3} type="array" x-component="cards" 
-          x-props={{
-            title:'这是卡片标题',
-            renderAddition:'这是定制的添加文案',
-            renderRemove:'这是定制的删除文案'
-          }}>
+      <Field
+        name="array"
+        maxItems={3}
+        type="array"
+        x-component="cards"
+        x-props={{
+          title: '这是卡片标题',
+          renderAddition: '这是定制的添加文案',
+          renderRemove: '这是定制的删除文案'
+        }}
+      >
         <Field type="object">
           <FormLayout labelCol={6} wrapperCol={8}>
             <Field
@@ -227,9 +241,15 @@ const App = () => (
             <Field name="dd" type="string" title="字段5" />
             <Field name="ee" type="string" title="字段6" />
             <Field name="ff" type="string" title="字段7" />
-            <Field name="gg" type="daterange" title="字段8"/>
+            <Field name="gg" type="daterange" title="字段8" />
           </FormLayout>
-          <Field name="array" maxItems={3} type="array" x-component="cards" x-props={{title:'这是卡片标题'}}>
+          <Field
+            name="array"
+            maxItems={3}
+            type="array"
+            x-component="cards"
+            x-props={{ title: '这是卡片标题' }}
+          >
             <Field type="object">
               <FormLayout labelCol={6} wrapperCol={8}>
                 <Field
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,5 +12,5 @@ @@
         "ecmaFeatures": {
           "jsx": true
         }
-      }
+      },
     }