|
| 1 | +import { uniqueState } from './uniqueState.svelte.js'; |
| 2 | + |
| 3 | +export type SelectionProps<T> = { |
| 4 | + /** Initial values */ |
| 5 | + initial?: T[]; |
| 6 | + |
| 7 | + /** All values to select when `toggleAll()` is called */ |
| 8 | + all?: T[]; |
| 9 | + |
| 10 | + /** Only allow 1 selected value */ |
| 11 | + single?: boolean; |
| 12 | + |
| 13 | + /** Maximum number of values that can be selected */ |
| 14 | + max?: number; |
| 15 | +}; |
| 16 | + |
| 17 | +export type SelectionState<T> = ReturnType<typeof selectionState<T>>; |
| 18 | + |
| 19 | +export function selectionState<T>(props: SelectionProps<T> = {}) { |
| 20 | + const selected = uniqueState(props.initial ?? []); |
| 21 | + const selectedArr = $derived([...selected.current.values()]); |
| 22 | + let all = $state(props.all ?? []); |
| 23 | + const single = props.single ?? false; |
| 24 | + const max = props.max; |
| 25 | + |
| 26 | + function isSelected(value: T) { |
| 27 | + return selected.current.has(value); |
| 28 | + } |
| 29 | + |
| 30 | + function isEmpty() { |
| 31 | + return selectedArr.length === 0; |
| 32 | + } |
| 33 | + |
| 34 | + function isAllSelected() { |
| 35 | + return all.every((v) => selected.current.has(v)); |
| 36 | + } |
| 37 | + |
| 38 | + function isAnySelected() { |
| 39 | + return all.some((v) => selected.current.has(v)); |
| 40 | + } |
| 41 | + |
| 42 | + function isMaxSelected() { |
| 43 | + return max != null ? selected.current.size >= max : false; |
| 44 | + } |
| 45 | + |
| 46 | + function isDisabled(value: T) { |
| 47 | + return !isSelected(value) && isMaxSelected(); |
| 48 | + } |
| 49 | + |
| 50 | + function clear() { |
| 51 | + selected.reset(); |
| 52 | + } |
| 53 | + |
| 54 | + function reset() { |
| 55 | + selected.reset(); |
| 56 | + selected.addEach(props.initial ?? []); |
| 57 | + } |
| 58 | + |
| 59 | + function setSelected(values: T[]) { |
| 60 | + if (max == null || values.length < max) { |
| 61 | + selected.reset(); |
| 62 | + selected.addEach(values); |
| 63 | + } |
| 64 | + } |
| 65 | + |
| 66 | + function toggleSelected(value: T) { |
| 67 | + if (selected.current.has(value)) { |
| 68 | + // Remove |
| 69 | + const prevSelected = [...selected.current]; |
| 70 | + selected.reset(); |
| 71 | + selected.addEach(prevSelected.filter((v) => v != value)); |
| 72 | + } else if (single) { |
| 73 | + // Replace |
| 74 | + selected.reset(); |
| 75 | + selected.add(value); |
| 76 | + } else { |
| 77 | + // Add |
| 78 | + if (max == null || selected.current.size < max) { |
| 79 | + return selected.add(value); |
| 80 | + } |
| 81 | + } |
| 82 | + } |
| 83 | + |
| 84 | + function toggleAll() { |
| 85 | + let values: T[]; |
| 86 | + if (isAllSelected()) { |
| 87 | + // Deselect all (within current `all`, for example page/filtered result) |
| 88 | + values = [...selected.current].filter((v) => !all.includes(v)); |
| 89 | + } else { |
| 90 | + // Select all (`new Set()` will dedupe) |
| 91 | + values = [...selected.current, ...all]; |
| 92 | + } |
| 93 | + selected.reset(); |
| 94 | + selected.addEach(values); |
| 95 | + } |
| 96 | + |
| 97 | + return { |
| 98 | + get selected() { |
| 99 | + return single ? (selectedArr[0] ?? null) : selectedArr; |
| 100 | + }, |
| 101 | + setSelected, |
| 102 | + toggleSelected, |
| 103 | + isSelected, |
| 104 | + isDisabled, |
| 105 | + toggleAll, |
| 106 | + isAllSelected, |
| 107 | + isAnySelected, |
| 108 | + isMaxSelected, |
| 109 | + isEmpty, |
| 110 | + clear, |
| 111 | + reset, |
| 112 | + get all() { |
| 113 | + return all; |
| 114 | + }, |
| 115 | + }; |
| 116 | +} |
0 commit comments