feat(Dialog): new api noPadding for Dialog body padding fix #3892 (#3893

)
alibaba-fusion · May 30, 2022 · ffb274f · ffb274f
1 parent e421fe2
commit ffb274f
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 2 deletions.
diff --git a/docs/dialog/index.md b/docs/dialog/index.md
@@ -68,6 +68,7 @@ API变化：
 | isFullScreen         | [v2废弃] 是否撑开页面。 v2 改用 overflowScroll                                                                                                                                                                                                    | Boolean             | false                                                                             |          |
 | shouldUpdatePosition | [v2废弃] 是否在对话框重新渲染时及时更新对话框位置，一般用于对话框高度变化后依然能保证原来的对齐方式                                                                                                                                                                                   | Boolean             | false                                                                             |          |
 | minMargin            | [v2废弃] 对话框距离浏览器顶部和底部的最小间距，align 被设置为 'cc cc' 并且 isFullScreen 被设置为 true 时不生效                                                                                                                                                            | Number              | 40                                                                                |          |
+| noPadding            | 去除body内间距                                                                                                                                                                                                                              | Boolean             | false                                                                             | 1.26     |
 
 <!-- api-extra-start -->
 

diff --git a/src/dialog/dialog.jsx b/src/dialog/dialog.jsx
@@ -204,6 +204,11 @@ export default class Dialog extends Component {
          * [v2废弃] 对话框距离浏览器顶部和底部的最小间距，align 被设置为 'cc cc' 并且 isFullScreen 被设置为 true 时不生效
          */
         minMargin: PropTypes.number,
+        /**
+         * 去除body内间距
+         * @version 1.26
+         */
+        noPadding: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -235,6 +240,7 @@ export default class Dialog extends Component {
         bottom: 40,
         overlayProps: {},
         locale: zhCN.Dialog,
+        noPadding: false,
     };
 
     constructor(props, context) {
@@ -383,6 +389,7 @@ export default class Dialog extends Component {
             visible,
             rtl,
             height,
+            noPadding,
         } = this.props;
         const others = pickOthers(Object.keys(Dialog.propTypes), this.props);
 
@@ -403,6 +410,7 @@ export default class Dialog extends Component {
                 rtl={rtl}
                 onClose={onClose.bind(this, 'closeClick')}
                 height={height}
+                noPadding={noPadding}
                 {...others}
             >
                 {children}

diff --git a/src/dialog/inner.jsx b/src/dialog/inner.jsx
@@ -35,6 +35,7 @@ export default class Inner extends Component {
         v2: PropTypes.bool,
         closeIcon: PropTypes.node,
         pure: PropTypes.bool,
+        noPadding: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -113,12 +114,13 @@ export default class Inner extends Component {
     }
 
     renderBody() {
-        const { prefix, children, footer } = this.props;
+        const { prefix, children, footer, noPadding } = this.props;
         if (children) {
             return (
                 <div
                     className={cx(`${prefix}dialog-body`, {
                         [`${prefix}dialog-body-no-footer`]: footer === false,
+                        [`${prefix}dialog-body-no-padding`]: noPadding === true,
                     })}
                     ref={this.getNode.bind(this, 'bodyNode')}
                 >

diff --git a/src/dialog/main.scss b/src/dialog/main.scss
@@ -33,6 +33,9 @@
     &-body-no-footer {
         margin-bottom: $dialog-content-margin-bottom-no-footer;
     }
+    &-body-no-padding {
+        padding: 0;
+    }
 
     /* 让用户自己设置 */
     /* &.#{$css-prefix}closeable &-header, */
@@ -171,6 +174,9 @@
         #{$dialog-prefix}-header + #{$dialog-prefix}-body-no-footer {
             margin-bottom: $dialog-content-margin-bottom-no-footer;
         }
+        #{$dialog-prefix}-body#{$dialog-prefix}-body-no-padding {
+            padding: 0;
+        }
     }
 
     &#{$dialog-prefix}-v2 {

diff --git a/src/drawer/drawer-v2.jsx b/src/drawer/drawer-v2.jsx
@@ -272,6 +272,12 @@ const Drawer = props => {
         setVisibleOverlayToParent(id, node);
     };
 
+    const nstyle = {
+        width,
+        height,
+        ...style,
+    };
+
     return (
         <OverlayContext.Provider
             value={{
@@ -292,7 +298,7 @@ const Drawer = props => {
                         </Animate.OverlayAnimate>
                     ) : null}
 
-                    <div className={innerWrapperCls} style={{ width, height }} ref={drawerRef}>
+                    <div className={innerWrapperCls} style={nstyle} ref={drawerRef}>
                         <Animate.OverlayAnimate
                             visible={visible}
                             animation={newAnimation}