app/components/admin/confirm-dialog.tsx

Functions

Imports

It imports app/lib/destructive.mjs. Imported by app/components/admin/media-confirm-dialogs.tsx, app/components/admin/media-trash-controls.tsx, app/components/admin/posts-confirm-dialogs.tsx, app/routes/admin.mentions.tsx, app/routes/admin.posts.$slug.edit.tsx.

Source

1import { useEffect, useId, useRef, useState } from "react";
2import { Form, Link, useNavigate } from "react-router";
3
4import { CONFIRM_FIELD } from "~/lib/destructive.mjs";
5
6// Capsomer's dialog markup and look, on this component's own behaviour: Capsomer's ConfirmDialog is driven
7// from script, and this one is opened by the server's answer, so the second step exists without script too.
8// `data-inline`, not `open`: putting `open` in the JSX makes React and showModal() fight over it.
9// The intent is a hidden field because a disabled submitter contributes no name and no value.
10export function ConfirmDialog({
11  title,
12  body,
13  stake,
14  requireTyped,
15  confirmLabel,
16  /** Where Cancel goes. Carry the current query so filters survive. */
17  cancelHref,
18  /** Cancel for a dialog opened from client state rather than the URL, which has nowhere to go. */
19  onCancel,
20  children,
21}: {
22  title: string;
23  body: React.ReactNode;
24  stake?: string[];
25  /** Absent for a reversible action: the dialog then confirms without a typed value. */
26  requireTyped?: string;
27  confirmLabel: string;
28  children: React.ReactNode;
29} & ({ cancelHref: string; onCancel?: never } | { cancelHref?: never; onCancel: () => void })) {
30  const ref = useRef<HTMLDialogElement>(null);
31  const fieldRef = useRef<HTMLInputElement>(null);
32  const [typed, setTyped] = useState("");
33  const [hydrated, setHydrated] = useState(false);
34  const titleId = useId();
35  const formId = useId();
36  const navigate = useNavigate();
37
38  useEffect(() => {
39    setHydrated(true);
40    // Read before showModal() moves focus: the control that opened it, or nothing on a page load.
41    const active = document.activeElement;
42    const origin = active instanceof HTMLElement && active !== document.body ? active : null;
43    const el = ref.current;
44    if (el && !el.open) el.showModal();
45    // autoFocus is not enough: React focuses on mount, and the dialog's focus rules run at showModal().
46    fieldRef.current?.focus();
47    // Unmounting drops focus on the body. Deferred, so the page Cancel returns to has rendered.
48    return () => {
49      window.setTimeout(() => {
50        if (document.activeElement && document.activeElement !== document.body) return;
51        // In order: the opener; its menu's button, when the opener was an item in a row menu whose
52        // popover has since closed and so cannot take focus; the page.
53        const panel = origin?.closest<HTMLElement>("[popover]");
54        const candidates = [
55          origin,
56          panel?.id
57            ? document.querySelector<HTMLElement>(`[popovertarget="${CSS.escape(panel.id)}"]`)
58            : null,
59          document.getElementById("main"),
60        ];
61        for (const back of candidates) {
62          if (!back?.isConnected) continue;
63          back.focus({ preventScroll: true });
64          if (document.activeElement === back) return;
65        }
66      }, 0);
67    };
68  }, []);
69
70  const satisfied = requireTyped === undefined || typed.trim() === requireTyped;
71  // Cancel keeps the scroll position: the page behind the dialog is where the reader still is.
72  const cancel = async () => {
73    if (cancelHref === undefined) onCancel?.();
74    else await navigate(cancelHref, { preventScrollReset: true });
75  };
76
77  return (
78    <dialog
79      ref={ref}
80      className="cap-dialog"
81      data-placement="center"
82      data-size="md"
83      role="alertdialog"
84      data-inline={hydrated ? undefined : ""}
85      aria-labelledby={titleId}
86      /* Escape leaves the way Cancel does: a natively closed dialog would leave the page still asking. */
87      onCancel={async (event) => {
88        event.preventDefault();
89        await cancel();
90      }}
91    >
92      {/* The form holds the caller's hidden fields; the typed field and the submit button join it by
93          `form`, so the dialog's header, body and footer stay its direct children, as Capsomer lays them out. */}
94      <Form method="post" id={formId}>
95        {children}
96      </Form>
97      <div className="cap-dialog-header">
98        <h2 className="cap-dialog-title" id={titleId}>
99          {title}
100        </h2>
101      </div>
102      <div className="cap-dialog-body">
103        {body}
104        {stake && stake.length > 0 ? (
105          <ul>
106            {stake.map((item) => (
107              <li key={item}>
108                <code>{item}</code>
109              </li>
110            ))}
111          </ul>
112        ) : null}
113        {requireTyped === undefined ? null : (
114          <div className="cap-confirm-typed">
115            <label htmlFor={`${formId}-typed`}>
116              Type <b>{requireTyped}</b> to confirm
117            </label>
118            {/* From the constant the action also reads, so a rename cannot split the wire name. */}
119            <input
120              id={`${formId}-typed`}
121              ref={fieldRef}
122              className="cap-input"
123              form={formId}
124              type="text"
125              name={CONFIRM_FIELD}
126              value={typed}
127              onChange={(event) => setTyped(event.target.value)}
128              inputMode="numeric"
129              autoComplete="off"
130              spellCheck={false}
131              required
132            />
133          </div>
134        )}
135      </div>
136      <div className="cap-dialog-footer" data-align="between">
137        {cancelHref === undefined ? (
138          <button type="button" className="cap-btn" onClick={onCancel}>
139            Cancel
140          </button>
141        ) : (
142          <Link to={cancelHref} preventScrollReset className="cap-btn">
143            Cancel
144          </Link>
145        )}
146        <button
147          type="submit"
148          form={formId}
149          className="cap-btn"
150          data-variant="danger"
151          disabled={hydrated && !satisfied}
152        >
153          {confirmLabel}
154        </button>
155      </div>
156    </dialog>
157  );
158}