@wix/design-system
Version:
@wix/design-system
30 lines • 1.93 kB
JavaScript
import React from 'react';
import { useCopyClipboard } from '../../providers/useCopyClipboard';
import Tooltip from '../../Tooltip/Tooltip';
import { st, classes } from './InlineVariant.st.css.js';
import { COPY_RESET_TIMEOUT_MS, DEFAULT_TOOLTIP_COPIED, DEFAULT_TOOLTIP_IDLE, DATA_HOOKS, } from '../CodeSnippet.constants';
const InlineVariant = ({ code, size, copyText, disableCopy = false, copyTooltipText = DEFAULT_TOOLTIP_IDLE, copiedTooltipText = DEFAULT_TOOLTIP_COPIED, tooltipProps, onCopy, ariaLabel, dataHook, className, }) => {
const valueToCopy = copyText ?? code;
const { isCopied, copyToClipboard } = useCopyClipboard({
value: valueToCopy,
onCopy: () => onCopy?.(valueToCopy),
resetTimeout: COPY_RESET_TIMEOUT_MS,
});
if (disableCopy) {
return (React.createElement("span", { "data-hook": dataHook, "aria-label": ariaLabel, className: st(classes.root, { size, static: true }, className) },
React.createElement("code", { "data-hook": DATA_HOOKS.code, className: classes.code }, code)));
}
const tooltipLabel = isCopied ? copiedTooltipText : copyTooltipText;
const handleKeyDown = (event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
copyToClipboard();
}
};
return (React.createElement(Tooltip, { appendTo: "window", inline: true, ...tooltipProps, content: tooltipLabel },
React.createElement("span", { role: "button", tabIndex: 0, "data-hook": dataHook, "aria-label": ariaLabel ?? `${code}, ${tooltipLabel}`, className: st(classes.root, { size }, className), onClick: copyToClipboard, onKeyDown: handleKeyDown },
React.createElement("code", { "data-hook": DATA_HOOKS.code, className: classes.code }, code))));
};
InlineVariant.displayName = 'CodeSnippet.InlineVariant';
export default InlineVariant;
//# sourceMappingURL=InlineVariant.js.map