Skip to content

Commit

Permalink
Make the Select component generic
Browse files Browse the repository at this point in the history
Auto-detect the type of the value the select options can have
  • Loading branch information
estib-vega committed Sep 24, 2024
1 parent 3bed869 commit 5b0b05b
Showing 1 changed file with 10 additions and 9 deletions.
19 changes: 10 additions & 9 deletions apps/desktop/src/lib/select/Select.svelte
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 }]>;
children?: Snippet;
onselect?: (value: string) => void;
onselect?: (value: T) => void;
}
const {
Expand Down Expand Up @@ -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);
}
}
Expand Down

0 comments on commit 5b0b05b

Please # to comment.