feat(pie): improve PieSlice component

plouc · Nov 4, 2020 · b2c2bf1 · b2c2bf1
1 parent dbab51b
commit b2c2bf1
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 41 deletions.
diff --git a/packages/pie/src/Pie.js b/packages/pie/src/Pie.js
@@ -124,8 +124,6 @@ const Pie = ({
                         key={datumWithArc.id}
                         datum={datumWithArc}
                         path={arcGenerator(datumWithArc.arc)}
-                        color={datumWithArc.color}
-                        fill={datumWithArc.fill ? datumWithArc.fill : datumWithArc.color}
                         borderWidth={borderWidth}
                         borderColor={borderColor(datumWithArc)}
                         tooltipFormat={tooltipFormat}

diff --git a/packages/pie/src/PieSlice.js b/packages/pie/src/PieSlice.js
@@ -6,16 +6,14 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import React from 'react'
+import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import { BasicTooltip, useTooltip } from '@nivo/tooltip'
 import { PiePropTypes, datumWithArcPropType } from './props'
 
 export const PieSlice = ({
     datum,
     path,
-    color,
-    fill,
     borderWidth,
     borderColor,
     isInteractive,
@@ -27,39 +25,49 @@ export const PieSlice = ({
 }) => {
     const { showTooltipFromEvent, hideTooltip } = useTooltip()
 
-    const handleTooltip = e =>
-        showTooltipFromEvent(
-            <BasicTooltip
-                id={datum.label || datum.id}
-                value={datum.formattedValue}
-                enableChip
-                color={color}
-                format={tooltipFormat}
-                renderContent={
-                    typeof tooltip === 'function' ? tooltip.bind(null, { color, ...datum }) : null
-                }
-            />,
-            e
-        )
-    const handleMouseEnter = e => {
-        onMouseEnter(datum, e)
-        handleTooltip(e)
-    }
-    const handleMouseLeave = e => {
-        onMouseLeave(datum, e)
-        hideTooltip(e)
-    }
+    const handleTooltip = useCallback(
+        e =>
+            showTooltipFromEvent(
+                <BasicTooltip
+                    id={datum.label || datum.id}
+                    value={datum.formattedValue}
+                    enableChip
+                    color={datum.color}
+                    format={tooltipFormat}
+                    renderContent={typeof tooltip === 'function' ? tooltip.bind(null, datum) : null}
+                />,
+                e
+            ),
+        [showTooltipFromEvent, datum, tooltipFormat, tooltip]
+    )
 
-    const handleClick = e => {
-        if (!onClick) return
+    const handleMouseEnter = useCallback(
+        e => {
+            onMouseEnter && onMouseEnter(datum, e)
+            handleTooltip(e)
+        },
+        [onMouseEnter, handleTooltip, datum]
+    )
 
-        onClick(datum, e)
-    }
+    const handleMouseLeave = useCallback(
+        e => {
+            onMouseLeave && onMouseLeave(datum, e)
+            hideTooltip(e)
+        },
+        [onMouseLeave, hideTooltip, datum]
+    )
+
+    const handleClick = useCallback(
+        e => {
+            onClick && onClick(datum, e)
+        },
+        [onClick, datum]
+    )
 
     return (
         <path
             d={path}
-            fill={fill}
+            fill={datum.fill || datum.color}
             strokeWidth={borderWidth}
             stroke={borderColor}
             onMouseEnter={isInteractive ? handleMouseEnter : undefined}
@@ -74,8 +82,6 @@ PieSlice.propTypes = {
     datum: datumWithArcPropType.isRequired,
 
     path: PropTypes.string.isRequired,
-    color: PropTypes.string.isRequired,
-    fill: PropTypes.string.isRequired,
     borderWidth: PiePropTypes.borderWidth,
     borderColor: PropTypes.string.isRequired,
 

diff --git a/packages/pie/src/props.js b/packages/pie/src/props.js
@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import PropTypes from 'prop-types'
-import { noop, radiansToDegrees } from '@nivo/core'
+import { radiansToDegrees } from '@nivo/core'
 import { ordinalColorsPropType, inheritedColorPropType } from '@nivo/colors'
 import { LegendPropShape } from '@nivo/legends'
 
@@ -87,9 +87,9 @@ export const PiePropTypes = {
 
     // interactivity
     isInteractive: PropTypes.bool,
-    onClick: PropTypes.func.isRequired,
-    onMouseEnter: PropTypes.func.isRequired,
-    onMouseLeave: PropTypes.func.isRequired,
+    onClick: PropTypes.func,
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func,
 
     // tooltip
     lockTooltip: PropTypes.bool.isRequired,
@@ -153,9 +153,6 @@ export const PieDefaultProps = {
 
     // interactivity
     isInteractive: true,
-    onClick: noop,
-    onMouseEnter: noop,
-    onMouseLeave: noop,
 
     // tooltip
     lockTooltip: true,