From ffd9afdc8224112ac747595649ca2e55cd044149 Mon Sep 17 00:00:00 2001
From: Alicia Lopez <alicia.lopez00318@gmail.com>
Date: Tue, 2 Apr 2019 10:04:54 -0700
Subject: [PATCH] feat: add support for empty classNames (#481)

Hey!

I think it would be quite usefull if `classNames` prop would be optional, and it would still work without it.

In our use-case we are using it together with styled components and it's quite annoying to add those prefixes all the time, when component styles are already scoped.

Also if you pass empty string, it adds classes beginning with `-`.
---
 src/CSSTransition.js       | 17 +++++++++++------
 test/CSSTransition-test.js | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/src/CSSTransition.js b/src/CSSTransition.js
index df5e6a3..79c7cd8 100644
--- a/src/CSSTransition.js
+++ b/src/CSSTransition.js
@@ -71,6 +71,9 @@ const removeClass = (node, classes) => node && classes && classes.split(' ').for
  * `*-active` classes represent which styles you want to animate **to**.
  */
 class CSSTransition extends React.Component {
+  static defaultProps = {
+    classNames: ''
+  }
   onEnter = (node, appearing) => {
     const { className } = this.getClassNames(appearing ? 'appear' : 'enter')
 
@@ -140,15 +143,17 @@ class CSSTransition extends React.Component {
 
   getClassNames = (type) => {
     const { classNames } = this.props;
+    const isStringClassNames = typeof classNames === 'string';
+    const prefix = isStringClassNames && classNames ? classNames + '-' : '';
 
-    let className = typeof classNames !== 'string' ?
-      classNames[type] : classNames + '-' + type;
+    let className = isStringClassNames ?
+      prefix + type : classNames[type]
 
-    let activeClassName = typeof classNames !== 'string' ?
-      classNames[type + 'Active'] : className + '-active';
+    let activeClassName = isStringClassNames ?
+      className + '-active' : classNames[type + 'Active'];
 
-    let doneClassName = typeof classNames !== 'string' ?
-      classNames[type + 'Done'] : className + '-done';
+    let doneClassName = isStringClassNames ?
+      className + '-done' : classNames[type + 'Done'];
 
     return {
       className,
diff --git a/test/CSSTransition-test.js b/test/CSSTransition-test.js
index b04fff1..2eb925e 100644
--- a/test/CSSTransition-test.js
+++ b/test/CSSTransition-test.js
@@ -279,5 +279,38 @@ describe('CSSTransition', () => {
         }
       });
     });
+
+    it('should support empty prefix', done => {
+      let count = 0;
+
+      const instance = mount(
+        <CSSTransition
+          in
+          timeout={10}
+        >
+          <div/>
+        </CSSTransition>
+      )
+
+      instance.setProps({
+        in: false,
+
+        onExit(node){
+          count++;
+          expect(node.className).toEqual('exit');
+        },
+
+        onExiting(node){
+          count++;
+          expect(node.className).toEqual('exit exit-active');
+        },
+
+        onExited(node){
+          expect(node.className).toEqual('exit-done');
+          expect(count).toEqual(2);
+          done();
+        }
+      });
+    });
   });
 });