fix: compat ie10-11 for antd3 (#985)

* feat: compat ie10-11 for antd3 * feat: update test snapshot
alibaba · Aug 3, 2020 · 74fa86c · 74fa86c
1 parent 010e149
commit 74fa86c
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 11 deletions.
diff --git a/packages/antd/src/__tests__/__snapshots__/layout.spec.tsx.snap b/packages/antd/src/__tests__/__snapshots__/layout.spec.tsx.snap
@@ -37,11 +37,14 @@ exports[`inline style gutter item 1`] = `
   vertical-align: top;
 }
 
-.c0 > .ant-form-item-control-wrapper,
 .c0 > .ant-form-item-control {
   display: inline-block;
 }
 
+.c0.mega-layout-item > .ant-form-item-control-wrapper {
+  display: inline-block;
+}
+
 .c0.ant-form-item.ant-row {
   display: inline-block;
   vertical-align: top;
@@ -72,11 +75,14 @@ exports[`inline style item 1`] = `
   vertical-align: top;
 }
 
-.c0 > .ant-form-item-control-wrapper,
 .c0 > .ant-form-item-control {
   display: inline-block;
 }
 
+.c0.mega-layout-item > .ant-form-item-control-wrapper {
+  display: inline-block;
+}
+
 .c0.ant-form-item.ant-row {
   display: inline-block;
   vertical-align: top;
@@ -107,11 +113,14 @@ exports[`inline style labelAlign:top item 1`] = `
   vertical-align: top;
 }
 
-.c0 > .ant-form-item-control-wrapper,
 .c0 > .ant-form-item-control {
   display: block;
 }
 
+.c0.mega-layout-item > .ant-form-item-control-wrapper {
+  display: block;
+}
+
 .c0.ant-form-item.ant-row {
   display: inline-block;
   vertical-align: top;
@@ -142,11 +151,14 @@ exports[`inline style labelAlign:top layout 1`] = `
   vertical-align: top;
 }
 
-.c0 > .ant-form-item-control-wrapper,
 .c0 > .ant-form-item-control {
   display: block;
 }
 
+.c0.mega-layout-item > .ant-form-item-control-wrapper {
+  display: block;
+}
+
 <div
   className="c0"
 />
@@ -163,11 +175,14 @@ exports[`inline style layout 1`] = `
   vertical-align: top;
 }
 
-.c0 > .ant-form-item-control-wrapper,
 .c0 > .ant-form-item-control {
   display: inline-block;
 }
 
+.c0.mega-layout-item > .ant-form-item-control-wrapper {
+  display: inline-block;
+}
+
 <div
   className="c0"
 />

diff --git a/packages/antd/src/components/FormMegaLayout/ie.tsx b/packages/antd/src/components/FormMegaLayout/ie.tsx
@@ -9,6 +9,8 @@ const getIEGridContainerStyle = (opts) => {
             display: flex;
             ${autoRow ? 'flex-flow: row wrap;' : ''}
             margin: -${halfGutter}px -${halfGutter}px;
+            grid-column-gap: 0;
+            grid-row-gap: 0;
             
             .button-group {
                 padding-left: ${halfGutter}px;
@@ -21,6 +23,33 @@ const getIEGridContainerStyle = (opts) => {
     return ''
 }
 
+const getIEContainerAntd3Style = (opts) => {
+    if (isIECompat) {
+        return `
+            .ant-form-item-control-wrapper {
+                display: flex;
+                flex-direction: column;
+
+                > .ant-form-item-control {
+
+                    > .ant-form-item-children {
+                        display: flex;
+                        flex-direction: column;
+                        min-height: 32px;
+                    }
+                }
+            }
+
+            > .ant-form-item-control-wrapper {
+                flex: 1;
+            }
+            
+        `
+    }
+
+    return ''
+}
+
 const getValidSpan = (span, cols) => span > cols ? cols : span
 const getIEGridItemStyle = (opts) => {
     if (isIECompat) {
@@ -69,6 +98,7 @@ const getIEGridItemStyle = (opts) => {
 }
 
 export {
+    getIEContainerAntd3Style,
     getIEGridContainerStyle,
     getIEGridItemStyle,
 }
diff --git a/packages/antd/src/components/FormMegaLayout/index.tsx b/packages/antd/src/components/FormMegaLayout/index.tsx
@@ -192,7 +192,7 @@ const MegaLayoutItem = (props) => {
         componentProps.style = {
           ...(componentProps.style || {}),
           width: '100%',
-          flex: 1,
+          flex: '1 1 0%',
         }
       }
 

diff --git a/packages/antd/src/components/FormMegaLayout/style.tsx b/packages/antd/src/components/FormMegaLayout/style.tsx
@@ -1,6 +1,6 @@
 import { css } from 'styled-components'
 import insetStyle from './inset'
-import { getIEGridContainerStyle, getIEGridItemStyle } from './ie'
+import { getIEContainerAntd3Style, getIEGridContainerStyle, getIEGridItemStyle } from './ie'
 
 const formatPx = num => (typeof num === 'string' ? num.replace('px', '') : num)
 export const computeAntdStyleBase = (props, debug?: boolean) => {
@@ -53,6 +53,7 @@ export const computeAntdStyleBase = (props, debug?: boolean) => {
                 flex: 1 1 0;
             }
         }
+        ${getIEContainerAntd3Style()}
     `
 
     // 嵌套不需要执行响应
@@ -187,11 +188,17 @@ export const computeAntdStyleBase = (props, debug?: boolean) => {
                     display: inline-block;
                     vertical-align: top;
                 }
-                > .ant-form-item-control-wrapper,
+
                 > .ant-form-item-control {
                     display: ${labelAlign !== 'top' ? 'inline-block' : 'block'};
                 }                
-            }                  
+            }
+
+            &.mega-layout-item {
+                > .ant-form-item-control-wrapper {
+                    display: ${labelAlign !== 'top' ? 'inline-block' : 'block'};
+                } 
+            }
         `
 
         if (!isLayout) {

diff --git a/packages/next/src/components/FormMegaLayout/index.tsx b/packages/next/src/components/FormMegaLayout/index.tsx
@@ -191,7 +191,7 @@ const MegaLayoutItem = (props) => {
         componentProps.style = {
           ...(componentProps.style || {}),
           width: '100%',
-          flex: 1,
+          flex: '1 1 0%',
         }
       }
 

diff --git a/packages/react-schema-renderer/src/shared/connect.ts b/packages/react-schema-renderer/src/shared/connect.ts
@@ -152,7 +152,7 @@ export const connect = <ExtendsComponentKey extends string = ''>(
         componentProps.style = {
           ...(componentProps.style || {}),
           width: '100%',
-          flex: 1,
+          flex: '1 1 0%',
         }
       }