Fix name prop-type on CSS transition group child
And share it with the parent. There's now a test for varying class names by transition-type.
Daniel Rodgers-Pryor committed
Aug 27, 2015 at 09:29 UTC
91555f6f9e008bab4ffd1d135ad4290d3b5138bb
3 files changed
+74
-17
src/addons/transitions/ReactCSSTransitionGroup.js
+2
-16
@@ -52,22 +52,8 @@ var ReactCSSTransitionGroup = React.createClass({
52
displayName: 'ReactCSSTransitionGroup',
53
54
propTypes: {
55
- transitionName: React.PropTypes.oneOfType([
56
- React.PropTypes.string,
57
- React.PropTypes.shape({
58
- enter: React.PropTypes.string,
59
- leave: React.PropTypes.string,
60
- active: React.PropTypes.string,
61
- }),
62
- React.PropTypes.shape({
63
- enter: React.PropTypes.string,
64
- enterActive: React.PropTypes.string,
65
- leave: React.PropTypes.string,
66
- leaveActive: React.PropTypes.string,
67
- appear: React.PropTypes.string,
68
- appearActive: React.PropTypes.string,
69
- }),
70
- ]).isRequired,
55
+ // Re-require to access the raw class rather than the factory
56
+ transitionName: require('ReactCSSTransitionGroupChild').propTypes.name,
57
58
transitionAppear: React.PropTypes.bool,
59
transitionEnter: React.PropTypes.bool,
src/addons/transitions/ReactCSSTransitionGroupChild.js
+16
-1
@@ -30,7 +30,22 @@ var ReactCSSTransitionGroupChild = React.createClass({
30
displayName: 'ReactCSSTransitionGroupChild',
31
32
propTypes: {
33
- name: React.PropTypes.string.isRequired,
33
+ name: React.PropTypes.oneOfType([
34
+ React.PropTypes.string,
35
+ React.PropTypes.shape({
36
+ enter: React.PropTypes.string,
37
+ leave: React.PropTypes.string,
38
+ active: React.PropTypes.string,
39
+ }),
40
+ React.PropTypes.shape({
41
+ enter: React.PropTypes.string,
42
+ enterActive: React.PropTypes.string,
43
+ leave: React.PropTypes.string,
44
+ leaveActive: React.PropTypes.string,
45
+ appear: React.PropTypes.string,
46
+ appearActive: React.PropTypes.string,
47
+ }),
48
+ ]).isRequired,
49
50
// Once we require timeouts to be specified, we can remove the
51
// boolean flags (appear etc.) and just accept a number
src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js
+56
@@ -15,6 +15,10 @@ var React;
15
var ReactDOM;
16
var ReactCSSTransitionGroup;
17
18
+function hasClassName(domNode, className) {
19
+ return domNode.className.indexOf(className) > 0;
20
+}
21
+
22
// Most of the real functionality is covered in other unit tests, this just
23
// makes sure we're wired up correctly.
24
describe('ReactCSSTransitionGroup', function() {
@@ -198,4 +202,56 @@ describe('ReactCSSTransitionGroup', function() {
202
expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(1);
203
expect(ReactDOM.findDOMNode(a).childNodes[0].id).toBe('one');
204
});
205
+
206
+ it('should use transition-type specific names when they\'re provided', function() {
207
+ var customTransitionNames = {
208
+ enter: 'custom-entering',
209
+ leave: 'custom-leaving',
210
+ };
211
+
212
+ var a = ReactDOM.render(
213
+ <ReactCSSTransitionGroup
214
+ transitionName={ customTransitionNames }
215
+ transitionEnterTimeout={1}
216
+ transitionLeaveTimeout={1}
217
+ >
218
+ <span key="one" id="one" />
219
+ </ReactCSSTransitionGroup>,
220
+ container
221
+ );
222
+ expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(1);
223
+
224
+ // Add an element
225
+ ReactDOM.render(
226
+ <ReactCSSTransitionGroup
227
+ transitionName={ customTransitionNames }
228
+ transitionEnterTimeout={1}
229
+ transitionLeaveTimeout={1}
230
+ >
231
+ <span key="one" id="one" />
232
+ <span key="two" id="two" />
233
+ </ReactCSSTransitionGroup>,
234
+ container
235
+ );
236
+ expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(2);
237
+
238
+ // Test for the custom entering name
239
+ expect(hasClassName(ReactDOM.findDOMNode(a).childNodes[1], 'custom-entering')).toBe(true);
240
+
241
+ // Remove an element
242
+ ReactDOM.render(
243
+ <ReactCSSTransitionGroup
244
+ transitionName={ customTransitionNames }
245
+ transitionEnterTimeout={1}
246
+ transitionLeaveTimeout={1}
247
+ >
248
+ <span key="two" id="two" />
249
+ </ReactCSSTransitionGroup>,
250
+ container
251
+ );
252
+ expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(2);
253
+
254
+ // Test for the custom leaving name
255
+ expect(hasClassName(ReactDOM.findDOMNode(a).childNodes[0], 'custom-leaving')).toBe(true);
256
+ });
257
});