mirror of https://github.com/coder/coder.git
80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import IconButton from "@mui/material/Button";
|
|
import { makeStyles } from "@mui/styles";
|
|
import Tooltip from "@mui/material/Tooltip";
|
|
import Check from "@mui/icons-material/Check";
|
|
import { useClipboard } from "hooks/useClipboard";
|
|
import { combineClasses } from "../../utils/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<React.PropsWithChildren<CopyButtonProps>> = ({
|
|
text,
|
|
ctaCopy,
|
|
wrapperClassName = "",
|
|
buttonClassName = "",
|
|
tooltipTitle = Language.tooltipTitle,
|
|
}) => {
|
|
const styles = useStyles();
|
|
const { isCopied, copy: copyToClipboard } = useClipboard(text);
|
|
|
|
return (
|
|
<Tooltip title={tooltipTitle} placement="top">
|
|
<div
|
|
className={combineClasses([styles.copyButtonWrapper, wrapperClassName])}
|
|
>
|
|
<IconButton
|
|
className={combineClasses([styles.copyButton, buttonClassName])}
|
|
onClick={copyToClipboard}
|
|
size="small"
|
|
aria-label={Language.ariaLabel}
|
|
variant="text"
|
|
>
|
|
{isCopied ? (
|
|
<Check className={styles.fileCopyIcon} />
|
|
) : (
|
|
<FileCopyIcon className={styles.fileCopyIcon} />
|
|
)}
|
|
{ctaCopy && <div className={styles.buttonCopy}>{ctaCopy}</div>}
|
|
</IconButton>
|
|
</div>
|
|
</Tooltip>
|
|
);
|
|
};
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
copyButtonWrapper: {
|
|
display: "flex",
|
|
},
|
|
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),
|
|
},
|
|
}));
|