unify handler props

plouc · Mar 13, 2024 · f1715ee · f1715ee
1 parent 0a3d670
commit f1715ee
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 62 deletions.
diff --git a/packages/bump/src/bump/Bump.tsx b/packages/bump/src/bump/Bump.tsx
@@ -5,7 +5,9 @@ import {
     BumpCustomLayerProps,
     BumpDatum,
     BumpLayerId,
+    BumpPointMouseHandler,
     BumpSerieExtraProps,
+    BumpSerieMouseHandler,
     BumpSvgProps,
     DefaultBumpDatum,
 } from './types'
@@ -82,22 +84,18 @@ const InnerBump = <Datum extends BumpDatum, ExtraProps extends BumpSerieExtraPro
 
     isInteractive = bumpSvgDefaultProps.isInteractive,
     defaultActiveSerieIds = bumpSvgDefaultProps.defaultActiveSerieIds,
-    onSerieMouseEnter,
-    onSerieMouseMove,
-    onSerieMouseLeave,
-    onSerieClick,
-    onPointMouseEnter,
-    onPointMouseMove,
-    onPointMouseLeave,
-    onPointClick,
+    onMouseEnter,
+    onMouseMove,
+    onMouseLeave,
+    onClick,
     useMesh = bumpSvgDefaultProps.useMesh,
+    debugMesh = bumpSvgDefaultProps.debugMesh,
     lineTooltip = bumpSvgDefaultProps.lineTooltip as NonNullable<
         BumpSvgProps<Datum, ExtraProps>['lineTooltip']
     >,
     pointTooltip = bumpSvgDefaultProps.pointTooltip as NonNullable<
         BumpSvgProps<Datum, ExtraProps>['pointTooltip']
     >,
