diff options
Diffstat (limited to 'packages/website/ts/components/ui/copy_icon.tsx')
-rw-r--r-- | packages/website/ts/components/ui/copy_icon.tsx | 126 |
1 files changed, 63 insertions, 63 deletions
diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx index df55e0922..72ab77e1f 100644 --- a/packages/website/ts/components/ui/copy_icon.tsx +++ b/packages/website/ts/components/ui/copy_icon.tsx @@ -6,74 +6,74 @@ import ReactTooltip = require('react-tooltip'); import { colors } from 'ts/utils/colors'; interface CopyIconProps { - data: string; - callToAction?: string; + data: string; + callToAction?: string; } interface CopyIconState { - isHovering: boolean; + 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() { - // Remove tooltip if hover away - if (!this.state.isHovering && this._copyTooltipTimeoutId) { - clearInterval(this._copyTooltipTimeoutId); - this._hideTooltip(); - } - } - public render() { - 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) { - this._copyable = el; - } - private _setHoverState(isHovering: boolean) { - this.setState({ - isHovering, - }); - } - private _onCopy() { - if (this._copyTooltipTimeoutId) { - clearInterval(this._copyTooltipTimeoutId); - } + 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 ( + <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) { + 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)); - } + const tooltipLifespanMs = 1000; + this._copyTooltipTimeoutId = window.setTimeout(() => { + this._hideTooltip(); + }, tooltipLifespanMs); + } + private _hideTooltip() { + ReactTooltip.hide(ReactDOM.findDOMNode(this._copyable)); + } } |