From 21653c415602ddb0ebb59f800bf14b9f1310578d Mon Sep 17 00:00:00 2001
From: Haishan <haishanhan@gmail.com>
Date: Sun, 1 Mar 2020 17:34:05 +0800
Subject: chore: use react-switch for better a11y

---
 src/components/StyleGuide.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

(limited to 'src/components/StyleGuide.js')

diff --git a/src/components/StyleGuide.js b/src/components/StyleGuide.js
index 02bff7c..4cb473d 100644
--- a/src/components/StyleGuide.js
+++ b/src/components/StyleGuide.js
@@ -2,9 +2,9 @@ import React, { PureComponent } from 'react';
 
 import { Zap } from 'react-feather';
 
+import SwitchThemed from './SwitchThemed';
 import ToggleSwitch from './ToggleSwitch';
 import Input from './Input';
-import Switch from './Switch';
 import Button from './Button';
 import { LoadingDot } from './shared/Basic';
 
@@ -31,12 +31,25 @@ const Pane = ({ children, style }) => (
   <div style={{ ...paneStyle, ...style }}>{children}</div>
 );
 
+function useToggle(initialState = false) {
+  const [onoff, setonoff] = React.useState(initialState);
+  const handleChange = React.useCallback(() => {
+    setonoff(x => !x);
+  }, []);
+  return [onoff, handleChange];
+}
+
+function SwitchExample() {
+  const [checked, handleChange] = useToggle(false);
+  return <SwitchThemed checked={checked} onChange={handleChange} />;
+}
+
 class StyleGuide extends PureComponent {
   render() {
     return (
       <div>
         <Pane>
-          <Switch />
+          <SwitchExample />
         </Pane>
         <Pane>
           <Input />
-- 
cgit v1.3.1