[ReactNative] Pass events through to touchable handlers

Summary:
We want to be able to access the touch data within our components' event handlers, so we need to thread the event object all the way through to them.

Libraries/Components/Touchable/TouchableBounce.js

@@ -18,6 +18,7 @@ var Touchable = require('Touchable');
 
 var merge = require('merge');
 
+type Event = Object;
 type State = {
   animationID: ?number;
 };
@@ -41,6 +42,8 @@ var TouchableBounce = React.createClass({
 
   propTypes: {
     onPress: React.PropTypes.func,
+    onPressIn: React.PropTypes.func,
+    onPressOut: React.PropTypes.func,
     // The function passed takes a callback to start the animation which should
     // be run after this onPress handler is done. You can use this (for example)
     // to update UI before starting the animation.
@@ -73,15 +76,17 @@ var TouchableBounce = React.createClass({
    * `Touchable.Mixin` self callbacks. The mixin will invoke these if they are
    * defined on your component.
    */
-  touchableHandleActivePressIn: function() {
+  touchableHandleActivePressIn: function(e: Event) {
     this.bounceTo(0.93, 0.1, 0);
+    this.props.onPressIn && this.props.onPressIn(e);
   },
 
-  touchableHandleActivePressOut: function() {
+  touchableHandleActivePressOut: function(e: Event) {
     this.bounceTo(1, 0.4, 0);
+    this.props.onPressOut && this.props.onPressOut(e);
   },
 
-  touchableHandlePress: function() {
+  touchableHandlePress: function(e: Event) {
     var onPressWithCompletion = this.props.onPressWithCompletion;
     if (onPressWithCompletion) {
       onPressWithCompletion(() => {
@@ -92,7 +97,7 @@ var TouchableBounce = React.createClass({
     }
 
     this.bounceTo(1, 10, 10, this.props.onPressAnimationComplete);
-    this.props.onPress && this.props.onPress();
+    this.props.onPress && this.props.onPress(e);
   },
 
   touchableGetPressRectOffset: function(): typeof PRESS_RECT_OFFSET {

Libraries/Components/Touchable/TouchableHighlight.js

@@ -28,6 +28,8 @@ var keyOf = require('keyOf');
 var merge = require('merge');
 var onlyChild = require('onlyChild');
 
+type Event = Object;
+
 var DEFAULT_PROPS = {
   activeOpacity: 0.8,
   underlayColor: 'black',
@@ -138,30 +140,30 @@ var TouchableHighlight = React.createClass({
    * `Touchable.Mixin` self callbacks. The mixin will invoke these if they are
    * defined on your component.
    */
-  touchableHandleActivePressIn: function() {
+  touchableHandleActivePressIn: function(e: Event) {
     this.clearTimeout(this._hideTimeout);
     this._hideTimeout = null;
     this._showUnderlay();
-    this.props.onPressIn && this.props.onPressIn();
+    this.props.onPressIn && this.props.onPressIn(e);
   },
 
-  touchableHandleActivePressOut: function() {
+  touchableHandleActivePressOut: function(e: Event) {
     if (!this._hideTimeout) {
       this._hideUnderlay();
     }
-    this.props.onPressOut && this.props.onPressOut();
+    this.props.onPressOut && this.props.onPressOut(e);
   },
 
-  touchableHandlePress: function() {
+  touchableHandlePress: function(e: Event) {
     this.clearTimeout(this._hideTimeout);
     this._showUnderlay();
     this._hideTimeout = this.setTimeout(this._hideUnderlay,
       this.props.delayPressOut || 100);
-    this.props.onPress && this.props.onPress();
+    this.props.onPress && this.props.onPress(e);
   },
 
-  touchableHandleLongPress: function() {
-    this.props.onLongPress && this.props.onLongPress();
+  touchableHandleLongPress: function(e: Event) {
+    this.props.onLongPress && this.props.onLongPress(e);
   },
 
   touchableGetPressRectOffset: function() {

Libraries/Components/Touchable/TouchableOpacity.js

@@ -23,6 +23,8 @@ var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
 var flattenStyle = require('flattenStyle');
 var keyOf = require('keyOf');
 
+type Event = Object;
+
 /**
  * A wrapper for making views respond properly to touches.
  * On press down, the opacity of the wrapped view is decreased, dimming it.
@@ -74,9 +76,6 @@ var TouchableOpacity = React.createClass({
     ensurePositiveDelayProps(this.props);
   },
 
-  componentDidUpdate: function() {
-  },
-
   componentWillReceiveProps: function(nextProps) {
     ensurePositiveDelayProps(nextProps);
   },
@@ -92,32 +91,32 @@ var TouchableOpacity = React.createClass({
    * `Touchable.Mixin` self callbacks. The mixin will invoke these if they are
    * defined on your component.
    */
-  touchableHandleActivePressIn: function() {
+  touchableHandleActivePressIn: function(e: Event) {
     this.clearTimeout(this._hideTimeout);
     this._hideTimeout = null;
     this._opacityActive();
-    this.props.onPressIn && this.props.onPressIn();
+    this.props.onPressIn && this.props.onPressIn(e);
   },
 
-  touchableHandleActivePressOut: function() {
+  touchableHandleActivePressOut: function(e: Event) {
     if (!this._hideTimeout) {
       this._opacityInactive();
     }
-    this.props.onPressOut && this.props.onPressOut();
+    this.props.onPressOut && this.props.onPressOut(e);
   },
 
-  touchableHandlePress: function() {
+  touchableHandlePress: function(e: Event) {
     this.clearTimeout(this._hideTimeout);
     this._opacityActive();
     this._hideTimeout = this.setTimeout(
       this._opacityInactive,
       this.props.delayPressOut || 100
     );
-    this.props.onPress && this.props.onPress();
+    this.props.onPress && this.props.onPress(e);
   },
 
-  touchableHandleLongPress: function() {
-    this.props.onLongPress && this.props.onLongPress();
+  touchableHandleLongPress: function(e: Event) {
+    this.props.onLongPress && this.props.onLongPress(e);
   },
 
   touchableGetPressRectOffset: function() {

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -17,6 +17,8 @@ var Touchable = require('Touchable');
 var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
 var onlyChild = require('onlyChild');
 
+type Event = Object;
+
 /**
  * When the scroll view is disabled, this defines how far your touch may move
  * off of the button, before deactivating the button. Once deactivated, try
@@ -25,8 +27,6 @@ var onlyChild = require('onlyChild');
  */
 var PRESS_RECT_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
 
-type Event = Object;
-
 /**
  * Do not use unless you have a very good reason. All the elements that
  * respond to press should have a visual feedback when touched. This is
@@ -79,16 +79,16 @@ var TouchableWithoutFeedback = React.createClass({
     this.props.onPress && this.props.onPress(e);
   },
 
-  touchableHandleActivePressIn: function() {
-    this.props.onPressIn && this.props.onPressIn();
+  touchableHandleActivePressIn: function(e: Event) {
+    this.props.onPressIn && this.props.onPressIn(e);
   },
 
-  touchableHandleActivePressOut: function() {
-    this.props.onPressOut && this.props.onPressOut();
+  touchableHandleActivePressOut: function(e: Event) {
+    this.props.onPressOut && this.props.onPressOut(e);
   },
 
-  touchableHandleLongPress: function() {
-    this.props.onLongPress && this.props.onLongPress();
+  touchableHandleLongPress: function(e: Event) {
+    this.props.onLongPress && this.props.onLongPress(e);
   },
 
   touchableGetPressRectOffset: function(): typeof PRESS_RECT_OFFSET {

Libraries/vendor/react_contrib/interactions/Touchable/Touchable.js

@@ -636,19 +636,19 @@ var TouchableMixin = {
     }
 
     if (IsPressingIn[curState] && signal === Signals.LONG_PRESS_DETECTED) {
-      this.touchableHandleLongPress && this.touchableHandleLongPress();
+      this.touchableHandleLongPress && this.touchableHandleLongPress(e);
     }
 
     if (newIsHighlight && !curIsHighlight) {
       this._savePressInLocation(e);
-      this.touchableHandleActivePressIn && this.touchableHandleActivePressIn();
+      this.touchableHandleActivePressIn && this.touchableHandleActivePressIn(e);
     } else if (!newIsHighlight && curIsHighlight && this.touchableHandleActivePressOut) {
       if (this.touchableGetPressOutDelayMS && this.touchableGetPressOutDelayMS()) {
         this.pressOutDelayTimeout = this.setTimeout(function() {
-          this.touchableHandleActivePressOut();
+          this.touchableHandleActivePressOut(e);
         }, this.touchableGetPressOutDelayMS());
       } else {
-        this.touchableHandleActivePressOut();
+        this.touchableHandleActivePressOut(e);
       }
     }