bitburner-src/src/ui/React/CopyableText.tsx

import * as React from "react";

export enum ClickableTag {
  Tag_span,
  Tag_h1,
}

type IProps = {
  value: string;
  tag: ClickableTag;
};

type IState = {
  tooltipVisible: boolean;
};

export class CopyableText extends React.Component<IProps, IState> {
  public static defaultProps = {
    //Default span to prevent destroying current clickables
    tag: ClickableTag.Tag_span,
  };

  constructor(props: IProps) {
    super(props);

    this.copy = this.copy.bind(this);
    this.tooltipClasses = this.tooltipClasses.bind(this);
    this.textClasses = this.textClasses.bind(this);

    this.state = {
      tooltipVisible: false,
    };
  }

  copy(): void {
    const copyText = document.createElement("textarea");
    copyText.value = this.props.value;
    document.body.appendChild(copyText);
    copyText.select();
    copyText.setSelectionRange(0, 1e10);
    document.execCommand("copy");
    document.body.removeChild(copyText);
    this.setState({ tooltipVisible: true });
    setTimeout(() => this.setState({ tooltipVisible: false }), 1000);
  }

  tooltipClasses(): string {
    let classes = "copy_tooltip_text";
    if (this.state.tooltipVisible) {
      classes += " copy_tooltip_text_visible";
    }

    return classes;
  }

  textClasses(): string {
    let classes = "copy_tooltip noselect text";
    if (this.state.tooltipVisible) {
      classes += " copy_tooltip_copied";
    }

    return classes;
  }

  render(): React.ReactNode {
    switch (this.props.tag) {
      case ClickableTag.Tag_h1:
        return (
          <h1 className={this.textClasses()} onClick={this.copy}>
            {this.props.value}
            <span className={this.tooltipClasses()}>Copied!</span>
          </h1>
        );
      case ClickableTag.Tag_span:
        return (
          <span className={this.textClasses()} onClick={this.copy}>
            <b>{this.props.value}</b>
            <span className={this.tooltipClasses()}>Copied!</span>
          </span>
        );
    }
  }
}