@wordpress/components
Version:
UI components for WordPress.
80 lines (77 loc) • 2.14 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ColorCopyButton = void 0;
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _icons = require("@wordpress/icons");
var _i18n = require("@wordpress/i18n");
var _button = require("../button");
var _tooltip = _interopRequireDefault(require("../tooltip"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const ColorCopyButton = props => {
const {
color,
colorType
} = props;
const [copiedColor, setCopiedColor] = (0, _element.useState)(null);
const copyTimerRef = (0, _element.useRef)();
const copyRef = (0, _compose.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 = undefined;
}, 3000);
});
(0, _element.useEffect)(() => {
// Clear copyTimerRef on component unmount.
return () => {
if (copyTimerRef.current) {
clearTimeout(copyTimerRef.current);
}
};
}, []);
const isCopied = copiedColor === color.toHex();
const label = isCopied ? (0, _i18n.__)('Copied!') : (0, _i18n.__)('Copy');
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
delay: 0,
hideOnClick: false,
text: label,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
size: "compact",
"aria-label": label,
ref: copyRef,
icon: isCopied ? _icons.check : _icons.copy,
showTooltip: false
})
});
};
exports.ColorCopyButton = ColorCopyButton;
//# sourceMappingURL=color-copy-button.js.map