sync

Author: wangzuo

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-input-switch",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "React toggle switch component",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

src/switch.js

@@ -9,20 +9,27 @@ const Switch = ({
   value,
   onChange,
   name,
+  disabled,
   ...props
 }) => {
   const checked = value === on;
-  const styles = makeStyles(customStyles, { checked });
+  const styles = makeStyles(customStyles);
+
+  function handleClick() {
+    if (onChange) {
+      onChange(checked ? off : on);
+    }
+  }
 
   return (
     <label
       {...props}
-      css={styles.container}
-      onClick={() => onChange && onChange(checked ? off : on)}
+      css={[styles.container, disabled && styles.containerDisabled]}
+      onClick={disabled ? null : handleClick}
     >
       <input type="hidden" name={name} value={value} />
-      <span css={styles.track} />
-      <span css={styles.button} />
+      <span css={[styles.track, checked && styles.trackChecked]} />
+      <span css={[styles.button, checked && styles.buttonChecked]} />
     </label>
   );
 };
@@ -31,6 +38,7 @@ Switch.defaultProps = {
   value: 1,
   on: 1,
   off: 0,
+  disabled: false,
   styles: {}
 };
 

src/utils.js

@@ -1,17 +1,20 @@
-export const makeStyles = (customStyles, { checked }) => {
+export const makeStyles = customStyles => {
   return {
-    container: [defaultStyles.container, customStyles.container],
-    track: [
-      { ...defaultStyles.track, ...customStyles.track },
-      checked && { ...defaultStyles.trackChecked, ...customStyles.trackChecked }
-    ],
-    button: [
-      { ...defaultStyles.button, ...customStyles.button },
-      checked && {
-        ...defaultStyles.buttonChecked,
-        ...customStyles.buttonChecked
-      }
-    ]
+    container: { ...defaultStyles.container, ...customStyles.container },
+    containerDisabled: {
+      ...defaultStyles.containerDisabled,
+      ...customStyles.containerDisabled
+    },
+    track: { ...defaultStyles.track, ...customStyles.track },
+    trackChecked: {
+      ...defaultStyles.trackChecked,
+      ...customStyles.trackChecked
+    },
+    button: { ...defaultStyles.button, ...customStyles.button },
+    buttonChecked: {
+      ...defaultStyles.buttonChecked,
+      ...customStyles.buttonChecked
+    }
   };
 };
 
@@ -26,6 +29,11 @@ export const defaultStyles = {
     userSelect: 'none'
   },
 
+  containerDisabled: {
+    opacity: 0.7,
+    cursor: 'not-allowed'
+  },
+
   track: {
     position: 'absolute',
     top: 0,