Added a disableDrag prop

README.md

@@ -1,18 +1,18 @@
-react-ios-switch
-===
+# react-ios-switch
+
 <img src="https://img.shields.io/npm/dm/react-ios-switch.svg">
 
 [Demo](https://clari.github.io/react-ios-switch)
 
 [CodePen](https://codepen.io/mking-clari/pen/dzKxdb)
 
-Features
----
+## Features
+
 - Drag or click to toggle
-- Works with labels 
+- Works with labels
+
+## Usage
 
-Usage
----
 ```javascript
 import Switch from 'react-ios-switch';
 
@@ -27,6 +27,7 @@ import Switch from 'react-ios-switch';
   checked={undefined}
   className={undefined}
   disabled={undefined}
+  disableDrag={false}
   handleColor="white"
   name={undefined}
   offColor="white"
@@ -39,8 +40,8 @@ import Switch from 'react-ios-switch';
 />
 ```
 
-Development
----
+## Development
+
 ```
 # Install packages
 yarn
@@ -51,7 +52,7 @@ yarn start
 # Visit http://localhost:8080
 ```
 
-Inspirations
----
+## Inspirations
+
 - [Switchery](https://abpetkov.github.io/switchery)
-- [Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/visual-design/color)
+- [Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/visual-design/color)

package.json

@@ -18,6 +18,7 @@
     "toggle"
   ],
   "scripts": {
+    "prepare": "npm run babel",
     "babel": "babel src --out-dir lib --only 'src/index.js,src/normalizeColor.js,src/prefixStyle.js,src/Switch.jsx'",
     "postversion": "git push && git push --tags",
     "start": "webpack-dev-server --config webpack.config.dev",

src/Example.jsx

@@ -1,71 +1,86 @@
-import React from 'react';
+import React from "react";
 
-import Switch from './Switch';
+import Switch from "./Switch";
 
 export default class Example extends React.Component {
   constructor(props) {
     super(props);
-    
+
     this.state = {
       isColorSwitchChecked: true,
+      isDisabledDragSwitchCheck: true,
       isLabelSwitchChecked: true,
       isStyleSwitchChecked: true,
-      isSwitchChecked: true,
+      isSwitchChecked: true
     };
   }
-  
+
   render() {
-    const { isColorSwitchChecked, isLabelSwitchChecked, isStyleSwitchChecked, isSwitchChecked } = this.state;
-
+    const {
+      isColorSwitchChecked,
+      isDisabledDragSwitchCheck,
+      isLabelSwitchChecked,
+      isStyleSwitchChecked,
+      isSwitchChecked
+    } = this.state;
+
     return (
-      <div
-        style={{ margin: 50 }}
-      >
+      <div style={{ margin: 50 }}>
         <div>
           <Switch
             checked={isSwitchChecked}
             onChange={checked =>
               this.setState({
-                isSwitchChecked: checked,
+                isSwitchChecked: checked
               })
             }
           />
         </div>
         <label
           style={{
-            display: 'block',
+            display: "block"
           }}
         >
           <Switch
             checked={isLabelSwitchChecked}
             onChange={checked =>
               this.setState({
-                isLabelSwitchChecked: checked,
+                isLabelSwitchChecked: checked
               })
             }
           />
           Label
         </label>
         <div>
-          <Switch
-            checked
-            disabled
-          />
+          <Switch checked disabled />
         </div>
         <div>
+          <Switch checked readOnly />
+        </div>
+        <label
+          style={{
+            display: "block"
+          }}
+        >
           <Switch
-            checked
-            readOnly
+            disableDrag
+            checked={isDisabledDragSwitchCheck}
+            onChange={checked =>
+              this.setState({
+                isDisabledDragSwitchCheck: checked
+              })
+            }
           />
-        </div>
+          Drag disabled
+        </label>
         <div>
           <Switch
             checked={isColorSwitchChecked}
             offColor="rgb(0, 122, 255)"
             onColor="rgb(255, 149, 0)"
             onChange={checked =>
               this.setState({
-                isColorSwitchChecked: checked,
+                isColorSwitchChecked: checked
               })
             }
           />
@@ -75,11 +90,11 @@ export default class Example extends React.Component {
             checked={isStyleSwitchChecked}
             onChange={checked =>
               this.setState({
-                isStyleSwitchChecked: checked,
+                isStyleSwitchChecked: checked
               })
             }
             style={{
-              marginLeft: 50,
+              marginLeft: 50
             }}
           />
         </div>