Skip to content

Commit

Permalink
[Touchable] Add custom delay props and alter longPress implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmstout
jmstout committed Jun 1, 2015
1 parent 62fef10 commit 80a7e3c
Show file tree
Hide file tree
Showing 6 changed files with 255 additions and 25 deletions.
49 changes: 48 additions & 1 deletion Examples/UIExplorer/TouchableExample.js
View file
Expand Up @@ -26,7 +26,7 @@ var {
View,
} = React;

exports.title = '<Touchable*> and onPress';
exports.title = '<Touchable*>, onPress, and delayPress';
exports.examples = [
{
title: '<TouchableHighlight>',
Expand Down Expand Up @@ -75,6 +75,14 @@ exports.examples = [
render: function(): ReactElement {
return <TouchableFeedbackEvents />;
},
}, {
title: 'Touchable delay for events',
description: '<Touchable*> components also accept delayPress, ' +
'delayPressIn, delayPressOut, and delayLongPress as props. These props ' +
'impact the timing of feedback events.',
render: function(): ReactElement {
return <TouchableDelayEvents />;
},
}];

var TextOnPressBox = React.createClass({
Expand Down Expand Up @@ -148,6 +156,45 @@ var TouchableFeedbackEvents = React.createClass({
},
});

var TouchableDelayEvents = React.createClass({
getInitialState: function() {
return {
eventLog: [],
};
},
render: function() {
return (
<View>
<View style={[styles.row, {justifyContent: 'center'}]}>
<TouchableOpacity
style={styles.wrapper}
delayPress={200}
onPress={() => this._appendEvent('press - 200ms delay')}
delayPressIn={0}
onPressIn={() => this._appendEvent('pressIn - 0ms delay')}
delayPressOut={1000}
onPressOut={() => this._appendEvent('pressOut - 1000ms delay')}
delayLongPress={800}
onLongPress={() => this._appendEvent('longPress - 800ms delay')}>
<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({
Expand Down
53 changes: 48 additions & 5 deletions Libraries/Components/Touchable/TouchableHighlight.js
View file
Expand Up @@ -23,6 +23,7 @@ var View = require('View');

var cloneWithProps = require('cloneWithProps');
var ensureComponentIsNative = require('ensureComponentIsNative');
var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
var keyOf = require('keyOf');
var merge = require('merge');
var onlyChild = require('onlyChild');
Expand All @@ -32,6 +33,8 @@ var DEFAULT_PROPS = {
underlayColor: 'black',
};

var DEFAULT_HIDE_MS = 100;

/**
* A wrapper for making views respond properly to touches.
* On press down, the opacity of the wrapped view is decreased, which allows
Expand Down Expand Up @@ -111,10 +114,12 @@ var TouchableHighlight = React.createClass({
},

componentDidMount: function() {
ensurePositiveDelayProps(this.props);
ensureComponentIsNative(this.refs[CHILD_REF]);
},

componentDidUpdate: function() {
ensurePositiveDelayProps(this.props);
ensureComponentIsNative(this.refs[CHILD_REF]);
},

Expand All @@ -136,23 +141,45 @@ var TouchableHighlight = React.createClass({
* defined on your component.
*/
touchableHandleActivePressIn: function() {
this.clearTimeout(this._hideTimeout);
this._hideTimeout = null;
this._showUnderlay();
this.props.onPressIn && this.props.onPressIn();
},

touchableHandleActivePressOut: function() {
if (this.props.delayPressOut) {
this._onPressOutTimeout = this.setTimeout(function() {
this._onPressOut();
}, this.props.delayPressOut);
} else {
this._onPressOut();
}
},

_onPressOut: function() {
if (!this._hideTimeout) {
this._hideUnderlay();
}
this.props.onPressOut && this.props.onPressOut();
},

touchableHandlePress: function() {
this.clearTimeout(this._hideTimeout);
if (this.props.delayPress) {
if (!this._onPressTimeout) {
this._onPressTimeout = this.setTimeout(function() {
this.clearTimeout(this._onPressTimeout);
this._onPressTimeout = null;
this._onPress();
}, this.props.delayPress);
}
} else {
this._onPress();
}
},

_onPress: function() {
this._showUnderlay();
this._hideTimeout = this.setTimeout(this._hideUnderlay, 100);
this._hideTimeout = this.setTimeout(this._hideUnderlay,
this.props.delayPressOut || DEFAULT_HIDE_MS);
this.props.onPress && this.props.onPress();
},

Expand All @@ -164,6 +191,14 @@ var TouchableHighlight = React.createClass({
return PRESS_RECT_OFFSET; // Always make sure to predeclare a constant!
},

touchableGetHighlightDelayMS: function() {
return this.props.delayPressIn;
},

touchableGetLongPressDelayMS: function() {
return this.props.delayLongPress;
},

_showUnderlay: function() {
this.refs[UNDERLAY_REF].setNativeProps(this.state.activeUnderlayProps);
this.refs[CHILD_REF].setNativeProps(this.state.activeProps);
Expand All @@ -183,14 +218,22 @@ var TouchableHighlight = React.createClass({
}
},

_componentHandleResponderGrant: function(e, dispatchID) {
this.clearTimeout(this._onPressOutTimeout);
this._onPressOutTimeout = null;
this.clearTimeout(this._hideTimeout);
this._hideTimeout = null;
this.touchableHandleResponderGrant(e, dispatchID);
},

render: function() {
return (
<View
ref={UNDERLAY_REF}
style={this.state.underlayStyle}
onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest}
onResponderGrant={this.touchableHandleResponderGrant}
onResponderGrant={this._componentHandleResponderGrant}
onResponderMove={this.touchableHandleResponderMove}
onResponderRelease={this.touchableHandleResponderRelease}
onResponderTerminate={this.touchableHandleResponderTerminate}>
Expand Down
76 changes: 66 additions & 10 deletions Libraries/Components/Touchable/TouchableOpacity.js
View file
Expand Up @@ -15,11 +15,13 @@
var NativeMethodsMixin = require('NativeMethodsMixin');
var POPAnimationMixin = require('POPAnimationMixin');
var React = require('React');
var TimerMixin = require('react-timer-mixin');
var Touchable = require('Touchable');
var TouchableWithoutFeedback = require('TouchableWithoutFeedback');

var cloneWithProps = require('cloneWithProps');
var ensureComponentIsNative = require('ensureComponentIsNative');
var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
var flattenStyle = require('flattenStyle');
var keyOf = require('keyOf');
var onlyChild = require('onlyChild');
Expand Down Expand Up @@ -50,7 +52,7 @@ var onlyChild = require('onlyChild');
*/

var TouchableOpacity = React.createClass({
mixins: [Touchable.Mixin, NativeMethodsMixin, POPAnimationMixin],
mixins: [TimerMixin, Touchable.Mixin, NativeMethodsMixin, POPAnimationMixin],

propTypes: {
...TouchableWithoutFeedback.propTypes,
Expand All @@ -72,10 +74,12 @@ var TouchableOpacity = React.createClass({
},

componentDidMount: function() {
ensurePositiveDelayProps(this.props);
ensureComponentIsNative(this.refs[CHILD_REF]);
},

componentDidUpdate: function() {
ensurePositiveDelayProps(this.props);
ensureComponentIsNative(this.refs[CHILD_REF]);
},

Expand All @@ -102,20 +106,45 @@ var TouchableOpacity = React.createClass({
* defined on your component.
*/
touchableHandleActivePressIn: function() {
this.refs[CHILD_REF].setNativeProps({
opacity: this.props.activeOpacity
});
this._fromPressIn = true;
this.clearTimeout(this._hideTimeout);
this._hideTimeout = null;
this._opacityActive();
this.props.onPressIn && this.props.onPressIn();
},

touchableHandleActivePressOut: function() {
var child = onlyChild(this.props.children);
var childStyle = flattenStyle(child.props.style) || {};
this.setOpacityTo(childStyle.opacity === undefined ? 1 : childStyle.opacity);
this.props.onPressOut && this.props.onPressOut();
if (this.props.delayPressOut) {
this._onPressOutTimeout = this.setTimeout(function() {
this._opacityInactive();
this.props.onPressOut && this.props.onPressOut();
}, this.props.delayPressOut);
} else {
this._opacityInactive();
this.props.onPressOut && this.props.onPressOut();
}
},

touchableHandlePress: function() {
if (this.props.delayPress) {
if (!this._onPressTimeout) {
this._onPressTimeout = this.setTimeout(function() {
this.clearTimeout(this._onPressTimeout);
this._onPressTimeout = null;
this._onPress();
}, this.props.delayPress);
}
} else {
this._onPress();
}
},

_onPress: function() {
if (!this._fromPressIn) {
this._opacityActive();
this._hideTimeout = this.setTimeout(this._opacityInactive,
this.props.delayPressOut || 100);
}
this.props.onPress && this.props.onPress();
},

Expand All @@ -128,7 +157,34 @@ var TouchableOpacity = React.createClass({
},

touchableGetHighlightDelayMS: function() {
return 0;
return this.props.delayPressIn || 0;
},

touchableGetLongPressDelayMS: function() {
return this.props.delayLongPress === 0 ? 0 :
this.props.delayLongPress || 500;
},

_opacityActive: function() {
this.setOpacityTo(this.props.activeOpacity);
},

_opacityInactive: function() {
this.clearTimeout(this._hideTimeout);
this._hideTimeout = null;
var child = onlyChild(this.props.children);
var childStyle = flattenStyle(child.props.style) || {};
this.setOpacityTo(childStyle.opacity === undefined ? 1 :
childStyle.opacity);
},

_componentHandleResponderGrant: function(e, dispatchID) {
this._fromPressIn = false;
this.clearTimeout(this._onPressOutTimeout);
this._onPressOutTimeout = null;
this.clearTimeout(this._hideTimeout);
this._hideTimeout = null;
this.touchableHandleResponderGrant(e, dispatchID);
},

render: function() {
Expand All @@ -138,7 +194,7 @@ var TouchableOpacity = React.createClass({
testID: this.props.testID,
onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder,
onResponderTerminationRequest: this.touchableHandleResponderTerminationRequest,
onResponderGrant: this.touchableHandleResponderGrant,
onResponderGrant: this._componentHandleResponderGrant,
onResponderMove: this.touchableHandleResponderMove,
onResponderRelease: this.touchableHandleResponderRelease,
onResponderTerminate: this.touchableHandleResponderTerminate,
Expand Down

0 comments on commit 80a7e3c

Please sign in to comment.