diff --git a/src/CSSTransition.js b/src/CSSTransition.js index df5e6a30..79c7cd8a 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 b04fff16..2eb925e4 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( + +
+ + ) + + 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(); + } + }); + }); }); });