Merge pull request #166 from react-component/refactor-switch-scrolling-effect

refactor: use rc-util Portal switchScrollingEffect

Author: jljsj33

package.json

@@ -81,6 +81,6 @@
   "dependencies": {
     "babel-runtime": "6.x",
     "rc-animate": "2.x",
-    "rc-util": "^4.8.1"
+    "rc-util": "^4.16.1"
   }
 }

src/Dialog.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import KeyCode from 'rc-util/lib/KeyCode';
 import contains from 'rc-util/lib/Dom/contains';
-import switchScrollingEffect from 'rc-util/lib/switchScrollingEffect';
 import Animate from 'rc-animate';
 import LazyRenderBox from './LazyRenderBox';
 import IDialogPropTypes from './IDialogPropTypes';
@@ -45,17 +44,9 @@ function offset(el: any) {
   return pos;
 }
 
-// https://github.com/ant-design/ant-design/issues/19340
-// https://github.com/ant-design/ant-design/issues/19332
-interface ICacheOverflow {
-  overflowX?: string;
-  overflowY?: string;
-  overflow?: string;
-}
-let cacheOverflow: ICacheOverflow = {};
-
 export interface IDialogChildProps extends IDialogPropTypes {
   getOpenCount: () => number;
+  switchScrollingEffect?: () => void;
 }
 
 export default class Dialog extends React.Component<IDialogChildProps, any> {
@@ -81,10 +72,12 @@ export default class Dialog extends React.Component<IDialogChildProps, any> {
   private sentinelEnd: HTMLElement;
   private dialogMouseDown: boolean;
   private timeoutId: number;
+  private switchScrollingEffect: () => void;
 
   constructor(props: IDialogChildProps) {
     super(props);
     this.titleId = `rcDialogTitle${uuid++}`;
+    this.switchScrollingEffect = props.switchScrollingEffect || (() => {});
   }
 
   componentDidMount() {
@@ -377,39 +370,6 @@ export default class Dialog extends React.Component<IDialogChildProps, any> {
     return transitionName;
   }
 
-  switchScrollingEffect = () => {
-    const { getOpenCount } = this.props;
-    const openCount = getOpenCount();
-
-    if (openCount === 1) {
-      if (cacheOverflow.hasOwnProperty('overflowX')) {
-        return;
-      }
-      cacheOverflow = {
-        overflowX: document.body.style.overflowX,
-        overflowY: document.body.style.overflowY,
-        overflow:  document.body.style.overflow,
-      } as ICacheOverflow;
-      switchScrollingEffect();
-      // Must be set after switchScrollingEffect
-      document.body.style.overflow = 'hidden';
-    } else if (!openCount) {
-      // IE browser doesn't merge overflow style, need to set it separately
-      // https://github.com/ant-design/ant-design/issues/19393
-      if (cacheOverflow.overflow  !== undefined) {
-        document.body.style.overflow = cacheOverflow.overflow;
-      }
-      if (cacheOverflow.overflowX !== undefined) {
-        document.body.style.overflowX = cacheOverflow.overflowX;
-      }
-      if (cacheOverflow.overflowY !== undefined) {
-        document.body.style.overflowY = cacheOverflow.overflowY;
-      }
-      cacheOverflow = {};
-      switchScrollingEffect(true);
-    }
-  }
-
   close = (e: any) => {
     const { onClose } = this.props;
     if (onClose) {

tests/index.js

@@ -400,4 +400,36 @@ describe('dialog', () => {
     })
     expect(document.body.style.overflow).to.be('scroll');
   })
+
+  it('afterClose', (done) => {
+    const dialog = ReactDOM.render((
+      <DialogWrap
+        afterClose={done}
+      >
+        <div>afterClose</div>
+      </DialogWrap>
+    ),container);
+    dialog.setState({
+      visible: true,
+    });
+    dialog.setState({
+      visible: false,
+    });
+  });
+
+  it('zIndex', () => {
+    const dialog = ReactDOM.render((
+      <DialogWrap
+        zIndex={1000}
+      >
+        <div>afterClose</div>
+      </DialogWrap>
+    ),container);
+    dialog.setState({
+      visible: true,
+    });
+
+    expect($('.rc-dialog-wrap').css("zIndex")).to.be('1000');
+
+  });
 });