From 1bb9f1a03d915436e82935d50927dfebfa23e79c Mon Sep 17 00:00:00 2001
From: janrywang <wangzhili56@126.com>
Date: Mon, 17 May 2021 22:27:13 +0800
Subject: [PATCH] fix(antd/next): fix layout context

---
 packages/antd/src/form-item/index.tsx   | 32 +++---------------
 packages/antd/src/form-layout/index.tsx | 43 +++++++++++++++--------
 packages/next/src/form-item/index.tsx   | 32 +++---------------
 packages/next/src/form-layout/index.tsx | 45 ++++++++++++++++---------
 4 files changed, 69 insertions(+), 83 deletions(-)

diff --git a/packages/antd/src/form-item/index.tsx b/packages/antd/src/form-item/index.tsx
index af6432cd992..ddb278ea970 100644
--- a/packages/antd/src/form-item/index.tsx
+++ b/packages/antd/src/form-item/index.tsx
@@ -3,12 +3,7 @@ import cls from 'classnames'
 import { usePrefixCls } from '../__builtins__'
 import { isVoidField } from '@formily/core'
 import { connect, mapProps } from '@formily/react'
-import { reduce } from '@formily/shared'
-import {
-  useFormLayout,
-  useFormShallowLayout,
-  FormLayoutShallowContext,
-} from '../form-layout'
+import { useFormLayout, FormLayoutShallowContext } from '../form-layout'
 import { useGridSpan } from '../form-grid'
 import { Tooltip, Popover } from 'antd'
 import {
@@ -56,9 +51,7 @@ type ComposeFormItem = React.FC<IFormItemProps> & {
 }
 
 const useFormItemLayout = (props: IFormItemProps) => {
-  const shallowFormLayout = useFormShallowLayout()
-  const formLayout = useFormLayout()
-  const layout = { ...shallowFormLayout, ...formLayout }
+  const layout = useFormLayout()
   return {
     ...props,
     layout: layout.layout ?? 'horizontal',
@@ -96,7 +89,6 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
   const [active, setActice] = useState(false)
   const popoverContainerRef = useRef()
   const formLayout = useFormItemLayout(others)
-  const shallowFormLayout = useFormShallowLayout()
   const gridSpan = useGridSpan(props.gridSpan)
   const {
     label,
@@ -276,25 +268,11 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
             style={wrapperStyle}
             className={cls({
               [`${prefixCls}-control-content-component`]: true,
-              [`${prefixCls}-control-content-component-has-feedback-icon`]: !!feedbackIcon,
+              [`${prefixCls}-control-content-component-has-feedback-icon`]:
+                !!feedbackIcon,
             })}
           >
-            <FormLayoutShallowContext.Provider
-              value={reduce(
-                shallowFormLayout,
-                (buf: any, _, key) => {
-                  if (key === 'size') {
-                    buf.size = size
-                  } else {
-                    buf[key] = undefined
-                  }
-                  return buf
-                },
-                {
-                  size,
-                }
-              )}
-            >
+            <FormLayoutShallowContext.Provider value={undefined}>
               {formatChildren}
             </FormLayoutShallowContext.Provider>
             {feedbackIcon && (
diff --git a/packages/antd/src/form-layout/index.tsx b/packages/antd/src/form-layout/index.tsx
index 50496b96106..b30261a11b0 100644
--- a/packages/antd/src/form-layout/index.tsx
+++ b/packages/antd/src/form-layout/index.tsx
@@ -26,18 +26,25 @@ export interface IFormLayoutProps {
   bordered?: boolean
 }
 
-export const FormLayoutContext = createContext<IFormLayoutProps>(null)
+export const FormLayoutDeepContext = createContext<IFormLayoutProps>(null)
 
 export const FormLayoutShallowContext = createContext<IFormLayoutProps>(null)
 
-export const useFormLayout = () => useContext(FormLayoutContext)
+export const useFormDeepLayout = () => useContext(FormLayoutDeepContext)
 
 export const useFormShallowLayout = () => useContext(FormLayoutShallowContext)
 
+export const useFormLayout = () => ({
+  ...useFormDeepLayout(),
+  ...useFormShallowLayout(),
+})
+
 export const FormLayout: React.FC<IFormLayoutProps> & {
   useFormLayout: () => IFormLayoutProps
+  useFormDeepLayout: () => IFormLayoutProps
   useFormShallowLayout: () => IFormLayoutProps
 } = ({ shallow, children, prefixCls, className, style, ...props }) => {
+  const deepLayout = useFormDeepLayout()
   const formPrefixCls = usePrefixCls('form')
   const layoutPrefixCls = usePrefixCls('formily-layout', { prefixCls })
   const layoutClassName = cls(
@@ -50,19 +57,26 @@ export const FormLayout: React.FC<IFormLayoutProps> & {
     className
   )
   const renderChildren = () => {
-    if (shallow) {
-      return (
-        <FormLayoutShallowContext.Provider value={props}>
-          {children}
-        </FormLayoutShallowContext.Provider>
-      )
+    const newDeepLayout = {
+      ...deepLayout,
+    }
+    if (!shallow) {
+      Object.assign(newDeepLayout, props)
     } else {
-      return (
-        <FormLayoutContext.Provider value={props}>
-          {children}
-        </FormLayoutContext.Provider>
-      )
+      if (props.size) {
+        newDeepLayout.size = props.size
+      }
+      if (props.colon) {
+        newDeepLayout.colon = props.colon
+      }
     }
+    return (
+      <FormLayoutDeepContext.Provider value={newDeepLayout}>
+        <FormLayoutShallowContext.Provider value={shallow ? props : undefined}>
+          {children}
+        </FormLayoutShallowContext.Provider>
+      </FormLayoutDeepContext.Provider>
+    )
   }
   return (
     <div className={layoutClassName} style={style}>
@@ -75,7 +89,8 @@ FormLayout.defaultProps = {
   shallow: true,
 }
 
-FormLayout.useFormLayout = useFormLayout
+FormLayout.useFormDeepLayout = useFormDeepLayout
 FormLayout.useFormShallowLayout = useFormShallowLayout
+FormLayout.useFormLayout = useFormLayout
 
 export default FormLayout
diff --git a/packages/next/src/form-item/index.tsx b/packages/next/src/form-item/index.tsx
index 43a80122160..23e4721ff63 100644
--- a/packages/next/src/form-item/index.tsx
+++ b/packages/next/src/form-item/index.tsx
@@ -3,12 +3,7 @@ import cls from 'classnames'
 import { usePrefixCls } from '../__builtins__'
 import { isVoidField } from '@formily/core'
 import { connect, mapProps } from '@formily/react'
-import { reduce } from '@formily/shared'
-import {
-  useFormLayout,
-  useFormShallowLayout,
-  FormLayoutShallowContext,
-} from '../form-layout'
+import { useFormLayout, FormLayoutShallowContext } from '../form-layout'
 import { useGridSpan } from '../form-grid'
 import { Balloon } from '@alifd/next'
 import {
@@ -56,9 +51,7 @@ type ComposeFormItem = React.FC<IFormItemProps> & {
 }
 
 const useFormItemLayout = (props: IFormItemProps) => {
-  const shallowFormLayout = useFormShallowLayout()
-  const formLayout = useFormLayout()
-  const layout = { ...shallowFormLayout, ...formLayout }
+  const layout = useFormLayout()
   return {
     ...props,
     layout: layout.layout ?? 'horizontal',
@@ -97,7 +90,6 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
   const popoverContainerRef = useRef()
   const gridSpan = useGridSpan(props.gridSpan)
   const formLayout = useFormItemLayout(others)
-  const shallowFormLayout = useFormShallowLayout()
   const {
     label,
     style,
@@ -275,28 +267,14 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
             style={wrapperStyle}
             className={cls({
               [`${prefixCls}-control-content-component`]: true,
-              [`${prefixCls}-control-content-component-has-feedback-icon`]: !!feedbackIcon,
+              [`${prefixCls}-control-content-component-has-feedback-icon`]:
+                !!feedbackIcon,
               [`${prefix}-input`]: !!feedbackIcon,
               [`${prefixCls}-active`]: active,
               [`${prefix}-focus`]: active,
             })}
           >
-            <FormLayoutShallowContext.Provider
-              value={reduce(
-                shallowFormLayout,
-                (buf: any, _, key) => {
-                  if (key === 'size') {
-                    buf.size = size
-                  } else {
-                    buf[key] = undefined
-                  }
-                  return buf
-                },
-                {
-                  size,
-                }
-              )}
-            >
+            <FormLayoutShallowContext.Provider value={undefined}>
               {formatChildren}
             </FormLayoutShallowContext.Provider>
             {feedbackIcon && (
diff --git a/packages/next/src/form-layout/index.tsx b/packages/next/src/form-layout/index.tsx
index cfccea833d1..c6dd6fe1fc2 100644
--- a/packages/next/src/form-layout/index.tsx
+++ b/packages/next/src/form-layout/index.tsx
@@ -21,23 +21,30 @@ export interface IFormLayoutProps {
   direction?: 'rtl' | 'ltr'
   inset?: boolean
   shallow?: boolean
-  feedbackLayout?: 'loose' | 'terse' | 'popover' | 'none'
   tooltipLayout?: 'icon' | 'text'
+  feedbackLayout?: 'loose' | 'terse' | 'popover' | 'none'
   bordered?: boolean
 }
 
-export const FormLayoutContext = createContext<IFormLayoutProps>(null)
+export const FormLayoutDeepContext = createContext<IFormLayoutProps>(null)
 
 export const FormLayoutShallowContext = createContext<IFormLayoutProps>(null)
 
-export const useFormLayout = () => useContext(FormLayoutContext)
+export const useFormDeepLayout = () => useContext(FormLayoutDeepContext)
 
 export const useFormShallowLayout = () => useContext(FormLayoutShallowContext)
 
+export const useFormLayout = () => ({
+  ...useFormDeepLayout(),
+  ...useFormShallowLayout(),
+})
+
 export const FormLayout: React.FC<IFormLayoutProps> & {
   useFormLayout: () => IFormLayoutProps
+  useFormDeepLayout: () => IFormLayoutProps
   useFormShallowLayout: () => IFormLayoutProps
 } = ({ shallow, children, prefix, className, style, ...props }) => {
+  const deepLayout = useFormDeepLayout()
   const formPrefixCls = usePrefixCls('form')
   const layoutPrefixCls = usePrefixCls('formily-layout', { prefix })
   const layoutClassName = cls(
@@ -50,19 +57,26 @@ export const FormLayout: React.FC<IFormLayoutProps> & {
     className
   )
   const renderChildren = () => {
-    if (shallow) {
-      return (
-        <FormLayoutShallowContext.Provider value={props}>
-          {children}
-        </FormLayoutShallowContext.Provider>
-      )
+    const newDeepLayout = {
+      ...deepLayout,
+    }
+    if (!shallow) {
+      Object.assign(newDeepLayout, props)
     } else {
-      return (
-        <FormLayoutContext.Provider value={props}>
-          {children}
-        </FormLayoutContext.Provider>
-      )
+      if (props.size) {
+        newDeepLayout.size = props.size
+      }
+      if (props.colon) {
+        newDeepLayout.colon = props.colon
+      }
     }
+    return (
+      <FormLayoutDeepContext.Provider value={newDeepLayout}>
+        <FormLayoutShallowContext.Provider value={shallow ? props : undefined}>
+          {children}
+        </FormLayoutShallowContext.Provider>
+      </FormLayoutDeepContext.Provider>
+    )
   }
   return (
     <div className={layoutClassName} style={style}>
@@ -75,7 +89,8 @@ FormLayout.defaultProps = {
   shallow: true,
 }
 
-FormLayout.useFormLayout = useFormLayout
+FormLayout.useFormDeepLayout = useFormDeepLayout
 FormLayout.useFormShallowLayout = useFormShallowLayout
+FormLayout.useFormLayout = useFormLayout
 
 export default FormLayout