components/command-menu/examples.tsx

Functions

Imports

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

Source

1// Mounts the React command menu's live-search specimen: the catalog is searched as the person
2// types, through a fake source that answers after 300 ms. Titles are samples.
3import { StrictMode, useState } from "react";
4import { createRoot } from "react-dom/client";
5import { CommandMenu, type Command } from "./command-menu.react.tsx";
6
7const CATALOG = ["The Left Hand of Darkness", "The Dispossessed", "A Wizard of Earthsea", "Middlemarch", "The Remains of the Day", "Piranesi"];
8
9function Live() {
10  const [open, setOpen] = useState(true);
11  const [said, setSaid] = useState("");
12  const ran = (label: string) => () => setSaid(`Ran: ${label}`);
13  const commands: Command[] = [
14    { id: "go-library", label: "Your library", group: "Go to", run: ran("Your library") },
15    { id: "go-diary", label: "Diary", group: "Go to", run: ran("Diary") },
16  ];
17  const search = (q: string, signal: AbortSignal) =>
18    new Promise<Command[]>((resolve, reject) => {
19      const t = setTimeout(() => {
20        const hits = CATALOG.filter((b) => b.toLowerCase().includes(q.toLowerCase()));
21        resolve([{ id: "search-all", label: `Search all results for “${q}”`, group: "Search", run: ran(`Search ${q}`) }, ...hits.map((b) => ({ id: `book-${b}`, label: b, group: "Books", run: ran(b) }))]);
22      }, 300);
23      signal.addEventListener("abort", () => (clearTimeout(t), reject(signal.reason)));
24    });
25  return (
26    <>
27      <main className="specimen-page" tabIndex={-1}>
28        <h1>Home</h1>
29        <p>
30          <button type="button" className="cap-btn" onClick={() => setOpen(true)}>
31            Search
32          </button>
33        </p>
34        <p role="status" data-specimen-part="said">
35          {said}
36        </p>
37      </main>
38      <CommandMenu open={open} onOpenChange={setOpen} commands={commands} search={search} label="Search books" placeholder="Search books and pages" bindKeys={false} />
39    </>
40  );
41}
42
43for (const el of Array.from(document.querySelectorAll<HTMLElement>("[data-mount]"))) {
44  if (el.dataset.mount === "live") createRoot(el).render(<StrictMode><Live /></StrictMode>);
45}