import { colors } from '@0xproject/react-shared'; import * as React from 'react'; import * as CopyToClipboard from 'react-copy-to-clipboard'; import * as ReactDOM from 'react-dom'; import ReactTooltip = require('react-tooltip'); interface CopyIconProps { data: string; callToAction?: string; } interface CopyIconState { isHovering: boolean; } export class CopyIcon extends React.Component { private _copyTooltipTimeoutId: number; private _copyable: HTMLInputElement; constructor(props: CopyIconProps) { super(props); this.state = { isHovering: false, }; } public componentDidUpdate(): void { // Remove tooltip if hover away if (!this.state.isHovering && this._copyTooltipTimeoutId) { clearInterval(this._copyTooltipTimeoutId); this._hideTooltip(); } } public render(): React.ReactNode { return (
{this.props.callToAction &&
{this.props.callToAction}
}
Copied!
); } private _setRefToProperty(el: HTMLInputElement): void { this._copyable = el; } private _setHoverState(isHovering: boolean): void { this.setState({ isHovering, }); } private _onCopy(): void { if (this._copyTooltipTimeoutId) { clearInterval(this._copyTooltipTimeoutId); } const tooltipLifespanMs = 1000; this._copyTooltipTimeoutId = window.setTimeout(() => { this._hideTooltip(); }, tooltipLifespanMs); } private _hideTooltip(): void { ReactTooltip.hide(ReactDOM.findDOMNode(this._copyable)); } }