react 15.0.0 → 15.0.2-alpha.3

package/lib/ReactNativeEventEmitter.js

@@ -0,0 +1,188 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactNativeEventEmitter
+ * 
+ */
+'use strict';
+
+var EventPluginHub = require('./EventPluginHub');
+var EventPluginRegistry = require('./EventPluginRegistry');
+var ReactEventEmitterMixin = require('./ReactEventEmitterMixin');
+var ReactNativeComponentTree = require('./ReactNativeComponentTree');
+var ReactNativeTagHandles = require('./ReactNativeTagHandles');
+var ReactUpdates = require('./ReactUpdates');
+var EventConstants = require('./EventConstants');
+
+var merge = require('merge');
+var warning = require('fbjs/lib/warning');
+
+var topLevelTypes = EventConstants.topLevelTypes;
+
+/**
+ * Version of `ReactBrowserEventEmitter` that works on the receiving side of a
+ * serialized worker boundary.
+ */
+
+// Shared default empty native event - conserve memory.
+var EMPTY_NATIVE_EVENT = {};
+
+/**
+ * Selects a subsequence of `Touch`es, without destroying `touches`.
+ *
+ * @param {Array<Touch>} touches Deserialized touch objects.
+ * @param {Array<number>} indices Indices by which to pull subsequence.
+ * @return {Array<Touch>} Subsequence of touch objects.
+ */
+var touchSubsequence = function (touches, indices) {
+  var ret = [];
+  for (var i = 0; i < indices.length; i++) {
+    ret.push(touches[indices[i]]);
+  }
+  return ret;
+};
+
+/**
+ * TODO: Pool all of this.
+ *
+ * Destroys `touches` by removing touch objects at indices `indices`. This is
+ * to maintain compatibility with W3C touch "end" events, where the active
+ * touches don't include the set that has just been "ended".
+ *
+ * @param {Array<Touch>} touches Deserialized touch objects.
+ * @param {Array<number>} indices Indices to remove from `touches`.
+ * @return {Array<Touch>} Subsequence of removed touch objects.
+ */
+var removeTouchesAtIndices = function (touches, indices) {
+  var rippedOut = [];
+  // use an unsafe downcast to alias to nullable elements,
+  // so we can delete and then compact.
+  var temp = touches;
+  for (var i = 0; i < indices.length; i++) {
+    var index = indices[i];
+    rippedOut.push(touches[index]);
+    temp[index] = null;
+  }
+  var fillAt = 0;
+  for (var j = 0; j < temp.length; j++) {
+    var cur = temp[j];
+    if (cur !== null) {
+      temp[fillAt++] = cur;
+    }
+  }
+  temp.length = fillAt;
+  return rippedOut;
+};
+
+/**
+ * `ReactNativeEventEmitter` is used to attach top-level event listeners. For example:
+ *
+ *   ReactNativeEventEmitter.putListener('myID', 'onClick', myFunction);
+ *
+ * This would allocate a "registration" of `('onClick', myFunction)` on 'myID'.
+ *
+ * @internal
+ */
+var ReactNativeEventEmitter = merge(ReactEventEmitterMixin, {
+
+  registrationNames: EventPluginRegistry.registrationNameModules,
+
+  putListener: EventPluginHub.putListener,
+
+  getListener: EventPluginHub.getListener,
+
+  deleteListener: EventPluginHub.deleteListener,
+
+  deleteAllListeners: EventPluginHub.deleteAllListeners,
+
+  /**
+   * Internal version of `receiveEvent` in terms of normalized (non-tag)
+   * `rootNodeID`.
+   *
+   * @see receiveEvent.
+   *
+   * @param {rootNodeID} rootNodeID React root node ID that event occurred on.
+   * @param {TopLevelType} topLevelType Top level type of event.
+   * @param {object} nativeEventParam Object passed from native.
+   */
+  _receiveRootNodeIDEvent: function (rootNodeID, topLevelType, nativeEventParam) {
+    var nativeEvent = nativeEventParam || EMPTY_NATIVE_EVENT;
+    var inst = ReactNativeComponentTree.getInstanceFromNode(rootNodeID);
+    if (!inst) {
+      // If the original instance is already gone, we don't have to dispatch
+      // any events.
+      return;
+    }
+    ReactUpdates.batchedUpdates(function () {
+      ReactNativeEventEmitter.handleTopLevel(topLevelType, inst, nativeEvent, nativeEvent.target);
+    });
+  },
+
+  /**
+   * Publicly exposed method on module for native objc to invoke when a top
+   * level event is extracted.
+   * @param {rootNodeID} rootNodeID React root node ID that event occurred on.
+   * @param {TopLevelType} topLevelType Top level type of event.
+   * @param {object} nativeEventParam Object passed from native.
+   */
+  receiveEvent: function (tag, topLevelType, nativeEventParam) {
+    var rootNodeID = tag;
+    ReactNativeEventEmitter._receiveRootNodeIDEvent(rootNodeID, topLevelType, nativeEventParam);
+  },
+
+  /**
+   * Simple multi-wrapper around `receiveEvent` that is intended to receive an
+   * efficient representation of `Touch` objects, and other information that
+   * can be used to construct W3C compliant `Event` and `Touch` lists.
+   *
+   * This may create dispatch behavior that differs than web touch handling. We
+   * loop through each of the changed touches and receive it as a single event.
+   * So two `touchStart`/`touchMove`s that occur simultaneously are received as
+   * two separate touch event dispatches - when they arguably should be one.
+   *
+   * This implementation reuses the `Touch` objects themselves as the `Event`s
+   * since we dispatch an event for each touch (though that might not be spec
+   * compliant). The main purpose of reusing them is to save allocations.
+   *
+   * TODO: Dispatch multiple changed touches in one event. The bubble path
+   * could be the first common ancestor of all the `changedTouches`.
+   *
+   * One difference between this behavior and W3C spec: cancelled touches will
+   * not appear in `.touches`, or in any future `.touches`, though they may
+   * still be "actively touching the surface".
+   *
+   * Web desktop polyfills only need to construct a fake touch event with
+   * identifier 0, also abandoning traditional click handlers.
+   */
+  receiveTouches: function (eventTopLevelType, touches, changedIndices) {
+    var changedTouches = eventTopLevelType === topLevelTypes.topTouchEnd || eventTopLevelType === topLevelTypes.topTouchCancel ? removeTouchesAtIndices(touches, changedIndices) : touchSubsequence(touches, changedIndices);
+
+    for (var jj = 0; jj < changedTouches.length; jj++) {
+      var touch = changedTouches[jj];
+      // Touch objects can fulfill the role of `DOM` `Event` objects if we set
+      // the `changedTouches`/`touches`. This saves allocations.
+      touch.changedTouches = changedTouches;
+      touch.touches = touches;
+      var nativeEvent = touch;
+      var rootNodeID = null;
+      var target = nativeEvent.target;
+      if (target !== null && target !== undefined) {
+        if (target < ReactNativeTagHandles.tagsStartAt) {
+          if (process.env.NODE_ENV !== 'production') {
+            process.env.NODE_ENV !== 'production' ? warning(false, 'A view is reporting that a touch occured on tag zero.') : void 0;
+          }
+        } else {
+          rootNodeID = target;
+        }
+      }
+      ReactNativeEventEmitter._receiveRootNodeIDEvent(rootNodeID, eventTopLevelType, nativeEvent);
+    }
+  }
+});
+
+module.exports = ReactNativeEventEmitter;

