fix(Dialog): fullscreen mask click. fix alibaba-fusion#927 (alibaba-f…

…usion#932) * fix(Dialog): fullscreen mask click. fix alibaba-fusion#927
AricZhu · Sep 2, 2019 · e9b5d28 · e9b5d28
1 parent 86eedfe
commit e9b5d28
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 23 deletions.
diff --git a/docs/dialog/demo/large-content.md b/docs/dialog/demo/large-content.md
@@ -25,7 +25,8 @@ const largeContent = new Array(30).fill(
 class Demo extends React.Component {
     state = {
         visible: false,
-        isFullScreen: false
+        isFullScreen: false,
+        closeOnMaskClick: false,
     };
 
     onOpen = () => {
@@ -46,21 +47,32 @@ class Demo extends React.Component {
         });
     }
 
+    toggleCloseOnMaskClick = () => {
+        this.setState({
+            closeOnMaskClick: !this.state.closeOnMaskClick
+        });
+    }
+
     render() {
-        const { visible, isFullScreen } = this.state;
+        const { visible, isFullScreen, closeOnMaskClick } = this.state;
 
         return (
             <div>
                 <div style={{ display: 'block', marginBottom: '10px' }}>
                     When the height of the dialog exceeds the viewport height of the browser, whether to show the scroll bar:
                 </div>
                 <Switch style={{ display: 'block', marginBottom: '10px' }} checked={isFullScreen} onChange={this.toggleIsFullScreen} />
+                <div style={{ display: 'block', marginBottom: '10px' }}>
+                    Close on mask click:
+                </div>
+                <Switch style={{ display: 'block', marginBottom: '10px' }} checked={closeOnMaskClick} onChange={this.toggleCloseOnMaskClick} />
                 <Button onClick={this.onOpen} type="primary">
                     Open dialog
                 </Button>
                 <Dialog title="Welcome to Alibaba.com"
                     visible={visible}
                     isFullScreen={isFullScreen}
+                    closeable={closeOnMaskClick ? 'close,esc,mask' : 'close,esc'}
                     onOk={this.onClose}
                     onCancel={this.onClose}
                     onClose={this.onClose}>

diff --git a/src/dialog/dialog.jsx b/src/dialog/dialog.jsx
@@ -374,6 +374,7 @@ export default class Dialog extends Component {
             needAdjust: false,
             ref: this.getOverlayRef,
             rtl,
+            maskClass: useCSS ? `${prefix}dialog-container` : '',
         };
         if (!useCSS) {
             newOverlayProps.beforePosition = this.beforePosition;
@@ -383,19 +384,6 @@ export default class Dialog extends Component {
 
         const inner = this.renderInner(canCloseByCloseClick);
 
-        return (
-            <Overlay {...newOverlayProps}>
-                {useCSS ? (
-                    <div
-                        className={`${prefix}dialog-container`}
-                        dir={rtl ? 'rtl' : undefined}
-                    >
-                        {inner}
-                    </div>
-                ) : (
-                    inner
-                )}
-            </Overlay>
-        );
+        return <Overlay {...newOverlayProps}>{inner}</Overlay>;
     }
 }
diff --git a/src/dialog/main.scss b/src/dialog/main.scss
@@ -105,6 +105,7 @@
         padding: $s-10;
         overflow: auto;
         text-align: center;
+        box-sizing: border-box;
 
         &:before {
             display: inline-block;

diff --git a/src/overlay/main.scss b/src/overlay/main.scss
@@ -1,4 +1,5 @@
 @import "../core/index-noreset.scss";
+@import "./scss/variable.scss";
 
 .#{$css-prefix}overlay-wrapper {
     .#{$css-prefix}overlay-inner {
@@ -12,12 +13,12 @@
         left: 0;
         width: 100%;
         height: 100%;
-        background: $mask-background;
+        background-color: $color-calculate-mask-background;
         transition: opacity $motion-duration-standard $motion-ease;
         opacity: 0;
     }
 
     &.opened .#{$css-prefix}overlay-backdrop {
-        opacity: $mask-opacity;
+        opacity: 1;
     }
 }
diff --git a/src/overlay/overlay.jsx b/src/overlay/overlay.jsx
@@ -186,6 +186,7 @@ export default class Overlay extends Component {
         onMaskMouseEnter: PropTypes.func,
         onMaskMouseLeave: PropTypes.func,
         onClick: PropTypes.func,
+        maskClass: PropTypes.string,
     };
 
     static defaultProps = {
@@ -216,6 +217,7 @@ export default class Overlay extends Component {
         disableScroll: false,
         cache: false,
         onClick: e => e.stopPropagation(),
+        maskClass: '',
     };
 
     constructor(props) {
@@ -702,6 +704,7 @@ export default class Overlay extends Component {
             wrapperClassName,
             onMaskMouseEnter,
             onMaskMouseLeave,
+            maskClass,
         } = this.props;
         const { visible: stateVisible, status, animation } = this.state;
 
@@ -718,7 +721,7 @@ export default class Overlay extends Component {
             }
             const childClazz = classnames({
                 [`${prefix}overlay-inner`]: true,
-                [animation.in]: status === 'entering',
+                [animation.in]: status === 'entering' || status === 'mounting',
                 [animation.out]: status === 'leaving',
                 [child.props.className]: !!child.props.className,
                 [className]: !!className,
@@ -772,6 +775,11 @@ export default class Overlay extends Component {
                 wrapperStyle
             );
 
+            const maskClazz = classnames({
+                [`${prefix}overlay-backdrop`]: true,
+                [maskClass]: !!maskClass,
+            });
+
             children = (
                 <div
                     className={wrapperClazz}
@@ -780,14 +788,17 @@ export default class Overlay extends Component {
                 >
                     {hasMask ? (
                         <div
-                            className={`${prefix}overlay-backdrop`}
+                            className={maskClazz}
                             onClick={this.handleMaskClick}
                             onMouseEnter={onMaskMouseEnter}
                             onMouseLeave={onMaskMouseLeave}
                             dir={rtl ? 'rtl' : undefined}
-                        />
-                    ) : null}
-                    {children}
+                        >
+                            {children}
+                        </div>
+                    ) : (
+                        children
+                    )}
                 </div>
             );
         }

diff --git a/src/overlay/scss/variable.scss b/src/overlay/scss/variable.scss
@@ -0,0 +1 @@
+$color-calculate-mask-background: change-color($color: $mask-background, $alpha: $mask-opacity);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		$color-calculate-mask-background: change-color($color: $mask-background, $alpha: $mask-opacity);