chore(ui): migrate more code to typescript

ui/src/Components/TooltipWrapper/index.tsx

@@ -1,6 +1,5 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, ReactNode, FC } from "react";
 import { createPortal } from "react-dom";
-import PropTypes from "prop-types";
 
 import { CSSTransition } from "react-transition-group";
 
@@ -8,16 +7,24 @@ import { usePopper } from "react-popper";
 
 import { useSupportsTouch } from "Hooks/useSupportsTouch";
 
-const TooltipWrapper = ({ title, children, className }) => {
-  const [referenceElement, setReferenceElement] = useState(null);
-  const [popperElement, setPopperElement] = useState(null);
+const TooltipWrapper: FC<{
+  title: ReactNode;
+  children: ReactNode;
+  className?: string;
+}> = ({ title, children, className }) => {
+  const [referenceElement, setReferenceElement] = useState(
+    null as HTMLElement | null
+  );
+  const [popperElement, setPopperElement] = useState(
+    null as HTMLElement | null
+  );
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: "top",
     modifiers: [
       {
         name: "preventOverflow",
         options: {
-          boundariesElement: "viewport",
+          rootBoundary: "viewport",
         },
       },
     ],
@@ -32,22 +39,22 @@ const TooltipWrapper = ({ title, children, className }) => {
   const hideTooltip = () => setIsHovering(false);
 
   useEffect(() => {
-    let timerShow;
-    let timerHide;
+    let timerShow: number | undefined;
+    let timerHide: number | undefined;
 
     if (!isHovering) {
       if (isVisible) {
-        clearTimeout(timerShow);
-        timerHide = setTimeout(() => setIsVisible(false), 100);
+        window.clearTimeout(timerShow);
+        timerHide = window.setTimeout(() => setIsVisible(false), 100);
       }
       setWasClicked(false);
     } else if (wasClicked) {
-      clearTimeout(timerShow);
-      clearTimeout(timerHide);
+      window.clearTimeout(timerShow);
+      window.clearTimeout(timerHide);
       setIsVisible(false);
     } else if (!isVisible && isHovering) {
       clearTimeout(timerHide);
-      timerShow = setTimeout(() => setIsVisible(true), 1000);
+      timerShow = window.setTimeout(() => setIsVisible(true), 1000);
     }
     return () => {
       clearTimeout(timerShow);
@@ -59,11 +66,11 @@ const TooltipWrapper = ({ title, children, className }) => {
     <React.Fragment>
       <div
         onClick={() => setWasClicked(true)}
-        onMouseOver={supportsTouch ? null : showTooltip}
-        onMouseLeave={supportsTouch ? null : hideTooltip}
-        onTouchStart={supportsTouch ? showTooltip : null}
-        onTouchCancel={supportsTouch ? hideTooltip : null}
-        onTouchEnd={supportsTouch ? hideTooltip : null}
+        onMouseOver={supportsTouch ? undefined : showTooltip}
+        onMouseLeave={supportsTouch ? undefined : hideTooltip}
+        onTouchStart={supportsTouch ? showTooltip : undefined}
+        onTouchCancel={supportsTouch ? hideTooltip : undefined}
+        onTouchEnd={supportsTouch ? hideTooltip : undefined}
         ref={setReferenceElement}
         className={`${className ? className : ""} tooltip-trigger`}
       >
@@ -94,10 +101,5 @@ const TooltipWrapper = ({ title, children, className }) => {
     </React.Fragment>
   );
 };
-TooltipWrapper.propTypes = {
-  title: PropTypes.node.isRequired,
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-};
 
 export { TooltipWrapper };