From 6c03d17e45486d26ec219966af55264b4bcfadf4 Mon Sep 17 00:00:00 2001
From: Bruno Dias <dias.h.bruno@gmail.com>
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
 <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}>
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 (
       <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>
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();