Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat: add appear timeout (#462)
* add appear timeout and tests for this

* update jsdoc

* add todo for fallback
  • Loading branch information
dimensi authored and jquense committed Feb 26, 2019
1 parent ea5761b commit 52cdc34
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 5 deletions.
11 changes: 7 additions & 4 deletions src/Transition.js
Expand Up @@ -212,7 +212,8 @@ class Transition extends React.Component {
if (timeout != null && typeof timeout !== 'number') {
exit = timeout.exit
enter = timeout.enter
appear = timeout.appear
// TODO: remove fallback for next major
appear = timeout.appear !== undefined ? timeout.appear : enter
}
return { exit, enter, appear }
}
Expand Down Expand Up @@ -240,7 +241,7 @@ class Transition extends React.Component {
: mounting

const timeouts = this.getTimeouts()

const enterTimeout = appearing ? timeouts.appear : timeouts.enter
// no enter animation skip right to ENTERED
// if we are mounting and running this it means appear _must_ be set
if (!mounting && !enter) {
Expand All @@ -255,8 +256,7 @@ class Transition extends React.Component {
this.safeSetState({ status: ENTERING }, () => {
this.props.onEntering(node, appearing)

// FIXME: appear timeout?
this.onTransitionEnd(node, timeouts.enter, () => {
this.onTransitionEnd(node, enterTimeout, () => {
this.safeSetState({ status: ENTERED }, () => {
this.props.onEntered(node, appearing)
})
Expand Down Expand Up @@ -438,9 +438,12 @@ Transition.propTypes = {
* timeout={{
* enter: 300,
* exit: 500,
* appear: 500,
* }}
* ```
*
* If the value of appear is not set, then the value from enter is taken.
*
* @type {number | { enter?: number, exit?: number }}
*/
timeout: (props, ...args) => {
Expand Down
3 changes: 2 additions & 1 deletion src/utils/PropTypes.js
Expand Up @@ -6,7 +6,8 @@ export const timeoutsShape =
PropTypes.number,
PropTypes.shape({
enter: PropTypes.number,
exit: PropTypes.number
exit: PropTypes.number,
appear: PropTypes.number,
}).isRequired
])
: null;
Expand Down
47 changes: 47 additions & 0 deletions test/Transition-test.js
Expand Up @@ -131,6 +131,53 @@ describe('Transition', () => {
inst.setProps({ in: true })
})

describe('appearing timeout', () => {
it('should use enter timeout if appear not set', done => {
let calledBeforeEntered = false
setTimeout(() => {
calledBeforeEntered = true
}, 10)
const wrapper = mount(
<Transition in={true} timeout={{ enter: 20, exit: 10 }} appear>
<div />
</Transition>
)

wrapper.setProps({
onEntered() {
if (calledBeforeEntered) {
done()
} else {
throw new Error('wrong timeout')
}
},
})
})

it('should use appear timeout if appear is set', done => {
const wrapper = mount(
<Transition in={true} timeout={{ enter: 20, exit: 10, appear: 5 }} appear>
<div />
</Transition>
)

let isCausedLate = false
setTimeout(() => {
isCausedLate = true
}, 15)

wrapper.setProps({
onEntered() {
if (isCausedLate) {
throw new Error('wrong timeout')
} else {
done()
}
}
})
})
})

describe('entering', () => {
let wrapper

Expand Down

0 comments on commit 52cdc34

Please sign in to comment.