components/tree/examples.tsx

Functions

Imports

It imports components/tree/tree.react.tsx. No module of this repo imports it.

Source

1// Mounts the React tree specimen: a blog's series, which the page holds and saves.
2import { StrictMode, useState } from "react";
3import { createRoot } from "react-dom/client";
4import { Tree, type TreeNode } from "./tree.react.tsx";
5
6const SERIES: TreeNode[] = [
7  {
8    id: "field-notes",
9    label: "Field notes from the Paluxy",
10    children: [
11      { id: "fn-1", label: "Reading a trackway" },
12      { id: "fn-2", label: "What the river keeps" },
13      { id: "fn-3", label: "Casts, molds and mistakes" },
14    ],
15  },
16  {
17    id: "lab",
18    label: "Lab notebook",
19    children: [
20      { id: "lab-1", label: "Phage plaques at 37 degrees" },
21      { id: "lab-2", label: "When a control fails" },
22    ],
23  },
24  { id: "loose", label: "Loose posts", children: [] },
25];
26
27const flat = (nodes: TreeNode[]): string =>
28  nodes.map((n) => (n.children ? `${n.label}: ${n.children.map((c) => c.label).join(", ") || "nothing"}` : n.label)).join(". ");
29
30function Series() {
31  const [nodes, setNodes] = useState(SERIES);
32  const [chosen, setChosen] = useState<string[]>(["fn-2"]);
33  return (
34    <div className="tree-sample">
35      <Tree
36        aria-label="Series"
37        variant="surface"
38        nodes={nodes}
39        defaultExpanded={["field-notes", "lab"]}
40        selected={chosen}
41        onSelectedChange={setChosen}
42        onMove={(_, next) => setNodes(next)}
43        // A post stays inside a series: nothing moves to the top level.
44        canMove={(m) => m.to.parent !== null}
45      />
46      <output className="tree-sample-out" id="series-out">
47        {flat(nodes)}.
48      </output>
49    </div>
50  );
51}
52
53const el = document.querySelector('[data-mount="react"]');
54if (el)
55  createRoot(el).render(
56    <StrictMode>
57      <Series />
58    </StrictMode>,
59  );