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(

1