UNPKG

@wordpress/components

Version:
75 lines (70 loc) 2.18 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = ClipboardButton; var _clsx = _interopRequireDefault(require("clsx")); var _element = require("@wordpress/element"); var _compose = require("@wordpress/compose"); var _deprecated = _interopRequireDefault(require("@wordpress/deprecated")); var _button = _interopRequireDefault(require("../button")); var _jsxRuntime = require("react/jsx-runtime"); /** * External dependencies */ /** * WordPress dependencies */ /** * Internal dependencies */ const TIMEOUT = 4000; function ClipboardButton({ className, children, onCopy, onFinishCopy, text, ...buttonProps }) { (0, _deprecated.default)('wp.components.ClipboardButton', { since: '5.8', alternative: 'wp.compose.useCopyToClipboard' }); const timeoutIdRef = (0, _element.useRef)(); const ref = (0, _compose.useCopyToClipboard)(text, () => { onCopy(); if (timeoutIdRef.current) { clearTimeout(timeoutIdRef.current); } if (onFinishCopy) { timeoutIdRef.current = setTimeout(() => onFinishCopy(), TIMEOUT); } }); (0, _element.useEffect)(() => { return () => { if (timeoutIdRef.current) { clearTimeout(timeoutIdRef.current); } }; }, []); const classes = (0, _clsx.default)('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 => { // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated. event.target.focus(); }; return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, { ...buttonProps, className: classes, ref: ref, onCopy: focusOnCopyEventTarget, children: children }); } //# sourceMappingURL=index.js.map