From 0f7b9f4d9c303e94e025c9461f8b81602ce1ea37 Mon Sep 17 00:00:00 2001
From: estib <stron@me.com>
Date: Tue, 24 Sep 2024 15:43:46 +0200
Subject: [PATCH] Make the Select component generic

Auto-detect the type of the value the select options can have
---
 apps/desktop/src/lib/select/Select.svelte | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/apps/desktop/src/lib/select/Select.svelte b/apps/desktop/src/lib/select/Select.svelte
index 31919955fd..d37d315d8c 100644
--- a/apps/desktop/src/lib/select/Select.svelte
+++ b/apps/desktop/src/lib/select/Select.svelte
@@ -1,12 +1,12 @@
 <script lang="ts" module>
-	export type SelectItem = {
+	export type SelectItem<T extends string = string> = {
 		label: string;
-		value: string;
+		value: T;
 		selectable?: boolean;
 	};
 </script>
 
-<script lang="ts">
+<script lang="ts" generics="T extends string">
 	import OptionsGroup from './OptionsGroup.svelte';
 	import SearchItem from './SearchItem.svelte';
 	import TextBox from '../shared/TextBox.svelte';
@@ -21,14 +21,14 @@
 		disabled?: boolean;
 		loading?: boolean;
 		wide?: boolean;
-		options: SelectItem[];
-		value?: any;
+		options: SelectItem<T>[];
+		value?: T;
 		placeholder?: string;
 		maxHeight?: number;
 		searchable?: boolean;
-		itemSnippet: Snippet<[{ item: any; highlighted: boolean }]>;
+		itemSnippet: Snippet<[{ item: SelectItem<T>; highlighted: boolean }]>;
 		children?: Snippet;
-		onselect?: (value: string) => void;
+		onselect?: (value: T) => void;
 	}
 
 	const {
@@ -92,15 +92,16 @@
 		else openList();
 	}
 
-	function handleSelect(item: { label: string; value: string }) {
+	function handleSelect(item: SelectItem<T>) {
 		const value = item.value;
 		onselect?.(value);
 		closeList();
 	}
 
 	function handleEnter() {
-		if (highlightedIndex !== undefined && filteredOptions[highlightedIndex]) {
-			handleSelect(filteredOptions[highlightedIndex] as SelectItem);
+		const option = highlightedIndex !== undefined ? filteredOptions[highlightedIndex] : undefined;
+		if (option) {
+			handleSelect(option);
 		}
 	}