fix(bump): switch to useAnimatedPath hook

plouc · Oct 22, 2020 · 5ddb2ec · 5ddb2ec
1 parent 6c8b767
commit 5ddb2ec
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/packages/bump/src/area-bump/Area.js b/packages/bump/src/area-bump/Area.js
@@ -9,7 +9,7 @@
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
 import { useSpring, animated } from 'react-spring'
-import { useMotionConfig, blendModePropType } from '@nivo/core'
+import { useAnimatedPath, useMotionConfig, blendModePropType } from '@nivo/core'
 import { useSerieHandlers } from './hooks'
 
 const Area = ({
@@ -37,8 +37,8 @@ const Area = ({
 
     const { animate, config: springConfig } = useMotionConfig()
 
+    const animatedPath = useAnimatedPath(areaGenerator(serie.areaPoints))
     const animatedProps = useSpring({
-        path: areaGenerator(serie.areaPoints),
         color: serie.color,
         fillOpacity: serie.style.fillOpacity,
         stroke: serie.style.borderColor,
@@ -49,7 +49,7 @@ const Area = ({
 
     return (
         <animated.path
-            d={animatedProps.path}
+            d={animatedPath}
             fill={serie.fill ? serie.fill : animatedProps.color}
             fillOpacity={animatedProps.fillOpacity}
             stroke={animatedProps.stroke}

diff --git a/packages/bump/src/bump/Line.js b/packages/bump/src/bump/Line.js
@@ -9,7 +9,7 @@
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
 import { useSpring, animated } from 'react-spring'
-import { useMotionConfig } from '@nivo/core'
+import { useAnimatedPath, useMotionConfig } from '@nivo/core'
 import { useSerieHandlers } from './hooks'
 
 const Line = ({
@@ -39,8 +39,8 @@ const Line = ({
 
     const linePath = lineGenerator(serie.linePoints)
 
+    const animatedPath = useAnimatedPath(linePath)
     const animatedProps = useSpring({
-        path: linePath,
         color: serie.color,
         opacity: serie.style.opacity,
         lineWidth: serie.style.lineWidth,
@@ -52,7 +52,7 @@ const Line = ({
         <>
             <animated.path
                 fill="none"
-                d={animatedProps.path}
+                d={animatedPath}
                 stroke={animatedProps.color}
                 strokeWidth={animatedProps.lineWidth}
                 strokeLinecap="round"