Restructure the js app (#243)

* prettier * linter * add prettier, and format the code * remove common, merge it with frontend * refactor the app * better lint and code fix * travis for the frontend app * travis build script Signed-off-by: Daniel Maricic <daniel@woss.io> * lint and build * update the README.md Signed-off-by: Daniel Maricic <daniel@woss.io> * change the commands to reflect refactor Signed-off-by: Daniel Maricic <daniel@woss.io> * prettier and tslint are friends Signed-off-by: Daniel Maricic <daniel@woss.io> * code that wasn't linted properly before Signed-off-by: Daniel Maricic <daniel@woss.io> * prettier rc got deleted * workgin on making the travis pass Signed-off-by: Daniel Maricic <daniel@woss.io> * travis build please? Signed-off-by: Daniel Maricic <daniel@woss.io> * update readme.md Signed-off-by: Daniel Maricic <daniel@woss.io> * dockerfile deleted from fronted - out of scope Signed-off-by: Daniel Maricic <daniel@woss.io> * remove Signed-off-by: Daniel Maricic <daniel@woss.io> * tsconfig Signed-off-by: Daniel Maricic <daniel@woss.io> * found the reason why EOL wasn't happening Signed-off-by: Daniel Maricic <daniel@woss.io> * type for the event in the ConnectionInput as suggested * strictnullCheck to true * noImplicitAny * noUnusedParams * AfgHandling * update * fix Location.tsx * Few minor fixes * remove connection input and revert to original * esnext fixes the imports for icons and non default `* as ` * update to the tsconfig.test.json don't use commonjs please * fixed wrong comment for TIMEOUT_BASE * return totem.svg and type decraration of maybe Signed-off-by: Daniel Maricic <daniel@woss.io> Co-authored-by: Will <w.kopp@kigroup.de>
2026-04-30 22:28:01 +00:00 · 2020-04-06 15:38:45 +02:00
parent 20a0283380
commit bb8e804567
322 changed files with 10896 additions and 10602 deletions
@@ -0,0 +1,106 @@
+import * as React from 'react';
+
+import './Tooltip.css';
+
+export namespace Tooltip {
+  export interface Props {
+    text: string;
+    copy?: boolean;
+    inline?: boolean;
+    className?: string;
+    position?: 'left' | 'right' | 'center';
+    onInit?: (update: UpdateCallback) => void;
+  }
+
+  export interface State {
+    copied: boolean;
+  }
+
+  export type UpdateCallback = (text: string) => void;
+}
+
+function copyToClipboard(text: string) {
+  const el = document.createElement('textarea');
+  el.value = text;
+  document.body.appendChild(el);
+  el.select();
+  document.execCommand('copy');
+  document.body.removeChild(el);
+}
+
+export class Tooltip extends React.Component<Tooltip.Props, Tooltip.State> {
+  public state = { copied: false };
+
+  private el: HTMLDivElement;
+  private timer: NodeJS.Timer;
+
+  public componentDidMount() {
+    if (this.props.onInit) {
+      this.props.onInit(this.update);
+    }
+  }
+
+  public componentWillUnmount() {
+    clearTimeout(this.timer);
+  }
+
+  public render() {
+    const { text, inline, className, position } = this.props;
+    const { copied } = this.state;
+
+    let containerClass = 'Tooltip-container';
+    let tooltipClass = 'Tooltip';
+
+    if (className) {
+      containerClass += ' ' + className;
+    }
+
+    if (inline) {
+      containerClass += ' Tooltip-container-inline';
+    }
+
+    if (position && position !== 'center') {
+      tooltipClass += ` Tooltip-${position}`;
+    }
+
+    if (copied) {
+      tooltipClass += ' Tooltip-copied';
+    }
+
+    return (
+      <div className={containerClass} onClick={this.onClick}>
+        <div className={tooltipClass} ref={this.onRef}>
+          {copied ? 'Copied to clipboard!' : text}
+        </div>
+        {this.props.children}
+      </div>
+    );
+  }
+
+  private onRef = (el: HTMLDivElement) => {
+    this.el = el;
+  };
+
+  private update = (text: string) => {
+    this.el.textContent = text;
+  };
+
+  private onClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (this.props.copy !== true) {
+      return;
+    }
+
+    copyToClipboard(this.props.text);
+
+    event.stopPropagation();
+
+    clearTimeout(this.timer);
+
+    this.setState({ copied: true });
+    this.timer = setTimeout(this.restore, 2000);
+  };
+
+  private restore = () => {
+    this.setState({ copied: false });
+  };
+}