path: root/frontend/src/lib/selection/Selectable.svelte

<script lang="ts">
	import type { Snippet } from 'svelte';
	import { getSelectionContext } from './Selection.svelte';

	interface Props {
		id: number;
		index: number;
		edit?: ((id: number) => void) | undefined;
		children?: Snippet<[{ onclick: (event: MouseEvent) => void; selected: boolean }]>;
	}

	let { id, index, edit = undefined, children }: Props = $props();
	let selection = getSelectionContext();

	const onclick = (event: MouseEvent) => {
		if (selection.active) {
			selection.update(index, event.shiftKey);
			event.preventDefault();
		} else if (edit) {
			edit(id);
			event.preventDefault();
		}
	};
</script>

{@render children?.({ onclick, selected: selection.contains(id) })}