fix(scatterplot): add missing types for event handlers

plouc · Apr 29, 2023 · 0e1a042 · 0e1a042
1 parent 0477454
commit 0e1a042
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 19 deletions.
diff --git a/packages/scatterplot/src/Mesh.tsx b/packages/scatterplot/src/Mesh.tsx
@@ -1,4 +1,4 @@
-import { createElement, useCallback } from 'react'
+import { createElement, useCallback, MouseEvent } from 'react'
 import { useTooltip } from '@nivo/tooltip'
 import { Mesh as BaseMesh } from '@nivo/voronoi'
 import { ScatterPlotCommonProps, ScatterPlotDatum, ScatterPlotNodeData } from './types'
@@ -29,31 +29,31 @@ export const Mesh = <RawDatum extends ScatterPlotDatum>({
     const { showTooltipFromEvent, hideTooltip } = useTooltip()
 
     const handleMouseEnter = useCallback(
-        (node: ScatterPlotNodeData<RawDatum>, event) => {
+        (node: ScatterPlotNodeData<RawDatum>, event: MouseEvent) => {
             showTooltipFromEvent(createElement(tooltip, { node }), event)
             onMouseEnter && onMouseEnter(node, event)
         },
         [showTooltipFromEvent, tooltip, onMouseEnter]
     )
 
     const handleMouseMove = useCallback(
-        (node: ScatterPlotNodeData<RawDatum>, event) => {
+        (node: ScatterPlotNodeData<RawDatum>, event: MouseEvent) => {
             showTooltipFromEvent(createElement(tooltip, { node }), event)
             onMouseMove && onMouseMove(node, event)
         },
         [showTooltipFromEvent, tooltip, onMouseMove]
     )
 
     const handleMouseLeave = useCallback(
-        (node: ScatterPlotNodeData<RawDatum>, event) => {
+        (node: ScatterPlotNodeData<RawDatum>, event: MouseEvent) => {
             hideTooltip()
             onMouseLeave && onMouseLeave(node, event)
         },
         [hideTooltip, onMouseLeave]
     )
 
     const handleClick = useCallback(
-        (node: ScatterPlotNodeData<RawDatum>, event) => {
+        (node: ScatterPlotNodeData<RawDatum>, event: MouseEvent) => {
             onClick && onClick(node, event)
         },
         [onClick]

diff --git a/packages/scatterplot/src/Node.tsx b/packages/scatterplot/src/Node.tsx
@@ -1,6 +1,6 @@
+import { useCallback, MouseEvent } from 'react'
 import { animated } from '@react-spring/web'
 import { ScatterPlotDatum, ScatterPlotNodeProps } from './types'
-import { useCallback } from 'react'
 
 const interpolateRadius = (size: number) => size / 2
 
@@ -14,10 +14,22 @@ export const Node = <RawDatum extends ScatterPlotDatum>({
     onMouseLeave,
     onClick,
 }: ScatterPlotNodeProps<RawDatum>) => {
-    const handleMouseEnter = useCallback(event => onMouseEnter?.(node, event), [node, onMouseEnter])
-    const handleMouseMove = useCallback(event => onMouseMove?.(node, event), [node, onMouseMove])
-    const handleMouseLeave = useCallback(event => onMouseLeave?.(node, event), [node, onMouseLeave])
-    const handleClick = useCallback(event => onClick?.(node, event), [node, onClick])
+    const handleMouseEnter = useCallback(
+        (event: MouseEvent<SVGCircleElement>) => onMouseEnter?.(node, event),
+        [node, onMouseEnter]
+    )
+    const handleMouseMove = useCallback(
+        (event: MouseEvent<SVGCircleElement>) => onMouseMove?.(node, event),
+        [node, onMouseMove]
+    )
+    const handleMouseLeave = useCallback(
+        (event: MouseEvent<SVGCircleElement>) => onMouseLeave?.(node, event),
+        [node, onMouseLeave]
+    )
+    const handleClick = useCallback(
+        (event: MouseEvent<SVGCircleElement>) => onClick?.(node, event),
+        [node, onClick]
+    )
 
     return (
         <animated.circle

diff --git a/packages/scatterplot/src/Nodes.tsx b/packages/scatterplot/src/Nodes.tsx
@@ -1,3 +1,4 @@
+import { createElement, useCallback, MouseEvent } from 'react'
 import { useTransition } from '@react-spring/web'
 import { CssMixBlendMode, useMotionConfig } from '@nivo/core'
 import { useTooltip } from '@nivo/tooltip'
@@ -7,7 +8,6 @@ import {
     ScatterPlotNode,
     ScatterPlotNodeData,
 } from './types'
-import { createElement, useCallback } from 'react'
 
 interface NodesProps<RawDatum extends ScatterPlotDatum> {
     nodes: ScatterPlotNodeData<RawDatum>[]
@@ -72,27 +72,30 @@ export const Nodes = <RawDatum extends ScatterPlotDatum>({
 
     const { showTooltipFromEvent, hideTooltip } = useTooltip()
     const handleMouseEnter = useCallback(
-        (node, event) => {
+        (node: ScatterPlotNodeData<RawDatum>, event: MouseEvent) => {
             showTooltipFromEvent(createElement(tooltip, { node }), event)
             onMouseEnter?.(node, event)
         },
         [tooltip, showTooltipFromEvent, onMouseEnter]
     )
     const handleMouseMove = useCallback(
-        (node, event) => {
+        (node: ScatterPlotNodeData<RawDatum>, event: MouseEvent) => {
             showTooltipFromEvent(createElement(tooltip, { node }), event)
             onMouseMove?.(node, event)
         },
         [tooltip, showTooltipFromEvent, onMouseMove]
     )
     const handleMouseLeave = useCallback(
-        (node, event) => {
+        (node: ScatterPlotNodeData<RawDatum>, event: MouseEvent) => {
             hideTooltip()
             onMouseLeave?.(node, event)
         },
         [hideTooltip, onMouseLeave]
     )
-    const handleClick = useCallback((node, event) => onClick?.(node, event), [onClick])
+    const handleClick = useCallback(
+        (node: ScatterPlotNodeData<RawDatum>, event: MouseEvent) => onClick?.(node, event),
+        [onClick]
+    )
 
     return (
         <>

diff --git a/packages/scatterplot/src/ScatterPlotCanvas.tsx b/packages/scatterplot/src/ScatterPlotCanvas.tsx
@@ -7,6 +7,7 @@ import {
     useMemo,
     useRef,
     useState,
+    MouseEvent
 } from 'react'
 import { Container, useDimensions, useTheme, getRelativeCursor, isCursorInRect } from '@nivo/core'
 import { renderAnnotationsToCanvas } from '@nivo/annotations'
@@ -218,7 +219,7 @@ const InnerScatterPlotCanvas = <RawDatum extends ScatterPlotDatum>({
     const { showTooltipFromEvent, hideTooltip } = useTooltip()
 
     const getNodeFromMouseEvent = useCallback(
-        event => {
+        (event: MouseEvent<HTMLCanvasElement>) => {
             const [x, y] = getRelativeCursor(canvasEl.current!, event)
             if (!isCursorInRect(margin.left, margin.top, innerWidth, innerHeight, x, y)) return null
 
@@ -229,7 +230,7 @@ const InnerScatterPlotCanvas = <RawDatum extends ScatterPlotDatum>({
     )
 
     const handleMouseHover = useCallback(
-        event => {
+        (event: MouseEvent<HTMLCanvasElement>) => {
             const node = getNodeFromMouseEvent(event)
             setCurrentNode(node)
 
@@ -262,7 +263,7 @@ const InnerScatterPlotCanvas = <RawDatum extends ScatterPlotDatum>({
     )
 
     const handleMouseLeave = useCallback(
-        event => {
+        (event: MouseEvent<HTMLCanvasElement>) => {
             hideTooltip()
             setCurrentNode(null)
             currentNode && onMouseLeave && onMouseLeave(currentNode, event)
@@ -271,7 +272,7 @@ const InnerScatterPlotCanvas = <RawDatum extends ScatterPlotDatum>({
     )
 
     const handleClick = useCallback(
-        event => {
+        (event: MouseEvent<HTMLCanvasElement>) => {
             if (onClick) {
                 const node = getNodeFromMouseEvent(event)
                 node && onClick(node, event)