components/detail-panel/detail-panel.react.tsx

Functions

Imports

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

Source

1import { useCallback, useId, useState, type ReactNode } from "react";
2import { Dialog, DialogBody, DialogHeader, DialogTitle } from "../dialog/dialog.react.tsx";
3
4export interface DetailPanelProps {
5  open: boolean;
6  // Called once the panel has closed, by Esc, Close, the backdrop or Back.
7  onClose: () => void;
8  // A stable identifier for the address (#detail-<id>) and the element ids.
9  id: string;
10  // The title in plain words: "Push the capsomer branch and open a pull request".
11  title: string;
12  // The record's identifier, shown under the title: "job_7f3a92c1d4e0".
13  identifier?: string;
14  // A small label above the title: "Job, capsid".
15  kind?: string;
16  // A status pill beside the title.
17  badge?: ReactNode;
18  // Push "#detail-<id>" so Back closes the panel.
19  history?: boolean;
20  closeLabel?: string;
21  // The sections, in order: what to do first, the controls, the record, the source.
22  children: ReactNode;
23}
24
25export function DetailPanel({ open, onClose, id, title, identifier, kind, badge, history = false, closeLabel = "Close", children }: DetailPanelProps) {
26  // The panel's address is "#detail-<id>"; the shared dialog reads the prefix from the attribute.
27  const mark = useCallback((el: HTMLDialogElement | null) => {
28    if (el && el.hasAttribute("data-cap-history")) el.dataset.capHistory = "detail";
29  }, []);
30  return (
31    <Dialog ref={mark} open={open} onOpenChange={() => onClose()} placement="right" size="md" className="cap-detail" id={id} history={history} historyId={id} closeLabel={closeLabel}>
32      <DialogHeader divider>
33        <div className="cap-detail-heading">
34          {kind ? <p className="cap-detail-kind">{kind}</p> : null}
35          <div className="cap-detail-titlerow">
36            <DialogTitle>{title}</DialogTitle>
37            {badge}
38          </div>
39          {identifier ? <p className="cap-detail-id">{identifier}</p> : null}
40        </div>
41      </DialogHeader>
42      <DialogBody className="cap-detail-body">{children}</DialogBody>
43    </Dialog>
44  );
45}
46
47export interface DetailSectionProps {
48  title: string;
49  children: ReactNode;
50}
51
52export function DetailSection({ title, children }: DetailSectionProps) {
53  const id = useId();
54  return (
55    <section className="cap-detail-section" aria-labelledby={id}>
56      <h3 className="cap-detail-section-title" id={id}>
57        {title}
58      </h3>
59      {children}
60    </section>
61  );
62}
63
64// A command to run, in a sunken mono block, with a Copy button and a line that says
65// whether it was copied.
66export function DetailCommand({ text, copyLabel = "Copy command", what = "Command" }: { text: string; copyLabel?: string; what?: string }) {
67  const id = useId();
68  const [said, setSaid] = useState("");
69  const copy = async () => {
70    try {
71      await navigator.clipboard.writeText(text);
72      setSaid(`${what} copied.`);
73    } catch {
74      const el = document.getElementById(id);
75      if (el) {
76        const range = document.createRange();
77        range.selectNodeContents(el);
78        window.getSelection()?.removeAllRanges();
79        window.getSelection()?.addRange(range);
80      }
81      setSaid(`Could not reach the clipboard. ${what} is selected: copy it with Ctrl C or ⌘ C.`);
82    }
83  };
84  return (
85    <>
86      <pre className="cap-detail-cmd" id={id}>
87        {text}
88      </pre>
89      <div className="cap-detail-controls">
90        <button type="button" className="cap-btn" onClick={() => void copy()}>
91          {copyLabel}
92        </button>
93        <span className="cap-detail-copied" role="status">
94          {said}
95        </span>
96      </div>
97    </>
98  );
99}