components/sortable-list/examples.tsx

Functions

Imports

It imports components/sortable-list/sortable-list.react.tsx. No module of this repo imports it.

Source

1// Mounts the React sortable list specimens: a corkboard of cards, and rows inside a form.
2// The page holds the items and saves each new order, as an app would.
3import { StrictMode, useState, type JSX } from "react";
4import { createRoot } from "react-dom/client";
5import { SortableList } from "./sortable-list.react.tsx";
6
7interface Card {
8  id: string;
9  title: string;
10  summary: string;
11  pov: string;
12}
13
14const CARDS: Card[] = [
15  { id: "rain", title: "Rain at Glen Rose", summary: "The forecast turns, and Ines moves the casts above the flood line.", pov: "Ines" },
16  { id: "second", title: "The second set", summary: "Wade finds a trackway nobody has mapped, crossing the first.", pov: "Wade" },
17  { id: "line", title: "The flood line", summary: "The river takes the lower ledge; the notebook goes with it.", pov: "Ines" },
18  { id: "after", title: "After the water", summary: "Mud, a missing cast, and a phone call from the museum.", pov: "Wade" },
19];
20
21function Corkboard() {
22  const [cards, setCards] = useState(CARDS);
23  return (
24    <>
25      <SortableList
26        aria-label="Scenes in 02 Flood stage"
27        layout="cards"
28        items={cards}
29        getId={(c) => c.id}
30        getLabel={(c) => c.title}
31        onReorder={(order) => setCards(order.map((id) => cards.find((c) => c.id === id)!))}
32        renderItem={(c) => (
33          <>
34            <span className="cap-sortable-label">{c.title}</span>
35            <span className="cap-sortable-detail">{c.pov}</span>
36            <p className="cap-sortable-detail">{c.summary}</p>
37          </>
38        )}
39      />
40      <output className="sortable-sample-out" id="cards-out">
41        Order: {cards.map((c) => c.id).join(", ")}.
42      </output>
43    </>
44  );
45}
46
47const POSTS = [
48  { id: "trackway", title: "Reading a trackway" },
49  { id: "river", title: "What the river keeps" },
50  { id: "casts", title: "Casts, molds and mistakes" },
51];
52
53function Rows() {
54  const [posts, setPosts] = useState(POSTS);
55  return (
56    <form className="sortable-sample-form" method="post" action="#reorder">
57      <SortableList
58        aria-label="Posts in the series"
59        name="order"
60        items={posts}
61        getId={(p) => p.id}
62        getLabel={(p) => p.title}
63        onReorder={(order) => setPosts(order.map((id) => posts.find((p) => p.id === id)!))}
64        renderItem={(p) => <span className="cap-sortable-label">{p.title}</span>}
65      />
66      <output className="sortable-sample-out" id="rows-out">
67        Order: {posts.map((p) => p.id).join(", ")}.
68      </output>
69    </form>
70  );
71}
72
73const mounts: Record<string, () => JSX.Element> = { cards: Corkboard, rows: Rows };
74for (const el of document.querySelectorAll<HTMLElement>("[data-mount]")) {
75  const C = mounts[el.dataset.mount ?? ""];
76  if (C)
77    createRoot(el).render(
78      <StrictMode>
79        <C />
80      </StrictMode>,
81    );
82}