[added] trigger onAfterOpen callback when available. (#154)

Author: diasbruno

README.md

@@ -7,7 +7,8 @@ Accessible modal dialog component for React.JS
 ```xml
 <Modal
   isOpen={bool}
-  onRequestClose={fn}
+  onAfterOpen={afterOpenFn}
+  onRequestClose={requestOpenFn}
   closeTimeoutMS={n}
   style={customStyle}
 >
@@ -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({
         <button onClick={this.openModal}>Open Modal</button>
         <Modal
           isOpen={this.state.modalIsOpen}
+          onAfterOpen={this.afterOpenModal}
           onRequestClose={this.closeModal}
           style={customStyles} >
 
-          <h2>Hello</h2>
+          <h2 ref="subtitle">Hello</h2>
           <button onClick={this.closeModal}>close</button>
           <div>I am a modal</div>
           <form>
@@ -146,7 +153,8 @@ pass the 'shouldCloseOnOverlayClick' prop with 'false' value.
 ```xml
 <Modal
   isOpen={bool}
-  onRequestClose={fn}
+  onAfterOpen={afterOpenFn}
+  onRequestClose={requestCloseFn}
   closeTimeoutMS={n}
   shouldCloseOnOverlayClick={false}
   style={customStyle}>

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 (
       <div>
         <button onClick={this.openModal}>Open Modal</button>
         <button onClick={this.openModal2}>Open Modal 2</button>
         <Modal
+          ref="mymodal"
           closeTimeoutMS={150}
           isOpen={this.state.modalIsOpen}
-          onRequestClose={this.handleModalCloseRequest}
-        >
-          <h1>Hello</h1>
+          onAfterOpen={this.handleOnAfterOpenModal}
+          onRequestClose={this.handleModalCloseRequest}>
+          <h1 ref="title">Hello</h1>
           <button onClick={this.closeModal}>close</button>
           <div>I am a modal</div>
           <form>

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,

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));
   },
 

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();