From 8bf5d97b9e70812714331774271f1777b4a617e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 15 Sep 2021 21:06:06 +0200
Subject: [PATCH] Convert TextWithTooltip to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 ...TextWithTooltip.js => TextWithTooltip.tsx} | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)
 rename src/components/views/elements/{TextWithTooltip.js => TextWithTooltip.tsx} (71%)

diff --git a/src/components/views/elements/TextWithTooltip.js b/src/components/views/elements/TextWithTooltip.tsx
similarity index 71%
rename from src/components/views/elements/TextWithTooltip.js
rename to src/components/views/elements/TextWithTooltip.tsx
index 288d33f71b..b7c2477158 100644
--- a/src/components/views/elements/TextWithTooltip.js
+++ b/src/components/views/elements/TextWithTooltip.tsx
@@ -15,42 +15,44 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Tooltip from "./Tooltip";
+
+interface IProps {
+    class?: string;
+    tooltipClass?: string;
+    tooltip: React.ReactNode;
+    tooltipProps?: {};
+    onClick?: (ev?: React.MouseEvent) => void;
+}
+
+interface IState {
+    hover: boolean;
+}
 
 @replaceableComponent("views.elements.TextWithTooltip")
-export default class TextWithTooltip extends React.Component {
-    static propTypes = {
-        class: PropTypes.string,
-        tooltipClass: PropTypes.string,
-        tooltip: PropTypes.node.isRequired,
-        tooltipProps: PropTypes.object,
-    };
-
-    constructor() {
-        super();
+export default class TextWithTooltip extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
 
         this.state = {
             hover: false,
         };
     }
 
-    onMouseOver = () => {
+    private onMouseOver = (): void => {
         this.setState({ hover: true });
     };
 
-    onMouseLeave = () => {
+    private onMouseLeave = (): void => {
         this.setState({ hover: false });
     };
 
-    render() {
-        const Tooltip = sdk.getComponent("elements.Tooltip");
-
+    public render(): JSX.Element {
         const { class: className, children, tooltip, tooltipClass, tooltipProps, ...props } = this.props;
 
         return (
-            <span {...props} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className={className}>
+            <span {...props} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} onClick={this.props.onClick} className={className}>
                 { children }
                 { this.state.hover && <Tooltip
                     {...tooltipProps}