feat(next): support form drawer get context from fusion (#1511)

* docs(next): modify form dialog context docs * feat(next): support form drawer get context from fusion
alibaba · May 26, 2021 · 7fce306 · 7fce306
1 parent 09ec8e5
commit 7fce306
Show file tree

Hide file tree

Showing 3 changed files with 227 additions and 75 deletions.
diff --git a/packages/next/docs/components/FormDialog.md b/packages/next/docs/components/FormDialog.md
@@ -8,7 +8,7 @@
 import React from 'react'
 import { FormDialog, FormItem, Input, FormLayout } from '@formily/next'
 import { createSchemaField } from '@formily/react'
-import { Button, ConfigProvider } from '@alifd/next'
+import { Button } from '@alifd/next'
 
 const SchemaField = createSchemaField({
   components: {
@@ -19,72 +19,57 @@ const SchemaField = createSchemaField({
 
 export default () => {
   return (
-    <ConfigProvider
-      locale={{
-        Dialog: {
-          ok: 'OK',
-          cancel: 'Cancel',
-        },
-      }}
-      defaultPropsConfig={{
-        Dialog: {
-          isFullScreen: true,
-          footerActions: ['cancel', 'ok'],
-        },
+    <Button
+      onClick={() => {
+        FormDialog('弹窗表单', () => {
+          return (
+            <FormLayout labelCol={6} wrapperCol={14}>
+              <SchemaField>
+                <SchemaField.String
+                  name="aaa"
+                  required
+                  title="输入框1"
+                  x-decorator="FormItem"
+                  x-component="Input"
+                />
+                <SchemaField.String
+                  name="bbb"
+                  required
+                  title="输入框2"
+                  x-decorator="FormItem"
+                  x-component="Input"
+                />
+                <SchemaField.String
+                  name="ccc"
+                  required
+                  title="输入框3"
+                  x-decorator="FormItem"
+                  x-component="Input"
+                />
+                <SchemaField.String
+                  name="ddd"
+                  required
+                  title="输入框4"
+                  x-decorator="FormItem"
+                  x-component="Input"
+                />
+              </SchemaField>
+              <FormDialog.Footer>
+                <span style={{ marginLeft: 4 }}>扩展文案</span>
+              </FormDialog.Footer>
+            </FormLayout>
+          )
+        })
+          .open({
+            initialValues: {
+              aaa: '123',
+            },
+          })
+          .then(console.log)
       }}
     >
-      <Button
-        onClick={() => {
-          FormDialog('弹窗表单', () => {
-            return (
-              <FormLayout labelCol={6} wrapperCol={14}>
-                <SchemaField>
-                  <SchemaField.String
-                    name="aaa"
-                    required
-                    title="输入框1"
-                    x-decorator="FormItem"
-                    x-component="Input"
-                  />
-                  <SchemaField.String
-                    name="bbb"
-                    required
-                    title="输入框2"
-                    x-decorator="FormItem"
-                    x-component="Input"
-                  />
-                  <SchemaField.String
-                    name="ccc"
-                    required
-                    title="输入框3"
-                    x-decorator="FormItem"
-                    x-component="Input"
-                  />
-                  <SchemaField.String
-                    name="ddd"
-                    required
-                    title="输入框4"
-                    x-decorator="FormItem"
-                    x-component="Input"
-                  />
-                </SchemaField>
-                <FormDialog.Footer>
-                  <span style={{ marginLeft: 4 }}>扩展文案</span>
-                </FormDialog.Footer>
-              </FormLayout>
-            )
-          })
-            .open({
-              initialValues: {
-                aaa: '123',
-              },
-            })
-            .then(console.log)
-        }}
-      >
-        点我打开表单
-      </Button>
-    </ConfigProvider>
+      点我打开表单
+    </Button>
   )
 }
 ```
@@ -229,6 +214,84 @@ export default () => {
 }
 ```
 
+## 使用 Fusion Context
+
+```tsx
+import React from 'react'
+import { FormDialog, FormItem, Input, FormLayout } from '@formily/next'
+import { Field } from '@formily/react'
+import { Button, ConfigProvider } from '@alifd/next'
+
+export default () => {
+  return (
+    <ConfigProvider
+      locale={{
+        Dialog: {
+          ok: 'OK',
+          cancel: 'Cancel',
+        },
+      }}
+      defaultPropsConfig={{
+        Dialog: {
+          isFullScreen: true,
+          footerActions: ['cancel', 'ok'],
+        },
+      }}
+    >
+      <Button
+        onClick={() => {
+          FormDialog('弹窗表单', () => {
+            return (
+              <FormLayout labelCol={6} wrapperCol={14}>
+                <Field
+                  name="aaa"
+                  required
+                  title="输入框1"
+                  decorator={[FormItem]}
+                  component={[Input]}
+                />
+                <Field
+                  name="bbb"
+                  required
+                  title="输入框2"
+                  decorator={[FormItem]}
+                  component={[Input]}
+                />
+                <Field
+                  name="ccc"
+                  required
+                  title="输入框3"
+                  decorator={[FormItem]}
+                  component={[Input]}
+                />
+                <Field
+                  name="ddd"
+                  required
+                  title="输入框4"
+                  decorator={[FormItem]}
+                  component={[Input]}
+                />
+                <FormDialog.Footer>
+                  <span style={{ marginLeft: 4 }}>扩展文案</span>
+                </FormDialog.Footer>
+              </FormLayout>
+            )
+          })
+            .open({
+              initialValues: {
+                aaa: '123',
+              },
+            })
+            .then(console.log)
+        }}
+      >
+        点我打开表单
+      </Button>
+    </ConfigProvider>
+  )
+}
+```
+
 ## API
 
 ### FormDialog

diff --git a/packages/next/docs/components/FormDrawer.md b/packages/next/docs/components/FormDrawer.md
@@ -247,6 +247,86 @@ export default () => {
 }
 ```
 
+## 使用 Fusion Context
+
+```tsx
+import React from 'react'
+import {
+  FormDrawer,
+  FormItem,
+  Input,
+  Submit,
+  Reset,
+  FormButtonGroup,
+  FormLayout,
+} from '@formily/next'
+import { Field } from '@formily/react'
+import { Button, ConfigProvider } from '@alifd/next'
+
+export default () => {
+  return (
+    <ConfigProvider
+      defaultPropsConfig={{
+        Drawer: {},
+      }}
+    >
+      <Button
+        onClick={() => {
+          FormDrawer('弹窗表单', (resolve) => {
+            return (
+              <FormLayout labelCol={6} wrapperCol={14}>
+                <Field
+                  name="aaa"
+                  required
+                  title="输入框1"
+                  decorator={[FormItem]}
+                  component={[Input]}
+                />
+                <Field
+                  name="bbb"
+                  required
+                  title="输入框2"
+                  decorator={[FormItem]}
+                  component={[Input]}
+                />
+                <Field
+                  name="ccc"
+                  required
+                  title="输入框3"
+                  decorator={[FormItem]}
+                  component={[Input]}
+                />
+                <Field
+                  name="ddd"
+                  required
+                  title="输入框4"
+                  decorator={[FormItem]}
+                  component={[Input]}
+                />
+                <FormDrawer.Footer>
+                  <FormButtonGroup align="right">
+                    <Submit onClick={resolve}>提交</Submit>
+                    <Reset>重置</Reset>
+                  </FormButtonGroup>
+                </FormDrawer.Footer>
+              </FormLayout>
+            )
+          })
+            .open({
+              initialValues: {
+                aaa: '123',
+              },
+            })
+            .then(console.log)
+        }}
+      >
+        点我打开表单
+      </Button>
+    </ConfigProvider>
+  )
+}
+```
+
 ## API
 
 ### FormDrawer

diff --git a/packages/next/src/form-drawer/index.tsx b/packages/next/src/form-drawer/index.tsx
@@ -3,7 +3,7 @@ import ReactDOM, { createPortal } from 'react-dom'
 import { createForm } from '@formily/core'
 import { FormProvider } from '@formily/react'
 import { isNum, isStr, isBool, isFn } from '@formily/shared'
-import { Drawer } from '@alifd/next'
+import { ConfigProvider, Drawer } from '@alifd/next'
 import { DrawerProps } from '@alifd/next/lib/drawer'
 import { usePrefixCls } from '../__builtins__'
 
@@ -54,6 +54,13 @@ export function FormDrawer(title: any, content: any): IFormDrawer {
     form: null,
     promise: null,
   }
+
+  let contextProps = {}
+  try {
+    // @ts-ignore
+    contextProps = ConfigProvider.getContext()
+  } catch (e) {}
+
   const props = getDrawerProps(title)
   const drawer: DrawerProps = {
     width: '40%',
@@ -79,15 +86,17 @@ export function FormDrawer(title: any, content: any): IFormDrawer {
   }
   const render = (visible = true, resolve?: () => any, reject?: () => any) => {
     ReactDOM.render(
-      <Drawer {...drawer} visible={visible}>
-        <FormProvider form={env.form}>
-          {React.createElement(component, {
-            content,
-            resolve,
-            reject,
-          })}
-        </FormProvider>
-      </Drawer>,
+      <ConfigProvider {...contextProps}>
+        <Drawer {...drawer} visible={visible}>
+          <FormProvider form={env.form}>
+            {React.createElement(component, {
+              content,
+              resolve,
+              reject,
+            })}
+          </FormProvider>
+        </Drawer>
+      </ConfigProvider>,
       env.root
     )
   }