feat: add appear timeout (#462)

* add appear timeout and tests for this * update jsdoc * add todo for fallback
reactjs · Feb 26, 2019 · 52cdc34 · 52cdc34
1 parent ea5761b
commit 52cdc34
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 5 deletions.
diff --git a/src/Transition.js b/src/Transition.js
@@ -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 }
   }
@@ -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) {
@@ -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)
         })
@@ -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) => {

diff --git a/src/utils/PropTypes.js b/src/utils/PropTypes.js
@@ -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;

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