[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

@@ -9,6 +9,7 @@ var NativeMethodsMixin = require('NativeMethodsMixin');
var POPAnimationMixin = require('POPAnimationMixin');
var React = require('React');
var Touchable = require('Touchable');
var TouchableFeedbackPropType = require('TouchableFeedbackPropType');
var cloneWithProps = require('cloneWithProps');
var ensureComponentIsNative = require('ensureComponentIsNative');
@@ -41,11 +42,7 @@ var TouchableOpacity = React.createClass({
mixins: [Touchable.Mixin, NativeMethodsMixin, POPAnimationMixin],
propTypes: {
/**
* Called when the touch is released, but not if cancelled (e.g. by
* a scroll that steals the responder lock).
*/
onPress: React.PropTypes.func,
...TouchableFeedbackPropType,
/**
* Determines what the opacity of the wrapped view should be when touch is
* active.
@@ -97,10 +94,12 @@ var TouchableOpacity = React.createClass({
this.refs[CHILD_REF].setNativeProps({
opacity: this.props.activeOpacity
});
this.props.onPressIn && this.props.onPressIn();
},
touchableHandleActivePressOut: function() {
this.setOpacityTo(1.0);
this.props.onPressOut && this.props.onPressOut();
},
touchableHandlePress: function() {
@@ -108,6 +107,10 @@ var TouchableOpacity = 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!
},