From 4b1ed0adce5124118ddcb132dbebf46bb988c263 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 29 Dec 2019 19:25:54 -0800
Subject: [PATCH] refactor(toggle): remove dispatch, inputRef, afterUpdate

---
 src/components/Toggle/Toggle.Skeleton.svelte       |  2 +-
 src/components/Toggle/Toggle.Story.svelte          |  8 +++++++-
 src/components/Toggle/Toggle.svelte                | 13 ++-----------
 .../ToggleSmall/ToggleSmall.Story.svelte           |  8 +++++++-
 src/components/ToggleSmall/ToggleSmall.svelte      | 14 ++------------
 5 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/src/components/Toggle/Toggle.Skeleton.svelte b/src/components/Toggle/Toggle.Skeleton.svelte
index 266fdd58..79e57933 100644
--- a/src/components/Toggle/Toggle.Skeleton.svelte
+++ b/src/components/Toggle/Toggle.Skeleton.svelte
@@ -11,7 +11,7 @@
 <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
   <input type="checkbox" class={cx('--toggle --skeleton')} {id} />
   <label
-    aria-label={labelText ? null : $$props['aria-label'] || 'Toggle is loading'}
+    aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}
     class={cx('--toggle__label', '--skeleton')}
     for={id}>
     {#if labelText}
diff --git a/src/components/Toggle/Toggle.Story.svelte b/src/components/Toggle/Toggle.Story.svelte
index 3adc562b..0010452d 100644
--- a/src/components/Toggle/Toggle.Story.svelte
+++ b/src/components/Toggle/Toggle.Story.svelte
@@ -4,11 +4,17 @@
   import Layout from '../../internal/ui/Layout.svelte';
   import Toggle from './Toggle.svelte';
   import ToggleSkeleton from './Toggle.Skeleton.svelte';
+
+  let toggled = true;
+
+  $: {
+    console.log('toggled', toggled);
+  }
 </script>
 
 <Layout>
   {#if story === 'toggled'}
-    <Toggle {...$$props} id="toggle-1" toggled />
+    <Toggle {...$$props} id="toggle-1" bind:toggled />
   {:else if story === 'skeleton'}
     <ToggleSkeleton />
   {:else}
diff --git a/src/components/Toggle/Toggle.svelte b/src/components/Toggle/Toggle.svelte
index 07b8f920..0cb1cf0c 100644
--- a/src/components/Toggle/Toggle.svelte
+++ b/src/components/Toggle/Toggle.svelte
@@ -9,22 +9,11 @@
   export let labelB = 'On';
   export let style = undefined;
 
-  import { createEventDispatcher, afterUpdate } from 'svelte';
   import { cx } from '../../lib';
-
-  const dispatch = createEventDispatcher();
-
-  let inputRef = undefined;
-
-  afterUpdate(() => {
-    inputRef.checked = toggled;
-    dispatch('toggle', { id, toggled });
-  });
 </script>
 
 <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
   <input
-    bind:this={inputRef}
     type="checkbox"
     class={cx('--toggle-input')}
     checked={toggled}
@@ -39,6 +28,8 @@
         toggled = !toggled;
       }
     }}
+    on:focus
+    on:blur
     {disabled}
     {id} />
   <label
diff --git a/src/components/ToggleSmall/ToggleSmall.Story.svelte b/src/components/ToggleSmall/ToggleSmall.Story.svelte
index 8a6e15fd..0a46e46a 100644
--- a/src/components/ToggleSmall/ToggleSmall.Story.svelte
+++ b/src/components/ToggleSmall/ToggleSmall.Story.svelte
@@ -4,11 +4,17 @@
   import Layout from '../../internal/ui/Layout.svelte';
   import ToggleSmall from './ToggleSmall.svelte';
   import ToggleSmallSkeleton from './ToggleSmall.Skeleton.svelte';
+
+  let toggled = true;
+
+  $: {
+    console.log('toggled', toggled);
+  }
 </script>
 
 <Layout>
   {#if story === 'toggled'}
-    <ToggleSmall {...$$props} id="toggle-1" toggled />
+    <ToggleSmall {...$$props} id="toggle-1" bind:toggled />
   {:else if story === 'skeleton'}
     <ToggleSmallSkeleton />
   {:else}
diff --git a/src/components/ToggleSmall/ToggleSmall.svelte b/src/components/ToggleSmall/ToggleSmall.svelte
index a06b7336..289b3665 100644
--- a/src/components/ToggleSmall/ToggleSmall.svelte
+++ b/src/components/ToggleSmall/ToggleSmall.svelte
@@ -9,22 +9,11 @@
   export let labelB = 'On';
   export let style = undefined;
 
-  import { createEventDispatcher, afterUpdate } from 'svelte';
   import { cx } from '../../lib';
-
-  const dispatch = createEventDispatcher();
-
-  let inputRef = undefined;
-
-  afterUpdate(() => {
-    inputRef.checked = toggled;
-    dispatch('toggle', { id, toggled });
-  });
 </script>
 
 <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
   <input
-    bind:this={inputRef}
     type="checkbox"
     class={cx('--toggle-input', '--toggle-input--small')}
     checked={toggled}
@@ -39,9 +28,10 @@
         toggled = !toggled;
       }
     }}
+    on:focus
+    on:blur
     {disabled}
     {id} />
-
   <label
     aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle'}
     class={cx('--toggle-input__label')}