Merge pull request #504 from mmarkelov/Fix_adding_undefined_to_class

Fix adding undefined to class
reactjs · Apr 28, 2020 · 13435f8 · 13435f8
2 parents bf4cd7c + dad4a88
commit 13435f8
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git a/src/CSSTransition.js b/src/CSSTransition.js
@@ -173,9 +173,10 @@ class CSSTransition extends React.Component {
 
   addClass(node, type, phase) {
     let className = this.getClassNames(type)[`${phase}ClassName`];
+    const { doneClassName } = this.getClassNames('enter');
 
-    if (type === 'appear' && phase === 'done') {
-      className += ` ${this.getClassNames('enter').doneClassName}`;
+    if (type === 'appear' && phase === 'done' && doneClassName) {
+      className += ` ${doneClassName}`;
     }
 
     // This is for to force a repaint,
@@ -185,8 +186,10 @@ class CSSTransition extends React.Component {
       node && node.scrollTop;
     }
 
-    this.appliedClasses[type][phase] = className
-    addClass(node, className)
+    if (className) {
+      this.appliedClasses[type][phase] = className
+      addClass(node, className)
+    }
   }
 
   removeClasses(node, type) {

diff --git a/test/CSSTransition-test.js b/test/CSSTransition-test.js
@@ -165,7 +165,29 @@ describe('CSSTransition', () => {
           <div />
         </CSSTransition>
       )
-    })
+    });
+
+    it('should not add undefined when appearDone is not defined', done => {
+      mount(
+        <CSSTransition
+          timeout={10}
+          classNames={{ appear: 'appear-test' }}
+          in={true}
+          appear={true}
+          onEnter={(node, isAppearing) => {
+            expect(isAppearing).toEqual(true);
+            expect(node.className).toEqual('appear-test');
+          }}
+          onEntered={(node, isAppearing) => {
+            expect(isAppearing).toEqual(true);
+            expect(node.className).toEqual('');
+            done();
+          }}
+        >
+          <div/>
+        </CSSTransition>
+      );
+    });
 
     it('should not be appearing in normal enter mode', done => {
       let count = 0;