[Touchable] Add custom delay props to Touchable components

Summary:
@public
This PR adds quite a bit of functionality to the Touchable components, allowing the ms delays of each of the handlers (`onPressIn, onPressOut, onPress, onLongPress`) to be configured.

It adds the following props to `TouchableWithoutFeedback, TouchableOpacity, and TouchableHighlight`:
```javascript
/**
 * Delay in ms, from the release of the touch, before onPress is called.
 */
delayOnPress: React.PropTypes.number,
/**
 * Delay in ms, from the start of the touch, before onPressIn is called.
 */
delayOnPressIn: React.PropTypes.number,
/**
 * Delay in ms, from the release of the touch, before onPressOut is called.
 */
delayOnPressOut: React.PropTypes.number,
/**
 * Delay in ms, from onPressIn, before onLongPress is called.
 */
delayOnLongPress: React.PropTypes.number,
```

`TouchableHighlight` also gets an additional set of props:
```javascript
/**
 * Delay in ms, from the start of the touch, before the highlight is shown.
 */
delayHighlightShow: React.PropTypes.number,
/**
 * Del
...
```

Closes https://github.com/facebook/react-native/pull/1255
Github Author: jmstout <git@jmstout.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.

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');
@@ -47,7 +49,7 @@ var onlyChild = require('onlyChild');
  */
 
 var TouchableOpacity = React.createClass({
-  mixins: [Touchable.Mixin, NativeMethodsMixin, POPAnimationMixin],
+  mixins: [TimerMixin, Touchable.Mixin, NativeMethodsMixin, POPAnimationMixin],
 
   propTypes: {
     ...TouchableWithoutFeedback.propTypes,
@@ -69,6 +71,7 @@ var TouchableOpacity = React.createClass({
   },
 
   componentDidMount: function() {
+    ensurePositiveDelayProps(this.props);
     ensureComponentIsNative(this.refs[CHILD_REF]);
   },
 
@@ -76,6 +79,10 @@ var TouchableOpacity = React.createClass({
     ensureComponentIsNative(this.refs[CHILD_REF]);
   },
 
+  componentWillReceiveProps: function(nextProps) {
+    ensurePositiveDelayProps(nextProps);
+  },
+
   setOpacityTo: function(value) {
     if (POPAnimationMixin) {
       // Reset with animation if POP is available
@@ -83,6 +90,7 @@ var TouchableOpacity = React.createClass({
       var anim = {
         type: this.AnimationTypes.linear,
         property: this.AnimationProperties.opacity,
+        duration: 0.15,
         toValue: value,
       };
       this.startAnimation(CHILD_REF, anim);
@@ -99,20 +107,26 @@ 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();
   },
 
@@ -125,7 +139,30 @@ 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;