fix(Dialog): style higher than props fix alibaba-fusion#3797

bindoon · May 13, 2022 · 1b8a06b · 1b8a06b
1 parent 9155964
commit 1b8a06b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 20 deletions.
diff --git a/src/dialog/dialog-v2.jsx b/src/dialog/dialog-v2.jsx
@@ -260,9 +260,9 @@ const Dialog = props => {
         bottom && (topStyle.paddingBottom = bottom);
     }
 
-    let maxHeight;
-    if (overflowScroll) {
-        maxHeight = `calc(100vh - ${top + bottom}px)`;
+    const nstyle = style || {};
+    if (overflowScroll && !nstyle.maxHeight) {
+        nstyle.maxHeight = `calc(100vh - ${top + bottom}px)`;
     }
 
     const timeout = {
@@ -282,7 +282,7 @@ const Dialog = props => {
         >
             <Inner
                 {...others}
-                style={centered ? { ...topStyle, ...style } : style}
+                style={centered ? { ...topStyle, ...nstyle } : nstyle}
                 v2
                 ref={dialogRef}
                 prefix={prefix}
@@ -301,7 +301,6 @@ const Dialog = props => {
                 onClose={(...args) => handleClose('closeClick', ...args)}
                 closeIcon={closeIcon}
                 height={height}
-                maxHeight={maxHeight}
                 width={width}
             >
                 {children}

diff --git a/src/dialog/dialog.jsx b/src/dialog/dialog.jsx
@@ -163,7 +163,7 @@ export default class Dialog extends Component {
          */
         centered: PropTypes.bool,
         /**
-         * [v2] 对话框高度超过浏览器视口高度时，对话框是否展示滚动条。关闭此功后对话框会随高度撑开页面
+         * [v2] 对话框高度超过浏览器视口高度时，对话框是否展示滚动条。关闭此功后对话框会随高度撑开页面。
          * @version 1.25
          */
         overflowScroll: PropTypes.bool,

diff --git a/src/dialog/inner.jsx b/src/dialog/inner.jsx
@@ -52,8 +52,13 @@ export default class Inner extends Component {
     };
 
     componentDidUpdate() {
-        const { maxHeight, height: pheight = maxHeight, v2 } = this.props;
-        if (this.bodyNode && v2 && pheight && pheight !== 'auto') {
+        // style 作为第一优先级
+        const {
+            height: pheight,
+            style: { maxHeight, height: sheight = maxHeight || pheight },
+            v2,
+        } = this.props;
+        if (this.bodyNode && v2 && sheight && sheight !== 'auto') {
             const style = {};
             let headerHeight = 0,
                 footerHeight = 0;
@@ -64,15 +69,14 @@ export default class Inner extends Component {
                 footerHeight = this.footerNode.getBoundingClientRect().height;
             }
             const minHeight = headerHeight + footerHeight;
-            style.minHeight = minHeight;
 
-            let height = pheight;
-            if (pheight && typeof pheight === 'string') {
+            let height = sheight;
+            if (sheight && typeof sheight === 'string') {
                 if (height.match(/calc|vh/)) {
-                    style.maxHeight = `calc(${pheight} - ${minHeight}px)`;
+                    style.maxHeight = `calc(${sheight} - ${minHeight}px)`;
                     style.overflowY = 'auto';
                 } else {
-                    height = parseInt(pheight);
+                    height = parseInt(sheight);
                 }
             }
 
@@ -114,7 +118,7 @@ export default class Inner extends Component {
             return (
                 <div
                     className={cx(`${prefix}dialog-body`, {
-                        [`${prefix}dialog-body-no-footer`]: footer === false
+                        [`${prefix}dialog-body-no-footer`]: footer === false,
                     })}
                     ref={this.getNode.bind(this, 'bodyNode')}
                 >
@@ -202,12 +206,7 @@ export default class Inner extends Component {
             ariaProps['aria-labelledby'] = this.titleId;
         }
 
-        const width = others.style && others.style.width;
-        others.style = Object.assign({}, others.style, obj.pickProps(['height', 'maxHeight', 'width'], this.props));
-        // 兼容 v1 style={width} 用法, 这里增加了 width api， 导致 style.width 优先级低了
-        if (width) {
-            others.style.width = width;
-        }
+        others.style = Object.assign({}, obj.pickProps(['height', 'maxHeight', 'width'], this.props), others.style);
 
         return (
             <div {...ariaProps} className={newClassName} {...others} dir={rtl ? 'rtl' : undefined}>