fix(axes): remove undefined cursor style prop from AxisTick

plouc · Apr 30, 2021 · eb969df · eb969df
1 parent b4372cf
commit eb969df
Showing 1 changed file with 14 additions and 10 deletions.
diff --git a/packages/axes/src/components/AxisTick.tsx b/packages/axes/src/components/AxisTick.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { animated } from 'react-spring'
 import { useTheme } from '@nivo/core'
 import { AxisTickProps } from '../types'
@@ -20,17 +20,21 @@ export const AxisTick = <Value extends string | number | Date>({
         value = format(value)
     }
 
-    const gStyle = {
-        cursor: onClick ? 'pointer' : undefined,
-        opacity: animatedProps.opacity,
-    }
+    const props = useMemo(() => {
+        const style = { opacity: animatedProps.opacity }
+
+        if (!onClick) {
+            return { style }
+        }
+
+        return {
+            style: { ...style, cursor: 'pointer' },
+            onClick: (event: React.MouseEvent<SVGGElement, MouseEvent>) => onClick(event, value),
+        }
+    }, [animatedProps.opacity, onClick, value])
 
     return (
-        <animated.g
-            transform={animatedProps.transform}
-            {...(onClick ? { onClick: e => onClick(e, value) } : {})}
-            style={gStyle}
-        >
+        <animated.g transform={animatedProps.transform} {...props}>
             <line x1={0} x2={lineX} y1={0} y2={lineY} style={theme.axis.ticks.line} />
             <animated.text
                 dominantBaseline={textBaseline}