From 6c03d17e45486d26ec219966af55264b4bcfadf4 Mon Sep 17 00:00:00 2001 From: Bruno Dias Date: Tue, 12 Apr 2016 10:00:50 -0300 Subject: [PATCH] [added] trigger onAfterOpen callback when available. (#154) --- README.md | 14 +++++++++++--- examples/basic/app.js | 12 +++++++++--- lib/components/Modal.js | 1 + lib/components/ModalPortal.js | 4 ++++ specs/Modal.spec.js | 12 ++++++++++++ 5 files changed, 37 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 7fb28543..ea64b428 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,8 @@ Accessible modal dialog component for React.JS ```xml @@ -104,6 +105,11 @@ var App = React.createClass({ this.setState({modalIsOpen: true}); }, + afterOpenModal: function() { + // references are now sync'd and can be accessed. + this.refs.subtitle.style.color = '#f00'; + }, + closeModal: function() { this.setState({modalIsOpen: false}); }, @@ -114,10 +120,11 @@ var App = React.createClass({ -

Hello

+

Hello

I am a modal
@@ -146,7 +153,8 @@ pass the 'shouldCloseOnOverlayClick' prop with 'false' value. ```xml diff --git a/examples/basic/app.js b/examples/basic/app.js index 2a1a772d..00b5ad47 100644 --- a/examples/basic/app.js +++ b/examples/basic/app.js @@ -60,17 +60,23 @@ var App = React.createClass({ this.setState({foo: 'bar'}); }, + handleOnAfterOpenModal: function() { + // when ready, we can access the available refs. + this.refs.title.style.color = '#F00'; + }, + render: function() { return (
-

Hello

+ onAfterOpen={this.handleOnAfterOpenModal} + onRequestClose={this.handleModalCloseRequest}> +

Hello

I am a modal
diff --git a/lib/components/Modal.js b/lib/components/Modal.js index c753a233..0d1aba9b 100644 --- a/lib/components/Modal.js +++ b/lib/components/Modal.js @@ -31,6 +31,7 @@ var Modal = React.createClass({ overlay: React.PropTypes.object }), appElement: React.PropTypes.instanceOf(SafeHTMLElement), + onAfterOpen: React.PropTypes.func, onRequestClose: React.PropTypes.func, closeTimeoutMS: React.PropTypes.number, ariaHideApp: React.PropTypes.bool, diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js index cc8779e7..dc8003c9 100644 --- a/lib/components/ModalPortal.js +++ b/lib/components/ModalPortal.js @@ -76,6 +76,10 @@ var ModalPortal = module.exports = React.createClass({ focusManager.markForFocusLater(); this.setState({isOpen: true}, function() { this.setState({afterOpen: true}); + + if (this.props.isOpen && this.props.onAfterOpen) { + this.props.onAfterOpen(); + } }.bind(this)); }, diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js index 599f1aec..fd525340 100644 --- a/specs/Modal.spec.js +++ b/specs/Modal.spec.js @@ -201,6 +201,18 @@ describe('Modal', function () { unmountModal(); }); + it('should trigger the onAfterOpen callback', function() { + var afterOpenCallback = sinon.spy(); + var modal = renderModal({ + isOpen: true, + onAfterOpen: function() { + afterOpenCallback(); + } + }); + ok(afterOpenCallback.called); + unmountModal(); + }); + describe('should close on overlay click', function() { afterEach('Unmount modal', function() { unmountModal();