[fixed] animation after unmounting

Fixes issue reactjs#17: "When the modal is unmounted, it will abruptly close,
not waiting for any animations to finish."

The bug was caused by the Modal component unmounting the portal
immediately in `componentWillUnmount` regardless of whether the portal
is currently closing or would animate to close.

Now the Modal inspects the portal state and unmounts the portal after
the appropriate timeout.

lib/components/Modal.js

@@ -62,6 +62,24 @@ var Modal = React.createClass({
   },
 
   componentWillUnmount: function() {
+    var state = this.portal.state;
+    var now = Date.now();
+    var closesAt = state.isOpen
+      && (state.closesAt
+        || now + this.props.closeTimeoutMS);
+
+    if (closesAt) {
+      if (!state.closesAt) {
+        this.portal.closeWithTimeout();
+      }
+
+      setTimeout(this.removePortal, closesAt - now);
+    } else {
+      this.removePortal();
+    }
+  },
+
+  removePortal: function() {
     ReactDOM.unmountComponentAtNode(this.node);
     document.body.removeChild(this.node);
     elementClass(document.body).remove('ReactModal__Body--open');

lib/components/ModalPortal.js

@@ -106,8 +106,9 @@ var ModalPortal = module.exports = React.createClass({
   },
 
   closeWithTimeout: function() {
-    this.setState({beforeClose: true}, function() {
-      this.closeTimer = setTimeout(this.closeWithoutTimeout, this.props.closeTimeoutMS);
+    var closesAt = Date.now() + this.props.closeTimeoutMS;
+    this.setState({beforeClose: true, closesAt: closesAt}, function() {
+      this.closeTimer = setTimeout(this.closeWithoutTimeout, this.state.closesAt - Date.now());
     }.bind(this));
   },
 
@@ -116,6 +117,7 @@ var ModalPortal = module.exports = React.createClass({
       beforeClose: false,
       isOpen: false,
       afterOpen: false,
+      closesAt: null
     }, this.afterClose);
   },
 
@@ -166,7 +168,7 @@ var ModalPortal = module.exports = React.createClass({
   },
 
   shouldBeClosed: function() {
-    return !this.props.isOpen && !this.state.beforeClose;
+    return !this.state.isOpen && !this.state.beforeClose;
   },
 
   contentHasFocus: function() {