From ad6bd1c33d3421e7ffba1bc5c79649884d513236 Mon Sep 17 00:00:00 2001
From: Toru Kobayashi <koba0004@gmail.com>
Date: Wed, 25 Jul 2018 01:09:17 +0900
Subject: [PATCH] fix(CSSTransition): done classname for appearing

---
 src/CSSTransition.js       |  6 +++-
 test/CSSTransition-test.js | 65 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+), 1 deletion(-)

diff --git a/src/CSSTransition.js b/src/CSSTransition.js
index c5b51f5a..6d6a9729 100644
--- a/src/CSSTransition.js
+++ b/src/CSSTransition.js
@@ -25,6 +25,7 @@ const propTypes = {
    * classNames={{
    *  appear: 'my-appear',
    *  appearActive: 'my-active-appear',
+   *  appearDone: 'my-done-appear',
    *  enter: 'my-enter',
    *  enterActive: 'my-active-enter',
    *  enterDone: 'my-done-enter',
@@ -50,6 +51,7 @@ const propTypes = {
    * @type {string | {
    *  appear?: string,
    *  appearActive?: string,
+   *  appearDone?: string,
    *  enter?: string,
    *  enterActive?: string,
    *  enterDone?: string,
@@ -147,7 +149,9 @@ class CSSTransition extends React.Component {
   }
 
   onEntered = (node, appearing) => {
-    const { doneClassName } = this.getClassNames('enter');
+    const { doneClassName } = this.getClassNames(
+      appearing ? 'appear' : 'enter'
+    );
 
     this.removeClasses(node, appearing ? 'appear' : 'enter');
     addClass(node, doneClassName);
diff --git a/test/CSSTransition-test.js b/test/CSSTransition-test.js
index 6d4a1e40..744cbbd7 100644
--- a/test/CSSTransition-test.js
+++ b/test/CSSTransition-test.js
@@ -113,6 +113,71 @@ describe('CSSTransition', () => {
     });
   });
 
+  describe('appearing', () => {
+
+    beforeEach(() => {
+    });
+
+    it('should apply classes at each transition state', done => {
+      let count = 0;
+
+      mount(
+        <CSSTransition
+          appear
+          in
+          timeout={10}
+          classNames="test"
+          onEnter={(node) => {
+            count++;
+            expect(node.className).toEqual('test-appear');
+          }}
+          onEntering={(node) => {
+            count++;
+            expect(node.className).toEqual('test-appear test-appear-active');
+          }}
+          onEntered={(node) => {
+            expect(node.className).toEqual('test-appear-done');
+            expect(count).toEqual(2);
+            done();
+          }}
+        >
+          <div/>
+        </CSSTransition>
+      )
+    });
+
+    it('should apply custom classNames names', done => {
+      let count = 0;
+      mount(
+        <CSSTransition
+          appear
+          in
+          timeout={10}
+          classNames={{
+            appear: 'custom',
+            appearActive: 'custom-super-active',
+            appearDone: 'custom-super-done',
+          }}
+          onEnter={(node) => {
+            count++;
+            expect(node.className).toEqual('custom');
+          }}
+          onEntering={(node) => {
+            count++;
+            expect(node.className).toEqual('custom custom-super-active');
+          }}
+          onEntered={(node) => {
+            expect(node.className).toEqual('custom-super-done');
+            expect(count).toEqual(2);
+            done();
+          }}
+        >
+          <div/>
+        </CSSTransition>
+      );
+    });
+  });
+
   describe('exiting', ()=> {
     let instance;