[ReactTransitionGroup] Add onTransitionEnter and onTransitionLeave
It is valuable to know when the number of children in a TransitionGroup is going to increase or decrease, since we might want to apply extra animations. For instance, when used with overflow:auto, we might want to apply different css based on it overflowing or not - to do this we need to calculate this after new nodes has entered and after nodes has been removed.
Sean Kinsey committed
Dec 4, 2013 at 17:47 UTC
c2e48740fc9d2c47eb62d9a1ab4a9372fa749087
1 file changed
+26
-32
src/addons/transitions/ReactTransitionGroup.js
+26
-32
@@ -22,9 +22,24 @@ var React = require('React');
22
var ReactTransitionableChild = require('ReactTransitionableChild');
23
var ReactTransitionKeySet = require('ReactTransitionKeySet');
24
25
-var invariant = require('invariant');
25
+var ReactTransitionGroup = React.createClass({
26
+
27
+ propTypes: {
28
+ transitionName: React.PropTypes.string.isRequired,
29
+ transitionEnter: React.PropTypes.bool,
30
+ transitionLeave: React.PropTypes.bool,
31
+ onTransition: React.PropTypes.func,
32
+ component: React.PropTypes.func
33
+ },
34
+
35
+ getDefaultProps: function() {
36
+ return {
37
+ transitionEnter: true,
38
+ transitionLeave: true,
39
+ component: React.DOM.span
40
+ };
41
+ },
42
27
-var ReactTransitionGroupMixin = {
43
componentWillMount: function() {
44
// _transitionGroupCurrentKeys stores the union of previous *and* next keys.
45
// If this were a component we'd store it as state, however, since this must
@@ -34,20 +49,19 @@ var ReactTransitionGroupMixin = {
49
this._transitionGroupCurrentKeys = {};
50
},
51
52
+ componentDidUpdate: function() {
53
+ if (this.props.onTransition) {
54
+ this.props.onTransition();
55
+ }
56
+ },
57
+
58
/**
59
* Render some children in a transitionable way.
60
*/
61
renderTransitionableChildren: function(sourceChildren) {
41
- invariant(
42
- this.getTransitionConfig,
43
- 'renderTransitionableChildren(): You must provide a ' +
44
- 'getTransitionConfig() method.'
45
- );
46
-
62
var children = {};
63
var childMapping = ReactTransitionKeySet.getChildMapping(sourceChildren);
64
50
- var transitionConfig = this.getTransitionConfig();
65
var currentKeys = ReactTransitionKeySet.mergeKeySets(
66
this._transitionGroupCurrentKeys,
67
ReactTransitionKeySet.getKeySet(sourceChildren)
@@ -59,10 +73,10 @@ var ReactTransitionGroupMixin = {
73
// may look up an old key in the new children, and it may switch to
74
// undefined. React's reconciler will keep the ReactTransitionableChild
75
// instance alive such that we can animate it.
62
- if (childMapping[key] || transitionConfig.leave) {
76
+ if (childMapping[key] || this.props.transitionLeave) {
77
children[key] = ReactTransitionableChild({
64
- name: transitionConfig.name,
65
- enter: transitionConfig.enter,
78
+ name: this.props.transitionName,
79
+ enter: this.props.transitionEnter,
80
onDoneLeaving: this._handleDoneLeaving.bind(this, key)
81
}, childMapping[key]);
82
}
@@ -78,26 +92,6 @@ var ReactTransitionGroupMixin = {
92
// node.
93
delete this._transitionGroupCurrentKeys[key];
94
this.forceUpdate();
81
- }
82
-};
83
-
84
-var ReactTransitionGroup = React.createClass({
85
- mixins: [ReactTransitionGroupMixin],
86
-
87
- getDefaultProps: function() {
88
- return {
89
- transitionEnter: true,
90
- transitionLeave: true,
91
- component: React.DOM.span
92
- };
93
- },
94
-
95
- getTransitionConfig: function() {
96
- return {
97
- name: this.props.transitionName,
98
- enter: this.props.transitionEnter,
99
- leave: this.props.transitionLeave
100
- };
95
},
96
97
render: function() {