[TS migration] Reafactor tooltips.js to use typescript

packages/desktop-client/src/components/NotesButton.tsx

@@ -15,7 +15,7 @@ import { remarkBreaks, sequentialNewlinesPlugin } from '../util/markdown';
 import Button from './common/Button';
 import Text from './common/Text';
 import View from './common/View';
-import { Tooltip, useTooltip } from './tooltips';
+import { Tooltip, type TooltipPosition, useTooltip } from './tooltips';
 
 const remarkPlugins = [sequentialNewlinesPlugin, remarkGfm, remarkBreaks];
 
@@ -86,7 +86,7 @@ const markdownStyles = css({
 type NotesTooltipProps = {
   editable?: boolean;
   defaultNotes?: string;
-  position?: string;
+  position?: TooltipPosition;
   onClose?: (notes: string) => void;
 };
 function NotesTooltip({
@@ -138,7 +138,7 @@ type NotesButtonProps = {
   width?: number;
   height?: number;
   defaultColor?: string;
-  tooltipPosition?: string;
+  tooltipPosition?: TooltipPosition;
   style?: CSSProperties;
 };
 export default function NotesButton({

packages/desktop-client/src/components/tooltips.js → packages/desktop-client/src/components/tooltips.tsx

@@ -1,18 +1,27 @@
-import React, { Component, createContext, createRef, useState } from 'react';
+import {
+  Component,
+  createContext,
+  createRef,
+  useState,
+  type RefObject,
+  type ReactNode,
+  type MouseEventHandler,
+  type MouseEvent,
+} from 'react';
 import ReactDOM from 'react-dom';
 
 import { css } from 'glamor';
 
-import { styles, theme } from '../style';
+import { type CSSProperties, styles, theme } from '../style';
 
-export const IntersectionBoundary = createContext();
+export const IntersectionBoundary = createContext<RefObject<HTMLElement>>(null);
 
 export function useTooltip() {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
 
   return {
-    getOpenEvents: (events = {}) => ({
-      onClick: e => {
+    getOpenEvents: (events: { onClick?: MouseEventHandler } = {}) => ({
+      onClick: (e: MouseEvent) => {
         e.stopPropagation();
         events.onClick?.(e);
         setIsOpen(true);
@@ -24,14 +33,51 @@ export function useTooltip() {
   };
 }
 
-export class Tooltip extends Component {
+export type TooltipPosition =
+  | 'top'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'bottom-stretch'
+  | 'top-stretch'
+  | 'bottom-center'
+  | 'top-center'
+  | 'left-center'
+  | 'right';
+
+type TooltipProps = {
+  position?: TooltipPosition;
+  onClose?: () => void;
+  forceLayout?: boolean;
+  forceTop?: number;
+  ignoreBoundary?: boolean;
+  targetRect?: DOMRect;
+  offset?: number;
+  style?: CSSProperties;
+  width?: number;
+  children: ReactNode;
+  targetHeight?: number;
+};
+type MutableDomRect = {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+};
+
+export class Tooltip extends Component<TooltipProps> {
   static contextType = IntersectionBoundary;
-  state = { position: null };
+  position: TooltipPosition;
+  contentRef: RefObject<HTMLDivElement>;
+  cleanup: () => void;
+  target: HTMLDivElement;
 
   constructor(props) {
     super(props);
     this.position = props.position || 'bottom-right';
-    this.contentRef = createRef();
+    this.contentRef = createRef<HTMLDivElement>();
   }
 
   setup() {
@@ -111,7 +157,7 @@ export class Tooltip extends Component {
     const { ignoreBoundary = false } = this.props;
 
     if (!ignoreBoundary && this.context) {
-      return this.context.current;
+      return (this.context as RefObject<HTMLElement>).current;
     }
     return document.body;
   }
@@ -123,11 +169,11 @@ export class Tooltip extends Component {
 
     if (
       container.parentNode &&
-      container.parentNode.style.overflow === 'auto'
+      (container.parentNode as HTMLElement).style.overflow === 'auto'
     ) {
-      return container.parentNode;
+      return container.parentNode as HTMLElement;
     }
-    return container;
+    return container as HTMLElement;
   }
 
   layout() {
@@ -138,9 +184,10 @@ export class Tooltip extends Component {
     }
 
     const box = contentEl.getBoundingClientRect();
-    const anchorEl = this.target.parentNode;
+    const anchorEl = this.target.parentNode as HTMLElement;
 
-    let anchorRect = targetRect || anchorEl.getBoundingClientRect();
+    let anchorRect: MutableDomRect =
+      targetRect || anchorEl.getBoundingClientRect();
 
     // Copy it so we can mutate it
     anchorRect = {
@@ -233,7 +280,13 @@ export class Tooltip extends Component {
   }
 
   getStyleForPosition(position, boxRect, anchorRect, containerRect, offset) {
-    const style = {
+    const style: {
+      top?: string;
+      bottom?: string;
+      left?: string;
+      right?: string;
+      width?: string;
+    } = {
       top: 'inherit',
       bottom: 'inherit',
       left: 'inherit',

upcoming-release-notes/2073.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [IzStriker]
+---
+
+Migrate tooltips.js to typescript