-    debugMesh = bumpSvgDefaultProps.debugMesh,
     role = bumpSvgDefaultProps.role,
 }: InnerBumpProps<Datum, ExtraProps>) => {
     const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
@@ -191,10 +189,10 @@ const InnerBump = <Datum extends BumpDatum, ExtraProps extends BumpSerieExtraPro
                         lineGenerator={lineGenerator}
                         yStep={yScale.step()}
                         isInteractive={isInteractive}
-                        onMouseEnter={onSerieMouseEnter}
-                        onMouseMove={onSerieMouseMove}
-                        onMouseLeave={onSerieMouseLeave}
-                        onClick={onSerieClick}
+                        onMouseEnter={onMouseEnter as BumpSerieMouseHandler<Datum, ExtraProps>}
+                        onMouseMove={onMouseMove as BumpSerieMouseHandler<Datum, ExtraProps>}
+                        onMouseLeave={onMouseLeave as BumpSerieMouseHandler<Datum, ExtraProps>}
+                        onClick={onClick as BumpSerieMouseHandler<Datum, ExtraProps>}
                         lineTooltip={lineTooltip}
                         useMesh={useMesh}
                     />
@@ -213,10 +211,10 @@ const InnerBump = <Datum extends BumpDatum, ExtraProps extends BumpSerieExtraPro
                 margin={margin}
                 setActivePointIds={setActivePointIds}
                 setActiveSerieIds={setActiveSerieIds}
-                onMouseEnter={onPointMouseEnter}
-                onMouseMove={onPointMouseMove}
-                onMouseLeave={onPointMouseLeave}
-                onClick={onPointClick}
+                onMouseEnter={onMouseEnter as BumpPointMouseHandler<Datum, ExtraProps>}
+                onMouseMove={onMouseMove as BumpPointMouseHandler<Datum, ExtraProps>}
+                onMouseLeave={onMouseLeave as BumpPointMouseHandler<Datum, ExtraProps>}
+                onClick={onClick as BumpPointMouseHandler<Datum, ExtraProps>}
                 tooltip={pointTooltip}
                 debug={debugMesh}
             />

diff --git a/packages/bump/src/bump/Line.tsx b/packages/bump/src/bump/Line.tsx
@@ -1,18 +1,24 @@
 import { useSpring, animated } from '@react-spring/web'
 import { Line as D3Line } from 'd3-shape'
 import { useAnimatedPath, useMotionConfig } from '@nivo/core'
-import { BumpCommonProps, BumpComputedSerie, BumpDatum, BumpSerieExtraProps } from './types'
+import {
+    BumpCommonProps,
+    BumpComputedSerie,
+    BumpDatum,
+    BumpSerieExtraProps,
+    BumpSerieMouseHandler,
+} from './types'
 import { useBumpSerieHandlers } from './hooks'
 
 interface LineProps<Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps> {
     serie: BumpComputedSerie<Datum, ExtraProps>
     lineGenerator: D3Line<[number, number | null]>
     yStep: number
     isInteractive: BumpCommonProps<Datum, ExtraProps>['isInteractive']
-    onMouseEnter?: BumpCommonProps<Datum, ExtraProps>['onSerieMouseEnter']
-    onMouseMove?: BumpCommonProps<Datum, ExtraProps>['onSerieMouseMove']
-    onMouseLeave?: BumpCommonProps<Datum, ExtraProps>['onSerieMouseLeave']
-    onClick?: BumpCommonProps<Datum, ExtraProps>['onSerieClick']
+    onMouseEnter?: BumpSerieMouseHandler<Datum, ExtraProps>
+    onMouseMove?: BumpSerieMouseHandler<Datum, ExtraProps>
+    onMouseLeave?: BumpSerieMouseHandler<Datum, ExtraProps>
+    onClick?: BumpSerieMouseHandler<Datum, ExtraProps>
     setActiveSerieIds: (serieIds: string[]) => void
     lineTooltip: BumpCommonProps<Datum, ExtraProps>['lineTooltip']
     useMesh: BumpCommonProps<Datum, ExtraProps>['useMesh']

diff --git a/packages/bump/src/bump/Mesh.tsx b/packages/bump/src/bump/Mesh.tsx
@@ -3,7 +3,13 @@ import { createElement, memo, useCallback } from 'react'
 import { Margin } from '@nivo/core'
 import { useTooltip } from '@nivo/tooltip'
 import { Mesh as BaseMesh } from '@nivo/voronoi'
-import { BumpCommonProps, BumpDatum, BumpPoint, BumpSerieExtraProps } from './types'
+import {
+    BumpCommonProps,
+    BumpDatum,
+    BumpPoint,
+    BumpPointMouseHandler,
+    BumpSerieExtraProps,
+} from './types'
 
 interface MeshProps<Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps> {
     points: BumpPoint<Datum, ExtraProps>[]
@@ -12,10 +18,10 @@ interface MeshProps<Datum extends BumpDatum, ExtraProps extends BumpSerieExtraPr
     margin: Margin
     setActivePointIds: (ids: string[]) => void
     setActiveSerieIds: (ids: string[]) => void
-    onMouseEnter?: BumpCommonProps<Datum, ExtraProps>['onPointMouseEnter']
-    onMouseMove?: BumpCommonProps<Datum, ExtraProps>['onPointMouseMove']
-    onMouseLeave?: BumpCommonProps<Datum, ExtraProps>['onPointMouseLeave']
-    onClick?: BumpCommonProps<Datum, ExtraProps>['onPointClick']
+    onMouseEnter?: BumpPointMouseHandler<Datum, ExtraProps>
+    onMouseMove?: BumpPointMouseHandler<Datum, ExtraProps>
+    onMouseLeave?: BumpPointMouseHandler<Datum, ExtraProps>
+    onClick?: BumpPointMouseHandler<Datum, ExtraProps>
     tooltip: BumpCommonProps<Datum, ExtraProps>['pointTooltip']
     debug: boolean
 }

diff --git a/packages/bump/src/bump/ResponsiveBump.tsx b/packages/bump/src/bump/ResponsiveBump.tsx
@@ -1,12 +1,12 @@
 import { ResponsiveWrapper } from '@nivo/core'
-import { BumpDatum, BumpSerieExtraProps, BumpSvgProps, DefaultBumpDatum } from './types'
+import { BumpDatum, BumpResponsiveProps, BumpSerieExtraProps, DefaultBumpDatum } from './types'
 import { Bump } from './Bump'
 
 export const ResponsiveBump = <
     Datum extends BumpDatum = DefaultBumpDatum,
     ExtraProps extends BumpSerieExtraProps = Record<string, never>
 >(
-    props: Omit<BumpSvgProps<Datum, ExtraProps>, 'width' | 'height'>
+    props: BumpResponsiveProps<Datum, ExtraProps>
 ) => (
     <ResponsiveWrapper>
         {({ width, height }) => (

diff --git a/packages/bump/src/bump/defaults.ts b/packages/bump/src/bump/defaults.ts
@@ -6,14 +6,10 @@ import PointTooltip from './PointTooltip'
 
 const commonDefaultProps: Omit<
     BumpCommonProps<DefaultBumpDatum, Record<string, unknown>>,
-    | 'onPointMouseEnter'
-    | 'onPointClick'
-    | 'onPointMouseMove'
-    | 'onPointMouseLeave'
-    | 'onSerieMouseEnter'
-    | 'onSerieClick'
-    | 'onSerieMouseMove'
-    | 'onSerieMouseLeave'
+    | 'onMouseEnter'
+    | 'onClick'
+    | 'onMouseMove'
+    | 'onMouseLeave'
     | 'margin'
     | 'theme'
     | 'axisRight'

diff --git a/packages/bump/src/bump/hooks.ts b/packages/bump/src/bump/hooks.ts
@@ -14,6 +14,8 @@ import {
     BumpLabel,
     BumpLabelData,
     BumpSerieExtraProps,
+    BumpPointMouseHandler,
+    BumpSerieMouseHandler,
 } from './types'
 import { computeSeries } from './compute'
 
@@ -321,10 +323,10 @@ export const useBumpSerieHandlers = <
 }: {
     serie: BumpComputedSerie<Datum, ExtraProps>
     isInteractive: BumpCommonProps<Datum, ExtraProps>['isInteractive']
-    onMouseEnter?: BumpCommonProps<Datum, ExtraProps>['onSerieMouseEnter']
-    onMouseMove?: BumpCommonProps<Datum, ExtraProps>['onSerieMouseMove']
-    onMouseLeave?: BumpCommonProps<Datum, ExtraProps>['onSerieMouseLeave']
-    onClick?: BumpCommonProps<Datum, ExtraProps>['onSerieClick']
+    onMouseEnter?: BumpSerieMouseHandler<Datum, ExtraProps>
+    onMouseMove?: BumpSerieMouseHandler<Datum, ExtraProps>
+    onMouseLeave?: BumpSerieMouseHandler<Datum, ExtraProps>
+    onClick?: BumpSerieMouseHandler<Datum, ExtraProps>
     setActiveSerieIds: (serieIds: string[]) => void
     lineTooltip: BumpCommonProps<Datum, ExtraProps>['lineTooltip']
 }) => {
@@ -390,10 +392,10 @@ export const useBumpPointHandlers = <
 }: {
     point: BumpPoint<Datum, ExtraProps>
     isInteractive: BumpCommonProps<Datum, ExtraProps>['isInteractive']
-    onMouseEnter?: BumpCommonProps<Datum, ExtraProps>['onPointMouseEnter']
-    onMouseMove?: BumpCommonProps<Datum, ExtraProps>['onPointMouseMove']
-    onMouseLeave?: BumpCommonProps<Datum, ExtraProps>['onPointMouseLeave']
-    onClick?: BumpCommonProps<Datum, ExtraProps>['onPointClick']
+    onMouseEnter?: BumpPointMouseHandler<Datum, ExtraProps>
+    onMouseMove?: BumpPointMouseHandler<Datum, ExtraProps>
+    onMouseLeave?: BumpPointMouseHandler<Datum, ExtraProps>
+    onClick?: BumpPointMouseHandler<Datum, ExtraProps>
     setActivePointIds: (pointIds: string[]) => void
     setActiveSerieIds: (pointIds: string[]) => void
     pointTooltip: BumpCommonProps<Datum, ExtraProps>['pointTooltip']

diff --git a/packages/bump/src/bump/types.ts b/packages/bump/src/bump/types.ts
@@ -133,7 +133,10 @@ export type BumpPointTooltip<
     point: BumpPoint<Datum, ExtraProps>
 }>
 
-export interface BumpCommonProps<Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps> {
+export interface BumpBaseCommonProps<
+    Datum extends BumpDatum,
+    ExtraProps extends BumpSerieExtraProps
+> {
     margin: Box
 
     interpolation: BumpInterpolation
@@ -175,29 +178,46 @@ export interface BumpCommonProps<Datum extends BumpDatum, ExtraProps extends Bum
 
     isInteractive: boolean
     defaultActiveSerieIds: string[]
-    onSerieMouseEnter: BumpSerieMouseHandler<Datum, ExtraProps>
-    onSerieMouseMove: BumpSerieMouseHandler<Datum, ExtraProps>
-    onSerieMouseLeave: BumpSerieMouseHandler<Datum, ExtraProps>
-    onSerieClick: BumpSerieMouseHandler<Datum, ExtraProps>
-    onPointMouseEnter: BumpPointMouseHandler<Datum, ExtraProps>
-    onPointMouseMove: BumpPointMouseHandler<Datum, ExtraProps>
-    onPointMouseLeave: BumpPointMouseHandler<Datum, ExtraProps>
-    onPointClick: BumpPointMouseHandler<Datum, ExtraProps>
     lineTooltip: BumpLineTooltip<Datum, ExtraProps>
     pointTooltip: BumpPointTooltip<Datum, ExtraProps>
+    role: string
+    layers: BumpLayer<Datum, ExtraProps>[]
+    renderWrapper: boolean
     useMesh: boolean
     debugMesh: boolean
-    role: string
+}
 
-    layers: BumpLayer<Datum, ExtraProps>[]
+interface BumpMeshCommonProps<Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps>
+    extends BumpBaseCommonProps<Datum, ExtraProps> {
+    useMesh: true
+    onMouseEnter?: BumpPointMouseHandler<Datum, ExtraProps>
+    onMouseMove?: BumpPointMouseHandler<Datum, ExtraProps>
+    onMouseLeave?: BumpPointMouseHandler<Datum, ExtraProps>
+    onClick?: BumpPointMouseHandler<Datum, ExtraProps>
+}
 
-    renderWrapper: boolean
+interface BumpSerieCommonProps<Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps>
+    extends BumpBaseCommonProps<Datum, ExtraProps> {
+    useMesh: false
+    onMouseEnter?: BumpSerieMouseHandler<Datum, ExtraProps>
+    onMouseMove?: BumpSerieMouseHandler<Datum, ExtraProps>
+    onMouseLeave?: BumpSerieMouseHandler<Datum, ExtraProps>
+    onClick?: BumpSerieMouseHandler<Datum, ExtraProps>
 }
 
-export type BumpSvgProps<Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps> = Partial<
-    BumpCommonProps<Datum, ExtraProps>
-> &
+export type BumpCommonProps<Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps> =
+    | BumpMeshCommonProps<Datum, ExtraProps>
+    | BumpSerieCommonProps<Datum, ExtraProps>
+
+export type BumpResponsiveProps<
+    Datum extends BumpDatum,
+    ExtraProps extends BumpSerieExtraProps
+> = BumpCommonProps<Datum, ExtraProps> &
     BumpDataProps<Datum, ExtraProps> & {
         pointComponent?: BumpPointComponent<Datum, ExtraProps>
-    } & Dimensions &
-    MotionProps
+    } & MotionProps
+
+export type BumpSvgProps<
+    Datum extends BumpDatum,
+    ExtraProps extends BumpSerieExtraProps
+> = BumpResponsiveProps<Datum, ExtraProps> & Dimensions
diff --git a/website/src/pages/bump/index.tsx b/website/src/pages/bump/index.tsx
@@ -157,6 +157,7 @@ const Bump = () => {
                         data={data}
                         {...properties}
                         theme={theme}
+                        useMesh={false}
                         onClick={serie =>
                             logAction({
                                 type: 'click',