fix: pass appear to CSSTransition callbacks (#441)

Based on #144, but with working tests. Fixes #143.
reactjs · Dec 20, 2018 · df7adb4 · df7adb4
1 parent 69a45c4
commit df7adb4
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 3 deletions.
diff --git a/src/CSSTransition.js b/src/CSSTransition.js
@@ -130,7 +130,7 @@ class CSSTransition extends React.Component {
     addClass(node, className)
 
     if (this.props.onEnter) {
-      this.props.onEnter(node)
+      this.props.onEnter(node, appearing)
     }
   }
 
@@ -142,7 +142,7 @@ class CSSTransition extends React.Component {
     this.reflowAndAddClass(node, activeClassName)
 
     if (this.props.onEntering) {
-      this.props.onEntering(node)
+      this.props.onEntering(node, appearing)
     }
   }
 
@@ -153,7 +153,7 @@ class CSSTransition extends React.Component {
     addClass(node, doneClassName);
 
     if (this.props.onEntered) {
-      this.props.onEntered(node)
+      this.props.onEntered(node, appearing)
     }
   }
 

diff --git a/test/CSSTransition-test.js b/test/CSSTransition-test.js
@@ -113,6 +113,97 @@ describe('CSSTransition', () => {
     });
   });
 
+  describe('appearing', () => {
+    it('should apply appear classes at each transition state', done => {
+      let count = 0;
+      mount(
+        <CSSTransition
+          timeout={10}
+          classNames='appear-test'
+          in={true}
+          appear={true}
+          onEnter={(node, isAppearing) => {
+            count++;
+            expect(isAppearing).toEqual(true);
+            expect(node.className).toEqual('appear-test-appear');
+          }}
+          onEntering={(node, isAppearing) => {
+            count++;
+            expect(isAppearing).toEqual(true);
+            expect(node.className).toEqual('appear-test-appear appear-test-appear-active');
+          }}
+
+          onEntered={(node, isAppearing) => {
+            expect(isAppearing).toEqual(true);
+            expect(node.className).toEqual('appear-test-enter-done');
+            expect(count).toEqual(2);
+            done();
+          }}
+        >
+          <div/>
+        </CSSTransition>
+      );
+    });
+
+    it('should not be appearing in normal enter mode', done => {
+      let count = 0;
+      mount(
+        <CSSTransition
+          timeout={10}
+          classNames='not-appear-test'
+          appear={true}
+        >
+          <div/>
+        </CSSTransition>
+      ).setProps({
+        in: true,
+
+        onEnter(node, isAppearing){
+          count++;
+          expect(isAppearing).toEqual(false);
+          expect(node.className).toEqual('not-appear-test-enter');
+        },
+
+        onEntering(node, isAppearing){
+          count++;
+          expect(isAppearing).toEqual(false);
+          expect(node.className).toEqual('not-appear-test-enter not-appear-test-enter-active');
+        },
+
+        onEntered(node, isAppearing){
+          expect(isAppearing).toEqual(false);
+          expect(node.className).toEqual('not-appear-test-enter-done');
+          expect(count).toEqual(2);
+          done();
+        }
+      });
+    });
+
+    it('should not enter the transition states when appear=false', () => {
+      mount(
+        <CSSTransition
+          timeout={10}
+          classNames='appear-fail-test'
+          in={true}
+          appear={false}
+          onEnter={() => {
+            throw Error('Enter called!')
+          }}
+          onEntering={() => {
+            throw Error('Entring called!')
+          }}
+          onEntered={() => {
+            throw Error('Entred called!')
+          }}
+        >
+          <div/>
+        </CSSTransition>
+      );
+    });
+
+
+  });
+
   describe('exiting', ()=> {
     let instance;