@wordpress/components
Version:
UI components for WordPress.
62 lines (56 loc) • 1.7 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { useRef, useEffect } from '@wordpress/element';
import { useCopyToClipboard } from '@wordpress/compose';
import deprecated from '@wordpress/deprecated';
/**
* Internal dependencies
*/
import Button from '../button';
const TIMEOUT = 4000;
export default function ClipboardButton({
className,
children,
onCopy,
onFinishCopy,
text,
...buttonProps
}) {
deprecated('wp.components.ClipboardButton', {
since: '10.3',
plugin: 'Gutenberg',
alternative: 'wp.compose.useCopyToClipboard'
});
const timeoutId = useRef();
const ref = useCopyToClipboard(text, () => {
onCopy();
clearTimeout(timeoutId.current);
if (onFinishCopy) {
timeoutId.current = setTimeout(() => onFinishCopy(), TIMEOUT);
}
});
useEffect(() => {
clearTimeout(timeoutId.current);
}, []);
const classes = classnames('components-clipboard-button', className); // Workaround for inconsistent behavior in Safari, where <textarea> is not
// the document.activeElement at the moment when the copy event fires.
// This causes documentHasSelection() in the copy-handler component to
// mistakenly override the ClipboardButton, and copy a serialized string
// of the current block instead.
const focusOnCopyEventTarget = event => {
event.target.focus();
};
return createElement(Button, _extends({}, buttonProps, {
className: classes,
ref: ref,
onCopy: focusOnCopyEventTarget
}), children);
}
//# sourceMappingURL=index.js.map