1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
import { ComponentProps, createEffect, createSignal, type JSX } from "solid-js"
import { VirtualizerHandle, VList } from "virtua/solid"
import { createList } from "solid-list"
import { createStore } from "solid-js/store"
export interface ListProps<T> {
data: T[]
children: (x: T) => JSX.Element
key: (x: T) => string
current?: T
onSelect?: (value: T | undefined) => void
onHover?: (value: T | undefined) => void
class?: ComponentProps<"div">["class"]
}
export function List<T>(props: ListProps<T>) {
const [virtualizer, setVirtualizer] = createSignal<VirtualizerHandle | undefined>(undefined)
const [store, setStore] = createStore({
mouseActive: false,
})
const list = createList({
items: () => props.data.map(props.key),
initialActive: props.current ? props.key(props.current) : undefined,
loop: true,
})
createEffect(() => {
if (props.current) list.setActive(props.key(props.current))
})
// const resetSelection = () => {
// if (props.data.length === 0) return
// list.setActive(props.key(props.data[0]))
// }
const handleSelect = (item: T) => {
props.onSelect?.(item)
list.setActive(props.key(item))
}
const handleKey = (e: KeyboardEvent) => {
setStore("mouseActive", false)
if (e.key === "Enter") {
e.preventDefault()
const selected = props.data.find((x) => props.key(x) === list.active())
if (selected) handleSelect(selected)
} else {
list.onKeyDown(e)
}
}
createEffect(() => {
if (store.mouseActive || props.data.length === 0) return
const index = props.data.findIndex((x) => props.key(x) === list.active())
props.onHover?.(props.data[index])
if (index === 0) {
virtualizer()?.scrollTo(0)
return
}
// virtualizer()?.scrollTo(list.active())
// const element = virtualizer()?.querySelector(`[data-key="${list.active()}"]`)
// element?.scrollIntoView({ block: "nearest", behavior: "smooth" })
})
return (
<VList data-component="list" ref={setVirtualizer} data={props.data} onKeyDown={handleKey} class={props.class}>
{(item) => (
<button
data-slot="item"
data-key={props.key(item)}
data-active={props.key(item) === list.active()}
onClick={() => handleSelect(item)}
onMouseMove={() => {
// e.currentTarget.focus()
setStore("mouseActive", true)
// list.setActive(props.key(item))
}}
>
{props.children(item)}
</button>
)}
</VList>
)
}
|
