[Touchable] Add custom delay props and alter longPress implementation

Author: jmstout

Examples/UIExplorer/TouchableExample.js

@@ -75,6 +75,14 @@ exports.examples = [
   render: function(): ReactElement {
     return <TouchableFeedbackEvents />;
   },
+}, {
+  title: 'Touchable delay for events',
+  description: '<Touchable*> components also accept delayPressIn, ' +
+    'delayPressOut, and delayLongPress as props. These props impact the ' +
+    'timing of feedback events.',
+  render: function(): ReactElement {
+    return <TouchableDelayEvents />;
+  },
 }];
 
 var TextOnPressBox = React.createClass({
@@ -148,6 +156,44 @@ 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}
+          onPress={() => this._appendEvent('press')}
+          delayPressIn={400}
+          onPressIn={() => this._appendEvent('pressIn - 400ms 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({

Libraries/Components/Touchable/TouchableHighlight.js

@@ -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');
@@ -111,6 +112,7 @@ var TouchableHighlight = React.createClass({
   },
 
   componentDidMount: function() {
+    ensurePositiveDelayProps(this.props);
     ensureComponentIsNative(this.refs[CHILD_REF]);
   },
 
@@ -119,6 +121,7 @@ var TouchableHighlight = React.createClass({
   },
 
   componentWillReceiveProps: function(nextProps) {
+    ensurePositiveDelayProps(nextProps);
     if (nextProps.activeOpacity !== this.props.activeOpacity ||
         nextProps.underlayColor !== this.props.underlayColor ||
         nextProps.style !== this.props.style) {
@@ -152,7 +155,8 @@ var TouchableHighlight = React.createClass({
   touchableHandlePress: function() {
     this.clearTimeout(this._hideTimeout);
     this._showUnderlay();
-    this._hideTimeout = this.setTimeout(this._hideUnderlay, 100);
+    this._hideTimeout = this.setTimeout(this._hideUnderlay,
+      this.props.delayPressOut || 100);
     this.props.onPress && this.props.onPress();
   },
 
@@ -164,6 +168,18 @@ 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;
+  },
+
+  touchableGetPressOutDelayMS: function() {
+    return this.props.delayPressOut;
+  },
+
   _showUnderlay: function() {
     this.refs[UNDERLAY_REF].setNativeProps(this.state.activeUnderlayProps);
     this.refs[CHILD_REF].setNativeProps(this.state.activeProps);

Libraries/Components/Touchable/TouchableOpacity.js

@@ -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');
@@ -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,
@@ -72,13 +74,18 @@ var TouchableOpacity = React.createClass({
   },
 
   componentDidMount: function() {
+    ensurePositiveDelayProps(this.props);
     ensureComponentIsNative(this.refs[CHILD_REF]);
   },
 
   componentDidUpdate: function() {
     ensureComponentIsNative(this.refs[CHILD_REF]);
   },
 
+  componentWillReceiveProps: function(nextProps) {
+    ensurePositiveDelayProps(nextProps);
+  },
+
   setOpacityTo: function(value) {
     if (POPAnimationMixin) {
       // Reset with animation if POP is available
@@ -102,20 +109,24 @@ var TouchableOpacity = React.createClass({
    * defined on your component.
    */
   touchableHandleActivePressIn: function() {
-    this.refs[CHILD_REF].setNativeProps({
-      opacity: this.props.activeOpacity
-    });
+    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);
+    if (!this._hideTimeout) {
+      this._opacityInactive();
+    }
     this.props.onPressOut && this.props.onPressOut();
   },
 
   touchableHandlePress: function() {
+    this.clearTimeout(this._hideTimeout);
+    this._opacityActive();
+    this._hideTimeout = this.setTimeout(this._opacityInactive,
+      this.props.delayPressOut || 100);
     this.props.onPress && this.props.onPress();
   },
 
@@ -128,7 +139,29 @@ 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;
+  },
+
+  touchableGetPressOutDelayMS: function() {
+    return this.props.delayPressOut;
+  },
+
+  _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);
   },
 
   render: function() {

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -12,7 +12,9 @@
 'use strict';
 
 var React = require('React');
+var TimerMixin = require('react-timer-mixin');
 var Touchable = require('Touchable');
+var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
 var onlyChild = require('onlyChild');
 
 /**
@@ -31,7 +33,7 @@ type Event = Object;
  * one of the primary reason a "web" app doesn't feel "native".
  */
 var TouchableWithoutFeedback = React.createClass({
-  mixins: [Touchable.Mixin],
+  mixins: [TimerMixin, Touchable.Mixin],
 
   propTypes: {
     /**
@@ -42,12 +44,32 @@ var TouchableWithoutFeedback = React.createClass({
     onPressIn: React.PropTypes.func,
     onPressOut: React.PropTypes.func,
     onLongPress: React.PropTypes.func,
+    /**
+     * Delay in ms, from the start of the touch, before onPressIn is called.
+     */
+    delayPressIn: React.PropTypes.number,
+    /**
+     * Delay in ms, from the release of the touch, before onPressOut is called.
+     */
+    delayPressOut: React.PropTypes.number,
+    /**
+     * Delay in ms, from onPressIn, before onLongPress is called.
+     */
+    delayLongPress: React.PropTypes.number,
   },
 
   getInitialState: function() {
     return this.touchableGetInitialState();
   },
 
+  componentDidMount: function() {
+    ensurePositiveDelayProps(this.props);
+  },
+
+  componentWillReceiveProps: function(nextProps: Object) {
+    ensurePositiveDelayProps(nextProps);
+  },
+
   /**
    * `Touchable.Mixin` self callbacks. The mixin will invoke these if they are
    * defined on your component.
@@ -73,7 +95,16 @@ var TouchableWithoutFeedback = React.createClass({
   },
 
   touchableGetHighlightDelayMS: function(): number {
-    return 0;
+    return this.props.delayPressIn || 0;
+  },
+
+  touchableGetLongPressDelayMS: function(): number {
+    return this.props.delayLongPress === 0 ? 0 :
+      this.props.delayLongPress || 500;
+  },
+
+  touchableGetPressOutDelayMS: function(): number {
+    return this.props.delayPressOut || 0;
   },
 
   render: function(): ReactElement {

Libraries/Components/Touchable/ensurePositiveDelayProps.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ensurePositiveDelayProps
+ * @flow
+ */
+'use strict';
+
+var invariant = require('invariant');
+
+var ensurePositiveDelayProps = function(props: any) {
+    invariant(
+      !(props.delayPressIn < 0 || props.delayPressOut < 0 ||
+        props.delayLongPress < 0),
+      'Touchable components cannot have negative delay properties'
+    );
+};
+
+module.exports = ensurePositiveDelayProps;

Libraries/vendor/react_contrib/interactions/Touchable/Touchable.js

@@ -232,6 +232,8 @@ var PRESS_EXPAND_PX = 20;
 
 var LONG_PRESS_THRESHOLD = 500;
 
+var LONG_PRESS_DELAY_MS = LONG_PRESS_THRESHOLD - HIGHLIGHT_DELAY_MS;
+
 var LONG_PRESS_ALLOWED_MOVEMENT = 10;
 
 // Default amount "active" region protrudes beyond box
@@ -276,7 +278,7 @@ var LONG_PRESS_ALLOWED_MOVEMENT = 10;
  *     +
  *     | RESPONDER_GRANT (HitRect)
  *     v
- * +---------------------------+  DELAY   +-------------------------+  T - DELAY     +------------------------------+
+ * +---------------------------+  DELAY   +-------------------------+  T + DELAY     +------------------------------+
  * |RESPONDER_INACTIVE_PRESS_IN|+-------->|RESPONDER_ACTIVE_PRESS_IN| +------------> |RESPONDER_ACTIVE_LONG_PRESS_IN|
  * +---------------------------+          +-------------------------+                +------------------------------+
  *     +            ^                         +           ^                                 +           ^
@@ -288,7 +290,7 @@ var LONG_PRESS_ALLOWED_MOVEMENT = 10;
  * |RESPONDER_INACTIVE_PRESS_OUT|+------->|RESPONDER_ACTIVE_PRESS_OUT|               |RESPONDER_ACTIVE_LONG_PRESS_OUT|
  * +----------------------------+         +--------------------------+               +-------------------------------+
  *
- * T - DELAY => LONG_PRESS_THRESHOLD - DELAY
+ * T + DELAY => LONG_PRESS_DELAY_MS + DELAY
  *
  * Not drawn are the side effects of each transition. The most important side
  * effect is the `touchableHandlePress` abstract method invocation that occurs
@@ -348,12 +350,16 @@ var TouchableMixin = {
     // event to make sure it doesn't get reused in the event object pool.
     e.persist();
 
+    this.pressOutDelayTimeout && clearTimeout(this.pressOutDelayTimeout);
+    this.pressOutDelayTimeout = null;
+
     this.state.touchable.touchState = States.NOT_RESPONDER;
     this.state.touchable.responderID = dispatchID;
     this._receiveSignal(Signals.RESPONDER_GRANT, e);
     var delayMS =
       this.touchableGetHighlightDelayMS !== undefined ?
-      this.touchableGetHighlightDelayMS() : HIGHLIGHT_DELAY_MS;
+      Math.max(this.touchableGetHighlightDelayMS(), 0) : HIGHLIGHT_DELAY_MS;
+    delayMS = isNaN(delayMS) ? HIGHLIGHT_DELAY_MS : delayMS;
     if (delayMS !== 0) {
       this.touchableDelayTimeout = setTimeout(
         this._handleDelay.bind(this, e),
@@ -363,9 +369,13 @@ var TouchableMixin = {
       this._handleDelay(e);
     }
 
+    var longDelayMS =
+      this.touchableGetLongPressDelayMS !== undefined ?
+      Math.max(this.touchableGetLongPressDelayMS(), 10) : LONG_PRESS_DELAY_MS;
+    longDelayMS = isNaN(longDelayMS) ? LONG_PRESS_DELAY_MS : longDelayMS;
     this.longPressDelayTimeout = setTimeout(
       this._handleLongDelay.bind(this, e),
-      LONG_PRESS_THRESHOLD - delayMS
+      longDelayMS + delayMS
     );
   },
 
@@ -632,8 +642,14 @@ var TouchableMixin = {
     if (newIsHighlight && !curIsHighlight) {
       this._savePressInLocation(e);
       this.touchableHandleActivePressIn && this.touchableHandleActivePressIn();
-    } else if (!newIsHighlight && curIsHighlight) {
-      this.touchableHandleActivePressOut && this.touchableHandleActivePressOut();
+    } else if (!newIsHighlight && curIsHighlight && this.touchableHandleActivePressOut) {
+      if (this.touchableGetPressOutDelayMS && this.touchableGetPressOutDelayMS()) {
+        this.pressOutDelayTimeout = this.setTimeout(function() {
+          this.touchableHandleActivePressOut();
+        }, this.touchableGetPressOutDelayMS());
+      } else {
+        this.touchableHandleActivePressOut();
+      }
     }
 
     if (IsPressingIn[curState] && signal === Signals.RESPONDER_RELEASE) {