react 0.8.0 → 0.10.0

package/lib/ReactTextComponent.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2013 Facebook, Inc.
+ * Copyright 2013-2014 Facebook, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,8 +19,9 @@
 
 "use strict";
 
+var DOMPropertyOperations = require("./DOMPropertyOperations");
+var ReactBrowserComponentMixin = require("./ReactBrowserComponentMixin");
 var ReactComponent = require("./ReactComponent");
-var ReactMount = require("./ReactMount");
 
 var escapeTextForBrowser = require("./escapeTextForBrowser");
 var mixInto = require("./mixInto");
@@ -44,7 +45,18 @@ var ReactTextComponent = function(initialText) {
   this.construct({text: initialText});
 };
 
+/**
+ * Used to clone the text descriptor object before it's mounted.
+ *
+ * @param {object} props
+ * @return {object} A new ReactTextComponent instance
+ */
+ReactTextComponent.ConvenienceConstructor = function(props) {
+  return new ReactTextComponent(props.text);
+};
+
 mixInto(ReactTextComponent, ReactComponent.Mixin);
+mixInto(ReactTextComponent, ReactBrowserComponentMixin);
 mixInto(ReactTextComponent, {
 
   /**
@@ -52,7 +64,7 @@ mixInto(ReactTextComponent, {
    * any features besides containing text content.
    *
    * @param {string} rootID DOM ID of the root node.
-   * @param {ReactReconcileTransaction} transaction
+   * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
    * @param {number} mountDepth number of components in the owner hierarchy
    * @return {string} Markup for this text node.
    * @internal
@@ -64,9 +76,19 @@ mixInto(ReactTextComponent, {
       transaction,
       mountDepth
     );
+
+    var escapedText = escapeTextForBrowser(this.props.text);
+
+    if (transaction.renderToStaticMarkup) {
+      // Normally we'd wrap this in a `span` for the reasons stated above, but
+      // since this is a situation where React won't take over (static pages),
+      // we can simply return the text as it is.
+      return escapedText;
+    }
+
     return (
-      '<span ' + ReactMount.ATTR_NAME + '="' + escapeTextForBrowser(rootID) + '">' +
-        escapeTextForBrowser(this.props.text) +
+      '<span ' + DOMPropertyOperations.createMarkupForID(rootID) + '>' +
+        escapedText +
       '</span>'
     );
   },
@@ -82,7 +104,7 @@ mixInto(ReactTextComponent, {
     var nextProps = nextComponent.props;
     if (nextProps.text !== this.props.text) {
       this.props.text = nextProps.text;
-      ReactComponent.DOMIDOperations.updateTextContentByID(
+      ReactComponent.BackendIDOperations.updateTextContentByID(
         this._rootNodeID,
         nextProps.text
       );
@@ -91,4 +113,9 @@ mixInto(ReactTextComponent, {
 
 });
 
+// Expose the constructor on itself and the prototype for consistency with other
+// descriptors.
+ReactTextComponent.type = ReactTextComponent;
+ReactTextComponent.prototype.type = ReactTextComponent;
+
 module.exports = ReactTextComponent;

package/lib/{ReactTransitionKeySet.js → ReactTransitionChildMapping.js}

@@ -1,5 +1,5 @@
 /**
- * Copyright 2013 Facebook, Inc.
+ * Copyright 2013-2014 Facebook, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,16 +14,14 @@
  * limitations under the License.
  *
  * @typechecks static-only
- * @providesModule ReactTransitionKeySet
+ * @providesModule ReactTransitionChildMapping
  */
 
 "use strict";
 
 var ReactChildren = require("./ReactChildren");
 
-var MERGE_KEY_SETS_TAIL_SENTINEL = {};
-
-var ReactTransitionKeySet = {
+var ReactTransitionChildMapping = {
   /**
    * Given `this.props.children`, return an object mapping key to child. Just
    * simple syntactic sugar around ReactChildren.map().
@@ -37,19 +35,6 @@ 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 ot show *both* since we want to simultaneously
@@ -60,52 +45,62 @@ var ReactTransitionKeySet = {
    * 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 || {};
 
-    var keySet = {};
-    var prevKeys = Object.keys(prev).concat([MERGE_KEY_SETS_TAIL_SENTINEL]);
-    var nextKeys = Object.keys(next).concat([MERGE_KEY_SETS_TAIL_SENTINEL]);
-    var i;
-    for (i = 0; i < prevKeys.length - 1; i++) {
-      var prevKey = prevKeys[i];
-      if (next[prevKey]) {
-        continue;
+    function getValueForKey(key) {
+      if (next.hasOwnProperty(key)) {
+        return next[key];
+      } else {
+        return prev[key];
       }
+    }
 
-      // This key is not in the new set. Place it in our
-      // best guess where it should go. We do this by searching
-      // for a key after the current one in prevKeys that is
-      // still in nextKeys, and inserting right before it.
-      // I know this is O(n^2), but this is not a particularly
-      // hot code path.
-      var insertPos = -1;
+    // For each key of `next`, the list of keys to insert before that key in
+    // the combined list
+    var nextKeysPending = {};
 
-      for (var j = i + 1; j < prevKeys.length; j++) {
-        insertPos = nextKeys.indexOf(prevKeys[j]);
-        if (insertPos >= 0) {
-          break;
+    var pendingKeys = [];
+    for (var prevKey in prev) {
+      if (next[prevKey]) {
+        if (pendingKeys.length) {
+          nextKeysPending[prevKey] = pendingKeys;
+          pendingKeys = [];
         }
+      } else {
+        pendingKeys.push(prevKey);
       }
+    }
 
-      // Insert before insertPos
-      nextKeys.splice(insertPos, 0, prevKey);
+    var i;
+    var childMapping = {};
+    for (var nextKey in next) {
+      if (nextKeysPending[nextKey]) {
+        for (i = 0; i < nextKeysPending[nextKey].length; i++) {
+          var pendingNextKey = nextKeysPending[nextKey][i];
+          childMapping[nextKeysPending[nextKey][i]] = getValueForKey(
+            pendingNextKey
+          );
+        }
+      }
+      childMapping[nextKey] = getValueForKey(nextKey);
     }
 
-    for (i = 0; i < nextKeys.length - 1; i++) {
-      keySet[nextKeys[i]] = true;
+    // Finally, add the keys which didn't appear before any key in `next`
+    for (i = 0; i < pendingKeys.length; i++) {
+      childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
     }
 
-    return keySet;
+    return childMapping;
   }
 };
 
-module.exports = ReactTransitionKeySet;
+module.exports = ReactTransitionChildMapping;

package/lib/ReactTransitionEvents.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2013 Facebook, Inc.
+ * Copyright 2013-2014 Facebook, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/lib/ReactTransitionGroup.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2013 Facebook, Inc.
+ * Copyright 2013-2014 Facebook, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,93 +19,168 @@
 "use strict";
 
 var React = require("./React");
-var ReactTransitionableChild = require("./ReactTransitionableChild");
-var ReactTransitionKeySet = require("./ReactTransitionKeySet");
+var ReactTransitionChildMapping = require("./ReactTransitionChildMapping");
+
+var cloneWithProps = require("./cloneWithProps");
+var emptyFunction = require("./emptyFunction");
+var merge = require("./merge");
 
 var ReactTransitionGroup = React.createClass({
 
   propTypes: {
-    transitionName: React.PropTypes.string.isRequired,
-    transitionEnter: React.PropTypes.bool,
-    transitionLeave: React.PropTypes.bool,
-    onTransition: React.PropTypes.func,
-    component: React.PropTypes.func
+    component: React.PropTypes.func,
+    childFactory: React.PropTypes.func
   },
 
   getDefaultProps: function() {
     return {
-      transitionEnter: true,
-      transitionLeave: true,
-      component: React.DOM.span
+      component: React.DOM.span,
+      childFactory: emptyFunction.thatReturnsArgument
+    };
+  },
+
+  getInitialState: function() {
+    return {
+      children: ReactTransitionChildMapping.getChildMapping(this.props.children)
     };
   },
 
+  componentWillReceiveProps: function(nextProps) {
+    var nextChildMapping = ReactTransitionChildMapping.getChildMapping(
+      nextProps.children
+    );
+    var prevChildMapping = this.state.children;
+
+    this.setState({
+      children: ReactTransitionChildMapping.mergeChildMappings(
+        prevChildMapping,
+        nextChildMapping
+      )
+    });
+
+    var key;
+
+    for (key in nextChildMapping) {
+      if (!prevChildMapping.hasOwnProperty(key) &&
+        !this.currentlyTransitioningKeys[key]) {
+        this.keysToEnter.push(key);
+      }
+    }
+
+    for (key in prevChildMapping) {
+      if (!nextChildMapping.hasOwnProperty(key) &&
+        !this.currentlyTransitioningKeys[key]) {
+        this.keysToLeave.push(key);
+      }
+    }
+
+    // If we want to someday check for reordering, we could do it here.
+  },
+
   componentWillMount: function() {
-    // _transitionGroupCurrentKeys stores the union of previous *and* next keys.
-    // If this were a component we'd store it as state, however, since this must
-    // be a mixin, we need to keep the result of the union of keys in each
-    // call to animateChildren() which happens in render(), so we can't
-    // call setState() in there.
-    this._transitionGroupCurrentKeys = {};
+    this.currentlyTransitioningKeys = {};
+    this.keysToEnter = [];
+    this.keysToLeave = [];
   },
 
   componentDidUpdate: function() {
-    if (this.props.onTransition) {
-      this.props.onTransition();
+    var keysToEnter = this.keysToEnter;
+    this.keysToEnter = [];
+    keysToEnter.forEach(this.performEnter);
+
+    var keysToLeave = this.keysToLeave;
+    this.keysToLeave = [];
+    keysToLeave.forEach(this.performLeave);
+  },
+
+  performEnter: function(key) {
+    this.currentlyTransitioningKeys[key] = true;
+
+    var component = this.refs[key];
+
+    if (component.componentWillEnter) {
+      component.componentWillEnter(
+        this._handleDoneEntering.bind(this, key)
+      );
+    } else {
+      this._handleDoneEntering(key);
     }
   },
 
-  /**
-   * Render some children in a transitionable way.
-   */
-  renderTransitionableChildren: function(sourceChildren) {
-    var children = {};
-    var childMapping = ReactTransitionKeySet.getChildMapping(sourceChildren);
+  _handleDoneEntering: function(key) {
+    var component = this.refs[key];
+    if (component.componentDidEnter) {
+      component.componentDidEnter();
+    }
+
+    delete this.currentlyTransitioningKeys[key];
 
-    var currentKeys = ReactTransitionKeySet.mergeKeySets(
-      this._transitionGroupCurrentKeys,
-      ReactTransitionKeySet.getKeySet(sourceChildren)
+    var currentChildMapping = ReactTransitionChildMapping.getChildMapping(
+      this.props.children
     );
 
-    for (var key in currentKeys) {
-      // Here is how we keep the nodes in the DOM. ReactTransitionableChild
-      // knows how to hold onto its child if it changes to undefined. Here, we
-      // may look up an old key in the new children, and it may switch to
-      // undefined. React's reconciler will keep the ReactTransitionableChild
-      // instance alive such that we can animate it.
-      if (childMapping[key] || this.props.transitionLeave) {
-        children[key] = ReactTransitionableChild({
-          name: this.props.transitionName,
-          enter: this.props.transitionEnter,
-          onDoneLeaving: this._handleDoneLeaving.bind(this, key)
-        }, childMapping[key]);
-      }
+    if (!currentChildMapping.hasOwnProperty(key)) {
+      // This was removed before it had fully entered. Remove it.
+      this.performLeave(key);
     }
+  },
 
-    this._transitionGroupCurrentKeys = currentKeys;
+  performLeave: function(key) {
+    this.currentlyTransitioningKeys[key] = true;
 
-    return children;
+    var component = this.refs[key];
+    if (component.componentWillLeave) {
+      component.componentWillLeave(this._handleDoneLeaving.bind(this, key));
+    } else {
+      // Note that this is somewhat dangerous b/c it calls setState()
+      // again, effectively mutating the component before all the work
+      // is done.
+      this._handleDoneLeaving(key);
+    }
   },
 
   _handleDoneLeaving: function(key) {
-    // When the leave animation finishes, we should blow away the actual DOM
-    // node.
-    delete this._transitionGroupCurrentKeys[key];
-    this.forceUpdate();
+    var component = this.refs[key];
+
+    if (component.componentDidLeave) {
+      component.componentDidLeave();
+    }
+
+    delete this.currentlyTransitioningKeys[key];
+
+    var currentChildMapping = ReactTransitionChildMapping.getChildMapping(
+      this.props.children
+    );
+
+    if (currentChildMapping.hasOwnProperty(key)) {
+      // This entered again before it fully left. Add it again.
+      this.performEnter(key);
+    } else {
+      var newChildren = merge(this.state.children);
+      delete newChildren[key];
+      this.setState({children: newChildren});
+    }
   },
 
   render: function() {
-    return this.transferPropsTo(
-      this.props.component(
-        {
-          transitionName: null,
-          transitionEnter: null,
-          transitionLeave: null,
-          component: null
-        },
-        this.renderTransitionableChildren(this.props.children)
-      )
-    );
+    // TODO: we could get rid of the need for the wrapper node
+    // by cloning a single child
+    var childrenToRender = {};
+    for (var key in this.state.children) {
+      var child = this.state.children[key];
+      if (child) {
+        // You may need to apply reactive updates to a child as it is leaving.
+        // The normal React way to do it won't work since the child will have
+        // already been removed. In case you need this behavior you can provide
+        // a childFactory function to wrap every child, even the ones that are
+        // leaving.
+        childrenToRender[key] = cloneWithProps(
+          this.props.childFactory(child),
+          {ref: key}
+        );
+      }
+    }
+    return this.transferPropsTo(this.props.component(null, childrenToRender));
   }
 });