import * as _ from 'lodash'; import {colors} from 'material-ui/styles'; 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() { // Remove tooltip if hover away if (!this.state.isHovering && this.copyTooltipTimeoutId) { clearInterval(this.copyTooltipTimeoutId); this.hideTooltip(); } } public render() { return (
{this.props.callToAction &&
{this.props.callToAction}
}
Copied!
); } private setRefToProperty(el: HTMLInputElement) { this.copyable = el; } private setHoverState(isHovering: boolean) { this.setState({ isHovering, }); } private onCopy() { if (this.copyTooltipTimeoutId) { clearInterval(this.copyTooltipTimeoutId); } const tooltipLifespanMs = 1000; this.copyTooltipTimeoutId = window.setTimeout(() => { this.hideTooltip(); }, tooltipLifespanMs); } private hideTooltip() { ReactTooltip.hide(ReactDOM.findDOMNode(this.copyable)); } }