Skip to content

Commit

Permalink
Make exit timeout optional (#464)
Browse files Browse the repository at this point in the history
* fix bug from issue #460

* Update src/Transition.js

Co-Authored-By: dimensi <[email protected]>

* fix grammar and remove required from exit, enter props

* rewrite test

* little update
  • Loading branch information
dimensi authored and silvenon committed Mar 5, 2019
1 parent 7e6785b commit 3a4cf9c
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 10 deletions.
25 changes: 15 additions & 10 deletions src/Transition.js
Original file line number Diff line number Diff line change
Expand Up @@ -325,15 +325,18 @@ class Transition extends React.Component {
onTransitionEnd(node, timeout, handler) {
this.setNextCallback(handler)

if (node) {
if (this.props.addEndListener) {
this.props.addEndListener(node, this.nextCallback)
}
if (timeout != null) {
setTimeout(this.nextCallback, timeout)
}
} else {
const doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener
if (!node || doesNotHaveTimeoutOrListener) {
setTimeout(this.nextCallback, 0)
return
}

if (this.props.addEndListener) {
this.props.addEndListener(node, this.nextCallback)
}

if (timeout != null) {
setTimeout(this.nextCallback, timeout)
}
}

Expand Down Expand Up @@ -442,9 +445,11 @@ Transition.propTypes = {
* }}
* ```
*
* If the value of appear is not set, then the value from enter is taken.
* If the value of `appear` is not set, then the value from enter is taken.
*
* If the `enter` or `exit` value is `null` or `undefined`, then the timer is set to `0`
*
* @type {number | { enter?: number, exit?: number }}
* @type {number | { enter?: number, exit?: number, appear?: number }}
*/
timeout: (props, ...args) => {
let pt = timeoutsShape
Expand Down
24 changes: 24 additions & 0 deletions test/Transition-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,30 @@ describe('Transition', () => {
inst.setProps({ in: true })
})

it('should mount/unmount immediately if not have enter/exit timeout', (done) => {
const wrapper = mount(
<Transition in={true} timeout={{}}>
<div />
</Transition>
)

expect(wrapper.state('status')).toEqual(ENTERED)
let calledAfterTimeout = false
setTimeout(() => {
calledAfterTimeout = true
}, 10)
wrapper.setProps({
in: false,
onExited() {
expect(wrapper.state('status')).toEqual(EXITED)
if (!calledAfterTimeout) {
return done()
}
throw new Error('wrong timeout')
}
})
})

describe('appearing timeout', () => {
it('should use enter timeout if appear not set', done => {
let calledBeforeEntered = false
Expand Down

0 comments on commit 3a4cf9c

Please sign in to comment.