import IconButton from "@material-ui/core/Button" import { makeStyles } from "@material-ui/core/styles" import Tooltip from "@material-ui/core/Tooltip" import Check from "@material-ui/icons/Check" import React, { useState } from "react" import { combineClasses } from "../../util/combineClasses" import { FileCopyIcon } from "../Icons/FileCopyIcon" interface CopyButtonProps { text: string ctaCopy?: string wrapperClassName?: string buttonClassName?: string tooltipTitle?: string } export const Language = { tooltipTitle: "Copy to clipboard", ariaLabel: "Copy to clipboard", } /** * Copy button used inside the CodeBlock component internally */ export const CopyButton: React.FC> = ({ text, ctaCopy, wrapperClassName = "", buttonClassName = "", tooltipTitle = Language.tooltipTitle, }) => { const styles = useStyles() const [isCopied, setIsCopied] = useState(false) const copyToClipboard = async (): Promise => { try { await window.navigator.clipboard.writeText(text) setIsCopied(true) window.setTimeout(() => { setIsCopied(false) }, 1000) } catch (err) { const input = document.createElement("input") input.value = text document.body.appendChild(input) input.focus() input.select() const result = document.execCommand("copy") document.body.removeChild(input) if (result) { setIsCopied(true) window.setTimeout(() => { setIsCopied(false) }, 1000) } else { const wrappedErr = new Error("copyToClipboard: failed to copy text to clipboard") if (err instanceof Error) { wrappedErr.stack = err.stack } console.error(wrappedErr) } } } return (
{isCopied ? ( ) : ( )} {ctaCopy &&
{ctaCopy}
}
) } const useStyles = makeStyles((theme) => ({ copyButtonWrapper: { display: "flex", marginLeft: theme.spacing(1), }, copyButton: { borderRadius: theme.shape.borderRadius, padding: theme.spacing(0.85), minWidth: 32, "&:hover": { background: theme.palette.background.paper, }, }, fileCopyIcon: { width: 20, height: 20, }, buttonCopy: { marginLeft: theme.spacing(1), }, }))