From d9c951f3320c5be04f3926c98af22f78654ebd97 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 29 Dec 2019 19:43:58 -0800
Subject: [PATCH] refactor(fileuploader): move reactive assignment

---
 .../FileUploader/FileUploader.Skeleton.svelte      |  2 +-
 .../FileUploader/FileUploaderButton.svelte         | 14 +++-----------
 .../FileUploader/FileUploaderItem.svelte           |  8 ++++----
 src/components/FileUploader/Filename.svelte        |  2 +-
 4 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/src/components/FileUploader/FileUploader.Skeleton.svelte b/src/components/FileUploader/FileUploader.Skeleton.svelte
index 726b7bea..3c02fd0e 100644
--- a/src/components/FileUploader/FileUploader.Skeleton.svelte
+++ b/src/components/FileUploader/FileUploader.Skeleton.svelte
@@ -3,9 +3,9 @@
   export { className as class };
   export let style = undefined;
 
+  import { cx } from '../../lib';
   import SkeletonText from '../SkeletonText';
   import { ButtonSkeleton } from '../Button';
-  import { cx } from '../../lib';
 </script>
 
 <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
diff --git a/src/components/FileUploader/FileUploaderButton.svelte b/src/components/FileUploader/FileUploaderButton.svelte
index 3e402086..307b50ad 100644
--- a/src/components/FileUploader/FileUploaderButton.svelte
+++ b/src/components/FileUploader/FileUploaderButton.svelte
@@ -16,20 +16,12 @@
   import { cx } from '../../lib';
 
   let inputRef = undefined;
-
-  $: _class = cx(
-    '--btn',
-    '--btn--sm',
-    kind && `--btn--${kind}`,
-    disabled && '--btn--disabled',
-    className
-  );
 </script>
 
 <label
   tabindex={disabled ? '-1' : tabindex}
   aria-disabled={disabled}
-  class={_class}
+  class={cx('--btn', '--btn--sm', kind && `--btn--${kind}`, disabled && '--btn--disabled', className)}
   for={id}
   on:keydown
   on:keydown={({ key }) => {
@@ -54,8 +46,8 @@
     }
   }}
   on:click
-  on:click={event => {
-    event.target.value = null;
+  on:click={({ target }) => {
+    target.value = null;
   }}
   {id}
   {disabled}
diff --git a/src/components/FileUploader/FileUploaderItem.svelte b/src/components/FileUploader/FileUploaderItem.svelte
index 3a5695df..5ef894d9 100644
--- a/src/components/FileUploader/FileUploaderItem.svelte
+++ b/src/components/FileUploader/FileUploaderItem.svelte
@@ -26,9 +26,6 @@
   <p class={cx('--file-filename')}>{name}</p>
   <span class={cx('--file__state-container')}>
     <Filename
-      {iconDescription}
-      {status}
-      {invalid}
       on:keydown={({ key }) => {
         if (key === ' ' || key === 'Enter') {
           dispatch('delete', id);
@@ -36,7 +33,10 @@
       }}
       on:click={() => {
         dispatch('delete', id);
-      }} />
+      }}
+      {iconDescription}
+      {status}
+      {invalid} />
   </span>
   {#if invalid && errorSubject}
     <div class={cx('--form-requirement')}>
diff --git a/src/components/FileUploader/Filename.svelte b/src/components/FileUploader/Filename.svelte
index 81ab8774..916c0dac 100644
--- a/src/components/FileUploader/Filename.svelte
+++ b/src/components/FileUploader/Filename.svelte
@@ -15,7 +15,7 @@
 </script>
 
 {#if status === 'uploading'}
-  <Loading description={iconDescription} withOverlay={false} small class={className} {style} />
+  <Loading small description={iconDescription} withOverlay={false} class={className} {style} />
 {/if}
 
 {#if status === 'edit'}