feat(layout): support responsive gri layout for older browsers (#916)

* feat: support responsive grid layout for older browsers
alibaba · Jun 29, 2020 · f87e70d · f87e70d
1 parent f3d6da9
commit f87e70d
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 30 deletions.
diff --git a/packages/antd/src/components/FormMegaLayout/ie.tsx b/packages/antd/src/components/FormMegaLayout/ie.tsx
@@ -6,49 +6,61 @@ const getIEGridContainerStyle = (opts) => {
         return `
             display: flex;
             ${autoRow ? 'flex-flow: row wrap;' : ''}
-            margin: -${halfGutter}px -${halfGutter}px ${halfGutter}px;
+            margin: -${halfGutter}px -${halfGutter}px;
+            
+            .button-group {
+                padding-left: ${halfGutter}px;
+                display: flex;
+                align-items: center;   
+            }
         `
     }
 
     return ''
 }
 
+const getValidSpan = (span, cols) => span > cols ? cols : span
+
 const getIEGridItemStyle = (opts) => {
     if (isIECompat) {
-        const { gutter, span, columns,
-            lgSpan, mSpan, sSpan,
-            responsive,
+        const { gutter, span, columns, isSecondary,
+            responsive, nested,
             enableResponsive } = opts
         const halfGutter = Math.floor(gutter / 2)
-        const flexBase = `${Number((Number(span) / Number(columns)).toFixed(6)) * 100}%`
+        const flexBase = `${Number((Number(getValidSpan(span, columns)) / Number(columns)).toFixed(6)) * 100}%`
 
         const itemStyle = `
-            padding: ${halfGutter}px;
+            ${nested ? `padding: ${halfGutter}px ${halfGutter}px 0;` : `padding: ${halfGutter}px;`}
             max-width: ${flexBase};
             flex: 0 0 ${flexBase};
         `
 
         let responsiveStyle = ''
-        if (enableResponsive) {
+        if (isSecondary && enableResponsive) {
             const { s, m, lg } = responsive
-            const sFlexBase = `${Number((Number(sSpan) / Number(s)).toFixed(6)) * 100}%`
-            const mFlexBase = `${Number((Number(mSpan) / Number(m)).toFixed(6)) * 100}%`
-            const lgFlexBase = `${Number((Number(lgSpan) / Number(lg)).toFixed(6)) * 100}%`
+            const sFlexBase = `${Number((Number(getValidSpan(span, s)) / Number(s)).toFixed(6)) * 100}%`
+            const mFlexBase = `${Number((Number(getValidSpan(span, m)) / Number(m)).toFixed(6)) * 100}%`
+            const lgFlexBase = `${Number((Number(getValidSpan(span, lg)) / Number(lg)).toFixed(6)) * 100}%`
+
             responsiveStyle = `
                 @media (max-width: 720px) {
                     flex: 0 0 ${sFlexBase};
+                    max-width: ${sFlexBase};
                 }
                 @media (min-width: 720px) and (max-width: 1200px) {
                     flex: 0 0 ${mFlexBase};
+                    max-width: ${mFlexBase};
                 }
                 @media (min-width: 1200px) {
                     flex: 0 0 ${lgFlexBase};
+                    max-width: ${lgFlexBase};
                 }
             `
         }
 
         return `
             ${itemStyle}
+            ${responsiveStyle}
         `
     }
 

diff --git a/packages/antd/src/components/FormMegaLayout/index.tsx b/packages/antd/src/components/FormMegaLayout/index.tsx
@@ -87,7 +87,9 @@ const MegaLayout = (props: ILayoutProps) => {
                 grid, gutter, autoRow, span, contextColumns,
                 full, context, isRoot, responsive, inset, hasBorder
             } = layout
+            const isSecondary = context.isRoot
             const itemProps: any = {
+              isSecondary,
               inline,
               grid,
               autoRow,
@@ -103,7 +105,6 @@ const MegaLayout = (props: ILayoutProps) => {
               inset,
               hasBorder,
             }
-
             if (label) {
                 // 只能通过layoutProps来改动当前MegaLayout的label/wrapper相关配置
                 const labelWidth = computeAttr(layoutProps.labelWidth, context.labelWidth, -1)
@@ -138,7 +139,7 @@ const MegaLayout = (props: ILayoutProps) => {
 
             // 嵌套布局
             if (!props.grid && grid) {   
-              return <StyledLayoutNestWrapper nested {...{span, columns, contextColumns, gutter, context, responsive}}>
+              return <StyledLayoutNestWrapper nested {...{span, columns, contextColumns, gutter, isSecondary, context, responsive}}>
                 {ele}
               </StyledLayoutNestWrapper>
             }
@@ -160,8 +161,11 @@ const MegaLayoutItem = (props) => {
     if (layoutProps) {
       const { addonBefore, addonAfter } = megaProps
       const { columns, span, gutter, grid, inline, labelWidth, wrapperWidth, labelAlign, labelCol, wrapperCol, full,
-        responsive, size, inset, hasBorder
+        responsive, size, inset, hasBorder, context
       } = layoutProps;
+
+      const isSecondary = context.isRoot
+      itemProps.isSecondary = isSecondary
       itemProps.hasBorder = hasBorder
       itemProps.inset = inset
       itemProps.labelAlign = labelAlign

diff --git a/packages/antd/src/components/FormMegaLayout/style.tsx b/packages/antd/src/components/FormMegaLayout/style.tsx
@@ -8,6 +8,7 @@ export const computeAntdStyleBase = (props, debug?: boolean) => {
     const {
         labelAlign,
         isLayout,
+        isSecondary,
         inline,
         nested,
         inset,
@@ -250,13 +251,12 @@ export const computeAntdStyleBase = (props, debug?: boolean) => {
         return `
             ${itemStyle}
             ${getIEGridItemStyle({
+                nested,
+                isSecondary,
                 gutter,
                 enableResponsive: !disabledResponsive && responsive,
                 responsive,
-                span: minColumns > span ? span : minColumns,
-                lgSpan: lg > span ? span : lg,
-                mSpan: m > span ? span : m,
-                sSpan: s > span ? span : s,
+                span,
                 autoRow,
                 columns: contextColumns || columns,
             })}

diff --git a/packages/next/src/components/FormMegaLayout/ie.tsx b/packages/next/src/components/FormMegaLayout/ie.tsx
@@ -6,24 +6,61 @@ const getIEGridContainerStyle = (opts) => {
         return `
             display: flex;
             ${autoRow ? 'flex-flow: row wrap;' : ''}
-            margin: -${halfGutter}px -${halfGutter}px ${halfGutter}px;
+            margin: -${halfGutter}px -${halfGutter}px;
+            
+            .button-group {
+                padding-left: ${halfGutter}px;
+                display: flex;
+                align-items: center;   
+            }
         `
     }
 
     return ''
 }
 
+const getValidSpan = (span, cols) => span > cols ? cols : span
 const getIEGridItemStyle = (opts) => {
     if (isIECompat) {
-        const { gutter, span, columns } = opts
+        const { gutter, span, columns, isSecondary,
+            responsive, nested,
+            enableResponsive } = opts
         const halfGutter = Math.floor(gutter / 2)
-        const flexBase = `${Number((Number(span) / Number(columns)).toFixed(6)) * 100}%`
+        const flexBase = `${Number((Number(getValidSpan(span, columns)) / Number(columns)).toFixed(6)) * 100}%`
 
-        return `
-            padding: ${halfGutter}px;
+        const itemStyle = `
+            ${nested ? `padding: ${halfGutter}px ${halfGutter}px 0;` : `padding: ${halfGutter}px;`}
             max-width: ${flexBase};
             flex: 0 0 ${flexBase};
         `
+
+        let responsiveStyle = ''
+        if (isSecondary && enableResponsive) {
+            const { s, m, lg } = responsive
+            const sFlexBase = `${Number((Number(getValidSpan(span, s)) / Number(s)).toFixed(6)) * 100}%`
+            const mFlexBase = `${Number((Number(getValidSpan(span, m)) / Number(m)).toFixed(6)) * 100}%`
+            const lgFlexBase = `${Number((Number(getValidSpan(span, lg)) / Number(lg)).toFixed(6)) * 100}%`
+
+            responsiveStyle = `
+                @media (max-width: 720px) {
+                    flex: 0 0 ${sFlexBase};
+                    max-width: ${sFlexBase};
+                }
+                @media (min-width: 720px) and (max-width: 1200px) {
+                    flex: 0 0 ${mFlexBase};
+                    max-width: ${mFlexBase};
+                }
+                @media (min-width: 1200px) {
+                    flex: 0 0 ${lgFlexBase};
+                    max-width: ${lgFlexBase};
+                }
+            `
+        }
+
+        return `
+            ${itemStyle}
+            ${responsiveStyle}
+        `
     }
 
     return ''

diff --git a/packages/next/src/components/FormMegaLayout/index.tsx b/packages/next/src/components/FormMegaLayout/index.tsx
@@ -85,9 +85,11 @@ const MegaLayout = (props: ILayoutProps) => {
         children={(layout) => {
             const { inline, required, columns, label, labelAlign,
                 grid, gutter, autoRow, span, contextColumns,
-                full, context, isRoot, responsive, inset, hasBorder
+                full, context, isRoot, responsive, inset, hasBorder,
             } = layout
+            const isSecondary = context.isRoot
             const itemProps: any = {
+              isSecondary,
               inline,
               grid,
               autoRow,
@@ -138,7 +140,7 @@ const MegaLayout = (props: ILayoutProps) => {
 
             // 嵌套布局
             if (!props.grid && grid) {   
-              return <StyledLayoutNestWrapper nested {...{span, columns, contextColumns, gutter, context, responsive}}>
+              return <StyledLayoutNestWrapper nested {...{span, columns, contextColumns, gutter, isSecondary, context, responsive}}>
                 {ele}
               </StyledLayoutNestWrapper>
             }
@@ -159,9 +161,11 @@ const MegaLayoutItem = (props) => {
     if (layoutProps) {
       const { addonBefore, addonAfter } = megaProps
       const { columns, span, gutter, grid, inline, labelWidth, wrapperWidth, labelAlign, labelCol, wrapperCol, full,
-       responsive, size, inset, hasBorder
+       responsive, size, inset, hasBorder, context
       } = layoutProps;
 
+      const isSecondary = context.isRoot
+      itemProps.isSecondary = isSecondary
       itemProps.hasBorder = hasBorder
       itemProps.inset = inset
       itemProps.labelAlign = labelAlign

diff --git a/packages/next/src/components/FormMegaLayout/style.tsx b/packages/next/src/components/FormMegaLayout/style.tsx
@@ -31,6 +31,7 @@ export const computeNextStyleBase = (props) => {
     const {
         labelAlign,
         isLayout,
+        isSecondary,
         inline,
         labelCol, grid, inset, context = {}, contextColumns, columns, hasBorder, autoRow,
         span, nested,
@@ -206,13 +207,12 @@ export const computeNextStyleBase = (props) => {
         return `
             ${itemStyle}
             ${getIEGridItemStyle({
+                nested,
+                isSecondary,
                 gutter,
-                disabledResponsive,
+                enableResponsive: !disabledResponsive && responsive,
                 responsive,
-                span: minColumns > span ? span : minColumns,
-                lgSpan: lg > span ? span : lg,
-                mSpan: m > span ? span : m,
-                sSpan: s > span ? span : s,
+                span,
                 autoRow,
                 columns: contextColumns || columns,
             })}