hide clipboard interface if the clipboard doesn't exist (#551)

divviup · Oct 4, 2023 · 1fe3394 · 1fe3394
1 parent 4955d55
commit 1fe3394
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 23 deletions.
diff --git a/app/src/tasks/TaskDetail/ClientConfig.tsx b/app/src/tasks/TaskDetail/ClientConfig.tsx
@@ -83,7 +83,11 @@ await task.sendMeasurement(...); // your measurement here`;
 
       <Copy clipboardContents={contents}>
         {(copy) => (
-          <div onClick={copy} style={{ cursor: "pointer" }} className="my-3">
+          <div
+            onClick={copy}
+            style={copy && { cursor: "pointer" }}
+            className="my-3"
+          >
             <SyntaxHighlighter
               language="javascript"
               style={syntaxStyle}

diff --git a/app/src/util.tsx b/app/src/util.tsx
@@ -63,36 +63,44 @@ export function Copy({
   children,
   clipboardContents,
 }: {
-  children(copy: () => void, copied: boolean): React.ReactElement;
+  children(copy: undefined | (() => void), copied: boolean): React.ReactElement;
   clipboardContents: string;
 }) {
-  const [copied, setCopied] = React.useState(false);
-  const copy = React.useCallback(() => {
-    navigator.clipboard.writeText(clipboardContents).then(() => {
-      setCopied(true);
-    });
-  }, [setCopied, clipboardContents]);
+  if ("clipboard" in navigator) {
+    const [copied, setCopied] = React.useState(false);
+    const copy = React.useCallback(() => {
+      navigator.clipboard.writeText(clipboardContents).then(() => {
+        setCopied(true);
+      });
+    }, [setCopied, clipboardContents]);
 
-  return (
-    <OverlayTrigger
-      overlay={<Tooltip>{copied ? "Copied!" : "Click to copy"}</Tooltip>}
-    >
-      {children(copy, copied)}
-    </OverlayTrigger>
-  );
+    return (
+      <OverlayTrigger
+        overlay={<Tooltip>{copied ? "Copied!" : "Click to copy"}</Tooltip>}
+      >
+        {children(copy, copied)}
+      </OverlayTrigger>
+    );
+  } else {
+    return children(undefined, false);
+  }
 }
 
 export function CopyCode({ code }: { code: string }) {
   return (
     <Copy clipboardContents={code}>
-      {(copy, copied) => (
-        <span onClick={copy} style={{ cursor: "pointer" }}>
-          <code className="user-select-all">{code}</code>{" "}
-          <Button size="sm" variant="outline-secondary" className="ml-auto">
-            {copied ? <ClipboardCheckFill /> : <Clipboard />}
-          </Button>
-        </span>
-      )}
+      {(copy, copied) =>
+        copy ? (
+          <span onClick={copy} style={{ cursor: "pointer" }}>
+            <code className="user-select-all">{code}</code>{" "}
+            <Button size="sm" variant="outline-secondary" className="ml-auto">
+              {copied ? <ClipboardCheckFill /> : <Clipboard />}
+            </Button>
+          </span>
+        ) : (
+          <code className="user-select-all">{code}</code>
+        )
+      }
     </Copy>
   );
 }