react 0.7.1 → 0.8.0

package/lib/ReactTransitionGroup.js

@@ -0,0 +1,112 @@
+/**
+ * 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.
+ *
+ * @providesModule ReactTransitionGroup
+ */
+
+"use strict";
+
+var React = require("./React");
+var ReactTransitionableChild = require("./ReactTransitionableChild");
+var ReactTransitionKeySet = require("./ReactTransitionKeySet");
+
+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
+  },
+
+  getDefaultProps: function() {
+    return {
+      transitionEnter: true,
+      transitionLeave: true,
+      component: React.DOM.span
+    };
+  },
+
+  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 = {};
+  },
+
+  componentDidUpdate: function() {
+    if (this.props.onTransition) {
+      this.props.onTransition();
+    }
+  },
+
+  /**
+   * Render some children in a transitionable way.
+   */
+  renderTransitionableChildren: function(sourceChildren) {
+    var children = {};
+    var childMapping = ReactTransitionKeySet.getChildMapping(sourceChildren);
+
+    var currentKeys = ReactTransitionKeySet.mergeKeySets(
+      this._transitionGroupCurrentKeys,
+      ReactTransitionKeySet.getKeySet(sourceChildren)
+    );
+
+    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]);
+      }
+    }
+
+    this._transitionGroupCurrentKeys = currentKeys;
+
+    return children;
+  },
+
+  _handleDoneLeaving: function(key) {
+    // When the leave animation finishes, we should blow away the actual DOM
+    // node.
+    delete this._transitionGroupCurrentKeys[key];
+    this.forceUpdate();
+  },
+
+  render: function() {
+    return this.transferPropsTo(
+      this.props.component(
+        {
+          transitionName: null,
+          transitionEnter: null,
+          transitionLeave: null,
+          component: null
+        },
+        this.renderTransitionableChildren(this.props.children)
+      )
+    );
+  }
+});
+
+module.exports = ReactTransitionGroup;

package/lib/ReactTransitionKeySet.js

@@ -0,0 +1,111 @@
+/**
+ * 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 static-only
+ * @providesModule ReactTransitionKeySet
+ */
+
+"use strict";
+
+var ReactChildren = require("./ReactChildren");
+
+var MERGE_KEY_SETS_TAIL_SENTINEL = {};
+
+var ReactTransitionKeySet = {
+  /**
+   * Given `this.props.children`, return an object mapping key to child. Just
+   * simple syntactic sugar around ReactChildren.map().
+   *
+   * @param {*} children `this.props.children`
+   * @return {object} Mapping of key to child
+   */
+  getChildMapping: function(children) {
+    return ReactChildren.map(children, function(child) {
+      return child;
+    });
+  },
+
+  /**
+   * 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
+   * 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()`.
+   * @return {object} a key set that contains all keys in `prev` and all keys
+   * in `next` in a reasonable order.
+   */
+  mergeKeySets: 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;
+      }
+
+      // 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 (var j = i + 1; j < prevKeys.length; j++) {
+        insertPos = nextKeys.indexOf(prevKeys[j]);
+        if (insertPos >= 0) {
+          break;
+        }
+      }
+
+      // Insert before insertPos
+      nextKeys.splice(insertPos, 0, prevKey);
+    }
+
+    for (i = 0; i < nextKeys.length - 1; i++) {
+      keySet[nextKeys[i]] = true;
+    }
+
+    return keySet;
+  }
+};
+
+module.exports = ReactTransitionKeySet;

package/lib/ReactTransitionableChild.js

