Rewrite ReactTransitionGroup

The key idea here is that you're always rendering `this.state.children`, not `this.props.children`. When combined with `cloneWithProps()` this means we can keep them in the DOM as long as we want. We add new children and reactively update existing ones using `setState()` inside of `componentWillReceiveProps()` so `this.state.children` always has the latest versions of components. Since we may be keeping old components around that are no longer in `this.props.children` we need a way to figure out where they should be inside of the combined `this.state.children` list. `ReactTransitionChildMapping` does this for us. Based on that infrastructure we can build the interface we always wanted: enter and leave lifecycle hooks. When a component is added to the DOM, `componentWillEnter(callback)` gets called. Call the callback when you're done animating and `componentDidEnter()` will be called. When a component is about to be removed from the DOM, `componentWillLeave(callback)` gets called. Call the callback when you're done animating and `componentDidLeave()` will be called and the component will *actually* be removed from the DOM. It won't be removed until you call the callback. These also handle "concurrent" changes. If you "stack" enter/leaves of a single component before the animation has completed, it will block out all of those animations until the current animation completes, and then finally it will animate 0 or 1 times to get itself into the desired current state. This is what differentiates `componentWillEnter()` from `componentDidMount()`. The next step would be to build `componentDidReorder()`. I've built `ReactCSSTransitionGroup` which is identical to the old `ReactTransitionGroup` and codemodded the callsites.

Author: petehunt

src/addons/transitions/ReactCSSTransitionGroup.js

@@ -0,0 +1,65 @@
+/**
+ * Copyright 2013 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @typechecks
+ * @providesModule ReactCSSTransitionGroup
+ * @jsx React.DOM
+ */
+
+"use strict";
+
+var React = require('React');
+
+var ReactTransitionGroup = require('ReactTransitionGroup');
+var ReactCSSTransitionGroupChild = require('ReactCSSTransitionGroupChild');
+
+var ReactCSSTransitionGroup = React.createClass({
+ propTypes: {
+ transitionName: React.PropTypes.string.isRequired,
+ transitionEnter: React.PropTypes.bool,
+ transitionLeave: React.PropTypes.bool
+ },
+
+ getDefaultProps: function() {
+ return {
+ transitionEnter: true,
+ transitionLeave: true
+ };
+ },
+
+ _wrapChild: function(child) {
+ // We need to provide this childFactory so that
+ // ReactCSSTransitionGroupChild can receive updates to name, enter, and
+ // leave while it is leaving.
+ return (
+ <ReactCSSTransitionGroupChild
+ name={this.props.transitionName}
+ enter={this.props.transitionEnter}
+ leave={this.props.transitionLeave}>
+ {child}
+ </ReactCSSTransitionGroupChild>
+ );
+ },
+
+ render: function() {
+ return this.transferPropsTo(
+ <ReactTransitionGroup childFactory={this._wrapChild}>
+ {this.props.children}
+ </ReactTransitionGroup>
+ );
+ }
+});
+
+module.exports = ReactCSSTransitionGroup;

src/addons/transitions/ReactTransitionableChild.js renamed to src/addons/transitions/ReactCSSTransitionGroupChild.js

@@ -13,15 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * @providesModule ReactTransitionableChild
+ * @typechecks
+ * @providesModule ReactCSSTransitionGroupChild
  */
 
 "use strict";
 
 var React = require('React');
+
 var CSSCore = require('CSSCore');
 var ReactTransitionEvents = require('ReactTransitionEvents');
 
+var onlyChild = require('onlyChild');
+
 // We don't remove the element from the DOM until we receive an animationend or
 // transitionend event. If the user screws up and forgets to add an animation
 // their node will be stuck in the DOM forever, so we detect if an animation
@@ -31,6 +35,7 @@ var NO_EVENT_TIMEOUT = 5000;
 
 var noEventListener = null;
 
