app/components/admin/copy-button.tsx

Functions

Imports

It imports app/components/admin/live-notice.tsx, app/components/admin/toast.tsx, app/lib/clipboard.ts. Imported by app/components/admin/media-inspector-sections.tsx, app/components/admin/media-inspector.tsx, app/components/admin/media-tile.tsx, app/components/admin/preview-links.tsx, app/components/admin/settings-drawer.tsx.

Source

1import { useEffect, useRef, useState } from "react";
2
3import { LiveNotice } from "~/components/admin/live-notice";
4import { toast } from "~/components/admin/toast";
5import { copyText } from "~/lib/clipboard";
6
7// An icon, not the word: the word cost a third of the row and pushed the filename into truncation.
8export function CopyButton({
9  value,
10  label,
11  name,
12  showLabel,
13  tabIndex,
14}: {
15  value: string;
16  label: string;
17  name?: string;
18  showLabel?: boolean;
19  /** -1 on a grid tile that is not the grid's tab stop. */
20  tabIndex?: number;
21}) {
22  return (
23    <button
24      type="button"
25      className="cap-btn"
26      data-variant="quiet"
27      data-size="sm"
28      data-icon-only={showLabel ? undefined : ""}
29      data-cap-copy=""
30      title={value}
31      tabIndex={tabIndex}
32      onClick={(event) => {
33        const button = event.currentTarget;
34        copyText(value)
35          .then(() => {
36            button.dataset.copied = "yes";
37            // Announced too: the data attribute drives a ::after that assistive technology cannot see.
38            toast(`Copied ${value}`);
39            window.setTimeout(() => {
40              delete button.dataset.copied;
41            }, 1500);
42          })
43          .catch(() => {
44            button.dataset.copied = "no";
45            toast(`Copy failed. The address is ${value}`);
46            // Cleared like success, or "failed" stays on the button after a later copy works.
47            window.setTimeout(() => {
48              delete button.dataset.copied;
49            }, 2400);
50          });
51      }}
52    >
53      <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
54        <path
55          d="M5.5 5.5h7v8h-7zM3.5 10.5h-1v-8h7v1"
56          fill="none"
57          stroke="currentColor"
58          strokeWidth="1.5"
59          strokeLinecap="round"
60          strokeLinejoin="round"
61        />
62      </svg>
63      {showLabel ? <span>{label}</span> : null}
64      {/* Always named: the visible label is absent on a tile and only a fragment elsewhere. */}
65      <span className="cap-sr-only">{name ?? `Copy the address for ${label}`}</span>
66    </button>
67  );
68}
69
70/**
71 * A text button whose own label reports the outcome, for rows where a toast has nowhere to show.
72 * The label is only what a sighted author sees; a screen reader hears the outcome from LiveNotice's
73 * regions, which are in the document before any copy, and both reset so a stale "Copied" never
74 * describes a later press.
75 */
76export function CopyTextButton({
77  value,
78  label,
79  name,
80  subject,
81}: {
82  value: string;
83  label: string;
84  /** Read after the label and never shown, so a row of identical "Copy" buttons each says which. */
85  name?: string;
86  /** What was copied, for the announcement: "the link starting abc123". */
87  subject: string;
88}) {
89  const [copied, setCopied] = useState<"" | "copied" | "failed">("");
90  const timer = useRef(0);
91  const mounted = useRef(false);
92  useEffect(() => {
93    mounted.current = true;
94    return () => {
95      mounted.current = false;
96      window.clearTimeout(timer.current);
97    };
98  }, []);
99
100  const settle = (outcome: "copied" | "failed") => {
101    // A copy that settles after the row is gone (a revoke, a closed drawer) must not start a timer
102    // the unmount cleanup already ran past.
103    if (!mounted.current) return;
104    setCopied(outcome);
105    window.clearTimeout(timer.current);
106    // A failure stays longer: it asks the author to do something.
107    timer.current = window.setTimeout(() => setCopied(""), outcome === "copied" ? 2000 : 5000);
108  };
109
110  return (
111    <>
112      <button
113        type="button"
114        className="cap-btn"
115        data-size="sm"
116        data-variant="quiet"
117        onClick={() => {
118          // Emptied first, so a second copy of the same thing is announced again.
119          window.clearTimeout(timer.current);
120          setCopied("");
121          copyText(value).then(
122            () => settle("copied"),
123            () => settle("failed"),
124          );
125        }}
126      >
127        {copied === "copied" ? "Copied" : copied === "failed" ? "Copy failed" : label}
128        {name ? <span className="cap-sr-only"> {name}</span> : null}
129      </button>
130      <div className="cap-sr-only">
131        <LiveNotice
132          status={copied === "copied" ? `Copied ${subject}.` : null}
133          alert={copied === "failed" ? `Could not copy ${subject}. The browser blocked the clipboard.` : null}
134        />
135      </div>
136    </>
137  );
138}