Merge pull request react-bootstrap#1048 from react-bootstrap/overlay-transition-hooks

[added] Overlay and OverlayTrigger accept Transition callbacks

Author: jquense

src/Overlay.js

@@ -59,13 +59,20 @@ class Overlay extends React.Component {
     );
 
     if (Transition) {
+      let { onExit, onExiting, onEnter, onEntering, onEntered } = props;
+
       // This animates the child node by injecting props, so it must precede
       // anything that adds a wrapping div.
       child = (
         <Transition
           in={props.show}
           transitionAppear
+          onExit={onExit}
+          onExiting={onExiting}
           onExited={this.onHiddenListener}
+          onEnter={onEnter}
+          onEntering={onEntering}
+          onEntered={onEntered}
         >
           {child}
         </Transition>
@@ -93,8 +100,12 @@ class Overlay extends React.Component {
     );
   }
 
-  handleHidden() {
+  handleHidden(...args) {
     this.setState({exited: true});
+
+    if (this.props.onExited) {
+      this.props.onExited(...args);
+    }
   }
 }
 
@@ -120,7 +131,37 @@ Overlay.propTypes = {
   animation: React.PropTypes.oneOfType([
       React.PropTypes.bool,
       CustomPropTypes.elementType
-  ])
+  ]),
+
+  /**
+   * Callback fired before the Overlay transitions in
+   */
+  onEnter: React.PropTypes.func,
+
+  /**
+   * Callback fired as the Overlay begins to transition in
+   */
+  onEntering: React.PropTypes.func,
+
+  /**
+   * Callback fired after the Overlay finishes transitioning in
+   */
+  onEntered: React.PropTypes.func,
+
+  /**
+   * Callback fired right before the Overlay transitions out
+   */
+  onExit: React.PropTypes.func,
+
+  /**
+   * Callback fired as the Overlay begins to transition out
+   */
+  onExiting: React.PropTypes.func,
+
+  /**
+   * Callback fired after the Overlay finishes transitioning out
+   */
+  onExited: React.PropTypes.func
 };
 
 Overlay.defaultProps = {

src/OverlayTrigger.js

@@ -5,7 +5,7 @@ import createChainedFunction from './utils/createChainedFunction';
 import createContextWrapper from './utils/createContextWrapper';
 import Overlay from './Overlay';
 import warning from 'react/lib/warning';
-
+import pick from 'lodash/object/pick';
 /**
  * Check if value one is inside or equal to the of value
  *
@@ -148,24 +148,26 @@ const OverlayTrigger = React.createClass({
   },
 
   getOverlay() {
-    let props = {
-      show:      this.state.isOverlayShown,
-      onHide:    this.hide,
-      rootClose: this.props.rootClose,
-      animation: this.props.animation,
+    let overlayProps = {
+      ...pick(this.props, Object.keys(Overlay.propTypes)),
+      show: this.state.isOverlayShown,
+      onHide: this.hide,
       target: this.getOverlayTarget,
-      placement: this.props.placement,
-      container: this.props.container,
-      containerPadding: this.props.containerPadding
+      onExit: this.props.onExit,
+      onExiting: this.props.onExiting,
+      onExited: this.props.onExited,
+      onEnter: this.props.onEnter,
+      onEntering: this.props.onEntering,
+      onEntered: this.props.onEntered
     };
 
     let overlay = cloneElement(this.props.overlay, {
-      placement: props.placement,
-      container: props.container
+      placement: overlayProps.placement,
+      container: overlayProps.container
     });
 
     return (
-      <Overlay {...props}>
+      <Overlay {...overlayProps}>
         { overlay }
       </Overlay>
     );

test/OverlayTriggerSpec.js

@@ -39,6 +39,41 @@ describe('OverlayTrigger', function() {
     instance.state.isOverlayShown.should.be.true;
   });
 
+  it('Should pass transition callbacks to Transition', function (done) {
+    let count = 0;
+    let increment = ()=> count++;
+
+    let overlayTrigger;
+
+    let instance = ReactTestUtils.renderIntoDocument(
+      <OverlayTrigger
+        trigger='click'
+        overlay={<div>test</div>}
+        onHide={()=>{}}
+        onExit={increment}
+        onExiting={increment}
+        onExited={()=> {
+          increment();
+          expect(count).to.equal(6);
+          done();
+        }}
+        onEnter={increment}
+        onEntering={increment}
+        onEntered={()=> {
+          increment();
+          ReactTestUtils.Simulate.click(overlayTrigger);
+        }}
+      >
+        <button>button</button>
+      </OverlayTrigger>
+    );
+
+    overlayTrigger = React.findDOMNode(instance);
+
+    ReactTestUtils.Simulate.click(overlayTrigger);
+  });
+
+
   it('Should forward requested context', function() {
     const contextTypes = {
       key: React.PropTypes.string