+
 if (__DEV__) {
  noEventListener = function() {
  console.warn(
@@ -42,20 +47,8 @@ if (__DEV__) {
  };
 }
 
-/**
- * This component is simply responsible for watching when its single child
- * changes to undefined and animating the old child out. It does this by
- * recording its old child in savedChildren when it detects this event is about
- * to occur.
- */
-var ReactTransitionableChild = React.createClass({
- /**
- * Perform an actual DOM transition. This takes care of a few things:
- * - Adding the second CSS class to trigger the transition
- * - Listening for the finish event
- * - Cleaning up the css (unless noReset is true)
- */
- transition: function(animationType, noReset, finishCallback) {
+var ReactCSSTransitionGroupChild = React.createClass({
+ transition: function(animationType, finishCallback) {
  var node = this.getDOMNode();
  var className = this.props.name + '-' + animationType;
  var activeClassName = className + '-active';
@@ -66,13 +59,8 @@ var ReactTransitionableChild = React.createClass({
  clearTimeout(noEventTimeout);
  }
 
- // If this gets invoked after the component is unmounted it's OK.
- if (!noReset) {
- // Usually this means you're about to remove the node if you want to
- // leave it in its animated state.
- CSSCore.removeClass(node, className);
- CSSCore.removeClass(node, activeClassName);
- }
+ CSSCore.removeClass(node, className);
+ CSSCore.removeClass(node, activeClassName);
 
  ReactTransitionEvents.removeEndEventListener(node, endListener);
 
@@ -126,39 +114,25 @@ var ReactTransitionableChild = React.createClass({
  }
  },
 
- componentWillReceiveProps: function(nextProps) {
- if (!nextProps.children && this.props.children) {
- this.savedChildren = this.props.children;
- } else if (nextProps.children && !this.props.children) {
- // We're being told to re-add the child. Let's stop leaving!
- if (this.isMounted()) {
- var node = this.getDOMNode();
- var className = this.props.name;
- CSSCore.removeClass(node, className + '-leave');
- CSSCore.removeClass(node, className + '-leave-active');
- if (this.props.enter) {
- CSSCore.addClass(node, className + '-enter');
- CSSCore.addClass(node, className + '-enter-active');
- }
- }
- }
- },
-
- componentDidMount: function() {
+ componentWillEnter: function(done) {
  if (this.props.enter) {
- this.transition('enter');
+ this.transition('enter', done);
+ } else {
+ done();
  }
  },
 
- componentDidUpdate: function(prevProps, prevState, prevContext) {
- if (prevProps.children && !this.props.children) {
- this.transition('leave', true, this.props.onDoneLeaving);
+ componentWillLeave: function(done) {
+ if (this.props.leave) {
+ this.transition('leave', done);
+ } else {
+ done();
  }
  },
 
  render: function() {
- return this.props.children || this.savedChildren;
+ return onlyChild(this.props.children);
  }
 });
 
-module.exports = ReactTransitionableChild;
+module.exports = ReactCSSTransitionGroupChild;

src/addons/transitions/ReactTransitionKeySet.js renamed to src/addons/transitions/ReactTransitionChildMapping.js

@@ -14,14 +14,14 @@
  * limitations under the License.
  *
  * @typechecks static-only
- * @providesModule ReactTransitionKeySet
+ * @providesModule ReactTransitionChildMapping
  */
 
 "use strict";
 
 var ReactChildren = require('ReactChildren');
 
-var ReactTransitionKeySet = {
+var ReactTransitionChildMapping = {
  /**
  * Given `this.props.children`, return an object mapping key to child. Just
  * simple syntactic sugar around ReactChildren.map().
@@ -35,40 +35,35 @@ var ReactTransitionKeySet = {
  });
  },
 
- /**
- * Simple syntactic sugar to get an object with keys of all of `children`.
- * Does not have references to the children themselves.
- *
- * @param {*} children `this.props.children`
- * @return {object} Mapping of key to the value "true"
- */
- getKeySet: function(children) {
- return ReactChildren.map(children, function() {
- return true;
- });
- },
-
  /**
  * When you're adding or removing children some may be added or removed in the
- * same render pass. We want to show *both* since we want to simultaneously
+ * same render pass. We want ot show *both* since we want to simultaneously
  * animate elements in and out. This function takes a previous set of keys
  * and a new set of keys and merges them with its best guess of the correct
  * ordering. In the future we may expose some of the utilities in
  * ReactMultiChild to make this easy, but for now React itself does not
  * directly have this concept of the union of prevChildren and nextChildren
  * so we implement it here.
  *
- * @param {object} prev prev child keys as returned from
- * `ReactTransitionKeySet.getKeySet()`.
- * @param {object} next next child keys as returned from
- * `ReactTransitionKeySet.getKeySet()`.
+ * @param {object} prev prev children as returned from
+ * `ReactTransitionChildMapping.getChildMapping()`.
+ * @param {object} next next children as returned from
+ * `ReactTransitionChildMapping.getChildMapping()`.
  * @return {object} a key set that contains all keys in `prev` and all keys
  * in `next` in a reasonable order.
  */
- mergeKeySets: function(prev, next) {
+ mergeChildMappings: function(prev, next) {
  prev = prev || {};
  next = next || {};
 
+ function getValueForKey(key) {
+ if (next.hasOwnProperty(key)) {
+ return next[key];
+ } else {
+ return prev[key];
+ }
+ }
+
  // For each key of `next`, the list of keys to insert before that key in
  // the combined list
  var nextKeysPending = {};
@@ -86,23 +81,26 @@ var ReactTransitionKeySet = {
  }
 
  var i;
- var keySet = {};
+ var childMapping = {};
  for (var nextKey in next) {
  if (nextKeysPending[nextKey]) {
  for (i = 0; i < nextKeysPending[nextKey].length; i++) {
- keySet[nextKeysPending[nextKey][i]] = true;
+ var pendingNextKey = nextKeysPending[nextKey][i];
+ childMapping[nextKeysPending[nextKey][i]] = getValueForKey(
+ pendingNextKey
+ );
  }
  }
- keySet[nextKey] = true;
+ childMapping[nextKey] = getValueForKey(nextKey);
  }
 
  // Finally, add the keys which didn't appear before any key in `next`
  for (i = 0; i < pendingKeys.length; i++) {
- keySet[pendingKeys[i]] = true;
+ childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
  }
 
- return keySet;
+ return childMapping;
  }
 };
 
-module.exports = ReactTransitionKeySet;
+module.exports = ReactTransitionChildMapping;