fix(react): fix form render dirty check (#1056)

* fix(react): fix form render dirty check * fix(ci): fix ci
alibaba · Oct 26, 2020 · 5aeed55 · 5aeed55
1 parent 9db2eeb
commit 5aeed55
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 8 deletions.
diff --git a/packages/antd/src/components/Form.tsx b/packages/antd/src/components/Form.tsx
@@ -1,13 +1,20 @@
 import React, { useRef, useMemo } from 'react'
 import { Form as AntdForm } from 'antd'
 import { InternalForm } from '@formily/react-schema-renderer'
-import { normalizeCol, autoScrollInValidateFailed, isAntdV4,log } from '../shared'
+import {
+  normalizeCol,
+  autoScrollInValidateFailed,
+  isAntdV4,
+  log,
+  cloneChlildren
+} from '../shared'
 import { FormItemDeepProvider } from '../context'
 import { IAntdFormProps } from '../types'
 import {
   PreviewText,
   PreviewTextConfigProps
 } from '@formily/react-shared-components'
+import { isFn } from '@formily/shared'
 
 export const Form: React.FC<IAntdFormProps &
   PreviewTextConfigProps> = props => {
@@ -26,6 +33,7 @@ export const Form: React.FC<IAntdFormProps &
     previewPlaceholder,
     editable,
     validateFirst,
+    children,
     ...rest
   } = props
   const formRef = useRef<HTMLDivElement>()
@@ -70,7 +78,13 @@ export const Form: React.FC<IAntdFormProps &
                   labelCol={normalizeCol(props.labelCol)}
                   wrapperCol={normalizeCol(props.wrapperCol)}
                   layout={inline ? 'inline' : props.layout}
-                />
+                >
+                  {() => {
+                    return isFn(children)
+                      ? children(form)
+                      : cloneChlildren(children)
+                  }}
+                </AntdForm>
               </div>
             </FormItemDeepProvider>
           </PreviewText.ConfigProvider>

diff --git a/packages/antd/src/shared.ts b/packages/antd/src/shared.ts
@@ -6,11 +6,22 @@ import {
   getRegistry
 } from '@formily/react-schema-renderer'
 import { version } from 'antd'
-import { each } from '@formily/shared'
+import { each, isArr } from '@formily/shared'
 export * from '@formily/shared'
 
 export const isAntdV4 = /^4\./.test(version)
 
+export const cloneChlildren = (children: any, props?: any) => {
+  return React.isValidElement(children)
+    ? React.cloneElement(children, {
+        ...props,
+        children: cloneChlildren(children.props['children'])
+      })
+    : isArr(children)
+    ? children.map((child, key) => cloneChlildren(child, { key }))
+    : children
+}
+
 export const autoScrollInValidateFailed = (formRef: any) => {
   if (formRef.current) {
     setTimeout(() => {

diff --git a/packages/antd/src/types.ts b/packages/antd/src/types.ts
@@ -21,7 +21,7 @@ type ColSpanType = number | string
 
 export type IAntdSchemaFormProps = Omit<
   FormProps,
-  'onSubmit' | 'defaultValue' | 'labelCol' | 'wrapperCol'
+  'onSubmit' | 'defaultValue' | 'labelCol' | 'wrapperCol' | 'children'
 > &
   IFormItemTopProps &
   PreviewTextConfigProps &
@@ -31,7 +31,7 @@ export type IAntdSchemaFieldProps = IMarkupSchemaFieldProps
 
 export type IAntdFormProps = Omit<
   FormProps,
-  'onSubmit' | 'defaultValue' | 'labelCol' | 'wrapperCol'
+  'onSubmit' | 'defaultValue' | 'labelCol' | 'wrapperCol' | 'children'
 > &
   IFormItemTopProps &
   IFormProps<any, any>

diff --git a/packages/next/src/components/Form.tsx b/packages/next/src/components/Form.tsx
@@ -1,7 +1,13 @@
 import React, { useRef } from 'react'
 import { Form as NextForm } from '@alifd/next'
 import { InternalForm } from '@formily/react-schema-renderer'
-import { normalizeCol, autoScrollInValidateFailed,log } from '../shared'
+import {
+  normalizeCol,
+  autoScrollInValidateFailed,
+  log,
+  isFn,
+  cloneChlildren
+} from '../shared'
 import { FormItemDeepProvider } from '../context'
 import { INextFormProps } from '../types'
 import {
@@ -25,6 +31,7 @@ export const Form: React.FC<INextFormProps &
     onValidateFailed,
     previewPlaceholder,
     validateFirst,
+    children,
     ...rest
   } = props
   const formRef = useRef<HTMLDivElement>()
@@ -57,7 +64,13 @@ export const Form: React.FC<INextFormProps &
                   onReset={() => {
                     form.reset({ validate: false, forceClear: false })
                   }}
-                />
+                >
+                  {() => {
+                    return isFn(children)
+                      ? children(form)
+                      : cloneChlildren(children)
+                  }}
+                </NextForm>
               </div>
             </FormItemDeepProvider>
           </PreviewText.ConfigProvider>

diff --git a/packages/next/src/shared.ts b/packages/next/src/shared.ts
@@ -5,9 +5,20 @@ import {
   IConnectProps,
   getRegistry
 } from '@formily/react-schema-renderer'
-import { each } from '@formily/shared'
+import { each, isArr } from '@formily/shared'
 export * from '@formily/shared'
 
+export const cloneChlildren = (children: any, props?: any) => {
+  return React.isValidElement(children)
+    ? React.cloneElement(children, {
+        ...props,
+        children: cloneChlildren(children.props['children'])
+      })
+    : isArr(children)
+    ? children.map((child, key) => cloneChlildren(child, { key }))
+    : children
+}
+
 export const autoScrollInValidateFailed = (formRef: any) => {
   if (formRef.current) {
     setTimeout(() => {