feature: add ability to disable touch events

[amitmtrn]

I needed the ability to disable the drag events so switch would be active only on click.

[markusenglund]

Hello, sorry for the late response.

Could you tell me about the use-case for this? Do you think it's something that will benefit many developers?

[amitmtrn]

Hi @markusenglund,
I was asked by our product department to disable the drag since they wanted to refer the switch as a checkbox and drag events seems confusing in that scenario.
Not sure it would benefit many developers, but if someone has similar requirements, then it might be useful.

[RosenTomov]

That's what we're trying to do right now, I think it would be helpful.

The way I got around it was to use npm-patch and do what @amitmtrn did and enable clicking on the switch handle (not only background).

All you have to do is pass disableTouch.

react-switch+6.0.0.patch

diff --git a/node_modules/react-switch/dist/react-switch.dev.js b/node_modules/react-switch/dist/react-switch.dev.js
index 90e5bd5..704721e 100644
--- a/node_modules/react-switch/dist/react-switch.dev.js
+++ b/node_modules/react-switch/dist/react-switch.dev.js
@@ -359,6 +359,7 @@ var ReactSwitch = /*@__PURE__*/function (Component) {
     var ref = this.props;
     var checked = ref.checked;
     var disabled = ref.disabled;
+    var disableTouch = ref.disableTouch;
     var className = ref.className;
     var offColor = ref.offColor;
     var onColor = ref.onColor;
@@ -374,7 +375,7 @@ var ReactSwitch = /*@__PURE__*/function (Component) {
     var width = ref.width;
     var borderRadius = ref.borderRadius;
     var handleDiameter = ref.handleDiameter;
-    var rest$1 = objectWithoutProperties(ref, ["checked", "disabled", "className", "offColor", "onColor", "offHandleColor", "onHandleColor", "checkedIcon", "uncheckedIcon", "checkedHandleIcon", "uncheckedHandleIcon", "boxShadow", "activeBoxShadow", "height", "width", "borderRadius", "handleDiameter"]);
+    var rest$1 = objectWithoutProperties(ref, ["checked", "disabled", "className", "offColor", "onColor", "offHandleColor", "onHandleColor", "checkedIcon", "uncheckedIcon", "checkedHandleIcon", "uncheckedHandleIcon", "boxShadow", "activeBoxShadow", "height", "width", "borderRadius", "handleDiameter", "disableTouch"]);
     var rest = rest$1;
     var ref$1 = this.state;
     var $pos = ref$1.$pos;
@@ -499,14 +500,14 @@ var ReactSwitch = /*@__PURE__*/function (Component) {
     }, uncheckedIcon)), React.createElement('div', {
       className: "react-switch-handle",
       style: handleStyle,
-      onClick: function (e) {
+      onClick: disableTouch ? this.$onClick : function (e) {
         return e.preventDefault();
       },
-      onMouseDown: disabled ? null : this.$onMouseDown,
-      onTouchStart: disabled ? null : this.$onTouchStart,
-      onTouchMove: disabled ? null : this.$onTouchMove,
-      onTouchEnd: disabled ? null : this.$onTouchEnd,
-      onTouchCancel: disabled ? null : this.$unsetHasOutline
+      onMouseDown: disabled || disableTouch ? null : this.$onMouseDown,
+      onTouchStart: disabled || disableTouch ? null : this.$onTouchStart,
+      onTouchMove: disabled || disableTouch ? null : this.$onTouchMove,
+      onTouchEnd: disabled || disableTouch ? null : this.$onTouchEnd,
+      onTouchCancel: disabled || disableTouch ? null : this.$unsetHasOutline
     }, uncheckedHandleIcon && React.createElement('div', {
       style: uncheckedHandleIconStyle
     }, uncheckedHandleIcon), checkedHandleIcon && React.createElement('div', {
@@ -534,6 +535,7 @@ ReactSwitch.propTypes = {
   checked: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
+  disableTouch: PropTypes.bool,
   offColor: hexColorPropType,
   onColor: hexColorPropType,
   offHandleColor: hexColorPropType,
@@ -553,6 +555,7 @@ ReactSwitch.propTypes = {
 };
 ReactSwitch.defaultProps = {
   disabled: false,
+  disableTouch: false,
   offColor: "#888",
   onColor: "#080",
   offHandleColor: "#fff",
diff --git a/node_modules/react-switch/index.js b/node_modules/react-switch/index.js
index c90772c..e3e5fbf 100644
--- a/node_modules/react-switch/index.js
+++ b/node_modules/react-switch/index.js
@@ -1,5 +1 @@
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./dist/react-switch.min.js");
-} else {
-  module.exports = require("./dist/react-switch.dev.js");
-}
+module.exports = require("./dist/react-switch.dev.js");