Make exit timeout optional (#464)

* 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
reactjs · Mar 5, 2019 · 3a4cf9c · 3a4cf9c
1 parent 7e6785b
commit 3a4cf9c
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 10 deletions.
diff --git a/src/Transition.js b/src/Transition.js
@@ -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)
     }
   }
 
@@ -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

diff --git a/test/Transition-test.js b/test/Transition-test.js
@@ -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