[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:30:31 -08:00
parent d0d774d403
commit 337329451d
5 changed files with 95 additions and 13 deletions
+55 -1
View File
@@ -12,6 +12,7 @@ var {
StyleSheet,
Text,
TouchableHighlight,
TouchableOpacity,
View,
} = React;
@@ -57,6 +58,13 @@ exports.examples = [
render: function() {
return <TextOnPressBox />;
},
}, {
title: 'Touchable feedback events',
description: '<Touchable*> components accept onPress, onPressIn, ' +
'onPressOut, and onLongPress as props.',
render: function() {
return <TouchableFeedbackEvents />;
},
}];
var TextOnPressBox = React.createClass({
@@ -95,11 +103,46 @@ var TextOnPressBox = React.createClass({
}
});
var TouchableFeedbackEvents = React.createClass({
getInitialState: function() {
return {
eventLog: [],
};
},
render: function() {
return (
<View>
<View style={[styles.row, {justifyContent: 'center'}]}>
<TouchableOpacity
style={styles.wrapper}
onPress={() => this._appendEvent('press')}
onPressIn={() => this._appendEvent('pressIn')}
onPressOut={() => this._appendEvent('pressOut')}
onLongPress={() => this._appendEvent('longPress')}>
<Text style={styles.button}>
Press Me
</Text>
</TouchableOpacity>
</View>
<View style={styles.eventLogBox}>
{this.state.eventLog.map((e, ii) => <Text key={ii}>{e}</Text>)}
</View>
</View>
);
},
_appendEvent: function(eventName) {
var limit = 6;
var eventLog = this.state.eventLog.slice(0, limit - 1);
eventLog.unshift(eventName);
this.setState({eventLog});
},
});
var heartImage = {uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small'};
var styles = StyleSheet.create({
row: {
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
},
icon: {
@@ -113,6 +156,9 @@ var styles = StyleSheet.create({
text: {
fontSize: 16,
},
button: {
color: '#007AFF',
},
wrapper: {
borderRadius: 8,
},
@@ -127,6 +173,14 @@ var styles = StyleSheet.create({
borderColor: '#f0f0f0',
backgroundColor: '#f9f9f9',
},
eventLogBox: {
padding: 10,
margin: 10,
height: 120,
borderWidth: 1 / PixelRatio.get(),
borderColor: '#f0f0f0',
backgroundColor: '#f9f9f9',
},
textBlock: {
fontWeight: 'bold',
color: 'blue',