From 1f0a7d1e389dcb96c94cde88fb4d7b1a3018c6b9 Mon Sep 17 00:00:00 2001 From: sstefdev Date: Tue, 26 Nov 2024 10:34:36 +0100 Subject: [PATCH 1/6] feat: create searchable dropdown --- .../src/lib/invoice/form.svelte | 50 ++++----- shared/components/searchable-drodpown.svelte | 104 ++++++++++++++++++ 2 files changed, 126 insertions(+), 28 deletions(-) create mode 100644 shared/components/searchable-drodpown.svelte diff --git a/packages/create-invoice-form/src/lib/invoice/form.svelte b/packages/create-invoice-form/src/lib/invoice/form.svelte index d0abf3b4..09fcbb67 100644 --- a/packages/create-invoice-form/src/lib/invoice/form.svelte +++ b/packages/create-invoice-form/src/lib/invoice/form.svelte @@ -5,6 +5,7 @@ import Input from "@requestnetwork/shared-components/input.svelte"; import Labels from "@requestnetwork/shared-components/labels.svelte"; import Accordion from "@requestnetwork/shared-components/accordion.svelte"; + import SearchableDropdown from "@requestnetwork/shared-components/searchable-dropdown.svelte"; // Icons import Trash from "@requestnetwork/shared-icons/trash.svelte"; @@ -411,34 +412,27 @@ }))} onchange={handleInvoiceCurrencyChange} /> - networkItem) - .map((networkItem) => { - return { - value: networkItem, - label: networkItem[0]?.toUpperCase() + networkItem?.slice(1), - }; - })} - onchange={handleNetworkChange} - /> - filterSettlementCurrencies(currency)) - .map((currency) => ({ - value: currency, - label: `${currency.symbol ?? "Unknown"} (${currency?.network ?? "Unknown"})`, - }))} - onchange={handleCurrencyChange} - /> +
+ + network} + onSelect={handleNetworkChange} + /> +
+ +
+ + currency.symbol} + getDisplayValue={(currency) => currency.symbol} + getSecondaryValue={(currency) => currency.name} + onSelect={handleCurrencyChange} + /> +
diff --git a/shared/components/searchable-drodpown.svelte b/shared/components/searchable-drodpown.svelte new file mode 100644 index 00000000..1a5a96e5 --- /dev/null +++ b/shared/components/searchable-drodpown.svelte @@ -0,0 +1,104 @@ + + + + +
+ (isOpen = true)} + /> + {#if isOpen} +
+ {#each filteredItems as item} +
{ + onSelect(item); + searchTerm = getValue(item); + isOpen = false; + }} + > + {getDisplayValue ? getDisplayValue(item) : getValue(item)} + {#if getSecondaryValue} + {getSecondaryValue(item)} + {/if} +
+ {/each} +
+ {/if} +
+ + From 53370a24975e1796a5ae5eafd130531be89ac4f9 Mon Sep 17 00:00:00 2001 From: sstefdev Date: Mon, 2 Dec 2024 15:37:56 +0100 Subject: [PATCH 2/6] feat: added icons to the dropdowns --- .../src/lib/invoice/form.svelte | 133 ++++++++------ shared/components/searchable-drodpown.svelte | 104 ----------- shared/components/searchable-dropdown.svelte | 166 ++++++++++++++++++ shared/icons/network/arbitrum.svelte | 26 +-- shared/icons/network/celo.svelte | 8 +- shared/icons/network/mantle.svelte | 8 +- shared/icons/network/matic.svelte | 8 +- shared/icons/network/network-icon.svelte | 5 +- shared/icons/network/optimism.svelte | 10 +- shared/icons/network/ronin.svelte | 8 +- shared/icons/network/zk-sync.svelte | 8 +- 11 files changed, 289 insertions(+), 195 deletions(-) delete mode 100644 shared/components/searchable-drodpown.svelte create mode 100644 shared/components/searchable-dropdown.svelte diff --git a/packages/create-invoice-form/src/lib/invoice/form.svelte b/packages/create-invoice-form/src/lib/invoice/form.svelte index 4fe51cff..28203094 100644 --- a/packages/create-invoice-form/src/lib/invoice/form.svelte +++ b/packages/create-invoice-form/src/lib/invoice/form.svelte @@ -410,60 +410,57 @@
- networkItem) - .map((networkItem) => ({ - value: networkItem, - label: networkItem[0]?.toUpperCase() + networkItem?.slice(1), - }))} - onchange={handleNetworkChange} - /> -
- + +
currency.symbol} - getDisplayValue={(currency) => currency.symbol} - getSecondaryValue={(currency) => - currency.network ? `(${currency.network})` : ""} + getValue={(currency) => currency.value.symbol} + getDisplayValue={(currency) => + `${currency.value.symbol} ${currency.value.network ? `(${currency.value.network})` : ""}`} + placeholder="Invoice currency" + items={defaultCurrencies + ?.filter((curr) => { + if (!curr) return false; + return ( + curr.type === Types.RequestLogic.CURRENCY.ISO4217 || + (curr.network && curr.network === network) + ); + }) + .map((currency) => ({ + value: currency, + label: `${currency?.symbol ?? "Unknown"} ${currency?.network ? `(${currency.network})` : ""}`, + type: "invoiceCurrency", + })) ?? []} onSelect={handleInvoiceCurrencyChange} /> -
-
- currency.symbol} - getDisplayValue={(currency) => currency.symbol} - getSecondaryValue={(currency) => currency.name} + items={networks + .filter((networkItem) => networkItem) + .map((networkItem) => { + return { + value: networkItem, + label: networkItem[0]?.toUpperCase() + networkItem?.slice(1), + type: "network", + }; + })} + placeholder="Payment chain" + getValue={(network) => network.value} + getDisplayValue={(network) => network.label} + onSelect={handleNetworkChange} + /> + ({ + value: currency, + type: "settlementCurrency", + }))} + placeholder="Settlement currency" + getValue={(currency) => currency.value.symbol} + getDisplayValue={(currency) => + `${currency.value.symbol} (${currency.value.network})`} onSelect={handleCurrencyChange} />
-
- - -
@@ -562,6 +559,23 @@
+
+ + +
+
-
- -
+
{ @@ -24,6 +26,54 @@ ); }) : items; + + function handleKeydown(event: KeyboardEvent) { + if (!isOpen) return; + + switch (event.key) { + case "ArrowDown": + event.preventDefault(); + selectedIndex = Math.min(selectedIndex + 1, filteredItems.length - 1); + scrollSelectedIntoView(); + break; + case "ArrowUp": + event.preventDefault(); + selectedIndex = Math.max(selectedIndex - 1, -1); + scrollSelectedIntoView(); + break; + case "Enter": + event.preventDefault(); + if (selectedIndex >= 0 && selectedIndex < filteredItems.length) { + selectItem(filteredItems[selectedIndex]); + } + break; + case "Escape": + event.preventDefault(); + isOpen = false; + selectedIndex = -1; + break; + } + } + + function scrollSelectedIntoView() { + if (dropdownElement && selectedIndex >= 0) { + const selectedElement = dropdownElement.children[ + selectedIndex + ] as HTMLElement; + if (selectedElement) { + selectedElement.scrollIntoView({ block: "nearest" }); + } + } + } + + function selectItem(item: any) { + onSelect(item.value); + searchTerm = getValue(item); + isOpen = false; + selectedIndex = -1; + } + + $: if (!isOpen) selectedIndex = -1; {#if isOpen && !disabled} @@ -37,6 +87,7 @@ {placeholder} bind:value={searchTerm} on:focus={() => !disabled && (isOpen = true)} + on:keydown={handleKeydown} {disabled} />
{#if isOpen && !disabled} -
- {#each filteredItems as item} +
+ {#each filteredItems as item, index}
{ - onSelect(item.value); - searchTerm = getValue(item); - isOpen = false; - }} + class:selected={index === selectedIndex} + on:click={() => selectItem(item)} + on:mouseenter={() => (selectedIndex = index)} > {#if item.type === "network"} @@ -163,4 +212,8 @@ pointer-events: none; z-index: 1; } + + .dropdown-item.selected { + background-color: #f0f0f0; + }