aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/ui/copy_icon.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/ui/copy_icon.tsx')
-rw-r--r--packages/website/ts/components/ui/copy_icon.tsx126
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));
+ }
}