@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
61 lines (60 loc) • 3.1 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CopyToClipboardButton = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const material_1 = require("@mui/material");
const ContentCopy_1 = tslib_1.__importDefault(require("@mui/icons-material/ContentCopy"));
const Check_1 = tslib_1.__importDefault(require("@mui/icons-material/Check"));
/** @returns copy to clipboard button's localized default aria label values */
function getDefaultAriaLabels() {
if (typeof window !== "undefined") {
const activeLang = window.document.documentElement.lang;
switch (activeLang) {
case "fr":
return { copy: "Copie", copied: "Copié" };
case "en":
return { copy: "Copy", copied: "Copied" };
case "es":
return { copy: "Copiar", copied: "Copiado" };
case "de":
return { copy: "Kopieren", copied: "Kopiert" };
}
}
return { copy: "Copia", copied: "Copiato" };
}
const CopyToClipboardButton = (_a) => {
var _b;
var { value, tooltipTitle } = _a, props = tslib_1.__rest(_a, ["value", "tooltipTitle"]);
const [copied, setCopied] = (0, react_1.useState)(false);
const copiedTimeoutRef = (0, react_1.useRef)();
/** Clears the timeout on component unmount */
(0, react_1.useEffect)(() => () => {
clearTimeout(copiedTimeoutRef.current);
}, []);
const handleCopyToClipboard = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
const valueToCopy = value instanceof Function ? value() : value;
try {
yield navigator.clipboard.writeText(valueToCopy);
clearTimeout(copiedTimeoutRef.current);
setCopied(true);
copiedTimeoutRef.current = setTimeout(() => setCopied(false), 2000);
}
catch (err) {
console.error(err);
}
});
const defaultAriaLabels = getDefaultAriaLabels();
const ariaLabels = {
copy: (_b = props["aria-label"]) !== null && _b !== void 0 ? _b : defaultAriaLabels.copy,
copied: tooltipTitle !== null && tooltipTitle !== void 0 ? tooltipTitle : defaultAriaLabels.copied,
};
return ((0, jsx_runtime_1.jsx)(material_1.Tooltip
// the tooltip only shows when the tooltipTitle is given
, Object.assign({
// the tooltip only shows when the tooltipTitle is given
open: !!tooltipTitle && copied, arrow: true, title: tooltipTitle, placement: "top" }, { children: (0, jsx_runtime_1.jsxs)(material_1.IconButton, Object.assign({ role: "button", onClick: handleCopyToClipboard }, props, { sx: Object.assign({ mx: 1 }, props.sx), "aria-label": !copied ? ariaLabels.copy : ariaLabels.copied }, { children: [!copied && (0, jsx_runtime_1.jsx)(ContentCopy_1.default, { fontSize: "small" }), copied && (0, jsx_runtime_1.jsx)(Check_1.default, { color: "success", fontSize: "small" })] })) })));
};
exports.CopyToClipboardButton = CopyToClipboardButton;