feat(antd/next): support 16427form scope with Form

alibaba · Feb 13, 2022 · 09a597f · 09a597f
1 parent cad37da
commit 09a597f
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 30 deletions.
diff --git a/packages/antd/src/form/index.tsx b/packages/antd/src/form/index.tsx
@@ -1,6 +1,11 @@
 import React from 'react'
 import { Form as FormType, IFormFeedback } from '@formily/core'
-import { useForm, FormProvider, JSXComponent } from '@formily/react'
+import {
+  useForm,
+  FormProvider,
+  ExpressionScope,
+  JSXComponent,
+} from '@formily/react'
 import { FormLayout, IFormLayoutProps } from '../form-layout'
 import { PreviewText } from '../preview-text'
 export interface FormProps extends IFormLayoutProps {
@@ -21,21 +26,23 @@ export const Form: React.FC<FormProps> = ({
 }) => {
   const top = useForm()
   const renderContent = (form: FormType) => (
-    <PreviewText.Placeholder value={previewTextPlaceholder}>
-      <FormLayout {...props}>
-        {React.createElement(
-          component,
-          {
-            onSubmit(e: React.FormEvent) {
-              e?.stopPropagation?.()
-              e?.preventDefault?.()
-              form.submit(onAutoSubmit).catch(onAutoSubmitFailed)
+    <ExpressionScope value={{ $$form: form }}>
+      <PreviewText.Placeholder value={previewTextPlaceholder}>
+        <FormLayout {...props}>
+          {React.createElement(
+            component,
+            {
+              onSubmit(e: React.FormEvent) {
+                e?.stopPropagation?.()
+                e?.preventDefault?.()
+                form.submit(onAutoSubmit).catch(onAutoSubmitFailed)
+              },
             },
-          },
-          props.children
-        )}
-      </FormLayout>
-    </PreviewText.Placeholder>
+            props.children
+          )}
+        </FormLayout>
+      </PreviewText.Placeholder>
+    </ExpressionScope>
   )
   if (form)
     return <FormProvider form={form}>{renderContent(form)}</FormProvider>

diff --git a/packages/next/src/form/index.tsx b/packages/next/src/form/index.tsx
@@ -1,5 +1,10 @@
 import React, { useMemo } from 'react'
-import { FormProvider, JSXComponent, useForm } from '@formily/react'
+import {
+  FormProvider,
+  ExpressionScope,
+  JSXComponent,
+  useForm,
+} from '@formily/react'
 import { FormLayout, IFormLayoutProps } from '../form-layout'
 import { ConfigProvider } from '@alifd/next'
 import {
@@ -34,21 +39,23 @@ export const Form: React.FC<FormProps> = ({
   }, [lang])
 
   const renderContent = (form: FormType) => (
-    <PreviewText.Placeholder value={previewTextPlaceholder}>
-      <FormLayout {...props}>
-        {React.createElement(
-          component,
-          {
-            onSubmit(e: React.FormEvent) {
-              e?.stopPropagation?.()
-              e?.preventDefault?.()
-              form.submit(onAutoSubmit).catch(onAutoSubmitFailed)
+    <ExpressionScope value={{ $$form: form }}>
+      <PreviewText.Placeholder value={previewTextPlaceholder}>
+        <FormLayout {...props}>
+          {React.createElement(
+            component,
+            {
+              onSubmit(e: React.FormEvent) {
+                e?.stopPropagation?.()
+                e?.preventDefault?.()
+                form.submit(onAutoSubmit).catch(onAutoSubmitFailed)
+              },
             },
-          },
-          props.children
-        )}
-      </FormLayout>
-    </PreviewText.Placeholder>
+            props.children
+          )}
+        </FormLayout>
+      </PreviewText.Placeholder>
+    </ExpressionScope>
   )
 
   if (form)