Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(next/antd): add FormLayout breakpoints, optimize useResponsiveFormLayout and fix wraperWidth #2336

Merged
merged 30 commits into from
Oct 21, 2021
Merged

feat(next/antd): add FormLayout breakpoints, optimize useResponsiveFormLayout and fix wraperWidth #2336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
8204d91
fix(next): fix size style in FormItem/main.scss && set default fullne…
ifblooms Jul 29, 2021
6c9f407
Merge branch 'alibaba:formily_next' into formily_next
ifblooms Aug 4, 2021
685f611
fix(next): fix FormItem vertical for issues 1947
ifblooms Aug 4, 2021
38c4c61
Merge branch 'alibaba:formily_next' into formily_next
ifblooms Aug 5, 2021
151f086
Merge branch 'alibaba:formily_next' into formily_next
ifblooms Aug 16, 2021
6fc7c9a
fix(next): fix fullness icon width
ifblooms Aug 16, 2021
d3aecc6
Merge branch 'alibaba:formily_next' into formily_next
ifblooms Aug 20, 2021
d523db6
fix(next): fix formitem inset boder
ifblooms Aug 20, 2021
77c6e85
Merge branch 'alibaba:formily_next' into formily_next
ifblooms Aug 31, 2021
f09de70
feat(next/antd): components FormLayout and FormItem add tooltipIcon p…
ifblooms Sep 1, 2021
f8db96e
feat(next/antd): add classname to ArrayItems.Index
ifblooms Sep 2, 2021
9267389
Merge branch 'alibaba:formily_next' into formily_next
ifblooms Sep 2, 2021
9039583
fix(next/antd/vue): fix Switch type
ifblooms Sep 2, 2021
c2bfcd1
Merge branch 'alibaba:formily_next' into formily_next
ifblooms Sep 15, 2021
9b83d56
Merge branch 'alibaba:formily_next' into formily_next
ifblooms Sep 17, 2021
63956e5
feat(react): fix schema x-component-props children invalid
ifblooms Sep 17, 2021
ff7c697
Merge branch 'alibaba:formily_next' into formily_next
ifblooms Sep 28, 2021
5731b5e
feat(next/antd): change ArrayBase.Addition disabled UI
ifblooms Sep 28, 2021
2ed6c96
Merge branch 'alibaba:formily_next' into formily_next
ifblooms Oct 9, 2021
b396194
Merge branch 'alibaba:formily_next' into formily_next
ifblooms Oct 11, 2021
26a7fc8
feat(next/antd): fix ArrayCards/ArrayTable/ArrayCollapse demo bug
ifblooms Oct 11, 2021
f5a91a0
Merge branch 'alibaba:formily_next' into formily_next
ifblooms Oct 15, 2021
d2259ea
feat(next): fix FormDialog footerActions/okProps/cancelProps
ifblooms Oct 15, 2021
56e9dd3
Merge branch 'alibaba:formily_next' into formily_next
ifblooms Oct 18, 2021
3075bb4
feat(next/antd): add FormLayout breakpoints
ifblooms Oct 18, 2021
cccda8a
feat(next/antd): add FormLayout breakpoints, optimize useResponsiveFo…
ifblooms Oct 19, 2021
df05390
feat(next/antd): add FormLayout breakpoints, optimize useResponsiveFo…
ifblooms Oct 21, 2021
13852e7
feat(next/antd): add FormLayout breakpoints, optimize useResponsiveFo…
ifblooms Oct 21, 2021
d608ed7
feat(next/antd): merge to formily
ifblooms Oct 21, 2021
620fcf3
feat(next/antd): add FormLayout breakpoints, optimize useResponsiveFo…
ifblooms Oct 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/antd/docs/components/FormItem.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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