diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js index bada73041..487836a29 100644 --- a/Libraries/Components/Touchable/TouchableBounce.js +++ b/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 { diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js index 180cb61b1..4b6442ed4 100644 --- a/Libraries/Components/Touchable/TouchableHighlight.js +++ b/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() { diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js index 4ce870973..3d9780d8a 100644 --- a/Libraries/Components/Touchable/TouchableOpacity.js +++ b/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() { diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js index 227cbeae2..d8b171182 100755 --- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js +++ b/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 { diff --git a/Libraries/vendor/react_contrib/interactions/Touchable/Touchable.js b/Libraries/vendor/react_contrib/interactions/Touchable/Touchable.js index 2a0dd1813..93c4a7b59 100644 --- a/Libraries/vendor/react_contrib/interactions/Touchable/Touchable.js +++ b/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); } }