feat(pie): use theme hook instead of prop for PieRadialLabels

plouc · Nov 4, 2020 · 7e41539 · 7e41539
1 parent 9797482
commit 7e41539
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 76 deletions.
diff --git a/packages/pie/src/Pie.js b/packages/pie/src/Pie.js
@@ -157,7 +157,6 @@ const Pie = ({
                         textXOffset={radialLabelsTextXOffset}
                         textColor={getInheritedColorGenerator(radialLabelsTextColor, theme)}
                         linkColor={getInheritedColorGenerator(radialLabelsLinkColor, theme)}
-                        theme={theme}
                     />
                 )}
                 {enableSlicesLabels && (

diff --git a/packages/pie/src/PieRadialLabels.js b/packages/pie/src/PieRadialLabels.js
@@ -6,92 +6,87 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import React, { Component, Fragment } from 'react'
+import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { line } from 'd3-shape'
-import { textPropsByEngine, axisThemePropType, labelsThemePropType } from '@nivo/core'
+import { textPropsByEngine, useTheme } from '@nivo/core'
 import { arcPropType } from './props'
 import { computeRadialLabels } from './compute'
 
 const lineGenerator = line()
     .x(d => d.x)
     .y(d => d.y)
 
-export default class PieRadialLabels extends Component {
-    static propTypes = {
-        arcs: PropTypes.arrayOf(arcPropType).isRequired,
-        label: PropTypes.func.isRequired,
-        skipAngle: PropTypes.number.isRequired,
-        radius: PropTypes.number.isRequired,
-        linkOffset: PropTypes.number.isRequired,
-        linkDiagonalLength: PropTypes.number.isRequired,
-        linkHorizontalLength: PropTypes.number.isRequired,
-        linkStrokeWidth: PropTypes.number.isRequired,
-        textXOffset: PropTypes.number.isRequired,
-        textColor: PropTypes.func.isRequired,
-        linkColor: PropTypes.func.isRequired,
-        theme: PropTypes.shape({
-            axis: axisThemePropType.isRequired,
-            labels: labelsThemePropType.isRequired,
-        }).isRequired,
-    }
+const PieRadialLabels = ({
+    arcs,
+    label,
+    radius,
+    skipAngle,
+    linkOffset,
+    linkDiagonalLength,
+    linkHorizontalLength,
+    linkStrokeWidth,
+    textXOffset,
+    textColor,
+    linkColor,
+}) => {
+    const theme = useTheme()
 
-    static defaultProps = {
-        skipAngle: 0,
-        linkOffset: 0,
-        linkDiagonalLength: 16,
-        linkHorizontalLength: 24,
-        linkStrokeWidth: 1,
-        textXOffset: 6,
-    }
+    const labels = computeRadialLabels(arcs, {
+        getLabel: label,
+        radius,
+        skipAngle,
+        linkOffset,
+        linkDiagonalLength,
+        linkHorizontalLength,
+        textXOffset,
+    })
 
-    render() {
-        const {
-            arcs,
-            label,
-            radius,
-            skipAngle,
-            linkOffset,
-            linkDiagonalLength,
-            linkHorizontalLength,
-            linkStrokeWidth,
-            textXOffset,
-            textColor,
-            linkColor,
-            theme,
-        } = this.props
+    return labels.map(label => (
+        <Fragment key={label.arc.data.id}>
+            <path
+                d={lineGenerator(label.line)}
+                fill="none"
+                style={{ fill: 'none', stroke: linkColor(label.arc, theme) }}
+                strokeWidth={linkStrokeWidth}
+            />
+            <g transform={`translate(${label.position.x}, ${label.position.y})`}>
+                <text
+                    textAnchor={textPropsByEngine.svg.align[label.align]}
+                    dominantBaseline="central"
+                    style={{
+                        ...theme.labels.text,
+                        fill: textColor(label.arc.data, theme),
+                    }}
+                >
+                    {label.text}
+                </text>
+            </g>
+        </Fragment>
+    ))
+}
 
-        const labels = computeRadialLabels(arcs, {
-            getLabel: label,
-            radius,
-            skipAngle,
-            linkOffset,
-            linkDiagonalLength,
-            linkHorizontalLength,
-            textXOffset,
-        })
+PieRadialLabels.propTypes = {
+    arcs: PropTypes.arrayOf(arcPropType).isRequired,
+    label: PropTypes.func.isRequired,
+    skipAngle: PropTypes.number.isRequired,
+    radius: PropTypes.number.isRequired,
+    linkOffset: PropTypes.number.isRequired,
+    linkDiagonalLength: PropTypes.number.isRequired,
+    linkHorizontalLength: PropTypes.number.isRequired,
+    linkStrokeWidth: PropTypes.number.isRequired,
+    textXOffset: PropTypes.number.isRequired,
+    textColor: PropTypes.func.isRequired,
+    linkColor: PropTypes.func.isRequired,
+}
 
-        return labels.map(label => (
-            <Fragment key={label.arc.data.id}>
-                <path
-                    d={lineGenerator(label.line)}
-                    fill="none"
-                    style={{ fill: 'none', stroke: linkColor(label.arc, theme) }}
-                    strokeWidth={linkStrokeWidth}
-                />
-                <g transform={`translate(${label.position.x}, ${label.position.y})`}>
-                    <text
-                        textAnchor={textPropsByEngine.svg.align[label.align]}
-                        dominantBaseline="central"
-                        style={{
-                            ...theme.labels.text,
-                            fill: textColor(label.arc.data, theme),
-                        }}
-                    >
-                        {label.text}
-                    </text>
-                </g>
-            </Fragment>
-        ))
-    }
+PieRadialLabels.defaultProps = {
+    skipAngle: 0,
+    linkOffset: 0,
+    linkDiagonalLength: 16,
+    linkHorizontalLength: 24,
+    linkStrokeWidth: 1,
+    textXOffset: 6,
 }
+
+export default PieRadialLabels