Skip to content

Commit f87e70d

Browse files
JohnIsOnTheRoadJohnIsOnTheRoad
authored
feat(layout): support responsive gri layout for older browsers (#916)
* feat: support responsive grid layout for older browsers
1 parent f3d6da9 commit f87e70d

File tree

6 files changed

+87
-30
lines changed

6 files changed

+87
-30
lines changed

‎packages/antd/src/components/FormMegaLayout/ie.tsx

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,49 +6,61 @@ const getIEGridContainerStyle = (opts) => {
66
return `
77
display: flex;
88
${autoRow ? 'flex-flow: row wrap;' : ''}
9-
margin: -${halfGutter}px -${halfGutter}px ${halfGutter}px;
9+
margin: -${halfGutter}px -${halfGutter}px;
10+
11+
.button-group {
12+
padding-left: ${halfGutter}px;
13+
display: flex;
14+
align-items: center;
15+
}
1016
`
1117
}
1218

1319
return ''
1420
}
1521

22+
const getValidSpan = (span, cols) => span > cols ? cols : span
23+
1624
const getIEGridItemStyle = (opts) => {
1725
if (isIECompat) {
18-
const { gutter, span, columns,
19-
lgSpan, mSpan, sSpan,
20-
responsive,
26+
const { gutter, span, columns, isSecondary,
27+
responsive, nested,
2128
enableResponsive } = opts
2229
const halfGutter = Math.floor(gutter / 2)
23-
const flexBase = `${Number((Number(span) / Number(columns)).toFixed(6)) * 100}%`
30+
const flexBase = `${Number((Number(getValidSpan(span, columns)) / Number(columns)).toFixed(6)) * 100}%`
2431

2532
const itemStyle = `
26-
padding: ${halfGutter}px;
33+
${nested ? `padding: ${halfGutter}px ${halfGutter}px 0;` : `padding: ${halfGutter}px;`}
2734
max-width: ${flexBase};
2835
flex: 0 0 ${flexBase};
2936
`
3037

3138
let responsiveStyle = ''
32-
if (enableResponsive) {
39+
if (isSecondary && enableResponsive) {
3340
const { s, m, lg } = responsive
34-
const sFlexBase = `${Number((Number(sSpan) / Number(s)).toFixed(6)) * 100}%`
35-
const mFlexBase = `${Number((Number(mSpan) / Number(m)).toFixed(6)) * 100}%`
36-
const lgFlexBase = `${Number((Number(lgSpan) / Number(lg)).toFixed(6)) * 100}%`
41+
const sFlexBase = `${Number((Number(getValidSpan(span, s)) / Number(s)).toFixed(6)) * 100}%`
42+
const mFlexBase = `${Number((Number(getValidSpan(span, m)) / Number(m)).toFixed(6)) * 100}%`
43+
const lgFlexBase = `${Number((Number(getValidSpan(span, lg)) / Number(lg)).toFixed(6)) * 100}%`
44+
3745
responsiveStyle = `
3846
@media (max-width: 720px) {
3947
flex: 0 0 ${sFlexBase};
48+
max-width: ${sFlexBase};
4049
}
4150
@media (min-width: 720px) and (max-width: 1200px) {
4251
flex: 0 0 ${mFlexBase};
52+
max-width: ${mFlexBase};
4353
}
4454
@media (min-width: 1200px) {
4555
flex: 0 0 ${lgFlexBase};
56+
max-width: ${lgFlexBase};
4657
}
4758
`
4859
}
4960

5061
return `
5162
${itemStyle}
63+
${responsiveStyle}
5264
`
5365
}
5466

‎packages/antd/src/components/FormMegaLayout/index.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,9 @@ const MegaLayout = (props: ILayoutProps) => {
8787
grid, gutter, autoRow, span, contextColumns,
8888
full, context, isRoot, responsive, inset, hasBorder
8989
} = layout
90+
const isSecondary = context.isRoot
9091
const itemProps: any = {
92+
isSecondary,
9193
inline,
9294
grid,
9395
autoRow,
@@ -103,7 +105,6 @@ const MegaLayout = (props: ILayoutProps) => {
103105
inset,
104106
hasBorder,
105107
}
106-
107108
if (label) {
108109
// 只能通过layoutProps来改动当前MegaLayout的label/wrapper相关配置
109110
const labelWidth = computeAttr(layoutProps.labelWidth, context.labelWidth, -1)
@@ -138,7 +139,7 @@ const MegaLayout = (props: ILayoutProps) => {
138139

139140
// 嵌套布局
140141
if (!props.grid && grid) {
141-
return <StyledLayoutNestWrapper nested {...{span, columns, contextColumns, gutter, context, responsive}}>
142+
return <StyledLayoutNestWrapper nested {...{span, columns, contextColumns, gutter, isSecondary, context, responsive}}>
142143
{ele}
143144
</StyledLayoutNestWrapper>
144145
}
@@ -160,8 +161,11 @@ const MegaLayoutItem = (props) => {
160161
if (layoutProps) {
161162
const { addonBefore, addonAfter } = megaProps
162163
const { columns, span, gutter, grid, inline, labelWidth, wrapperWidth, labelAlign, labelCol, wrapperCol, full,
163-
responsive, size, inset, hasBorder
164+
responsive, size, inset, hasBorder, context
164165
} = layoutProps;
166+
167+
const isSecondary = context.isRoot
168+
itemProps.isSecondary = isSecondary
165169
itemProps.hasBorder = hasBorder
166170
itemProps.inset = inset
167171
itemProps.labelAlign = labelAlign

‎packages/antd/src/components/FormMegaLayout/style.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const computeAntdStyleBase = (props, debug?: boolean) => {
88
const {
99
labelAlign,
1010
isLayout,
11+
isSecondary,
1112
inline,
1213
nested,
1314
inset,
@@ -250,13 +251,12 @@ export const computeAntdStyleBase = (props, debug?: boolean) => {
250251
return `
251252
${itemStyle}
252253
${getIEGridItemStyle({
254+
nested,
255+
isSecondary,
253256
gutter,
254257
enableResponsive: !disabledResponsive && responsive,
255258
responsive,
256-
span: minColumns > span ? span : minColumns,
257-
lgSpan: lg > span ? span : lg,
258-
mSpan: m > span ? span : m,
259-
sSpan: s > span ? span : s,
259+
span,
260260
autoRow,
261261
columns: contextColumns || columns,
262262
})}

‎packages/next/src/components/FormMegaLayout/ie.tsx

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,61 @@ const getIEGridContainerStyle = (opts) => {
66
return `
77
display: flex;
88
${autoRow ? 'flex-flow: row wrap;' : ''}
9-
margin: -${halfGutter}px -${halfGutter}px ${halfGutter}px;
9+
margin: -${halfGutter}px -${halfGutter}px;
10+
11+
.button-group {
12+
padding-left: ${halfGutter}px;
13+
display: flex;
14+
align-items: center;
15+
}
1016
`
1117
}
1218

1319
return ''
1420
}
1521

22+
const getValidSpan = (span, cols) => span > cols ? cols : span
1623
const getIEGridItemStyle = (opts) => {
1724
if (isIECompat) {
18-
const { gutter, span, columns } = opts
25+
const { gutter, span, columns, isSecondary,
26+
responsive, nested,
27+
enableResponsive } = opts
1928
const halfGutter = Math.floor(gutter / 2)
20-
const flexBase = `${Number((Number(span) / Number(columns)).toFixed(6)) * 100}%`
29+
const flexBase = `${Number((Number(getValidSpan(span, columns)) / Number(columns)).toFixed(6)) * 100}%`
2130

22-
return `
23-
padding: ${halfGutter}px;
31+
const itemStyle = `
32+
${nested ? `padding: ${halfGutter}px ${halfGutter}px 0;` : `padding: ${halfGutter}px;`}
2433
max-width: ${flexBase};
2534
flex: 0 0 ${flexBase};
2635
`
36+
37+
let responsiveStyle = ''
38+
if (isSecondary && enableResponsive) {
39+
const { s, m, lg } = responsive
40+
const sFlexBase = `${Number((Number(getValidSpan(span, s)) / Number(s)).toFixed(6)) * 100}%`
41+
const mFlexBase = `${Number((Number(getValidSpan(span, m)) / Number(m)).toFixed(6)) * 100}%`
42+
const lgFlexBase = `${Number((Number(getValidSpan(span, lg)) / Number(lg)).toFixed(6)) * 100}%`
43+
44+
responsiveStyle = `
45+
@media (max-width: 720px) {
46+
flex: 0 0 ${sFlexBase};
47+
max-width: ${sFlexBase};
48+
}
49+
@media (min-width: 720px) and (max-width: 1200px) {
50+
flex: 0 0 ${mFlexBase};
51+
max-width: ${mFlexBase};
52+
}
53+
@media (min-width: 1200px) {
54+
flex: 0 0 ${lgFlexBase};
55+
max-width: ${lgFlexBase};
56+
}
57+
`
58+
}
59+
60+
return `
61+
${itemStyle}
62+
${responsiveStyle}
63+
`
2764
}
2865

2966
return ''

‎packages/next/src/components/FormMegaLayout/index.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,9 +85,11 @@ const MegaLayout = (props: ILayoutProps) => {
8585
children={(layout) => {
8686
const { inline, required, columns, label, labelAlign,
8787
grid, gutter, autoRow, span, contextColumns,
88-
full, context, isRoot, responsive, inset, hasBorder
88+
full, context, isRoot, responsive, inset, hasBorder,
8989
} = layout
90+
const isSecondary = context.isRoot
9091
const itemProps: any = {
92+
isSecondary,
9193
inline,
9294
grid,
9395
autoRow,
@@ -138,7 +140,7 @@ const MegaLayout = (props: ILayoutProps) => {
138140

139141
// 嵌套布局
140142
if (!props.grid && grid) {
141-
return <StyledLayoutNestWrapper nested {...{span, columns, contextColumns, gutter, context, responsive}}>
143+
return <StyledLayoutNestWrapper nested {...{span, columns, contextColumns, gutter, isSecondary, context, responsive}}>
142144
{ele}
143145
</StyledLayoutNestWrapper>
144146
}
@@ -159,9 +161,11 @@ const MegaLayoutItem = (props) => {
159161
if (layoutProps) {
160162
const { addonBefore, addonAfter } = megaProps
161163
const { columns, span, gutter, grid, inline, labelWidth, wrapperWidth, labelAlign, labelCol, wrapperCol, full,
162-
responsive, size, inset, hasBorder
164+
responsive, size, inset, hasBorder, context
163165
} = layoutProps;
164166

167+
const isSecondary = context.isRoot
168+
itemProps.isSecondary = isSecondary
165169
itemProps.hasBorder = hasBorder
166170
itemProps.inset = inset
167171
itemProps.labelAlign = labelAlign

‎packages/next/src/components/FormMegaLayout/style.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export const computeNextStyleBase = (props) => {
3131
const {
3232
labelAlign,
3333
isLayout,
34+
isSecondary,
3435
inline,
3536
labelCol, grid, inset, context = {}, contextColumns, columns, hasBorder, autoRow,
3637
span, nested,
@@ -206,13 +207,12 @@ export const computeNextStyleBase = (props) => {
206207
return `
207208
${itemStyle}
208209
${getIEGridItemStyle({
210+
nested,
211+
isSecondary,
209212
gutter,
210-
disabledResponsive,
213+
enableResponsive: !disabledResponsive && responsive,
211214
responsive,
212-
span: minColumns > span ? span : minColumns,
213-
lgSpan: lg > span ? span : lg,
214-
mSpan: m > span ? span : m,
215-
sSpan: s > span ? span : s,
215+
span,
216216
autoRow,
217217
columns: contextColumns || columns,
218218
})}

0 commit comments

Comments
 (0)