package/lib/ReactNativeGlobalResponderHandler.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactNativeGlobalResponderHandler
+ */
+'use strict';
+
+var UIManager = require('UIManager');
+
+var ReactNativeGlobalResponderHandler = {
+  onChange: function (from, to, blockNativeResponder) {
+    if (to !== null) {
+      UIManager.setJSResponder(to._rootNodeID, blockNativeResponder);
+    } else {
+      UIManager.clearJSResponder();
+    }
+  }
+};
+
+module.exports = ReactNativeGlobalResponderHandler;

package/lib/ReactNativeMount.js

@@ -0,0 +1,190 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactNativeMount
+ * 
+ */
+'use strict';
+
+var ReactElement = require('./ReactElement');
+var ReactNativeContainerInfo = require('./ReactNativeContainerInfo');
+var ReactNativeTagHandles = require('./ReactNativeTagHandles');
+var ReactPerf = require('./ReactPerf');
+var ReactReconciler = require('./ReactReconciler');
+var ReactUpdateQueue = require('./ReactUpdateQueue');
+var ReactUpdates = require('./ReactUpdates');
+var UIManager = require('UIManager');
+
+var emptyObject = require('fbjs/lib/emptyObject');
+var instantiateReactComponent = require('./instantiateReactComponent');
+var shouldUpdateReactComponent = require('./shouldUpdateReactComponent');
+
+/**
+ * Temporary (?) hack so that we can store all top-level pending updates on
+ * composites instead of having to worry about different types of components
+ * here.
+ */
+var TopLevelWrapper = function () {};
+TopLevelWrapper.prototype.isReactComponent = {};
+if (process.env.NODE_ENV !== 'production') {
+  TopLevelWrapper.displayName = 'TopLevelWrapper';
+}
+TopLevelWrapper.prototype.render = function () {
+  // this.props is actually a ReactElement
+  return this.props;
+};
+
+/**
+ * Mounts this component and inserts it into the DOM.
+ *
+ * @param {ReactComponent} componentInstance The instance to mount.
+ * @param {number} rootID ID of the root node.
+ * @param {number} containerTag container element to mount into.
+ * @param {ReactReconcileTransaction} transaction
+ */
+function mountComponentIntoNode(componentInstance, containerTag, transaction) {
+  var markup = ReactReconciler.mountComponent(componentInstance, transaction, null, ReactNativeContainerInfo(containerTag), emptyObject);
+  componentInstance._renderedComponent._topLevelWrapper = componentInstance;
+  ReactNativeMount._mountImageIntoNode(markup, containerTag);
+}
+
+/**
+ * Batched mount.
+ *
+ * @param {ReactComponent} componentInstance The instance to mount.
+ * @param {number} rootID ID of the root node.
+ * @param {number} containerTag container element to mount into.
+ */
+function batchedMountComponentIntoNode(componentInstance, containerTag) {
+  var transaction = ReactUpdates.ReactReconcileTransaction.getPooled();
+  transaction.perform(mountComponentIntoNode, null, componentInstance, containerTag, transaction);
+  ReactUpdates.ReactReconcileTransaction.release(transaction);
+}
+
+/**
+ * As soon as `ReactMount` is refactored to not rely on the DOM, we can share
+ * code between the two. For now, we'll hard code the ID logic.
+ */
+var ReactNativeMount = {
+  _instancesByContainerID: {},
+
+  // these two functions are needed by React Devtools
+  findNodeHandle: require('./findNodeHandle'),
+
+  /**
+   * @param {ReactComponent} instance Instance to render.
+   * @param {containerTag} containerView Handle to native view tag
+   */
+  renderComponent: function (nextElement, containerTag, callback) {
+    var nextWrappedElement = new ReactElement(TopLevelWrapper, null, null, null, null, null, nextElement);
+
+    var topRootNodeID = containerTag;
+    var prevComponent = ReactNativeMount._instancesByContainerID[topRootNodeID];
+    if (prevComponent) {
+      var prevWrappedElement = prevComponent._currentElement;
+      var prevElement = prevWrappedElement.props;
+      if (shouldUpdateReactComponent(prevElement, nextElement)) {
+        ReactUpdateQueue.enqueueElementInternal(prevComponent, nextWrappedElement);
+        if (callback) {
+          ReactUpdateQueue.enqueueCallbackInternal(prevComponent, callback);
+        }
+        return prevComponent;
+      } else {
+        ReactNativeMount.unmountComponentAtNode(containerTag);
+      }
+    }
+
+    if (!ReactNativeTagHandles.reactTagIsNativeTopRootID(containerTag)) {
+      console.error('You cannot render into anything but a top root');
+      return null;
+    }
+
+    ReactNativeTagHandles.assertRootTag(containerTag);
+
+    var instance = instantiateReactComponent(nextWrappedElement);
+    ReactNativeMount._instancesByContainerID[containerTag] = instance;
+
+    // The initial render is synchronous but any updates that happen during
+    // rendering, in componentWillMount or componentDidMount, will be batched
+    // according to the current batching strategy.
+
+    ReactUpdates.batchedUpdates(batchedMountComponentIntoNode, instance, containerTag);
+    var component = instance.getPublicInstance();
+    if (callback) {
+      callback.call(component);
+    }
+    return component;
+  },
+
+  /**
+   * @param {View} view View tree image.
+   * @param {number} containerViewID View to insert sub-view into.
+   */
+  _mountImageIntoNode: ReactPerf.measure(
+  // FIXME(frantic): #4441289 Hack to avoid modifying react-tools
+  'ReactComponentBrowserEnvironment', 'mountImageIntoNode', function (mountImage, containerID) {
+    // Since we now know that the `mountImage` has been mounted, we can
+    // mark it as such.
+    var childTag = mountImage;
+    UIManager.setChildren(containerID, [childTag]);
+  }),
+
+  /**
+   * Standard unmounting of the component that is rendered into `containerID`,
+   * but will also execute a command to remove the actual container view
+   * itself. This is useful when a client is cleaning up a React tree, and also
+   * knows that the container will no longer be needed. When executing
+   * asynchronously, it's easier to just have this method be the one that calls
+   * for removal of the view.
+   */
+  unmountComponentAtNodeAndRemoveContainer: function (containerTag) {
+    ReactNativeMount.unmountComponentAtNode(containerTag);
+    // call back into native to remove all of the subviews from this container
+    UIManager.removeRootView(containerTag);
+  },
+
+  /**
+   * Unmount component at container ID by iterating through each child component
+   * that has been rendered and unmounting it. There should just be one child
+   * component at this time.
+   */
+  unmountComponentAtNode: function (containerTag) {
+    if (!ReactNativeTagHandles.reactTagIsNativeTopRootID(containerTag)) {
+      console.error('You cannot render into anything but a top root');
+      return false;
+    }
+
+    var instance = ReactNativeMount._instancesByContainerID[containerTag];
+    if (!instance) {
+      return false;
+    }
+    ReactNativeMount.unmountComponentFromNode(instance, containerTag);
+    delete ReactNativeMount._instancesByContainerID[containerTag];
+    return true;
+  },
+
+  /**
+   * Unmounts a component and sends messages back to iOS to remove its subviews.
+   *
+   * @param {ReactComponent} instance React component instance.
+   * @param {string} containerID ID of container we're removing from.
+   * @final
+   * @internal
+   * @see {ReactNativeMount.unmountComponentAtNode}
+   */
+  unmountComponentFromNode: function (instance, containerID) {
+    // Call back into native to remove all of the subviews from this container
+    ReactReconciler.unmountComponent(instance);
+    UIManager.removeSubviewsFromContainerWithID(containerID);
+  }
+
+};
+
+ReactNativeMount.renderComponent = ReactPerf.measure('ReactMount', '_renderNewRootComponent', ReactNativeMount.renderComponent);
+
+module.exports = ReactNativeMount;

package/lib/ReactNativePropRegistry.js

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactNativePropRegistry
+ * 
+ */
+'use strict';
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var objects = {};
+var uniqueID = 1;
+var emptyObject = {};
+
+var ReactNativePropRegistry = function () {
+  function ReactNativePropRegistry() {
+    _classCallCheck(this, ReactNativePropRegistry);
+  }
+
+  ReactNativePropRegistry.register = function register(object) {
+    var id = ++uniqueID;
+    if (process.env.NODE_ENV !== 'production') {
+      Object.freeze(object);
+    }
+    objects[id] = object;
+    return id;
+  };
+
+  ReactNativePropRegistry.getByID = function getByID(id) {
+    if (!id) {
+      // Used in the style={[condition && id]} pattern,
+      // we want it to be a no-op when the value is false or null
+      return emptyObject;
+    }
+
+    var object = objects[id];
+    if (!object) {
+      console.warn('Invalid style with id `' + id + '`. Skipping ...');
+      return emptyObject;
+    }
+    return object;
+  };
+
+  return ReactNativePropRegistry;
+}();
+
+module.exports = ReactNativePropRegistry;