Add a disabled prop that allows to disable event actions

README.md

@@ -55,6 +55,7 @@ onPress -> onRelease
 
 Name | Type | Default | Description
 :--- | :--- | :------ | :----------
+disabled | Boolean | false | Set it to true to disable event actions.
 repeatDelay | Number | 500 | The time (in milliseconds) to wait before the first hold action is being triggered.
 repeatInterval | Number | 32 | The time interval (in milliseconds) on how often to trigger a hold action.
 repeatCount | Number | 0 | The number of times the hold action will take place. A zero value will disable the repeat counter.

package.json

@@ -46,6 +46,7 @@
     "react": "^0.14.0 || >=15.0.0"
   },
   "dependencies": {
+    "chained-function": "^0.5.0",
     "prop-types": "^15.6.0"
   },
   "devDependencies": {
@@ -77,6 +78,7 @@
     "rc-slider": "~8.5.0",
     "react": "~16.2.0",
     "react-dom": "~16.2.0",
+    "sinon": "^4.1.3",
     "style-loader": "~0.19.1",
     "stylint": "~1.5.9",
     "stylint-loader": "~1.0.0",

src/Repeatable.jsx

@@ -1,8 +1,12 @@
+import chainedFunction from 'chained-function';
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
 
 class Repeatable extends PureComponent {
     static propTypes = {
+        // Set it to true to disable event actions.
+        disabled: PropTypes.bool,
+
         // The time (in milliseconds) to wait before the first hold action is being triggered.
         repeatDelay: PropTypes.oneOfType([
             PropTypes.number,
@@ -37,6 +41,7 @@ class Repeatable extends PureComponent {
         onRelease: PropTypes.func
     };
     static defaultProps = {
+        disabled: false,
         repeatDelay: 500,
         repeatInterval: 32,
         repeatCount: 0
@@ -99,6 +104,7 @@ class Repeatable extends PureComponent {
     }
     render() {
         const {
+            disabled,
             repeatDelay, // eslint-disable-line
             repeatInterval, // eslint-disable-line
             repeatCount, // eslint-disable-line
@@ -107,6 +113,10 @@ class Repeatable extends PureComponent {
             onHold, // eslint-disable-line
             onHoldEnd, // eslint-disable-line
             onRelease, // eslint-disable-line
+            onMouseDown,
+            onTouchStart,
+            onTouchCancel,
+            onTouchEnd,
             ...props
         } = this.props;
 
@@ -145,10 +155,42 @@ class Repeatable extends PureComponent {
             <div
                 role="presentation"
                 {...props}
-                onMouseDown={press}
-                onTouchStart={press}
-                onTouchCancel={release}
-                onTouchEnd={release}
+                onMouseDown={chainedFunction(
+                    onMouseDown,
+                    (event) => {
+                        if (disabled) {
+                            return;
+                        }
+                        press(event);
+                    }
+                )}
+                onTouchStart={chainedFunction(
+                    onTouchStart,
+                    (event) => {
+                        if (disabled) {
+                            return;
+                        }
+                        press(event);
+                    }
+                )}
+                onTouchCancel={chainedFunction(
+                    onTouchCancel,
+                    (event) => {
+                        if (disabled) {
+                            return;
+                        }
+                        release(event);
+                    }
+                )}
+                onTouchEnd={chainedFunction(
+                    onTouchEnd,
+                    (event) => {
+                        if (disabled) {
+                            return;
+                        }
+                        release(event);
+                    }
+                )}
             />
         );
     }