Skip to content

Commit 1bb9f1a

Browse files
janryWangjanryWang
committed
fix(antd/next): fix layout context
1 parent fbfab1c commit 1bb9f1a

File tree

4 files changed

+69
-83
lines changed

4 files changed

+69
-83
lines changed

‎packages/antd/src/form-item/index.tsx‎

Lines changed: 5 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,7 @@ import cls from 'classnames'
33
import { usePrefixCls } from '../__builtins__'
44
import { isVoidField } from '@formily/core'
55
import { connect, mapProps } from '@formily/react'
6-
import { reduce } from '@formily/shared'
7-
import {
8-
useFormLayout,
9-
useFormShallowLayout,
10-
FormLayoutShallowContext,
11-
} from '../form-layout'
6+
import { useFormLayout, FormLayoutShallowContext } from '../form-layout'
127
import { useGridSpan } from '../form-grid'
138
import { Tooltip, Popover } from 'antd'
149
import {
@@ -56,9 +51,7 @@ type ComposeFormItem = React.FC<IFormItemProps> & {
5651
}
5752

5853
const useFormItemLayout = (props: IFormItemProps) => {
59-
const shallowFormLayout = useFormShallowLayout()
60-
const formLayout = useFormLayout()
61-
const layout = { ...shallowFormLayout, ...formLayout }
54+
const layout = useFormLayout()
6255
return {
6356
...props,
6457
layout: layout.layout ?? 'horizontal',
@@ -96,7 +89,6 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
9689
const [active, setActice] = useState(false)
9790
const popoverContainerRef = useRef()
9891
const formLayout = useFormItemLayout(others)
99-
const shallowFormLayout = useFormShallowLayout()
10092
const gridSpan = useGridSpan(props.gridSpan)
10193
const {
10294
label,
@@ -276,25 +268,11 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
276268
style={wrapperStyle}
277269
className={cls({
278270
[`${prefixCls}-control-content-component`]: true,
279-
[`${prefixCls}-control-content-component-has-feedback-icon`]: !!feedbackIcon,
271+
[`${prefixCls}-control-content-component-has-feedback-icon`]:
272+
!!feedbackIcon,
280273
})}
281274
>
282-
<FormLayoutShallowContext.Provider
283-
value={reduce(
284-
shallowFormLayout,
285-
(buf: any, _, key) => {
286-
if (key === 'size') {
287-
buf.size = size
288-
} else {
289-
buf[key] = undefined
290-
}
291-
return buf
292-
},
293-
{
294-
size,
295-
}
296-
)}
297-
>
275+
<FormLayoutShallowContext.Provider value={undefined}>
298276
{formatChildren}
299277
</FormLayoutShallowContext.Provider>
300278
{feedbackIcon && (

‎packages/antd/src/form-layout/index.tsx‎

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,25 @@ export interface IFormLayoutProps {
2626
bordered?: boolean
2727
}
2828

29-
export const FormLayoutContext = createContext<IFormLayoutProps>(null)
29+
export const FormLayoutDeepContext = createContext<IFormLayoutProps>(null)
3030

3131
export const FormLayoutShallowContext = createContext<IFormLayoutProps>(null)
3232

33-
export const useFormLayout = () => useContext(FormLayoutContext)
33+
export const useFormDeepLayout = () => useContext(FormLayoutDeepContext)
3434

3535
export const useFormShallowLayout = () => useContext(FormLayoutShallowContext)
3636

37+
export const useFormLayout = () => ({
38+
...useFormDeepLayout(),
39+
...useFormShallowLayout(),
40+
})
41+
3742
export const FormLayout: React.FC<IFormLayoutProps> & {
3843
useFormLayout: () => IFormLayoutProps
44+
useFormDeepLayout: () => IFormLayoutProps
3945
useFormShallowLayout: () => IFormLayoutProps
4046
} = ({ shallow, children, prefixCls, className, style, ...props }) => {
47+
const deepLayout = useFormDeepLayout()
4148
const formPrefixCls = usePrefixCls('form')
4249
const layoutPrefixCls = usePrefixCls('formily-layout', { prefixCls })
4350
const layoutClassName = cls(
@@ -50,19 +57,26 @@ export const FormLayout: React.FC<IFormLayoutProps> & {
5057
className
5158
)
5259
const renderChildren = () => {
53-
if (shallow) {
54-
return (
55-
<FormLayoutShallowContext.Provider value={props}>
56-
{children}
57-
</FormLayoutShallowContext.Provider>
58-
)
60+
const newDeepLayout = {
61+
...deepLayout,
62+
}
63+
if (!shallow) {
64+
Object.assign(newDeepLayout, props)
5965
} else {
60-
return (
61-
<FormLayoutContext.Provider value={props}>
62-
{children}
63-
</FormLayoutContext.Provider>
64-
)
66+
if (props.size) {
67+
newDeepLayout.size = props.size
68+
}
69+
if (props.colon) {
70+
newDeepLayout.colon = props.colon
71+
}
6572
}
73+
return (
74+
<FormLayoutDeepContext.Provider value={newDeepLayout}>
75+
<FormLayoutShallowContext.Provider value={shallow ? props : undefined}>
76+
{children}
77+
</FormLayoutShallowContext.Provider>
78+
</FormLayoutDeepContext.Provider>
79+
)
6680
}
6781
return (
6882
<div className={layoutClassName} style={style}>
@@ -75,7 +89,8 @@ FormLayout.defaultProps = {
7589
shallow: true,
7690
}
7791

78-
FormLayout.useFormLayout = useFormLayout
92+
FormLayout.useFormDeepLayout = useFormDeepLayout
7993
FormLayout.useFormShallowLayout = useFormShallowLayout
94+
FormLayout.useFormLayout = useFormLayout
8095

8196
export default FormLayout

‎packages/next/src/form-item/index.tsx‎

Lines changed: 5 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,7 @@ import cls from 'classnames'
33
import { usePrefixCls } from '../__builtins__'
44
import { isVoidField } from '@formily/core'
55
import { connect, mapProps } from '@formily/react'
6-
import { reduce } from '@formily/shared'
7-
import {
8-
useFormLayout,
9-
useFormShallowLayout,
10-
FormLayoutShallowContext,
11-
} from '../form-layout'
6+
import { useFormLayout, FormLayoutShallowContext } from '../form-layout'
127
import { useGridSpan } from '../form-grid'
138
import { Balloon } from '@alifd/next'
149
import {
@@ -56,9 +51,7 @@ type ComposeFormItem = React.FC<IFormItemProps> & {
5651
}
5752

5853
const useFormItemLayout = (props: IFormItemProps) => {
59-
const shallowFormLayout = useFormShallowLayout()
60-
const formLayout = useFormLayout()
61-
const layout = { ...shallowFormLayout, ...formLayout }
54+
const layout = useFormLayout()
6255
return {
6356
...props,
6457
layout: layout.layout ?? 'horizontal',
@@ -97,7 +90,6 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
9790
const popoverContainerRef = useRef()
9891
const gridSpan = useGridSpan(props.gridSpan)
9992
const formLayout = useFormItemLayout(others)
100-
const shallowFormLayout = useFormShallowLayout()
10193
const {
10294
label,
10395
style,
@@ -275,28 +267,14 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
275267
style={wrapperStyle}
276268
className={cls({
277269
[`${prefixCls}-control-content-component`]: true,
278-
[`${prefixCls}-control-content-component-has-feedback-icon`]: !!feedbackIcon,
270+
[`${prefixCls}-control-content-component-has-feedback-icon`]:
271+
!!feedbackIcon,
279272
[`${prefix}-input`]: !!feedbackIcon,
280273
[`${prefixCls}-active`]: active,
281274
[`${prefix}-focus`]: active,
282275
})}
283276
>
284-
<FormLayoutShallowContext.Provider
285-
value={reduce(
286-
shallowFormLayout,
287-
(buf: any, _, key) => {
288-
if (key === 'size') {
289-
buf.size = size
290-
} else {
291-
buf[key] = undefined
292-
}
293-
return buf
294-
},
295-
{
296-
size,
297-
}
298-
)}
299-
>
277+
<FormLayoutShallowContext.Provider value={undefined}>
300278
{formatChildren}
301279
</FormLayoutShallowContext.Provider>
302280
{feedbackIcon && (

‎packages/next/src/form-layout/index.tsx‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -21,23 +21,30 @@ export interface IFormLayoutProps {
2121
direction?: 'rtl' | 'ltr'
2222
inset?: boolean
2323
shallow?: boolean
24-
feedbackLayout?: 'loose' | 'terse' | 'popover' | 'none'
2524
tooltipLayout?: 'icon' | 'text'
25+
feedbackLayout?: 'loose' | 'terse' | 'popover' | 'none'
2626
bordered?: boolean
2727
}
2828

29-
export const FormLayoutContext = createContext<IFormLayoutProps>(null)
29+
export const FormLayoutDeepContext = createContext<IFormLayoutProps>(null)
3030

3131
export const FormLayoutShallowContext = createContext<IFormLayoutProps>(null)
3232

33-
export const useFormLayout = () => useContext(FormLayoutContext)
33+
export const useFormDeepLayout = () => useContext(FormLayoutDeepContext)
3434

3535
export const useFormShallowLayout = () => useContext(FormLayoutShallowContext)
3636

37+
export const useFormLayout = () => ({
38+
...useFormDeepLayout(),
39+
...useFormShallowLayout(),
40+
})
41+
3742
export const FormLayout: React.FC<IFormLayoutProps> & {
3843
useFormLayout: () => IFormLayoutProps
44+
useFormDeepLayout: () => IFormLayoutProps
3945
useFormShallowLayout: () => IFormLayoutProps
4046
} = ({ shallow, children, prefix, className, style, ...props }) => {
47+
const deepLayout = useFormDeepLayout()
4148
const formPrefixCls = usePrefixCls('form')
4249
const layoutPrefixCls = usePrefixCls('formily-layout', { prefix })
4350
const layoutClassName = cls(
@@ -50,19 +57,26 @@ export const FormLayout: React.FC<IFormLayoutProps> & {
5057
className
5158
)
5259
const renderChildren = () => {
53-
if (shallow) {
54-
return (
55-
<FormLayoutShallowContext.Provider value={props}>
56-
{children}
57-
</FormLayoutShallowContext.Provider>
58-
)
60+
const newDeepLayout = {
61+
...deepLayout,
62+
}
63+
if (!shallow) {
64+
Object.assign(newDeepLayout, props)
5965
} else {
60-
return (
61-
<FormLayoutContext.Provider value={props}>
62-
{children}
63-
</FormLayoutContext.Provider>
64-
)
66+
if (props.size) {
67+
newDeepLayout.size = props.size
68+
}
69+
if (props.colon) {
70+
newDeepLayout.colon = props.colon
71+
}
6572
}
73+
return (
74+
<FormLayoutDeepContext.Provider value={newDeepLayout}>
75+
<FormLayoutShallowContext.Provider value={shallow ? props : undefined}>
76+
{children}
77+
</FormLayoutShallowContext.Provider>
78+
</FormLayoutDeepContext.Provider>
79+
)
6680
}
6781
return (
6882
<div className={layoutClassName} style={style}>
@@ -75,7 +89,8 @@ FormLayout.defaultProps = {
7589
shallow: true,
7690
}
7791

78-
FormLayout.useFormLayout = useFormLayout
92+
FormLayout.useFormDeepLayout = useFormDeepLayout
7993
FormLayout.useFormShallowLayout = useFormShallowLayout
94+
FormLayout.useFormLayout = useFormLayout
8095

8196
export default FormLayout

0 commit comments

Comments
 (0)