@gravity-ui/uikit
Version:
Gravity UI base styling and components
61 lines (60 loc) • 3.5 kB
JavaScript
'use client';
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ClipboardButton = ClipboardButton;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const ActionTooltip_1 = require("../ActionTooltip/index.js");
const Button_1 = require("../Button/index.js");
const ClipboardIcon_1 = require("../ClipboardIcon/index.js");
const CopyToClipboard_1 = require("../CopyToClipboard/index.js");
const cn_1 = require("../utils/cn.js");
const i18n_1 = tslib_1.__importDefault(require("./i18n/index.js"));
require("./ClipboardButton.css");
const b = (0, cn_1.block)('clipboard-button');
const DEFAULT_TIMEOUT = 1200;
const ButtonSizeToIconSize = {
xs: 12,
s: 16,
m: 16,
l: 16,
xl: 20,
};
const ClipboardButtonComponent = (props) => {
const { size = 'm', hasTooltip = true, tooltipInitialText = (0, i18n_1.default)('startCopy'), tooltipSuccessText = (0, i18n_1.default)('endCopy'), status, view = 'flat', children, iconPosition = 'start', closeDelay, onMouseEnter, onFocus, ...rest } = props;
const buttonIcon = ((0, jsx_runtime_1.jsx)(Button_1.Button.Icon, { className: b('icon'), children: (0, jsx_runtime_1.jsx)(ClipboardIcon_1.ClipboardIcon, { size: ButtonSizeToIconSize[size], status: status }) }));
return ((0, jsx_runtime_1.jsx)(ActionTooltip_1.ActionTooltip, { title: status === 'success' ? tooltipSuccessText : tooltipInitialText, disabled: !hasTooltip, closeDelay: closeDelay, children: (0, jsx_runtime_1.jsxs)(Button_1.Button, { view: view, size: size, onMouseEnter: onMouseEnter, onFocus: onFocus, "aria-label": tooltipInitialText, ...rest, children: [iconPosition === 'start' ? buttonIcon : null, children, iconPosition === 'end' ? buttonIcon : null] }) }));
};
function ClipboardButton(props) {
const { text, timeout = DEFAULT_TIMEOUT, onCopy, hasTooltip = true, onMouseEnter, onFocus, ...buttonProps } = props;
const timerIdRef = React.useRef();
const [tooltipCloseDelay, setTooltipCloseDelay] = React.useState(undefined);
const [tooltipDisabled, setTooltipDisabled] = React.useState(false);
React.useEffect(() => window.clearTimeout(timerIdRef.current), []);
const handleCopy = React.useCallback((text, result) => {
onCopy?.(text, result);
setTooltipDisabled(false);
setTooltipCloseDelay(timeout);
window.clearTimeout(timerIdRef.current);
timerIdRef.current = window.setTimeout(() => {
setTooltipDisabled(true);
}, timeout);
}, [onCopy, timeout]);
const resetTooltip = React.useCallback(() => {
if (tooltipDisabled) {
setTooltipDisabled(false);
setTooltipCloseDelay(undefined);
}
}, [tooltipDisabled]);
const handleMouseEnter = React.useCallback((event) => {
onMouseEnter?.(event);
resetTooltip();
}, [onMouseEnter, resetTooltip]);
const handleFocus = React.useCallback((event) => {
onFocus?.(event);
resetTooltip();
}, [onFocus, resetTooltip]);
return ((0, jsx_runtime_1.jsx)(CopyToClipboard_1.CopyToClipboard, { text: text, timeout: timeout, onCopy: handleCopy, children: (status) => ((0, jsx_runtime_1.jsx)(ClipboardButtonComponent, { ...buttonProps, closeDelay: tooltipCloseDelay, hasTooltip: hasTooltip && !tooltipDisabled, status: status, onMouseEnter: handleMouseEnter, onFocus: handleFocus })) }));
}
//# sourceMappingURL=ClipboardButton.js.map