chore: merge

docs/API/Field_React.md

@@ -0,0 +1,175 @@
+# Field
+
+## 介绍
+Rs UForm的核心组件，用于描述表单字段
+
+## 依赖
+```javascript
+import {Field} from '@uform/react'
+```
+
+## API
+| 属性名称 | 属性描述 | 属性类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 字段类型 | Object |  |
+| name | 字段名称 | Object | {} |
+| default | 默认值 | any |  |
+| enum | 枚举值，配置该值在默认情况下会显示Select形态，指定x-component会显示对应的组件形态 | Array<any> | [] |
+| maxItems | 最大条目数 | Number |  |
+| minItems | 最小条目数 | Number |  |
+| required | 字段是否必填 | Boolean | false |
+| x-props | 字段UI组件属性 | Object | {} |
+| x-rules | 字段校验规则 | Object | Array<String | Object | Function> | String | Function |  |
+| x-component | 字段UI组件 | Object | {type:"object",properties:{}} |
+| x-index | 字段索引顺序 | Number |  |
+| x-render | 字段渲染函数 | Function(fieldProps : FieldRenderProps){} |  |
+| x-effect | 副作用事件绑定对象 | Function(dispatch : Function) : {<br />    [eventName](...arguemtns)<br />} |  |
+| x-props.editable | 字段是否可编辑 | Boolean | true |
+
+
+## x-rules详解
+校验规则，在uform中有几种校验形态：
+* 字符串正则校验，在x-rules中可以通过传字符串或者字符串数组来描述，下面是正则匹配模式
+
+  * url 匹配url路径
+
+  * email 匹配邮箱
+
+  * ipv6 匹配ipv6格式
+
+  * ipv4 匹配ipv4格式
+
+  * number 匹配number格式
+
+  * integer 匹配整型格式
+
+  * qq 匹配qq格式
+
+  * phone 匹配手机号码
+
+  * idcard 匹配大陆身份证号码
+
+  * taodomain 匹配淘系域名
+
+  * money 匹配货币格式
+
+  * zh 匹配中文字符串
+
+  * date 匹配日期格式
+
+  * zip 匹配邮编
+
+* 自定义正则匹配，在x-rules中必须以对象或者数组对象的形式来描述，比如`{pattern:/\d+/,message:""该字段必须为数字}`
+
+* 必填型校验，在x-rules中必须以对象或者数组对象的形式来描述，比如`{required:true,message:"该字段必填"}`,message是选填字段，因为默认错误提示文案里已经有了
+
+* 自定义校验，在x-rules中可以通过传函数来描述，下面是该函数的类型描述
+
+```typescript
+type RuleCallback(
+  value : any,
+  rule : Object,
+  values : Object,
+  name : String) : String | Promise
+
+该回调函数直接return错误文案字符串代表响应错误，如果返回Promise对象，
+代表是异步校验，resolve错误文案的时候代表错误响应，resolve为空的时候代表正确响应
+```
+
+
+## x-render详解
+上面API List中可以看到x-render函数会接收FieldRenderProps类型的参数，下面是它的具体描述
+
+```typescript
+type FieldRenderProps {
+   name                : String,//字段数据路径
+   path                : Array<String>,//字段数组数据路径
+   value               : any,//字段值
+   errors              : Array<String>,//字段错误消息集合
+   editable            : Boolean | Function,//字段是否可编辑
+   locale              : Object,//国际化文案对象
+   loading             : Boolean,//是否处于加载态
+   schemaPath          : Array<String>,//schema path,考虑到有些schema其实是不占数据路径的，所以这个路径是真实路径
+   getSchema(path) : Object, //根据路径获取schema
+   renderField(childKey : String,reactKey : String | Number) : ReactElement,//根据childKey渲染当前字段的子字段
+   renderComponent(props : Object) : ReactElement,//渲染当前字段的组件，对于x-render来说，可以借助它快速实现渲染包装功能
+   getOrderProperties() : Array<Object>,//根据properties里字段的x-index值求出排序后的properties
+   mutators            : Mutators,//数据操作对象
+   schema              : Object   
+}
+
+type Mutators {
+   change(value : any),//改变当前字段值
+   dispatch(name : String,payload : any),//触发effect事件
+   errors(errors : String | Array<String>,[...formatValue : String | Number]),//设置当前字段的错误消息
+   push(value : any),//对当前字段的值做push操作
+   pop(),//对当前字段的值做pop操作
+   insert(index : Number,value : any),//对当前字段的值做insert操作
+   remove(name : any),//对当前字段的值做remove操作
+   unshift(value : any),//对当前字段值做unshift操作
+   shift(),//对当前字段值做shift操作
+   move(fromIndex : Number, toIndex : Number)//对当前字段值做move操作
+}
+```
+
+
+## x-effect详解
+x-effect属于一个非常高级的API，它是为了解决在某些场景，我们的数据联动不是基于字段的onChange事件来做的联动或者依赖onChange事件的其他参数来做的联动，它的解决方案是将dispatch函数给x-effect函数，然后让x-effect函数返回对应的事件处理器，然后再传递给具体的组件，比如：
+
+```javascript
+import {declareFormActions} from '@uform/react'
+
+const actions = declareFormActions()
+
+<SchemaForm effects={($)=>{
+   $('selectOptions','aa')
+    .subscribe(({payload:options})=>{
+      actions.setFieldState('bb',state=>{
+         state.enum = options.extra
+      })
+    })
+ }}>
+    <Field 
+      type="string" 
+      name="aa"
+      enum={[
+        {label:"111",value:"111",extra:["111","222","333"]},
+        {label:"222",value:"222",extra:["111","222","333"]},
+        {label:"333",value:"333",extra:["111","222","333"]}
+      ]}
+      x-effect={dispatch=>{
+        return {
+          onChange(value,options){
+             dispatch("selectOptions",options)
+          }
+        }
+      }}
+    />
+    <Field type="string" name="bb" enum={[]}/>
+</SchemaForm>
+
+这个例子很简单的实现了aa字段的下拉列表中的额外参数赋值到bb的枚举值中，实现了非常规onChange的值联动
+```
+
+## 用例
+```javascript
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+import SchemaForm, {
+  registerFormField,
+  Field,  
+  connect
+} from '@uform/react'
+
+registerFormField(
+  'string',
+  connect()(props => <input {...props} value={props.value || ''} />)
+)
+
+ReactDOM.render(
+   <SchemaForm defaultValue={{aa:'123'}} onSubmit={values=>console.log(values)}>
+     <Field name="aa" type="string"/>
+     <button htmlType="submit">提交</button>
+   </SchemaForm>
+,document.getElementById('root'))
+```

