Skip to content

Commit

Permalink
feat(next/antd): support breakpoints for FormLayout (#2336)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ifblooms
ifblooms authored Oct 21, 2021
1 parent 9738292 commit c894adc
Show file tree
Hide file tree
Showing 13 changed files with 371 additions and 125 deletions.
2 changes: 1 addition & 1 deletion packages/antd/docs/components/FormItem.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ export default () => {
}}
/>
<SchemaField.String
title="fixed content width (wraperWidth)"
title="fixed content width (wrapperWidth)"
x-decorator="FormItem"
x-component="Input"
x-decorator-props={{
Expand Down
2 changes: 1 addition & 1 deletion packages/antd/docs/components/FormItem.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ export default () => {
}}
/>
<SchemaField.String
title="固定内容宽度(wraperWidth)"
title="固定内容宽度(wrapperWidth)"
x-decorator="FormItem"
x-component="Input"
x-decorator-props={{
Expand Down
53 changes: 27 additions & 26 deletions packages/antd/docs/components/FormLayout.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,29 +158,30 @@ export default () => (

## API

| Property name | Type | Description | Default value |
| -------------- | ---------------------------------------- | ------------------------------------- | ------------- |
| style | CSSProperties | Style | - |
| className | string | class name | - |
| colon | boolean | Is there a colon | true |
| labelAlign | `'right' \|'left'` | Label content alignment | - |
| wrapperAlign | `'right' \|'left'` | Component container content alignment | - |
| labelWrap | boolean | Wrap label content | false |
| labelWidth | number | Label width (px) | - |
| wrapperWidth | number | Component container width (px) | - |
| wrapperWrap | boolean | Component container wrap | false |
| labelCol | number | Label width (24 column) | - |
| wrapperCol | number | Component container width (24 column) | - |
| fullness | boolean | Component container width 100% | false |
| size | `'small' \|'default' \|'large'` | component size | default |
| layout | `'vertical' \|'horizontal' \|'inline'` | layout mode | horizontal |
| direction | `'rtl' \|'ltr'` | direction (not supported yet) | ltr |
| inset | boolean | Inline layout | false |
| shallow | boolean | shallow context transfer | true |
| feedbackLayout | `'loose' \|'terse' \|'popover' \|'none'` | feedback layout | true |
| tooltipLayout | `"icon" \| "text"` | Ask the prompt layout | `"icon"` |
| tooltipIcon | ReactNode | Ask the prompt icon | - |
| bordered | boolean | Is there a border | true |
| gridColumnGap | number | Grid Column Gap | 8 |
| gridRowGap | number | Grid Row Gap | 4 |
| spaceGap | number | Space Gap | 8 |
| Property name | Type | Description | Default value |
| -------------- | -------------------------------------------------------------------------------------- | ------------------------------------- | ------------- |
| style | CSSProperties | Style | - |
| className | string | class name | - |
| colon | boolean | Is there a colon | true |
| labelAlign | `'right' \| 'left' \| ('right' \| 'left')[]` | Label content alignment | - |
| wrapperAlign | `'right' \| 'left' \| ('right' \| 'left')[]` | Component container content alignment | - |
| labelWrap | boolean | Wrap label content | false |
| labelWidth | number | Label width (px) | - |
| wrapperWidth | number | Component container width (px) | - |
| wrapperWrap | boolean | Component container wrap | false |
| labelCol | `number \| number[]` | Label width (24 column) | - |
| wrapperCol | `number \| number[]` | Component container width (24 column) | - |
| fullness | boolean | Component container width 100% | false |
| size | `'small' \|'default' \|'large'` | component size | default |
| layout | `'vertical' \| 'horizontal' \| 'inline' \| ('vertical' \| 'horizontal' \| 'inline')[]` | layout mode | horizontal |
| direction | `'rtl' \|'ltr'` | direction (not supported yet) | ltr |
| inset | boolean | Inline layout | false |
| shallow | boolean | shallow context transfer | true |
| feedbackLayout | `'loose' \|'terse' \|'popover' \|'none'` | feedback layout | true |
| tooltipLayout | `"icon" \| "text"` | Ask the prompt layout | `"icon"` |
| tooltipIcon | ReactNode | Ask the prompt icon | - |
| bordered | boolean | Is there a border | true |
| breakpoints | number[] | Container size breakpoints | - |
| gridColumnGap | number | Grid Column Gap | 8 |
| gridRowGap | number | Grid Row Gap | 4 |
| spaceGap | number | Space Gap | 8 |
61 changes: 34 additions & 27 deletions packages/antd/docs/components/FormLayout.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,13 @@ const form = createForm()

export default () => (
<FormProvider form={form}>
<FormLayout labelCol={6} wrapperCol={10}>
<FormLayout
breakpoints={[680]}
layout={['vertical', 'horizontal']}
labelAlign={['left', 'right']}
labelCol={[24, 6]}
wrapperCol={[24, 10]}
>
<Field
name="input"
required
Expand All @@ -158,29 +164,30 @@ export default () => (

## API

| 属性名 | 类型 | 描述 | 默认值 |
| -------------- | ------------------------------------------- | ----------------------- | ---------- |
| style | CSSProperties | 样式 | - |
| className | string | 类名 | - |
| colon | boolean | 是否有冒号 | true |
| labelAlign | `'right' \| 'left'` | 标签内容对齐 | - |
| wrapperAlign | `'right' \| 'left'` | 组件容器内容对齐 | - |
| labelWrap | boolean | 标签内容换行 | false |
| labelWidth | number | 标签宽度(px) | - |
| wrapperWidth | number | 组件容器宽度(px) | - |
| wrapperWrap | boolean | 组件容器换行 | false |
| labelCol | number | 标签宽度(24 column) | - |
| wrapperCol | number | 组件容器宽度(24 column) | - |
| fullness | boolean | 组件容器宽度 100% | false |
| size | `'small' \| 'default' \| 'large'` | 组件尺寸 | default |
| layout | `'vertical' \| 'horizontal' \| 'inline'` | 布局模式 | horizontal |
| direction | `'rtl' \| 'ltr'` | 方向(暂不支持) | ltr |
| inset | boolean | 内联布局 | false |
| shallow | boolean | 上下文浅层传递 | true |
| feedbackLayout | `'loose' \| 'terse' \| 'popover' \| 'none'` | 反馈布局 | true |
| tooltipLayout | `"icon" \| "text"` | 问号提示布局 | `"icon"` |
| tooltipIcon | ReactNode | 问号提示图标 | - |
| bordered | boolean | 是否有边框 | true |
| gridColumnGap | number | 网格布局列间距 | 8 |
| gridRowGap | number | 网格布局行间距 | 4 |
| spaceGap | number | 弹性间距 | 8 |
| 属性名 | 类型 | 描述 | 默认值 |
| -------------- | -------------------------------------------------------------------------------------- | ----------------------- | ---------- |
| style | CSSProperties | 样式 | - |
| className | string | 类名 | - |
| colon | boolean | 是否有冒号 | true |
| labelAlign | `'right' \| 'left' \| ('right' \| 'left')[]` | 标签内容对齐 | - |
| wrapperAlign | `'right' \| 'left' \| ('right' \| 'left')[]` | 组件容器内容对齐 | - |
| labelWrap | boolean | 标签内容换行 | false |
| labelWidth | number | 标签宽度(px) | - |
| wrapperWidth | number | 组件容器宽度(px) | - |
| wrapperWrap | boolean | 组件容器换行 | false |
| labelCol | `number \| number[]` | 标签宽度(24 column) | - |
| wrapperCol | `number \| number[]` | 组件容器宽度(24 column) | - |
| fullness | boolean | 组件容器宽度 100% | false |
| size | `'small' \| 'default' \| 'large'` | 组件尺寸 | default |
| layout | `'vertical' \| 'horizontal' \| 'inline' \| ('vertical' \| 'horizontal' \| 'inline')[]` | 布局模式 | horizontal |
| direction | `'rtl' \| 'ltr'` | 方向(暂不支持) | ltr |
| inset | boolean | 内联布局 | false |
| shallow | boolean | 上下文浅层传递 | true |
| feedbackLayout | `'loose' \| 'terse' \| 'popover' \| 'none'` | 反馈布局 | true |
| tooltipLayout | `"icon" \| "text"` | 问号提示布局 | `"icon"` |
| tooltipIcon | ReactNode | 问号提示图标 | - |
| bordered | boolean | 是否有边框 | true |
| breakpoints | number[] | 容器尺寸断点 | - |
| gridColumnGap | number | 网格布局列间距 | 8 |
| gridRowGap | number | 网格布局行间距 | 4 |
| spaceGap | number | 弹性间距 | 8 |
21 changes: 14 additions & 7 deletions packages/antd/src/form-layout/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { createContext, useContext } from 'react'
import useResponsiveFormLayout from './useResponsiveFormLayout'
import { usePrefixCls } from '../__builtins__'
import cls from 'classnames'

Expand All @@ -7,24 +8,29 @@ export interface IFormLayoutProps {
className?: string
style?: React.CSSProperties
colon?: boolean
labelAlign?: 'right' | 'left'
wrapperAlign?: 'right' | 'left'
labelAlign?: 'right' | 'left' | ('right' | 'left')[]
wrapperAlign?: 'right' | 'left' | ('right' | 'left')[]
labelWrap?: boolean
labelWidth?: number
wrapperWidth?: number
wrapperWrap?: boolean
labelCol?: number
wrapperCol?: number
labelCol?: number | number[]
wrapperCol?: number | number[]
fullness?: boolean
size?: 'small' | 'default' | 'large'
layout?: 'vertical' | 'horizontal' | 'inline'
layout?:
| 'vertical'
| 'horizontal'
| 'inline'
| ('vertical' | 'horizontal' | 'inline')[]
direction?: 'rtl' | 'ltr'
inset?: boolean
shallow?: boolean
tooltipLayout?: 'icon' | 'text'
tooltipIcon?: React.ReactNode
feedbackLayout?: 'loose' | 'terse' | 'popover' | 'none'
bordered?: boolean
breakpoints?: number[]
spaceGap?: number
gridColumnGap?: number
gridRowGap?: number
Expand All @@ -47,7 +53,8 @@ export const FormLayout: React.FC<IFormLayoutProps> & {
useFormLayout: () => IFormLayoutProps
useFormDeepLayout: () => IFormLayoutProps
useFormShallowLayout: () => IFormLayoutProps
} = ({ shallow, children, prefixCls, className, style, ...props }) => {
} = ({ shallow, children, prefixCls, className, style, ...otherProps }) => {
const { ref, props } = useResponsiveFormLayout(otherProps)
const deepLayout = useFormDeepLayout()
const formPrefixCls = usePrefixCls('form', { prefixCls })
const layoutPrefixCls = usePrefixCls('formily-layout', { prefixCls })
Expand Down Expand Up @@ -83,7 +90,7 @@ export const FormLayout: React.FC<IFormLayoutProps> & {
)
}
return (
<div className={layoutClassName} style={style}>
<div ref={ref} className={layoutClassName} style={style}>
{renderChildren()}
</div>
)
Expand Down
Loading

0 comments on commit c894adc

Please sign in to comment.