@octopusdeploy/design-system-components
Version:
The design systems component library.
54 lines (53 loc) • 3.14 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CopyToClipboardButton = CopyToClipboardButton;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_1 = require("react");
const Button_1 = require("../../components/Button");
const Tooltip_1 = require("../../components/Tooltip");
function CopyToClipboardButton({ value, children, showHoverTooltip = true, onClick }) {
const [event, setEvent] = (0, react_1.useState)(null);
const [showConfirmation, setShowConfirmation] = (0, react_1.useState)(false);
(0, react_1.useEffect)(() => {
if (event) {
setShowConfirmation(true);
const timerId = window.setTimeout(() => setShowConfirmation(false), 3500);
return () => {
window.clearTimeout(timerId);
};
}
}, [event]);
const handleClick = (e) => {
const copyText = async () => {
await navigator.clipboard.writeText(value);
setEvent(e);
};
copyText();
onClick?.();
};
// Setting the <ToolTip /> `trigger` prop as `undefined` uses the default value: `mouseenter focus`
const outerTooltipTrigger = showConfirmation ? "manual" : undefined;
const innerTooltipOpen = showConfirmation ? true : false;
return ((0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { content: "Copy to clipboard", trigger: outerTooltipTrigger, open: isTooltipHoverable(showHoverTooltip && !showConfirmation), children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { content: "Copied!", trigger: "manual", open: innerTooltipOpen, children: (0, jsx_runtime_1.jsx)("span", { children: children ? ((0, jsx_runtime_1.jsx)("span", { onClick: handleClick, children: children })) : ((0, jsx_runtime_1.jsx)("div", { className: copyButtonWrapper, children: (0, jsx_runtime_1.jsx)(Button_1.ActionButton, { onClick: handleClick, label: "", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.CopyIcon, { size: 24 }), "aria-label": `Copy to clipboard`, type: Button_1.ActionButtonType.Ternary }) })) }) }) }) }));
}
function isTooltipHoverable(showHoverTooltip) {
// Used to set the `open` prop of <Tooltip /> passed into the `open` prop of <TippyTooltip />
// <TippyTooltip /> is from react-tippy (https://github.com/tvkhoa/react-tippy)
// Setting the `open` prop as `undefined` leaves interactions (e.g., hover) and the component logic to determine the open or closed status of the tooltip
// The values `false` or `true` force the tooltip to be closed or open respectively
return showHoverTooltip ? undefined : false;
}
const copyButtonWrapper = (0, css_1.css)({
"&& .MuiButton-root": {
aspectRatio: "1",
padding: "0",
borderRadius: design_system_tokens_1.borderRadius.circle,
minWidth: "auto",
},
"&& .MuiButton-root .MuiButton-startIcon": {
margin: "0",
},
});