fix#16

README.md

@@ -111,6 +111,12 @@ ReactDOM.render(
           <th>true</th>
           <td>whether show close button and click mask to close</td>
       </tr>
+      <tr>
+          <td>maskClosable</td>
+          <td>Boolean</td>
+          <th>true</th>
+          <td>whether click mask to close, this prop will be ignored if set closable prop to false</td>
+      </tr>
       <tr>
           <td>mousePosition</td>
           <td>{x:number,y:number}</td>

src/Dialog.jsx

@@ -48,6 +48,7 @@ const Dialog = React.createClass({
     onAfterClose: PropTypes.func,
     onClose: PropTypes.func,
     closable: PropTypes.bool,
+    maskClosable: PropTypes.bool,
     visible: PropTypes.bool,
     mousePosition: PropTypes.object,
   },
@@ -88,7 +89,7 @@ const Dialog = React.createClass({
   },
 
   onMaskClick(e) {
-    if (this.props.closable) {
+    if (this.props.closable && this.props.maskClosable) {
       this.close(e);
     }
     ReactDOM.findDOMNode(this.refs.dialog).focus();

src/DialogWrap.jsx

@@ -78,7 +78,7 @@ class DialogWrap extends React.Component {
   getDialogElement(extra) {
     const props = this.props;
     let dialogProps = copy(props, [
-      'className', 'closable', 'align',
+      'className', 'closable', 'maskClosable', 'align',
       'title', 'footer', 'mask',
       'animation', 'transitionName',
       'maskAnimation', 'maskTransitionName', 'mousePosition',
@@ -120,6 +120,7 @@ DialogWrap.defaultProps = {
   },
   mask: true,
   closable: true,
+  maskClosable: true,
   prefixCls: 'rc-dialog',
   onClose: noop,
 };
@@ -132,6 +133,7 @@ DialogWrap.propTypes = {
   }),
   mask: React.PropTypes.bool,
   closable: React.PropTypes.bool,
+  maskClosable: React.PropTypes.bool,
   prefixCls: React.PropTypes.string,
   visible: React.PropTypes.bool,
   onClose: React.PropTypes.func,

tests/index.spec.js

@@ -110,6 +110,36 @@ describe('dialog', function() {
     }], finish);
   });
 
+  it('mask to close', function(finish) {
+    async.series([function(done) {
+      dialog.setState({
+        visible: true,
+      });
+      setTimeout(done, 10);
+    }, function(done) {
+      const mask = $('.rc-dialog-mask')[0];
+      Simulate.click(mask);
+      setTimeout(done, 10);
+    }, function(done) {
+      // dialog should closed after mask click
+      expect(callback1).to.be(1);
+      expect($('.rc-dialog').hasClass('rc-dialog-hidden')).to.be.ok();
+      done();
+    }, function(done) {
+      dialog.setState({
+        visible: true,
+        maskClosable: false,
+      });
+
+      setTimeout(done, 10);
+    }, function(done) {
+      // dialog should stay on visible after mask click if set maskClosable to false
+      // expect(callback1).to.be(0);
+      expect($('.rc-dialog').hasClass('rc-dialog-hidden')).not.to.be.ok();
+      done();
+    }], finish);
+  });
+
   it('renderToBody', function() {
     const d = ReactDOM.render(<Dialog>
       <p className="renderToBody">1</p>