add choice component

svelte/components/Input/Config/Config.ts

@@ -26,13 +26,15 @@ export default class Config {
         default: { display: "Active storage", value: "ipfs" },
         fieldsGroups: {
           ipfs: {
+            display: "IPFS",
             editable: false,
             fields: [
               { key: "apiEndPoint", value: "", fixed: true, undeletable: true },
               { key: "apiKey", value: "", fixed: true, undeletable: true }
             ]
           },
           swarm: {
+            display: "Swarm",
             editable: false,
             fields: [
               { key: "apiEndPoint", value: "", fixed: true, undeletable: true },
@@ -97,7 +99,7 @@ export default class Config {
     document.dispatchEvent(this.propertyChangedEvent);
   }
 
-  
+
 //////////////////////////////////////////////
 // actual localStorage storage structure
 let storage = {

svelte/components/Input/Config/ConfigFieldChoice.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { clickOutside } from "@helpers/clickOutside";
+
+  export let attributes;
+  export let namespace;
+
+  $: attribute = attributes[namespace];
+  $: defaultChoice = attribute.default.value;
+
+  let open = false;
+
+  const handleToggleOpen = () => (open = !open);
+</script>
+
+<div
+  class="select-wrapper select-network"
+  use:clickOutside={() => (open = false)}
+  on:click={handleToggleOpen}
+  on:keydown={handleToggleOpen}
+>
+  <div class="select" class:open>
+    <div class="select-trigger">
+      <span>{attribute.fieldsGroups[defaultChoice].display}</span>
+    </div>
+
+    <div class="custom-options">
+      {#each Object.entries(attribute.fieldsGroups) as [key, choice]}
+        <span
+          class="custom-option {key == attribute.default.value && 'selected'}"
+          on:click={() => (attributes[namespace].default.value = key)}
+          on:keydown={() => (attributes[namespace].default.value = key)}
+        >
+          {choice.display}
+        </span>
+      {/each}
+    </div>
+  </div>
+</div>

svelte/components/Input/Config/InputConfigFields.svelte

@@ -2,8 +2,8 @@
   import type { UserConfig } from "./configTypes";
 
   import { onMount } from "svelte";
-  import { clickOutside } from "@helpers/clickOutside";
   import Config from "./Config";
+  import ConfigFieldChoice from "./ConfigFieldChoice.svelte";
   import ConfigFieldsLoop from "./ConfigFieldsLoop.svelte";
 
   /////////////////////////////////////////////////
@@ -103,10 +103,6 @@
   };
 
   $: console.log("attributes refresh:", attributes);
-
-  let open = false;
-
-  const handleToggleOpen = () => (open = !open);
 </script>
 
 <div class="section">
@@ -116,36 +112,7 @@
         <div class="titre">{attribute.display}</div>
       {/if}
       {#if Object.keys(attribute.fieldsGroups).length > 1}
-        <div
-          class="select-wrapper select-network"
-          use:clickOutside={() => (open = false)}
-          on:click={handleToggleOpen}
-          on:keydown={handleToggleOpen}
-        >
-          <div class="select" class:open>
-            <div class="select-trigger">
-              <span>{attribute.default.value}</span>
-            </div>
-
-            <div class="custom-options">
-              <span
-                class="custom-option {'ipfs' == attribute.default.value && 'selected'}"
-                on:click={() => (attribute.default.value = "ipfs")}
-                on:keydown={() => (attribute.default.value = "ipfs")}
-              >
-                IPFS
-              </span>
-
-              <span
-                class="custom-option {'swarm' == attribute.default.value && 'selected'}"
-                on:click={() => (attribute.default.value = "swarm")}
-                on:keydown={() => (attribute.default.value = "swarm")}
-              >
-                Swarm
-              </span>
-            </div>
-          </div>
-        </div>
+        <ConfigFieldChoice bind:attributes {namespace} />
       {/if}
       <ConfigFieldsLoop
         bind:attributesObject