feat(pie): use Container instead of withContainer HOC

plouc · Dec 18, 2020 · 0fb7756 · 0fb7756
1 parent 3baba4c
commit 0fb7756
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 22 deletions.
diff --git a/packages/pie/src/Pie.tsx b/packages/pie/src/Pie.tsx
@@ -1,11 +1,10 @@
 import React, { ReactNode, Fragment, createElement } from 'react'
 import {
-    // @ts-ignore
-    withContainer,
-    SvgWrapper,
     // @ts-ignore
     bindDefs,
     useDimensions,
+    Container,
+    SvgWrapper,
 } from '@nivo/core'
 import { InheritedColorConfig } from '@nivo/colors'
 import { RadialLabels } from './RadialLabels'
@@ -16,7 +15,7 @@ import { ComputedDatum, PieLayer, PieSvgProps, PieLayerId } from './types'
 import { defaultProps } from './props'
 import { Slices } from './Slices'
 
-const Pie = <RawDatum,>({
+const InnerPie = <RawDatum,>({
     data,
     id = defaultProps.id,
     value = defaultProps.value,
@@ -226,4 +225,19 @@ const Pie = <RawDatum,>({
     )
 }
 
-export default withContainer(Pie) as <RawDatum>(props: PieSvgProps<RawDatum>) => JSX.Element
+export const Pie = <RawDatum,>({
+    isInteractive = defaultProps.isInteractive,
+    animate = defaultProps.animate,
+    motionConfig = defaultProps.motionConfig,
+    theme,
+    ...otherProps
+}: PieSvgProps<RawDatum>) => (
+    <Container
+        isInteractive={isInteractive}
+        animate={animate}
+        motionConfig={motionConfig}
+        theme={theme}
+    >
+        <InnerPie<RawDatum> isInteractive={isInteractive} {...otherProps} />
+    </Container>
+)
diff --git a/packages/pie/src/PieCanvas.tsx b/packages/pie/src/PieCanvas.tsx
@@ -6,8 +6,7 @@ import {
     textPropsByEngine,
     useDimensions,
     useTheme,
-    // @ts-ignore
-    withContainer,
+    Container,
     Theme,
 } from '@nivo/core'
 // @ts-ignore
@@ -66,8 +65,7 @@ const drawRadialLabels = <RawDatum, >(
     })
 }
 
-// prettier-ignore
-const PieCanvas = <RawDatum, >({
+const InnerPieCanvas = <RawDatum,>({
     data,
     id = defaultProps.id,
     value = defaultProps.value,
@@ -138,7 +136,15 @@ const PieCanvas = <RawDatum, >({
         colors,
     })
 
-    const { dataWithArc, arcGenerator, centerX, centerY, radius, innerRadius, setActiveId } = usePieFromBox<RawDatum>({
+    const {
+        dataWithArc,
+        arcGenerator,
+        centerX,
+        centerY,
+        radius,
+        innerRadius,
+        setActiveId,
+    } = usePieFromBox<RawDatum>({
         data: normalizedData,
         width: innerWidth,
         height: innerHeight,
@@ -194,9 +200,8 @@ const PieCanvas = <RawDatum, >({
         ctx.fillRect(0, 0, outerWidth, outerHeight)
 
         ctx.save()
-        ctx.translate(margin.left, margin.top);
-
-        (arcGenerator as any).context(ctx)
+        ctx.translate(margin.left, margin.top)
+        ;(arcGenerator as any).context(ctx)
 
         ctx.save()
         ctx.translate(centerX, centerY)
@@ -331,6 +336,12 @@ const PieCanvas = <RawDatum, >({
     )
 }
 
-export default withContainer(PieCanvas) as <RawDatum>(
-    props: PieCanvasProps<RawDatum>
-) => JSX.Element
+export const PieCanvas = <RawDatum,>({
+    isInteractive = defaultProps.isInteractive,
+    theme,
+    ...otherProps
+}: PieCanvasProps<RawDatum>) => (
+    <Container isInteractive={isInteractive} theme={theme}>
+        <InnerPieCanvas<RawDatum> isInteractive={isInteractive} {...otherProps} />
+    </Container>
+)
diff --git a/packages/pie/src/ResponsivePie.tsx b/packages/pie/src/ResponsivePie.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
-// @ts-ignore
 import { ResponsiveWrapper } from '@nivo/core'
-import Pie from './Pie'
+import { Pie } from './Pie'
 import { PieSvgProps } from './types'
 
 export const ResponsivePie = <RawDatum,>(

diff --git a/packages/pie/src/ResponsivePieCanvas.tsx b/packages/pie/src/ResponsivePieCanvas.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
-// @ts-ignore
 import { ResponsiveWrapper } from '@nivo/core'
-import PieCanvas from './PieCanvas'
+import { PieCanvas } from './PieCanvas'
 import { PieCanvasProps } from './types'
 
 export const ResponsivePieCanvas = <RawDatum,>(

diff --git a/packages/pie/src/index.ts b/packages/pie/src/index.ts
@@ -1,6 +1,6 @@
-export { default as Pie } from './Pie'
+export * from './Pie'
 export * from './ResponsivePie'
-export { default as PieCanvas } from './PieCanvas'
+export * from './PieCanvas'
 export * from './ResponsivePieCanvas'
 export * from './props'
 export * from './hooks'