@wordpress/components
Version:
UI components for WordPress.
71 lines (70 loc) • 1.77 kB
JavaScript
/**
* WordPress dependencies
*/
import { useCopyToClipboard } from '@wordpress/compose';
import { useState, useEffect, useRef } from '@wordpress/element';
import { copy, check } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { Button } from '../button';
import Tooltip from '../tooltip';
import { jsx as _jsx } from "react/jsx-runtime";
export const 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 = undefined;
}, 3000);
});
useEffect(() => {
// Clear copyTimerRef on component unmount.
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
})
});
};
//# sourceMappingURL=color-copy-button.js.map