From 4ed754c5494db46f4ce39a48ea391ca0313af6da Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Tue, 24 Dec 2019 09:38:33 -0800
Subject: [PATCH] refactor(expandable-tile): remove dispatcher, inline
 functions

---
 src/components/Tile/ExpandableTile.svelte | 51 +++++++----------------
 1 file changed, 16 insertions(+), 35 deletions(-)

diff --git a/src/components/Tile/ExpandableTile.svelte b/src/components/Tile/ExpandableTile.svelte
index ba5d1688..166f9c18 100644
--- a/src/components/Tile/ExpandableTile.svelte
+++ b/src/components/Tile/ExpandableTile.svelte
@@ -11,16 +11,14 @@
   export let light = false;
   export let style = undefined;
 
-  import { createEventDispatcher, tick, onMount } from 'svelte';
+  import { tick, onMount } from 'svelte';
   import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
-  import { cx } from '../../lib';
+  import { cx, css } from '../../lib';
 
   let tile = undefined;
   let tileContent = undefined;
   let aboveTheFold = undefined;
 
-  const dispatch = createEventDispatcher();
-
   onMount(() => {
     const tileStyle = window.getComputedStyle(tile, null);
     tileMaxHeight = aboveTheFold.getBoundingClientRect().height;
@@ -29,47 +27,30 @@
       parseInt(tileStyle.getPropertyValue('padding-bottom'), 10);
   });
 
-  function setMaxHeight() {
+  async function setHeight() {
+    await tick();
     tileMaxHeight = expanded
       ? tileContent.getBoundingClientRect().height
       : aboveTheFold.getBoundingClientRect().height;
   }
-
-  async function handleClick(event) {
-    expanded = !expanded;
-    await tick();
-    setMaxHeight();
-    dispatch('click', event);
-  }
-
-  async function handleKeyPress(event) {
-    if (event.key === ' ' || event.key === 'Enter') {
-      expanded = !expanded;
-      await tick();
-      setMaxHeight();
-    }
-
-    dispatch('keypress', event);
-  }
-
-  $: _class = cx(
-    '--tile',
-    '--tile--expandable',
-    expanded && '--tile--is-expanded',
-    light && '--tile--light',
-    className
-  );
-  $: tileStyle = expanded ? undefined : `max-height: ${tileMaxHeight + tilePadding}px`;
 </script>
 
 <div
   bind:this={tile}
-  style={tileStyle}
-  class={_class}
+  style={expanded ? undefined : `max-height: ${tileMaxHeight + tilePadding}px`}
+  class={cx('--tile', '--tile--expandable', expanded && '--tile--is-expanded', light && '--tile--light', className)}
   on:click
-  on:click={handleClick}
+  on:click={() => {
+    expanded = !expanded;
+    setHeight();
+  }}
   on:keypress
-  on:keypress={handleKeyPress}
+  on:keypress={({ key }) => {
+    if (key === ' ' || key === 'Enter') {
+      expanded = !expanded;
+      setHeight();
+    }
+  }}
   on:mouseover
   on:mouseenter
   on:mouseleave