Skip to content

Commit

Permalink
feat: add support for empty classNames (#481)
Browse files Browse the repository at this point in the history
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 `-`.
  • Loading branch information
danielhusar authored and jquense committed Apr 2, 2019
1 parent d115bef commit d755dc6
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 6 deletions.
17 changes: 11 additions & 6 deletions src/CSSTransition.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')

Expand Down Expand Up @@ -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,
Expand Down
33 changes: 33 additions & 0 deletions test/CSSTransition-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
});
});
});
});

0 comments on commit d755dc6

Please sign in to comment.