Merge pull request #19 from yesmeck/avoid-body-scrolling

Avoid body scrolling when dialog open

assets/bootstrap.less

@@ -1,2 +1,3 @@
+@import "./bootstrap/body.less";
 @import "./bootstrap/Dialog.less";
-@import "./bootstrap/Mask.less";
+@import "./bootstrap/Mask.less";

assets/bootstrap/Mask.less

@@ -9,4 +9,5 @@
   opacity: .5;
   z-index: 1000;
   filter: alpha(opacity=50);
-}
+  overflow: auto;
+}

assets/bootstrap/body.less

@@ -0,0 +1,3 @@
+.rc-dialog-scrolling {
+  overflow: hidden;
+}

assets/index.less

@@ -1,4 +1,5 @@
 @prefixCls: rc-dialog;
 
+@import "./index/body.less";
 @import "./index/Dialog.less";
-@import "./index/Mask.less";
+@import "./index/Mask.less";

assets/index/Mask.less

@@ -10,6 +10,7 @@
     height: 100%;
     z-index: 1000;
     filter: alpha(opacity=50);
+    overflow: auto;
 
     &-hidden {
       display: none;

assets/index/body.less

@@ -0,0 +1,5 @@
+.@{prefixCls} {
+  &-scrolling {
+    overflow: hidden;
+  }
+}

src/DOMWrap.jsx

@@ -18,7 +18,7 @@ const DOMWrap = React.createClass({
       props.className += ' ' + props.hiddenClassName;
     }
     const Tag = props.tag;
-    return <Tag {...props} />;
+    return <Tag {...props}>{props.children}</Tag>;
   },
 });
 

src/Dialog.jsx

@@ -70,6 +70,7 @@ const Dialog = React.createClass({
       // first show
       if (!prevProps.visible) {
         this.lastOutSideFocusNode = document.activeElement;
+        this.addScrollingClass();
         ReactDOM.findDOMNode(this.refs.dialog).focus();
       }
     } else if (prevProps.visible) {
@@ -80,6 +81,7 @@ const Dialog = React.createClass({
           this.lastOutSideFocusNode = null;
         }
         this.lastOutSideFocusNode = null;
+        this.removeScrollingClass();
       }
     }
   },
@@ -89,10 +91,12 @@ const Dialog = React.createClass({
   },
 
   onMaskClick(e) {
-    if (this.props.closable && this.props.maskClosable) {
-      this.close(e);
+    if (e.target === e.currentTarget) {
+      if (this.props.closable && this.props.maskClosable) {
+        this.close(e);
+      }
+      ReactDOM.findDOMNode(this.refs.dialog).focus();
     }
-    ReactDOM.findDOMNode(this.refs.dialog).focus();
   },
 
   onKeyDown(e) {
@@ -207,7 +211,7 @@ const Dialog = React.createClass({
     </Animate>);
   },
 
-  getMaskElement() {
+  getMaskElement(dialog) {
     const props = this.props;
     const maskProps = {
       onClick: this.onMaskClick,
@@ -221,8 +225,10 @@ const Dialog = React.createClass({
       const maskTransition = this.getMaskTransitionName();
       maskElement = (<DOMWrap {...maskProps} key="mask"
                                              className={`${props.prefixCls}-mask`}
-                                            visible={props.visible}
-                                            hiddenClassName={`${props.prefixCls}-mask-hidden`} />);
+                                             visible={props.visible}
+                                             hiddenClassName={`${props.prefixCls}-mask-hidden`}>
+        {dialog}
+      </DOMWrap>);
       if (maskTransition) {
         maskElement = (<Animate key="mask" showProp="visible"
                                 transitionAppear component=""
@@ -256,6 +262,19 @@ const Dialog = React.createClass({
     return this.refs[part];
   },
 
+  addScrollingClass() {
+    const props = this.props;
+    const scrollingClassName = `${props.prefixCls}-scrolling`;
+    document.body.className += ` ${scrollingClassName}`;
+  },
+
+  removeScrollingClass() {
+    const props = this.props;
+    const scrollingClassName = `${props.prefixCls}-scrolling`;
+    const body = document.body;
+    body.className = body.className.replace(scrollingClassName, '');
+  },
+
   close(e) {
     this.props.onClose(e);
   },
@@ -268,7 +287,7 @@ const Dialog = React.createClass({
     };
 
     return (<div className={classNames(className)} ref="root">
-      {[this.getMaskElement(), this.getDialogElement()]}
+      {this.getMaskElement(this.getDialogElement())}
     </div>);
   },
 });