solid-primitives/packages/list-state/dev/index.tsx at b0304c1776c7850f7ea6fce48b2f8928f3a00efb · solidjs-community/solid-primitives · GitHub

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
84
85
86
87
88
89
import { createListState, createMultiSelectListState } from "../src/index.js";

const items = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];

export function SingleSelectDemo() {
  const { active, onKeyDown } = createListState({
    items: items,
    initialActive: items[0],
  });

  return (
    <div>
      <h2>Single-Select List</h2>
      <p>Active: {active()}</p>
      <ul
        role="listbox"
        onKeyDown={onKeyDown}
        style={{
          border: "1px solid #ccc",
          padding: "1rem",
          "list-style": "none",
        }}
      >
        {items.map((item) => (
          <li
            class={{
              active: active() === item,
            }}
            style={{
              padding: "0.5rem",
              background: active() === item ? "#0066cc" : "transparent",
              color: active() === item ? "white" : "black",
              cursor: "pointer",
            }}
          >
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
}

export function MultiSelectDemo() {
  const { cursor, active, selected, setCursorActive, toggleSelected, onKeyDown } =
    createMultiSelectListState({
      items: items,
      initialCursor: items[0],
    });

  return (
    <div>
      <h2>Multi-Select List</h2>
      <p>Cursor: {cursor()}</p>
      <p>Selected: {selected().join(", ") || "None"}</p>
      <ul
        role="listbox"
        onKeyDown={onKeyDown}
        style={{
          border: "1px solid #ccc",
          padding: "1rem",
          "list-style": "none",
        }}
      >
        {items.map((item) => (
          <li
            class={{
              cursor: cursor() === item,
              selected: selected().includes(item),
            }}
            onClick={() => setCursorActive(item)}
            onDoubleClick={() => toggleSelected(item)}
            style={{
              padding: "0.5rem",
              background: cursor() === item ? "#0066cc" : selected().includes(item) ? "#cce5ff" : "transparent",
              color: cursor() === item ? "white" : "black",
              cursor: "pointer",
            }}
          >
            {item}
          </li>
        ))}
      </ul>
      <p style={{ "font-size": "0.85em", color: "#666" }}>
        Double-click to toggle selection
      </p>
    </div>
  );
}