[Touch] Suite of touchable events on TouchableHighlight/Opacity

Summary:
The following props are now supported on TouchableHighlight/Opacity components:

 - onPress (was there before)
 - onPressIn
 - onPressOut
 - onLongPress

There is a `TouchableFeedbackPropType` that is shared amongst the Touchable family for consistency.

Added UIExplorer example to demonstrate and test.

Fixes #101.
Closes https://github.com/facebook/react-native/pull/102
Github Author: James Ide <ide@jameside.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
This commit is contained in:
James Ide
2015-02-26 10:03:22 -08:00
parent d0d774d403
commit 337329451d
5 changed files with 95 additions and 13 deletions

View File

@@ -11,6 +11,7 @@ var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
var StyleSheet = require('StyleSheet');
var TimerMixin = require('TimerMixin');
var Touchable = require('Touchable');
var TouchableFeedbackPropType = require('TouchableFeedbackPropType');
var View = require('View');
var cloneWithProps = require('cloneWithProps');
@@ -50,6 +51,7 @@ var DEFAULT_PROPS = {
var TouchableHighlight = React.createClass({
propTypes: {
...TouchableFeedbackPropType,
/**
* Called when the touch is released, but not if cancelled (e.g. by
* a scroll that steals the responder lock).
@@ -127,12 +129,14 @@ var TouchableHighlight = React.createClass({
this.clearTimeout(this._hideTimeout);
this._hideTimeout = null;
this._showUnderlay();
this.props.onPressIn && this.props.onPressIn();
},
touchableHandleActivePressOut: function() {
if (!this._hideTimeout) {
this._hideUnderlay();
}
this.props.onPressOut && this.props.onPressOut();
},
touchableHandlePress: function() {
@@ -142,6 +146,10 @@ var TouchableHighlight = React.createClass({
this.props.onPress && this.props.onPress();
},
touchableHandleLongPress: function() {
this.props.onLongPress && this.props.onLongPress();
},
touchableGetPressRectOffset: function() {
return PRESS_RECT_OFFSET; // Always make sure to predeclare a constant!
},