docs/API/FormBlock.md

@@ -0,0 +1,42 @@
+# FormBlock
+
+## 介绍
+
+实现在卡片内部的区块化分割
+
+## 依赖
+
+```javascript
+import { FormBlock } from '@uform/next(antd)'
+```
+
+## API
+
+继承 next-card / [ant-card](https://ant.design/components/card-cn/)
+
+## 用例
+
+```javascript
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { SchemaForm, Field, FormCard, FormBlock } from '@uform/next(antd)'
+
+ReactDOM.render(
+  <SchemaForm>
+    <FormCard title="基本信息">
+      ​ <Field name="aaa" type="string" title="字段1" />
+      ​ <Field name="bbb" type="number" title="字段2" />
+      ​ <Field name="ccc" type="date" title="字段3" />​
+      <FormBlock title="区块">
+        ​ <Field name="ddd2" type="string" title="字段5" />​
+        <Field name="eee2" type="string" title="字段6" />​
+      </FormBlock>
+    </FormCard>
+    <FormCard title="详细信息">
+      ​ <Field name="ddd" type="number" />
+      ​ <Field name="eee" type="date" />
+    </FormCard>
+  </SchemaForm>,
+  document.getElementById('root')
+)
+```

docs/API/FormButtonGroup.md

@@ -0,0 +1,45 @@
+# FormButtonGroup
+
+## 介绍
+
+用于组织表单按钮与整体表单的布局方式
+
+## 依赖
+
+```javascript
+import { FormButtonGroup } from '@uform/next(antd)'
+```
+
+## API
+
+| 属性名称  | 属性描述             | 属性类型 | 默认值 |
+| --------- | -------------------- | -------- | ------ |
+| align     | 按钮内容的定位       | string   |        |
+| sticky    | 是否洗底             | boolean  | false  |
+| style     | 大容器样式           | object   | {}     |
+| itemStyle | 按钮组容器样式       | object   | {}     |
+| offset    | 按钮组容器左偏移距离 | number   |        |
+| span      | 按钮组容器宽度       | number   |        |
+
+## 用例
+
+```javascript
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { SchemaForm, FormButtonGroup } from '@uform/next(antd)'
+
+ReactDOM.render(
+  <SchemaForm>
+    <FormButtonGroup offset={7} sticky align="center">
+      <Button
+        onClick={() => {
+          alert('自定义按钮')
+        }}
+      >
+        上传文件
+      </Button>
+    </FormButtonGroup>
+  </SchemaForm>,
+  document.getElementById('root')
+)``
+```

docs/API/FormCard.md

@@ -0,0 +1,37 @@
+# FormCard
+
+## 介绍
+
+实现卡片式分离表单模块
+
+## 依赖
+
+```javascript
+import { FormCard } from '@uform/next(antd)'
+```
+
+## API
+
+继承 next-card / [ant-card](https://ant.design/components/card-cn/)
+
+## 用例
+
+```javascript
+import React from 'react'
+import { SchemaForm, Field, FormCard } from '@uform/next(antd)'
+
+ReactDOM.render(
+  <SchemaForm>
+    <FormCard title="基本信息">
+      ​ <Field name="aaa" type="string" title="字段1" />
+      ​ <Field name="bbb" type="number" title="字段2" />
+      ​ <Field name="ccc" type="date" title="字段3" />​
+    </FormCard>
+    <FormCard title="详细信息">
+      ​ <Field name="ddd" type="number" />
+      ​ <Field name="eee" type="date" />
+    </FormCard>
+  </SchemaForm>,
+  document.getElementById('root')
+)
+```

docs/API/FormConsumer.md

@@ -0,0 +1,57 @@
+# FormConsumer
+
+## 介绍
+用于表单的跨组件通讯提交重置状态同步等操作，它主要与FormProvider一起使用
+
+## 依赖
+```javascript
+import {FormConsumer} from '@uform/react'
+```
+
+
+## API
+
+```typescript
+<FormConsumer>
+    {({
+      status  : String<"changed" | "resetd" | "initialize" | "submitting" | "submitted">, //表单活动状态
+      state   : FormState,//表单状态模型
+      schema  : Object,//表单schema
+      submit(),//表单提交
+      reset(),//表单重置
+      dispatch(name : String,payload : any)//触发effect自定义事件 
+    })=>ReactElement)
+</FormConsumer>
+```
+
+
+## 用例
+
+```jsx
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+import SchemaForm, {
+  registerFormField,
+  Field,  
+  connect,
+  FormProvider,
+  FormConsumer
+} from '@uform/react'
+
+registerFormField(
+  'string',
+  connect()(props => <input {...props} value={props.value || ''} />)
+)
+
+ReactDOM.render(
+   <FormProvider>
+       <SchemaForm defaultValue={{aa:'123'}} onSubmit={values=>console.log(values)}>
+         <Field name="aa" type="string"/>
+         <button htmlType="submit">内部提交</button>
+       </SchemaForm>
+       <FormConsumer>
+         {({submit})=>(<button onClick={submit}>外部提交</button>)}
+       </FormConsumer>
+   </FormProvider>
+,document.getElementById('root'))
+```