refactor: cleanup Toggle component (#7092)

* refactor: cleanup `Toggle` component * fix: remove unnecessary cursor-pointer --------- Co-authored-by: Begoña Álvarez de la Cruz <[email protected]>
iotaledger · Jul 4, 2023 · 6915150 · 6915150
1 parent 747de14
commit 6915150
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 31 deletions.
diff --git a/packages/desktop/components/popups/send/SendConfirmationPopup.svelte b/packages/desktop/components/popups/send/SendConfirmationPopup.svelte
@@ -42,6 +42,7 @@
         TARGET_CONTRACTS,
         TRANSFER_ALLOWANCE,
     } from '@core/layer-2'
+    import { ToggleColor } from '@ui/inputs/Toggle.svelte'
 
     export let _onMount: (..._: any[]) => Promise<void> = async () => {}
     export let disableBack = false
@@ -221,7 +222,7 @@
                 <KeyValueBox keyText={localize('general.giftStorageDeposit')}>
                     <Toggle
                         slot="value"
-                        color="green"
+                        color={ToggleColor.Green}
                         disabled={disableToggleGift}
                         active={giftStorageDeposit}
                         onClick={toggleGiftStorageDeposit}

diff --git a/packages/mobile/components/buttons/ProfileLockButton.svelte b/packages/mobile/components/buttons/ProfileLockButton.svelte
@@ -52,7 +52,7 @@
             </span>
         </div>
         <div class="col-end-12 h-full flex justify-center items-center justify-items-center">
-            <Toggle active={$isStrongholdLocked} onClick={() => {}} />
+            <Toggle active={$isStrongholdLocked} />
         </div>
     </div>
 </button>

diff --git a/packages/mobile/components/drawers/send/views/ReviewView.svelte b/packages/mobile/components/drawers/send/views/ReviewView.svelte
@@ -22,6 +22,7 @@
     import { DrawerId, openDrawer } from '@/auxiliary/drawer'
     import { sendRouter } from '@/routers'
     import { activeProfile } from '@core/profile'
+    import { ToggleColor } from '@ui/inputs/Toggle.svelte'
 
     export let sendTransaction: () => Promise<void>
     export let storageDeposit: number
@@ -110,7 +111,7 @@
                     <KeyValueBox keyText={localize('general.giftStorageDeposit')}>
                         <Toggle
                             slot="value"
-                            color="green"
+                            color={ToggleColor.Green}
                             disabled={$newTransactionDetails.disableToggleGift}
                             active={$newTransactionDetails.giftStorageDeposit}
                             onClick={toggleGiftStorageDeposit}

diff --git a/packages/mobile/components/filters/FilterItem.svelte b/packages/mobile/components/filters/FilterItem.svelte
@@ -10,20 +10,21 @@
 
     import { localize } from '@core/i18n'
     import { FilterUnit } from '@core/utils/interfaces/filter'
+    import { ToggleColor } from '@ui/inputs/Toggle.svelte'
 
     export let filterUnit: FilterUnit
+
+    function handleToggleClick(): void {
+        filterUnit.active = !filterUnit.active
+    }
 </script>
 
 <filter-item class="block px-5 -mx-5 border-t border-solid border-gray-200 dark:border-gray-800">
     <filter-item-toggle class="flex flex-row justify-between py-4">
         <Text fontWeight={FontWeight.medium} fontSize="15"
             >{localize(filterUnit.labelKey ?? filterUnit.localeKey + '.label')}</Text
         >
-        <Toggle
-            onClick={() => (filterUnit.active = !filterUnit.active)}
-            bind:active={filterUnit.active}
-            color="green"
-        />
+        <Toggle onClick={handleToggleClick} bind:active={filterUnit.active} color={ToggleColor.Green} />
     </filter-item-toggle>
     {#if filterUnit.active}
         <filter-item-type

diff --git a/packages/shared/components/inputs/Toggle.svelte b/packages/shared/components/inputs/Toggle.svelte
@@ -1,10 +1,16 @@
+<script lang="ts" context="module">
+    export enum ToggleColor {
+        Green = 'green',
+        Blue = 'blue',
+    }
+</script>
+
 <script lang="ts">
-    export let active = false
-    export let classes = ''
-    export let color = 'blue'
-    export let disabled = false
+    export let active: boolean = false
+    export let color: ToggleColor = ToggleColor.Blue
+    export let disabled: boolean = false
 
-    export let onClick: () => void
+    export let onClick: (() => unknown) | undefined = undefined
 
     function onToggleClick(): void {
         if (!disabled && onClick) {
@@ -13,29 +19,45 @@
     }
 </script>
 
-<button
-    on:click={onToggleClick}
-    class:active
-    {disabled}
-    type="button"
-    class="
-        toggle relative block w-10 shrink-0 h-6 rounded-full border-solid border border-transparent dark:border-gray-700
-        {disabled ? 'opacity-40' : 'cursor-pointer'}
-        {active ? `bg-${color}-500` : 'bg-gray-200 dark:bg-gray-900'} 
-        {classes}"
->
-    <knob class="absolute top-1/2 transform -translate-y-1/2 left-1 h-4 w-4 rounded-full bg-white dark:bg-gray-800" />
+<button on:click={onToggleClick} {disabled} type="button" class:active class={active ? `toggle-${color}` : null}>
+    <knob />
 </button>
 
-<style type="text/scss">
-    .toggle {
-        knob {
-            transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+<style lang="scss">
+    button {
+        @apply relative;
+        @apply block;
+        @apply w-10;
+        @apply shrink-0;
+        @apply h-6;
+        @apply rounded-full;
+        @apply border border-solid border-transparent dark:border-gray-700;
+        @apply bg-gray-200 dark:bg-gray-900;
+
+        &[disabled] {
+            @apply opacity-40;
         }
+
         &.active {
+            &.toggle-green {
+                @apply bg-green-500;
+            }
+            &.toggle-blue {
+                @apply bg-blue-500;
+            }
             knob {
-                left: 20px;
+                @apply left-5;
             }
         }
+
+        knob {
+            @apply absolute;
+            @apply rounded-full;
+            @apply h-4 w-4;
+            @apply top-1/2 left-1;
+            @apply transform -translate-y-1/2;
+            @apply bg-white dark:bg-gray-800;
+            transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+        }
     }
 </style>
diff --git a/packages/shared/components/modals/ProfileActions.svelte b/packages/shared/components/modals/ProfileActions.svelte
@@ -166,7 +166,7 @@
                         </Text>
                     </div>
                 </div>
-                <Toggle active={$isStrongholdLocked} onClick={onStrongholdToggleClick} classes="cursor-pointer" />
+                <Toggle active={$isStrongholdLocked} onClick={onStrongholdToggleClick} />
             </div>
             <HR />
         {:else}