diff options
Diffstat (limited to 'packages/website/ts/components/ui/copy_icon.tsx')
-rw-r--r-- | packages/website/ts/components/ui/copy_icon.tsx | 78 |
1 files changed, 0 insertions, 78 deletions
diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx deleted file mode 100644 index 403cd4607..000000000 --- a/packages/website/ts/components/ui/copy_icon.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { colors } from '@0x/react-shared'; -import * as React from 'react'; -import * as CopyToClipboard from 'react-copy-to-clipboard'; -import * as ReactDOM from 'react-dom'; -import ReactTooltip from 'react-tooltip'; - -interface CopyIconProps { - data: string; - callToAction?: string; -} - -interface CopyIconState { - isHovering: boolean; -} - -export class CopyIcon extends React.Component<CopyIconProps, CopyIconState> { - 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 ( - <div className="inline-block"> - <CopyToClipboard text={this.props.data} onCopy={this._onCopy.bind(this)}> - <div - className="inline flex" - style={{ cursor: 'pointer', color: colors.amber600 }} - ref={this._setRefToProperty.bind(this)} - data-tip={true} - data-for="copy" - data-event="click" - data-iscapture={true} // This let's the click event continue to propogate - onMouseOver={this._setHoverState.bind(this, true)} - onMouseOut={this._setHoverState.bind(this, false)} - > - <div> - <i style={{ fontSize: 15 }} className="zmdi zmdi-copy" /> - </div> - {this.props.callToAction && <div className="pl1">{this.props.callToAction}</div>} - </div> - </CopyToClipboard> - <ReactTooltip id="copy">Copied!</ReactTooltip> - </div> - ); - } - 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)); - } -} |