feat: add recursive-render doc and fix some bugs (#736)

alibaba · Mar 21, 2020 · d7199d8 · d7199d8
1 parent fb0cd9d
commit d7199d8
Show file tree

Hide file tree

Showing 20 changed files with 757 additions and 94 deletions.
diff --git a/docs/zh-cn/jsx-develop/quick-start.md b/docs/zh-cn/jsx-develop/quick-start.md
@@ -67,7 +67,7 @@ const App = () => {
         console.log(values)
       }}
     >
-      <FormItem name="name" label="Name" component={Input} />
+      <FormItem name="name" label="Name" placeholder="Input Name" component={Input} />
       <FormButtonGroup>
         <Submit>查询</Submit>
         <Reset>重置</Reset>

diff --git a/docs/zh-cn/schema-develop/complex-linkage.md b/docs/zh-cn/schema-develop/complex-linkage.md
@@ -969,3 +969,96 @@ ReactDOM.render(<App />, document.getElementById('root'))
   - `prevPath.[+2].fieldName`代表下下一行字段
   - `prevPath.[-2].fieldName`代表上上一行字段
   - 一次可以继续往下递增或者递减
+
+## 外部联动
+
+```jsx
+import React, { useEffect } from 'react'
+import ReactDOM from 'react-dom'
+import {
+  SchemaForm,
+  SchemaMarkupField as Field,
+  FormButtonGroup,
+  createFormActions,
+  FormEffectHooks,
+  FormSpy,
+  Submit,
+  Reset
+} from '@formily/antd' // 或者 @formily/next
+import { Input, Select } from '@formily/antd-components'
+import { Button } from 'antd'
+import Printer from '@formily/printer'
+import 'antd/dist/antd.css'
+
+const { onFieldValueChange$ } = FormEffectHooks
+
+const useOneToManyEffects = () => {
+  const { setFieldState } = createFormActions()
+  onFieldValueChange$('aa').subscribe(({ value }) => {
+    setFieldState('*(bb,cc,dd)', state => {
+      state.visible = value
+    })
+  })
+}
+
+const actions = createFormActions()
+
+const App = () => {
+  return (
+    <Printer>
+      <SchemaForm
+        components={{ Input, Select }}
+        actions={actions}
+        effects={() => {
+          useOneToManyEffects()
+        }}
+      >
+        <Field
+          type="string"
+          enum={[
+            { label: 'visible', value: true },
+            { label: 'hidden', value: false }
+          ]}
+          default={false}
+          name="aa"
+          title="AA"
+          x-component="Select"
+        />
+        <Field type="string" name="bb" title="BB" x-component="Input" />
+        <Field type="string" name="cc" title="CC" x-component="Input" />
+        <Field type="string" name="dd" title="DD" x-component="Input" />
+        <FormButtonGroup>
+          <FormSpy selector={[['onFieldValueChange', 'aa']]}>
+            {({ state }) => {
+              return (
+                state.value && (
+                  <>
+                    <Submit />
+                    <Button
+                      onClick={() => {
+                        actions.setFieldState('bb', state => {
+                          state.value = '' + Math.random()
+                        })
+                      }}
+                    >
+                      修改BB的值
+                    </Button>
+                  </>
+                )
+              )
+            }}
+          </FormSpy>
+        </FormButtonGroup>
+      </SchemaForm>
+    </Printer>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
+**案例解析**
+
+- 主联动逻辑是一对多联动
+- 借助FormSpy可以针对具体字段做监听，所以可以很方便的做UI联动状态同步
+- 借助FormActions可以方便的在外部操作Form内部状态
diff --git a/docs/zh-cn/schema-develop/manage-business.md b/docs/zh-cn/schema-develop/manage-business.md
@@ -48,7 +48,7 @@ import React from 'react'
 import { SchemaForm } from '@formily/antd'
 import { BusinessCard } from './fields/BusinessCard'
 
-export const BusinessCard = () => {
+export const App = () => {
   return (
     <SchemaForm>
       <BusinessCard />
@@ -133,7 +133,7 @@ import { SchemaForm } from '@formily/antd'
 import { createEffects } from './effects'
 import { BusinessCard } from './fields/BusinessCard'
 
-export const BusinessCard = () => {
+export const App = () => {
   return (
     <SchemaForm effects={createEffects()}>
       <BusinessCard />
@@ -181,7 +181,7 @@ import { createEffects } from './effects'
 import { BusinessCard } from './fields/BusinessCard'
 import { useInitialValues } from './hooks/useInitialValues'
 
-export const BusinessCard = () => {
+export const App = () => {
   const initialValues = useInitialValues()
   return (
     <SchemaForm initialValues={initialValues} effects={createEffects()}>
@@ -193,6 +193,8 @@ export const BusinessCard = () => {
 
 #### 异步下拉选项
 
+①：定义EffectHook
+
 ```tsx
 // src/effects/useAsyncDataSource.ts
 import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd'
@@ -220,6 +222,8 @@ const useAsyncDataSource = (name, service) => {
 }
 ```
 
+②：引入EffectHook
+
 ```tsx
 // src/effects/index.ts
 import { useBusinessEffects } from './useBusinessEffects'
@@ -243,6 +247,8 @@ export const createEffects = context => () => {
 
 #### 可搜索的异步下拉选项
 
+①：定义EffectHook
+
 ```tsx
 // src/effects/useAsyncSearchDataSource.ts
 import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd'
@@ -275,6 +281,8 @@ const useSearchDataSource = (name, service) => {
 }
 ```
 
+②：引入EffectHook
+
 ```tsx
 // src/effects/index.ts
 import { useBusinessEffects } from './useBusinessEffects'
@@ -347,7 +355,7 @@ import { BusinessCard } from './fields/BusinessCard'
 import { useInitialValues } from './hooks/useInitialValues'
 import { MyComponent } from './extentions/MyComponent'
 
-export const BusinessCard = () => {
+export const App = () => {
   const initialValues = useInitialValues()
   return (
     <SchemaForm 
@@ -455,7 +463,7 @@ import { useInitialValues } from './hooks/useInitialValues'
 import { MyComponent } from './extentions/MyComponent'
 import zhCN from './local/zh-cn'
 
-export const BusinessCard = () => {
+export const App = () => {
   const initialValues = useInitialValues()
   return (
     <SchemaForm