Skip to content

Commit d755dc6

Browse files
danielhusarjquense
authored andcommitted
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 `-`.
1 parent d115bef commit d755dc6

File tree

2 files changed

+44
-6
lines changed

2 files changed

+44
-6
lines changed

src/CSSTransition.js

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,9 @@ const removeClass = (node, classes) => node && classes && classes.split(' ').for
7171
* `*-active` classes represent which styles you want to animate **to**.
7272
*/
7373
class CSSTransition extends React.Component {
74+
static defaultProps = {
75+
classNames: ''
76+
}
7477
onEnter = (node, appearing) => {
7578
const { className } = this.getClassNames(appearing ? 'appear' : 'enter')
7679

@@ -140,15 +143,17 @@ class CSSTransition extends React.Component {
140143

141144
getClassNames = (type) => {
142145
const { classNames } = this.props;
146+
const isStringClassNames = typeof classNames === 'string';
147+
const prefix = isStringClassNames && classNames ? classNames + '-' : '';
143148

144-
let className = typeof classNames !== 'string' ?
145-
classNames[type] : classNames + '-' + type;
149+
let className = isStringClassNames ?
150+
prefix + type : classNames[type]
146151

147-
let activeClassName = typeof classNames !== 'string' ?
148-
classNames[type + 'Active'] : className + '-active';
152+
let activeClassName = isStringClassNames ?
153+
className + '-active' : classNames[type + 'Active'];
149154

150-
let doneClassName = typeof classNames !== 'string' ?
151-
classNames[type + 'Done'] : className + '-done';
155+
let doneClassName = isStringClassNames ?
156+
className + '-done' : classNames[type + 'Done'];
152157

153158
return {
154159
className,

test/CSSTransition-test.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -279,5 +279,38 @@ describe('CSSTransition', () => {
279279
}
280280
});
281281
});
282+
283+
it('should support empty prefix', done => {
284+
let count = 0;
285+
286+
const instance = mount(
287+
<CSSTransition
288+
in
289+
timeout={10}
290+
>
291+
<div/>
292+
</CSSTransition>
293+
)
294+
295+
instance.setProps({
296+
in: false,
297+
298+
onExit(node){
299+
count++;
300+
expect(node.className).toEqual('exit');
301+
},
302+
303+
onExiting(node){
304+
count++;
305+
expect(node.className).toEqual('exit exit-active');
306+
},
307+
308+
onExited(node){
309+
expect(node.className).toEqual('exit-done');
310+
expect(count).toEqual(2);
311+
done();
312+
}
313+
});
314+
});
282315
});
283316
});

0 commit comments

Comments
 (0)