sync

Author: wangzuo

README.md

@@ -15,6 +15,10 @@ npm install react-input-switch --save
 yarn add react-input-switch
 ```
 
+### Demo
+
+[https://swiftcarrot.dev/react-input-switch/](https://swiftcarrot.dev/react-input-switch/)
+
 ### Custom styles
 
 ```javascript

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['zkit']
+  presets: ['swiftcarrot']
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-input-switch",
-  "version": "2.1.18",
+  "version": "2.1.21",
   "description": "React toggle switch component",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -31,25 +31,25 @@
   },
   "homepage": "https://swiftcarrot.dev/react-input-switch",
   "dependencies": {
-    "@babel/runtime": "^7.3.4",
-    "@emotion/core": "^10.0.9"
+    "@babel/runtime": "^7.4.4",
+    "@emotion/core": "^10.0.10"
   },
   "peerDependencies": {
     "react": "^16.6.3",
     "react-dom": "^16.6.3"
   },
   "devDependencies": {
-    "babel-jest": "^24.5.0",
-    "babel-preset-zkit": "^0.4.0",
+    "babel-jest": "^24.8.0",
+    "babel-preset-swiftcarrot": "^0.6.1",
     "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.11.2",
-    "jest": "^24.5.0",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
-    "rollup": "^1.6.0",
+    "enzyme-adapter-react-16": "^1.12.1",
+    "jest": "^24.8.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "rollup": "^1.11.3",
     "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^9.2.1",
-    "rollup-plugin-node-resolve": "^4.0.1"
+    "rollup-plugin-commonjs": "^9.3.4",
+    "rollup-plugin-node-resolve": "^4.2.3"
   },
   "jest": {
     "collectCoverage": true,

src/__tests__/switch.js

@@ -4,24 +4,23 @@ import renderer from 'react-test-renderer';
 import Switch from '../switch';
 
 test('render', () => {
-  const component = renderer.create(<Switch />);
-  expect(component.toJSON()).toMatchInlineSnapshot(`
-<label
-  className="css-1m7f95s-Switch"
-  onClick={[Function]}
->
-  <input
-    type="hidden"
-    value={1}
-  />
-  <span
-    className="css-5qfbhd-Switch"
-  />
-  <span
-    className="css-1x4cdny-Switch"
-  />
-</label>
-`);
+  expect(renderer.create(<Switch />).toJSON()).toMatchInlineSnapshot(`
+    <label
+      className="css-1m7f95s-Switch"
+      onClick={[Function]}
+    >
+      <input
+        type="hidden"
+        value={1}
+      />
+      <span
+        className="css-1lmr6io-Switch"
+      />
+      <span
+        className="css-1xb86df-Switch"
+      />
+    </label>
+  `);
 });
 
 test('value', () => {
@@ -31,7 +30,6 @@ test('value', () => {
     render() {
       return (
         <Switch
-          theme={{ primaryColor: 'blue' }}
           value={this.state.value}
           onChange={value => this.setState({ value })}
         />
@@ -59,7 +57,6 @@ test('custom on/off', () => {
     render() {
       return (
         <Switch
-          theme={{ primaryColor: 'blue' }}
           on="yes"
           off="no"
           value={this.state.value}
@@ -85,20 +82,20 @@ test('custom on/off', () => {
 test('className', () => {
   const component = renderer.create(<Switch className="test" />);
   expect(component.toJSON()).toMatchInlineSnapshot(`
-<label
-  className="test css-1m7f95s-Switch"
-  onClick={[Function]}
->
-  <input
-    type="hidden"
-    value={1}
-  />
-  <span
-    className="test-track css-5qfbhd-Switch"
-  />
-  <span
-    className="test-button css-1x4cdny-Switch"
-  />
-</label>
-`);
+    <label
+      className="test css-1m7f95s-Switch"
+      onClick={[Function]}
+    >
+      <input
+        type="hidden"
+        value={1}
+      />
+      <span
+        className="test-track css-1lmr6io-Switch"
+      />
+      <span
+        className="test-button css-1xb86df-Switch"
+      />
+    </label>
+  `);
 });

src/switch.js

@@ -13,17 +13,17 @@ const Switch = ({
 }) => {
   const checked = value === on;
   const styles = {
-    container: [
-      defaultStyles.container(checked),
-      customStyles.container && customStyles.container(checked)
-    ],
+    container: [defaultStyles.container, customStyles.container],
     track: [
-      defaultStyles.track(checked),
-      customStyles.track && customStyles.track(checked)
+      { ...defaultStyles.track, ...customStyles.track },
+      checked && { ...defaultStyles.trackChecked, ...customStyles.trackChecked }
     ],
     button: [
-      defaultStyles.button(checked),
-      customStyles.button && customStyles.button(checked)
+      { ...defaultStyles.button, ...customStyles.button },
+      checked && {
+        ...defaultStyles.buttonChecked,
+        ...customStyles.buttonChecked
+      }
     ]
   };
 
@@ -52,36 +52,45 @@ Switch.defaultProps = {
 };
 
 const defaultStyles = {
-  container: () => ({
+  container: {
     position: 'relative',
     display: 'inline-block',
     width: 24,
     height: 14,
     verticalAlign: 'middle',
     cursor: 'pointer',
     userSelect: 'none'
-  }),
+  },
 
-  track: checked => ({
+  track: {
     position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
     bottom: 0,
     borderRadius: 7,
-    backgroundColor: checked ? 'blue' : '#cccccc'
-  }),
+    backgroundColor: '#cccccc'
+  },
+
+  trackChecked: {
+    backgroundColor: '#5e72e4'
+  },
 
-  button: checked => ({
+  button: {
     position: 'absolute',
     top: 2,
     bottom: 2,
-    right: checked ? 2 : 11,
-    left: checked ? 11 : 3,
+    right: 11,
+    left: 2,
     backgroundColor: '#fff',
     borderRadius: 9,
     transition: 'all 100ms ease'
-  }),
+  },
+
+  buttonChecked: {
+    right: 2,
+    left: 11
+  },
 
   input: {
     opacity: 0,