import copy from 'copy-to-clipboard';
import ContentCopyIcon from 'mdi-react/ContentCopyIcon';
import * as React from 'react';
/**
 * A component that displays a single line of text and a copy-to-clipboard button. There are other
 * niceties, such as triple-clicking selects only the text and not other adjacent components' text
 * labels.
 */
export class CopyableText extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = { copied: false };
        this.onClickInput = e => {
            e.currentTarget.focus();
            e.currentTarget.setSelectionRange(0, this.props.text.length);
            this.copyToClipboard();
        };
        this.onClickButton = () => this.copyToClipboard();
    }
    render() {
        return (React.createElement("div", { className: `copyable-text form-inline ${this.props.className || ''}` },
            React.createElement("div", { className: "input-group" },
                React.createElement("input", { type: "text", className: "copyable-text__input form-control", value: this.props.text, size: this.props.size, readOnly: true, onClick: this.onClickInput }),
                React.createElement("div", { className: "input-group-append" },
                    React.createElement("button", { className: "btn btn-secondary", onClick: this.onClickButton, disabled: this.state.copied },
                        React.createElement(ContentCopyIcon, { className: "icon-inline" }),
                        " ",
                        this.state.copied ? 'Copied' : 'Copy')))));
    }
    copyToClipboard() {
        copy(this.props.text);
        this.setState({ copied: true });
        setTimeout(() => this.setState({ copied: false }), 1000);
    }
}
//# sourceMappingURL=CopyableText.js.map