app/components/admin/toast.tsx

Functions

Imports

It imports no other module of this repo. Imported by app/components/admin/copy-button.tsx, app/components/admin/media-bulk-bar.tsx, app/components/admin/media-inspector.tsx, app/components/admin/media-palette.tsx, app/routes/admin.media._index.tsx.

Source

1import { useEffect, useState } from "react";
2import { useMessage } from "capsomer/react/message";
3
4const TOAST_EVENT = "media-toast";
5
6// A custom event, not context: a provider would put the toast in the server render, where it has nothing to say.
7export function toast(message: string) {
8  if (typeof window === "undefined") return;
9  window.dispatchEvent(new CustomEvent(TOAST_EVENT, { detail: message }));
10}
11
12/**
13 * The page's copy of a toast is Capsomer's message region, which is in the document from the start and
14 * says a result without taking focus. The inspector carries its own, `inDialog`, because the page's
15 * region is inert and hidden behind the modal; the page's stays quiet while the inspector is open.
16 */
17export function MediaToast({ inDialog = false }: { inDialog?: boolean }) {
18  const { say } = useMessage();
19  const [message, setMessage] = useState("");
20
21  useEffect(() => {
22    let timer = 0;
23    const onToast = (event: Event) => {
24      const open = document.querySelector("dialog[data-media-inspector]:modal") !== null;
25      if (!inDialog && open) return;
26      const detail = (event as CustomEvent<string>).detail;
27      if (!inDialog) {
28        say(detail, { clears: true });
29        return;
30      }
31      setMessage(detail);
32      window.clearTimeout(timer);
33      // Long enough to read a filename; a long address gets longer.
34      timer = window.setTimeout(() => setMessage(""), Math.max(2600, detail.length * 60));
35    };
36    window.addEventListener(TOAST_EVENT, onToast);
37    return () => {
38      window.removeEventListener(TOAST_EVENT, onToast);
39      window.clearTimeout(timer);
40    };
41  }, [inDialog, say]);
42
43  // Only the inspector draws one: the page's message goes to the region.
44  return inDialog ? (
45    <p className="cap-muted" role="status" aria-live="polite">
46      {message}
47    </p>
48  ) : null;
49}