@@ -0,0 +1,152 @@
+/**
+ * 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.
+ *
+ * @providesModule ReactTransitionableChild
+ */
+
+"use strict";
+
+var React = require("./React");
+var CSSCore = require("./CSSCore");
+var ReactTransitionEvents = require("./ReactTransitionEvents");
+
+// 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
+// does not start and if it doesn't, we just call the end listener immediately.
+var TICK = 17;
+var NO_EVENT_TIMEOUT = 5000;
+
+var noEventListener = null;
+
+if ("production" !== process.env.NODE_ENV) {
+  noEventListener = function() {
+    console.warn(
+      'transition(): tried to perform an animation without ' +
+      'an animationend or transitionend event after timeout (' +
+      NO_EVENT_TIMEOUT + 'ms). You should either disable this ' +
+      'transition in JS or add a CSS animation/transition.'
+    );
+  };
+}
+
+/**
+ * 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 node = this.getDOMNode();
+    var className = this.props.name + '-' + animationType;
+    var activeClassName = className + '-active';
+    var noEventTimeout = null;
+
+    var endListener = function() {
+      if ("production" !== process.env.NODE_ENV) {
+        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);
+      }
+
+      ReactTransitionEvents.removeEndEventListener(node, endListener);
+
+      // Usually this optional callback is used for informing an owner of
+      // a leave animation and telling it to remove the child.
+      finishCallback && finishCallback();
+    };
+
+    ReactTransitionEvents.addEndEventListener(node, endListener);
+
+    CSSCore.addClass(node, className);
+
+    // Need to do this to actually trigger a transition.
+    this.queueClass(activeClassName);
+
+    if ("production" !== process.env.NODE_ENV) {
+      noEventTimeout = setTimeout(noEventListener, NO_EVENT_TIMEOUT);
+    }
+  },
+
+  queueClass: function(className) {
+    this.classNameQueue.push(className);
+
+    if (this.props.runNextTick) {
+      this.props.runNextTick(this.flushClassNameQueue);
+      return;
+    }
+
+    if (!this.timeout) {
+      this.timeout = setTimeout(this.flushClassNameQueue, TICK);
+    }
+  },
+
+  flushClassNameQueue: function() {
+    if (this.isMounted()) {
+      this.classNameQueue.forEach(
+        CSSCore.addClass.bind(CSSCore, this.getDOMNode())
+      );
+    }
+    this.classNameQueue.length = 0;
+    this.timeout = null;
+  },
+
+  componentWillMount: function() {
+    this.classNameQueue = [];
+  },
+
+  componentWillUnmount: function() {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+  },
+
+  componentWillReceiveProps: function(nextProps) {
+    if (!nextProps.children && this.props.children) {
+      this.savedChildren = this.props.children;
+    }
+  },
+
+  componentDidMount: function(node) {
+    if (this.props.enter) {
+      this.transition('enter');
+    }
+  },
+
+  componentDidUpdate: function(prevProps, prevState, node) {
+    if (prevProps.children && !this.props.children) {
+      this.transition('leave', true, this.props.onDoneLeaving);
+    }
+  },
+
+  render: function() {
+    return this.props.children || this.savedChildren;
+  }
+});
+
+module.exports = ReactTransitionableChild;

package/lib/ReactUpdates.js

@@ -0,0 +1,145 @@
+/**
+ * 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.
+ *
+ * @providesModule ReactUpdates
+ */
+
+"use strict";
+
+var invariant = require("./invariant");
+
+var dirtyComponents = [];
+
+var batchingStrategy = null;
+
+function ensureBatchingStrategy() {
+  ("production" !== process.env.NODE_ENV ? invariant(batchingStrategy, 'ReactUpdates: must inject a batching strategy') : invariant(batchingStrategy));
+}
+
+function batchedUpdates(callback, param) {
+  ensureBatchingStrategy();
+  batchingStrategy.batchedUpdates(callback, param);
+}
+
+/**
+ * Array comparator for ReactComponents by owner depth
+ *
+ * @param {ReactComponent} c1 first component you're comparing
+ * @param {ReactComponent} c2 second component you're comparing
+ * @return {number} Return value usable by Array.prototype.sort().
+ */
+function mountDepthComparator(c1, c2) {
+  return c1._mountDepth - c2._mountDepth;
+}
+
+function runBatchedUpdates() {
+  // Since reconciling a component higher in the owner hierarchy usually (not
+  // always -- see shouldComponentUpdate()) will reconcile children, reconcile
+  // them before their children by sorting the array.
+
+  dirtyComponents.sort(mountDepthComparator);
+
+  for (var i = 0; i < dirtyComponents.length; i++) {
+    // If a component is unmounted before pending changes apply, ignore them
+    // TODO: Queue unmounts in the same list to avoid this happening at all
+    var component = dirtyComponents[i];
+    if (component.isMounted()) {
+      // If performUpdateIfNecessary happens to enqueue any new updates, we
+      // shouldn't execute the callbacks until the next render happens, so
+      // stash the callbacks first
+      var callbacks = component._pendingCallbacks;
+      component._pendingCallbacks = null;
+      component.performUpdateIfNecessary();
+      if (callbacks) {
+        for (var j = 0; j < callbacks.length; j++) {
+          callbacks[j].call(component);
+        }
+      }
+    }
+  }
+}
+
+function clearDirtyComponents() {
+  dirtyComponents.length = 0;
+}
+
+function flushBatchedUpdates() {
+  // Run these in separate functions so the JIT can optimize
+  try {
+    runBatchedUpdates();
+  } catch (e) {
+    // IE 8 requires catch to use finally.
+    throw e;
+  } finally {
+    clearDirtyComponents();
+  }
+}
+
+/**
+ * Mark a component as needing a rerender, adding an optional callback to a
+ * list of functions which will be executed once the rerender occurs.
+ */
+function enqueueUpdate(component, callback) {
+  ("production" !== process.env.NODE_ENV ? invariant(
+    !callback || typeof callback === "function",
+    'enqueueUpdate(...): You called `setProps`, `replaceProps`, ' +
+    '`setState`, `replaceState`, or `forceUpdate` with a callback that ' +
+    'isn\'t callable.'
+  ) : invariant(!callback || typeof callback === "function"));
+  ensureBatchingStrategy();
+
+  if (!batchingStrategy.isBatchingUpdates) {
+    component.performUpdateIfNecessary();
+    callback && callback();
+    return;
+  }
+
+  dirtyComponents.push(component);
+
+  if (callback) {
+    if (component._pendingCallbacks) {
+      component._pendingCallbacks.push(callback);
+    } else {
+      component._pendingCallbacks = [callback];
+    }
+  }
+}
+
+var ReactUpdatesInjection = {
+  injectBatchingStrategy: function(_batchingStrategy) {
+    ("production" !== process.env.NODE_ENV ? invariant(
+      _batchingStrategy,
+      'ReactUpdates: must provide a batching strategy'
+    ) : invariant(_batchingStrategy));
+    ("production" !== process.env.NODE_ENV ? invariant(
+      typeof _batchingStrategy.batchedUpdates === 'function',
+      'ReactUpdates: must provide a batchedUpdates() function'
+    ) : invariant(typeof _batchingStrategy.batchedUpdates === 'function'));
+    ("production" !== process.env.NODE_ENV ? invariant(
+      typeof _batchingStrategy.isBatchingUpdates === 'boolean',
+      'ReactUpdates: must provide an isBatchingUpdates boolean attribute'
+    ) : invariant(typeof _batchingStrategy.isBatchingUpdates === 'boolean'));
+    batchingStrategy = _batchingStrategy;
+  }
+};
+
+var ReactUpdates = {
+  batchedUpdates: batchedUpdates,
+  enqueueUpdate: enqueueUpdate,
+  flushBatchedUpdates: flushBatchedUpdates,
+  injection: ReactUpdatesInjection
+};
+
+module.exports = ReactUpdates;