diff --git a/packages/desktop-client/src/components/tooltips.tsx b/packages/desktop-client/src/components/tooltips.tsx index 56978ad21c6..f32f9b53abf 100644 --- a/packages/desktop-client/src/components/tooltips.tsx +++ b/packages/desktop-client/src/components/tooltips.tsx @@ -4,13 +4,13 @@ import { createRef, useState, RefObject, + ReactNode, } from 'react'; import ReactDOM from 'react-dom'; import { css } from 'glamor'; -import { styles, theme } from '../style'; +import { CSSProperties, styles, theme } from '../style'; -// TODO: workout type -export const IntersectionBoundary = createContext({}); +export const IntersectionBoundary = createContext(null); export function useTooltip() { const [isOpen, setIsOpen] = useState(false); @@ -47,18 +47,27 @@ type TooltipProps = { position: TooltipPosition; onClose: () => void; forceLayout: boolean; + forceTop: number; + ignoreBoundary: boolean; + targetRect: any; + offset: number; + style: CSSProperties; + width: number; + children: ReactNode; }; export class Tooltip extends Component { static contextType = IntersectionBoundary; + declare context: React.ContextType; position: TooltipPosition; - contentRef: RefObject; + contentRef: RefObject; cleanup: () => void; + target: HTMLDivElement; - constructor(props: TooltipProps) { + constructor(props) { super(props); this.position = props.position || 'bottom-right'; - this.contentRef = createRef(); + this.contentRef = createRef(); } setup() { @@ -165,7 +174,7 @@ export class Tooltip extends Component { } const box = contentEl.getBoundingClientRect(); - const anchorEl = this.target.parentNode; + const anchorEl = this.target.parentNode as any; let anchorRect = targetRect || anchorEl.getBoundingClientRect(); @@ -260,7 +269,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',