components/menu/examples.tsx

Functions

Imports

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

Source

1// Mounts the menu specimens. Every element with data-mount="<state>" gets that state. The
2// open states sit in <template data-specimen> frames of their own.
3import { StrictMode, useEffect, useRef, useState, type ReactNode } from "react";
4import { createRoot } from "react-dom/client";
5import { Menu, type MenuEntry } from "./menu.react.tsx";
6
7// A menu whose items write what was chosen beside it, so a test can read it.
8function Logged({ entries, defaultOpen, label = "Actions" }: { entries: (log: (s: string) => void) => MenuEntry[]; defaultOpen?: boolean; label?: string }) {
9  const [last, setLast] = useState("");
10  return (
11    <>
12      <Menu label={label} items={entries(setLast)} defaultOpen={defaultOpen} />
13      <p className="cap-muted" data-chosen={last}>
14        Last chosen: {last || "nothing"}
15      </p>
16    </>
17  );
18}
19
20const plain = (log: (s: string) => void): MenuEntry[] => [
21  { label: "Open site", shortcut: "O", onSelect: () => log("Open site") },
22  { label: "Copy address", onSelect: () => log("Copy address") },
23  "separator",
24  { label: "Run checks now", shortcut: "Shift+R", onSelect: () => log("Run checks now") },
25  { label: "Pause checks", onSelect: () => log("Pause checks") },
26];
27
28// Every feature at once, in the order an app might write it: the danger item comes first
29// here and the menu moves it to the end.
30const full = (log: (s: string) => void): MenuEntry[] => [
31  { label: "Delete site", danger: true, onSelect: () => log("Delete site") },
32  { label: "Open site", shortcut: "O", onSelect: () => log("Open site") },
33  { label: "Duplicate settings", onSelect: () => log("Duplicate settings") },
34  "separator",
35  { label: "Archive", disabled: true, reason: "Not while a deploy runs. Try again when it ends.", onSelect: () => log("Archive") },
36  { label: "Run checks now", shortcut: "Shift+R", onSelect: () => log("Run checks now") },
37];
38
39const disabled = (log: (s: string) => void): MenuEntry[] => [
40  { label: "Open site", onSelect: () => log("Open site") },
41  { label: "Archive", disabled: true, reason: "Not while a deploy runs. Try again when it ends.", onSelect: () => log("Archive") },
42  { label: "Run checks now", onSelect: () => log("Run checks now") },
43];
44
45const danger = (log: (s: string) => void): MenuEntry[] => [
46  { label: "Open site", onSelect: () => log("Open site") },
47  { label: "Remove from the watcher", danger: true, onSelect: () => log("Remove from the watcher") },
48  { label: "Copy address", onSelect: () => log("Copy address") },
49  { label: "Delete site", danger: true, onSelect: () => log("Delete site") },
50];
51
52// Everything the menu can hold: an icon, a heading over a group, checkbox items, a radio
53// group with its heading, a submenu, a shortcut and a danger item.
54const Dot = () => (
55  <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
56    <circle cx="8" cy="8" r="3" fill="currentColor" />
57  </svg>
58);
59const rich = (log: (s: string) => void): MenuEntry[] => [
60  { type: "group", label: "Site", items: [{ label: "Open site", icon: <Dot />, shortcut: "O", onSelect: () => log("Open site") }, { label: "Copy address", onSelect: () => log("Copy address") }] },
61  "separator",
62  { type: "checkbox", label: "Check every minute", defaultChecked: true, onCheckedChange: (on) => log(`Check every minute ${on ? "on" : "off"}`) },
63  { type: "checkbox", label: "Email on failure", onCheckedChange: (on) => log(`Email on failure ${on ? "on" : "off"}`) },
64  "separator",
65  { type: "radio-group", label: "Region", defaultValue: "pdx", onValueChange: (v) => log(`Region ${v}`), items: [{ value: "fra", label: "Frankfurt" }, { value: "pdx", label: "Oregon" }, { value: "sin", label: "Singapore", disabled: true }] },
66  "separator",
67  { type: "submenu", label: "Move to", items: [{ label: "Live sites", onSelect: () => log("Move to Live sites") }, { label: "Previews", onSelect: () => log("Move to Previews") }] },
68  { label: "Delete site", danger: true, onSelect: () => log("Delete site") },
69];
70
71// Highlights the first item the way a keyboard does, for the static picture. The spec
72// checks the real keys.
73function Highlighted() {
74  const ref = useRef<HTMLDivElement>(null);
75  useEffect(() => {
76    const frame = requestAnimationFrame(() => {
77      const popup = document.querySelector<HTMLElement>(".cap-menu");
78      popup?.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", code: "ArrowDown", bubbles: true }));
79    });
80    return () => cancelAnimationFrame(frame);
81  }, []);
82  return (
83    <div ref={ref}>
84      <Logged entries={plain} defaultOpen />
85    </div>
86  );
87}
88
89const SPECIMENS: Record<string, () => ReactNode> = {
90  closed: () => <Logged entries={full} label="Actions for foxhound.app" />,
91  open: () => <Logged entries={plain} defaultOpen />,
92  highlighted: () => <Highlighted />,
93  disabled: () => <Logged entries={disabled} defaultOpen />,
94  danger: () => <Logged entries={danger} defaultOpen />,
95  rich: () => <Logged entries={rich} defaultOpen />,
96  comfortable: () => <Logged entries={plain} defaultOpen />,
97};
98
99// The popup is portalled to the body, so the comfortable specimen sets the density there.
100if (new URLSearchParams(location.search).get("only") === "comfortable") document.documentElement.dataset.density = "comfortable";
101
102for (const el of Array.from(document.querySelectorAll<HTMLElement>("[data-mount]"))) {
103  const render = SPECIMENS[el.dataset.mount ?? ""];
104  if (render) createRoot(el).render(<StrictMode>{render()}</StrictMode>);
105}