Update docs (#701)

alibaba · Mar 4, 2020 · dd355b8 · dd355b8
1 parent a10efdf
commit dd355b8
Show file tree

Hide file tree

Showing 13 changed files with 100 additions and 67 deletions.
diff --git a/docs/zh-cn/schema-develop/form-extension.md b/docs/zh-cn/schema-develop/form-extension.md
@@ -170,8 +170,9 @@ ReactDOM.render(<App />, document.getElementById('root'))
 扩展 Schema Field 组件可以说是我们平时用的最多的扩展方案，主要是用于扩展具体字段 UI 组件，目前我们提供的扩展方式主要有：
 
 - SchemaForm 中传入 components 扩展(要求组件满足 value/onChange API)
-- registerFormField 全局注册扩展组件，要求传入组件名和具体组件，同时，如果针对满足 value/onChange 的组件，需要用 connect 包装
-- registerFormFields 全局批量注册扩展组件
+- SchemaForm 中传入 components 组件拥有isFieldComponent静态属性，可以拿到FieldProps
+- registerFormField 全局注册扩展组件，要求传入组件名和具体组件，同时，如果针对满足 value/onChange 的组件，需要用 connect 包装，不包装，需要手动同步状态(借助mutators)
+- registerFormFields 全局批量注册扩展组件，同时，如果针对满足 value/onChange 的组件，需要用 connect 包装，不包装，需要手动同步状态(借助mutators)
 
 **components 实例扩展**
 
@@ -190,11 +191,22 @@ const CustomComponent = props => {
   )
 }
 
+const CustomFieldComponent = props=>{
+  return (
+    <input
+      value={props.value || ''}
+      onChange={e => props.mutators.change(e.target.value)}
+    />
+  )
+}
+
+CustomFieldComponent.isFieldComponent = true
+
 const App = () => {
   const [value, setValue] = useState({})
   return (
     <SchemaForm
-      components={{ CustomComponent }}
+      components={{ CustomComponent,CustomFieldComponent }}
       onChange={values => {
         setValue(values)
       }}
@@ -205,6 +217,12 @@ const App = () => {
         title="Name"
         x-component="CustomComponent"
       />
+      <Field
+        type="string"
+        name="lastName"
+        title="Last Name"
+        x-component="CustomFieldComponent"
+      />
       {JSON.stringify(value, null, 2)}
     </SchemaForm>
   )

diff --git a/docs/zh-cn/schema-develop/form-layout.md b/docs/zh-cn/schema-develop/form-layout.md
@@ -81,7 +81,7 @@ const components = {
   Input,
   Radio: Radio.Group,
   Checkbox: Checkbox.Group,
-  CheckboxSigle: Checkbox,
+  CheckboxSingle: Checkbox,
   TextArea: Input.TextArea,
   NumberPicker,
   Select,
@@ -307,7 +307,7 @@ const App = () => {
             children:
               "{{text('确认签署',link('《xxxx协议》','https://taobao.com','_blank'))}}"
           }}
-          x-component="CheckboxSigle"
+          x-component="CheckboxSingle"
         />
         <FormButtonGroup offset={8} sticky>
           <Submit>提交</Submit><Reset>重置</Reset>

diff --git a/docs/zh-cn/schema-develop/form-schema.md b/docs/zh-cn/schema-develop/form-schema.md
@@ -88,10 +88,19 @@ Schema 开发，最核心的就是 Schema，只有我们理解了这套协议之
 | display              | 字段样式是否可见                       | `boolean`                                                         |
 | x-props              | 字段扩展属性                           | `{ [name: string]: any }`                                         |
 | x-index              | 字段顺序                               | `number`                                                          |
-| x-rules              | 字段校验规则，详细描述可以往后看       | [ValidatePatternRules](#validatepatternrules)                                            |
-| x-component          | 字段 UI 组件名称，大小写不敏感                           | `string`                                                          |
+| x-rules              | 字段校验规则，详细描述可以往后看       | [ValidatePatternRules](#validatepatternrules)                     |
+| x-component          | 字段 UI 组件名称，大小写不敏感         | `string`                                                          |
 | x-component-props    | 字段 UI 组件属性                       | `{}`                                                              |
 
+## x-props 扩展属性
+
+| 属性名                  | 描述                                              | 类型      |
+| ----------------------- | ------------------------------------------------- | --------- |
+| `x-props.addonAfter`    | FormItem 的尾随内容                               | ReactNode |
+| `x-props.itemStyle`     | FormItem 的 style 属性                            | Object    |
+| `x-props.itemClassName` | FormItem 的 className 属性                        | String    |
+| `x-props.triggerType`   | 配置校验触发类型 `"onChange" | "onBlur" | "none"` | String    |
+
 ## Form Schema 表达式
 
 Formily 针对 Form Schema 支持了表达式的能力，可以帮助我们在 JSON 字符串中注入一些逻辑能力
@@ -147,7 +156,7 @@ Formily 针对 Form Schema 支持了表达式的能力，可以帮助我们在 J
 
 - x-linkages 是一个数组结构，代表借助它可以实现 1 对多联动
 - 每个数组项代表一个联动命令，需要指定联动类型 type 字段，也需要指定被联动的目标字段(target)
-- target是一个FormPathPattern匹配表达式，在这里我们可以使用FormPath的各种匹配语法
+- target 是一个 FormPathPattern 匹配表达式，在这里我们可以使用 FormPath 的各种匹配语法
 - 需要指定每个联动发生的条件，由一个表达式来驱动
 
 ### 表达式说明
@@ -219,8 +228,7 @@ Formily 针对 Form Schema 支持了表达式的能力，可以帮助我们在 J
 
 ### 扩展联动协议
 
-想要了解更多高级内容，可以详细查看API手册
-
+想要了解更多高级内容，可以详细查看 API 手册
 
 ## ValidatePatternRules