Skip to content

Commit

Permalink
[added] Overlay and OverlayTrigger accept Transition callbacks
Browse files Browse the repository at this point in the history
  • Loading branch information
jquense committed Jul 23, 2015
1 parent 99e8cc1 commit d272389
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 14 deletions.
45 changes: 43 additions & 2 deletions src/Overlay.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,13 +57,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>
Expand Down Expand Up @@ -91,8 +98,12 @@ class Overlay extends React.Component {
);
}

handleHidden() {
handleHidden(...args) {
this.setState({exited: true});

if (this.props.onExited) {
this.props.onExited(...args);
}
}
}

Expand All @@ -118,7 +129,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 = {
Expand Down
26 changes: 14 additions & 12 deletions src/OverlayTrigger.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
*
Expand Down Expand Up @@ -146,24 +146,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>
);
Expand Down
35 changes: 35 additions & 0 deletions test/OverlayTriggerSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit d272389

Please sign in to comment.