From 9951e1ab04f4e4e78c14fcd6e002269e2a2f159e Mon Sep 17 00:00:00 2001
From: Kureev Alexey <kureev-mail@ya.ru>
Date: Tue, 23 Feb 2016 19:38:51 -0800
Subject: [PATCH] Introduce disabling for Touchable* elements

Summary:Introduce a `disabled` property for Touchable* components.

Fix https://github.com/facebook/react-native/issues/2103
Closes https://github.com/facebook/react-native/pull/5931

Differential Revision: D2969790

Pulled By: mkonicek

fb-gh-sync-id: 570a4ff882219f52f2d2ebef3eb73b1df50a0877
shipit-source-id: 570a4ff882219f52f2d2ebef3eb73b1df50a0877
---
 Examples/UIExplorer/TouchableExample.js       | 53 +++++++++++++++++++
 Libraries/Components/Touchable/Touchable.js   |  2 +-
 .../Touchable/TouchableWithoutFeedback.js     |  4 ++
 3 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/Examples/UIExplorer/TouchableExample.js b/Examples/UIExplorer/TouchableExample.js
index 377a6ce48f9005..0d2116a86b92f1 100644
--- a/Examples/UIExplorer/TouchableExample.js
+++ b/Examples/UIExplorer/TouchableExample.js
@@ -100,6 +100,13 @@ exports.examples = [
    render: function(): ReactElement {
      return <TouchableHitSlop />;
    },
+ }, {
+   title: 'Disabled Touchable*',
+   description: '<Touchable*> components accept disabled prop which prevents ' +
+     'any interaction with component',
+   render: function(): ReactElement {
+     return <TouchableDisabled />;
+   },
  }];
 
 var TextOnPressBox = React.createClass({
@@ -292,6 +299,45 @@ var TouchableHitSlop = React.createClass({
   }
 });
 
+var TouchableDisabled = React.createClass({
+  render: function() {
+    return (
+      <View>
+        <TouchableOpacity disabled={true} style={[styles.row, styles.block]}>
+          <Text style={styles.disabledButton}>Disabled TouchableOpacity</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity disabled={false} style={[styles.row, styles.block]}>
+          <Text style={styles.button}>Enabled TouchableOpacity</Text>
+        </TouchableOpacity>
+
+        <TouchableHighlight
+          activeOpacity={1}
+          disabled={true}
+          animationVelocity={0}
+          underlayColor="rgb(210, 230, 255)"
+          style={[styles.row, styles.block]}
+          onPress={() => console.log('custom THW text - hightlight')}>
+          <Text style={styles.disabledButton}>
+            Disabled TouchableHighlight
+          </Text>
+        </TouchableHighlight>
+
+        <TouchableHighlight
+          activeOpacity={1}
+          animationVelocity={0}
+          underlayColor="rgb(210, 230, 255)"
+          style={[styles.row, styles.block]}
+          onPress={() => console.log('custom THW text - hightlight')}>
+          <Text style={styles.button}>
+            Disabled TouchableHighlight
+          </Text>
+        </TouchableHighlight>
+      </View>
+    );
+  }
+});
+
 var heartImage = {uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small'};
 
 var styles = StyleSheet.create({
@@ -310,9 +356,16 @@ var styles = StyleSheet.create({
   text: {
     fontSize: 16,
   },
+  block: {
+    padding: 10,
+  },
   button: {
     color: '#007AFF',
   },
+  disabledButton: {
+    color: '#007AFF',
+    opacity: 0.5,
+  },
   hitSlopButton: {
     color: 'white',
   },
diff --git a/Libraries/Components/Touchable/Touchable.js b/Libraries/Components/Touchable/Touchable.js
index 6622ce8ad5aea5..83b07248a7f8ae 100644
--- a/Libraries/Components/Touchable/Touchable.js
+++ b/Libraries/Components/Touchable/Touchable.js
@@ -337,7 +337,7 @@ var TouchableMixin = {
    * Must return true to start the process of `Touchable`.
    */
   touchableHandleStartShouldSetResponder: function() {
-    return true;
+    return !this.props.disabled;
   },
 
   /**
diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js
index 1108c21e0bee84..3b67ed00e2d012 100755
--- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js
+++ b/Libraries/Components/Touchable/TouchableWithoutFeedback.js
@@ -44,6 +44,10 @@ var TouchableWithoutFeedback = React.createClass({
       React.PropTypes.oneOf(View.AccessibilityTraits),
       React.PropTypes.arrayOf(React.PropTypes.oneOf(View.AccessibilityTraits)),
     ]),
+    /**
+     * If true, disable all interactions for this component.
+     */
+    disabled: React.PropTypes.bool,
     /**
      * Called when the touch is released, but not if cancelled (e.g. by a scroll
      * that steals the responder lock).