collaborative-ui/lib/CopyButton/index.js

React component library for building real-time collaborative editing applications.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CopyButton = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const use_t_1 = require("use-t");
const BasicButton_1 = require("nice-ui/lib/2-inline-block/BasicButton");
const Iconista_1 = require("nice-ui/lib/icons/Iconista");
const BasicTooltip_1 = require("nice-ui/lib/4-card/BasicTooltip");
const useMountedState_1 = tslib_1.__importDefault(require("react-use/lib/useMountedState"));
const nano_theme_1 = require("nano-theme");
const copy = require('clipboard-copy'); // eslint-disable-line
const css = {
    text: (0, nano_theme_1.rule)({
        ...nano_theme_1.theme.font.ui1.mid,
    }),
};
const CopyButton = ({ onCopy, tooltip }) => {
    const [t] = (0, use_t_1.useT)();
    const isMounted = (0, useMountedState_1.default)();
    const [copied, setCopied] = React.useState(false);
    const handleCopyClick = () => {
        setCopied(true);
        copy(onCopy());
        setTimeout(() => {
            if (isMounted())
                setCopied(false);
        }, 2000);
    };
    return (React.createElement(BasicTooltip_1.BasicTooltip, { show: copied, renderTooltip: () => React.createElement("span", { className: css.text }, t('Copied!')), ...tooltip },
        React.createElement(BasicButton_1.BasicButton, { compact: true, onClick: handleCopyClick },
            React.createElement(Iconista_1.Iconista, { set: "atlaskit", icon: "copy", width: 16, height: 16 }))));
};
exports.CopyButton = CopyButton;