@wordpress/components
Version:
UI components for WordPress.
65 lines (64 loc) • 1.71 kB
JavaScript
// packages/components/src/color-picker/color-copy-button.tsx
import { useCopyToClipboard } from "@wordpress/compose";
import { useState, useEffect, useRef } from "@wordpress/element";
import { copy, check } from "@wordpress/icons";
import { __ } from "@wordpress/i18n";
import { Button } from "../button";
import Tooltip from "../tooltip";
import { jsx as _jsx } from "react/jsx-runtime";
var ColorCopyButton = (props) => {
const {
color,
colorType
} = props;
const [copiedColor, setCopiedColor] = useState(null);
const copyTimerRef = useRef();
const copyRef = useCopyToClipboard(() => {
switch (colorType) {
case "hsl": {
return color.toHslString();
}
case "rgb": {
return color.toRgbString();
}
default:
case "hex": {
return color.toHex();
}
}
}, () => {
if (copyTimerRef.current) {
clearTimeout(copyTimerRef.current);
}
setCopiedColor(color.toHex());
copyTimerRef.current = setTimeout(() => {
setCopiedColor(null);
copyTimerRef.current = void 0;
}, 3e3);
});
useEffect(() => {
return () => {
if (copyTimerRef.current) {
clearTimeout(copyTimerRef.current);
}
};
}, []);
const isCopied = copiedColor === color.toHex();
const label = isCopied ? __("Copied!") : __("Copy");
return /* @__PURE__ */ _jsx(Tooltip, {
delay: 0,
hideOnClick: false,
text: label,
children: /* @__PURE__ */ _jsx(Button, {
size: "compact",
"aria-label": label,
ref: copyRef,
icon: isCopied ? check : copy,
showTooltip: false
})
});
};
export {
ColorCopyButton
};
//# sourceMappingURL=color-copy-button.js.map