Skip to content

Commit

Permalink
fix(antd/next): fix layout context
Browse files Browse the repository at this point in the history
  • Loading branch information
@janryWang
janryWang committed May 17, 2021
1 parent fbfab1c commit 1bb9f1a
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 83 deletions.
32 changes: 5 additions & 27 deletions packages/antd/src/form-item/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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 && (
Expand Down
43 changes: 29 additions & 14 deletions packages/antd/src/form-layout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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}>
Expand All @@ -75,7 +89,8 @@ FormLayout.defaultProps = {
shallow: true,
}

FormLayout.useFormLayout = useFormLayout
FormLayout.useFormDeepLayout = useFormDeepLayout
FormLayout.useFormShallowLayout = useFormShallowLayout
FormLayout.useFormLayout = useFormLayout

export default FormLayout
32 changes: 5 additions & 27 deletions packages/next/src/form-item/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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 && (
Expand Down
45 changes: 30 additions & 15 deletions packages/next/src/form-layout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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}>
Expand All @@ -75,7 +89,8 @@ FormLayout.defaultProps = {
shallow: true,
}

FormLayout.useFormLayout = useFormLayout
FormLayout.useFormDeepLayout = useFormDeepLayout
FormLayout.useFormShallowLayout = useFormShallowLayout
FormLayout.useFormLayout = useFormLayout

export default FormLayout

0 comments on commit 1bb9f1a

Please sign in to comment.