diff --git a/README.md b/README.md
index 7d88df24..8b7631c6 100644
--- a/README.md
+++ b/README.md
@@ -111,6 +111,12 @@ ReactDOM.render(
true |
whether show close button and click mask to close |
+
+ | maskClosable |
+ Boolean |
+ true |
+ whether click mask to close, this prop will be ignored if set closable prop to false |
+
| mousePosition |
{x:number,y:number} |
diff --git a/src/Dialog.jsx b/src/Dialog.jsx
index 95d2df37..83cf46be 100644
--- a/src/Dialog.jsx
+++ b/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();
diff --git a/src/DialogWrap.jsx b/src/DialogWrap.jsx
index ce785d3b..df872762 100644
--- a/src/DialogWrap.jsx
+++ b/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,
diff --git a/tests/index.spec.js b/tests/index.spec.js
index 5fe28be8..ef77bff9 100644
--- a/tests/index.spec.js
+++ b/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(