azure-devops-ui/Components/ClipboardButton/ClipboardButton.js

React components for building web UI in Azure DevOps

import "../../CommonImports";
import "../../Core/core.css";
import "./ClipboardButton.css";
import * as React from "react";
import { ObservableValue } from '../../Core/Observable';
import { Button } from '../../Button';
import { Observer } from '../../Observer';
import * as Resources from '../../Resources.Clipboard';
import { css } from '../../Util';
import { copyToClipboard } from "../../Utils/ClipboardUtils";
export class ClipboardButton extends React.Component {
    constructor() {
        super(...arguments);
        this.copied = new ObservableValue(false);
        this.onClick = (event) => {
            const { getContent, onCopy } = this.props;
            if (!this.copied.value) {
                this.copied.value = true;
            }
            const content = getContent();
            copyToClipboard(content, onCopy);
            event.preventDefault();
            event.stopPropagation();
        };
        this.onMouseLeave = (event) => {
            if (this.copied.value) {
                this.copied.value = false;
            }
            this.props.onMouseLeave && this.props.onMouseLeave(event);
        };
    }
    render() {
        const { ariaLabel, onBlur, onFocus, showCopiedTooltip, subtle, tooltipProps } = this.props;
        const copiedTooltipText = typeof showCopiedTooltip === "string" ? showCopiedTooltip : Resources.CopiedToClipboard;
        return (React.createElement("div", { className: css("bolt-clipboard-button", this.props.className) },
            React.createElement(Observer, { copied: this.copied }, (props) => {
                return (React.createElement(Button, { ariaLabel: ariaLabel || Resources.CopyToClipboard, iconProps: { iconName: "Copy" }, onBlur: onBlur, onClick: this.onClick, onFocus: onFocus, subtle: subtle, tooltipProps: showCopiedTooltip && props.copied ? Object.assign(Object.assign({}, tooltipProps), { text: copiedTooltipText }) : tooltipProps, onMouseLeave: this.onMouseLeave }));
            })));
    }
}