Allow changing transitionLeave from false to true
Fixes #724.
Ben Alpert committed
Dec 27, 2013 at 10:21 UTC
5e6e332d677df00b2d97b7caabfe5789b50a28ca
2 files changed
+44
src/addons/transitions/ReactTransitionGroup.js
+9
@@ -79,6 +79,15 @@ var ReactTransitionGroup = React.createClass({
79
enter: this.props.transitionEnter,
80
onDoneLeaving: this._handleDoneLeaving.bind(this, key)
81
}, childMapping[key]);
82
+ } else {
83
+ // If there's no leave transition and the child has been removed from
84
+ // the source children list, we want to remove it immediately from the
85
+ // _transitionGroupCurrentKeys cache because _handleDoneLeaving won't
86
+ // be called. In normal cases, this prevents a small memory leak; in
87
+ // the case of switching transitionLeave from false to true, it
88
+ // prevents a confusing bug where ReactTransitionableChild.render()
89
+ // returns nothing, throwing an error.
90
+ delete currentKeys[key];
91
}
92
}
93
src/addons/transitions/__tests__/ReactTransitionGroup-test.js
+35
@@ -83,6 +83,41 @@ describe('ReactTransitionGroup', function() {
83
expect(a.getDOMNode().childNodes[1].id).toBe('one');
84
});
85
86
+ it('should switch transitionLeave from false to true', function() {
87
+ var a = React.renderComponent(
88
+ <ReactTransitionGroup
89
+ transitionName="yolo"
90
+ transitionEnter={false}
91
+ transitionLeave={false}>
92
+ <span key="one" id="one" />
93
+ </ReactTransitionGroup>,
94
+ container
95
+ );
96
+ expect(a.getDOMNode().childNodes.length).toBe(1);
97
+ React.renderComponent(
98
+ <ReactTransitionGroup
99
+ transitionName="yolo"
100
+ transitionEnter={false}
101
+ transitionLeave={false}>
102
+ <span key="two" id="two" />
103
+ </ReactTransitionGroup>,
104
+ container
105
+ );
106
+ expect(a.getDOMNode().childNodes.length).toBe(1);
107
+ React.renderComponent(
108
+ <ReactTransitionGroup
109
+ transitionName="yolo"
110
+ transitionEnter={false}
111
+ transitionLeave={true}>
112
+ <span key="three" id="three" />
113
+ </ReactTransitionGroup>,
114
+ container
115
+ );
116
+ expect(a.getDOMNode().childNodes.length).toBe(2);
117
+ expect(a.getDOMNode().childNodes[0].id).toBe('three');
118
+ expect(a.getDOMNode().childNodes[1].id).toBe('two');
119
+ });
120
+
121
describe('with an undefined child', function () {
122
it('should fail silently', function () {
123
React.renderComponent(