synapse-react-client/dist/containers/CopyToClipboardInput.js

[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CopyToClipboardInput = void 0;
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(require("react"));
var IconCopy_1 = (0, tslib_1.__importDefault)(require("../../lib/assets/icons/IconCopy"));
var react_bootstrap_1 = require("react-bootstrap");
var ToastMessage_1 = require("./ToastMessage");
/**
 * Component that holds a large string in a readonly <input> to be copied to the user's clipboard when clicked.
 * This component should only be used when the value to copy is not very long AND the full length of the string
 * does not necessarily need to be seen by the user. This component was adapted from the email address copy to
 * clipboard functionality in UserCardMedium. For smaller/inline strings, look at UserCardMedium functionality
 * for displaying the value in a <p> tag instead of a readonly <input> tag.
 */
var CopyToClipboardInput = function (_a) {
    var value = _a.value, inputWidth = _a.inputWidth;
    var _b = React.useState(false), showModal = _b[0], setShowModal = _b[1];
    var ref = React.createRef();
    var copyToClipboard = function (ref, value) { return function (event) {
        event.preventDefault();
        // use the Clipboard API
        // https://caniuse.com/mdn-api_clipboard_writetext
        navigator.clipboard.writeText(value).then(function () {
            // show modal and hide after 4 seconds, the timing is per Material Design
            setShowModal(true);
            // hide after 4 seconds
            setTimeout(function () {
                setShowModal(false);
            }, 4000);
        });
    }; };
    return (React.createElement(React.Fragment, null,
        React.createElement(ToastMessage_1.ToastMessage, { text: "Successfully copied to clipboard", show: showModal, autohide: true }),
        React.createElement("div", { className: "SRC-copyToClipboardInputContainer", ref: ref },
            React.createElement(react_bootstrap_1.FormControl, { className: "SRC-marginBottomTop SRC-copyToClipboardInput", type: "text", style: {
                    width: inputWidth,
                }, value: value, readOnly: true, onClick: copyToClipboard(ref, value) }),
            React.createElement(react_bootstrap_1.Button, { className: "SRC-copyToClipboardButton", onClick: copyToClipboard(ref, value) }, IconCopy_1.default))));
};
exports.CopyToClipboardInput = CopyToClipboardInput;
exports.default = exports.CopyToClipboardInput;
//# sourceMappingURL=CopyToClipboardInput.js.map