Skip to content

Commit

Permalink
fix: pass appear to CSSTransition callbacks (#441)
Browse files Browse the repository at this point in the history
Based on #144, but with working tests. Fixes #143.
Lazyuki authored and jquense committed Dec 20, 2018
1 parent 69a45c4 commit df7adb4
Showing 2 changed files with 94 additions and 3 deletions.
6 changes: 3 additions & 3 deletions src/CSSTransition.js
Original file line number Diff line number Diff line change
@@ -130,7 +130,7 @@ class CSSTransition extends React.Component {
addClass(node, className)

if (this.props.onEnter) {
this.props.onEnter(node)
this.props.onEnter(node, appearing)
}
}

@@ -142,7 +142,7 @@ class CSSTransition extends React.Component {
this.reflowAndAddClass(node, activeClassName)

if (this.props.onEntering) {
this.props.onEntering(node)
this.props.onEntering(node, appearing)
}
}

@@ -153,7 +153,7 @@ class CSSTransition extends React.Component {
addClass(node, doneClassName);

if (this.props.onEntered) {
this.props.onEntered(node)
this.props.onEntered(node, appearing)
}
}

91 changes: 91 additions & 0 deletions test/CSSTransition-test.js
Original file line number Diff line number Diff line change
@@ -113,6 +113,97 @@ describe('CSSTransition', () => {
});
});

describe('appearing', () => {
it('should apply appear classes at each transition state', done => {
let count = 0;
mount(
<CSSTransition
timeout={10}
classNames='appear-test'
in={true}
appear={true}
onEnter={(node, isAppearing) => {
count++;
expect(isAppearing).toEqual(true);
expect(node.className).toEqual('appear-test-appear');
}}
onEntering={(node, isAppearing) => {
count++;
expect(isAppearing).toEqual(true);
expect(node.className).toEqual('appear-test-appear appear-test-appear-active');
}}

onEntered={(node, isAppearing) => {
expect(isAppearing).toEqual(true);
expect(node.className).toEqual('appear-test-enter-done');
expect(count).toEqual(2);
done();
}}
>
<div/>
</CSSTransition>
);
});

it('should not be appearing in normal enter mode', done => {
let count = 0;
mount(
<CSSTransition
timeout={10}
classNames='not-appear-test'
appear={true}
>
<div/>
</CSSTransition>
).setProps({
in: true,

onEnter(node, isAppearing){
count++;
expect(isAppearing).toEqual(false);
expect(node.className).toEqual('not-appear-test-enter');
},

onEntering(node, isAppearing){
count++;
expect(isAppearing).toEqual(false);
expect(node.className).toEqual('not-appear-test-enter not-appear-test-enter-active');
},

onEntered(node, isAppearing){
expect(isAppearing).toEqual(false);
expect(node.className).toEqual('not-appear-test-enter-done');
expect(count).toEqual(2);
done();
}
});
});

it('should not enter the transition states when appear=false', () => {
mount(
<CSSTransition
timeout={10}
classNames='appear-fail-test'
in={true}
appear={false}
onEnter={() => {
throw Error('Enter called!')
}}
onEntering={() => {
throw Error('Entring called!')
}}
onEntered={() => {
throw Error('Entred called!')
}}
>
<div/>
</CSSTransition>
);
});


});

describe('exiting', ()=> {
let instance;

0 comments on commit df7adb4

Please sign in to comment.