fix(motion): replace deprecated method with the new helper

plouc · Nov 16, 2020 · 57b27d8 · 57b27d8
1 parent 25aa18f
commit 57b27d8
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 12 deletions.
diff --git a/packages/bump/src/bump/Point.js b/packages/bump/src/bump/Point.js
@@ -8,7 +8,7 @@
  */
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
-import { useSpring, animated } from 'react-spring'
+import { useSpring, animated, to } from 'react-spring'
 import { useMotionConfig } from '@nivo/core'
 
 const pointStyle = { pointerEvents: 'none' }
@@ -30,7 +30,7 @@ const Point = ({ x, y, size, color, borderColor, borderWidth }) => {
         <animated.circle
             cx={animatedProps.x}
             cy={animatedProps.y}
-            r={animatedProps.radius.interpolate(v => Math.max(v, 0))}
+            r={to(animatedProps.radius, v => Math.max(v, 0))}
             fill={animatedProps.color}
             strokeWidth={animatedProps.borderWidth}
             stroke={borderColor}

diff --git a/packages/core/src/hooks/useAnimatedPath.js b/packages/core/src/hooks/useAnimatedPath.js
@@ -1,7 +1,7 @@
 import { interpolateString } from 'd3-interpolate'
 import { useEffect, useMemo, useRef } from 'react'
+import { useSpring, to } from 'react-spring'
 import { useMotionConfig } from '../motion'
-import { useSpring } from 'react-spring'
 
 const usePrevious = value => {
     const ref = useRef()
@@ -27,5 +27,5 @@ export const useAnimatedPath = path => {
         immediate: !animate,
     })
 
-    return value.interpolate(interpolator)
+    return to(value, interpolator)
 }
diff --git a/packages/radar/src/RadarGridLevels.js b/packages/radar/src/RadarGridLevels.js
@@ -9,7 +9,7 @@
 import React, { memo, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { lineRadial, curveLinearClosed } from 'd3-shape'
-import { animated, useSpring } from 'react-spring'
+import { animated, useSpring, to } from 'react-spring'
 import { useTheme, useAnimatedPath, useMotionConfig } from '@nivo/core'
 
 const RadarGridLevelCircular = memo(({ radius }) => {
@@ -25,7 +25,7 @@ const RadarGridLevelCircular = memo(({ radius }) => {
     return (
         <animated.circle
             fill="none"
-            r={animatedProps.radius.interpolate(value => Math.max(value, 0))}
+            r={to(animatedProps.radius, value => Math.max(value, 0))}
             {...theme.grid.line}
         />
     )

diff --git a/packages/sankey/src/SankeyNodesItem.js b/packages/sankey/src/SankeyNodesItem.js
@@ -8,7 +8,7 @@
  */
 import React, { memo, useCallback, useMemo } from 'react'
 import PropTypes from 'prop-types'
-import { useSpring, animated } from 'react-spring'
+import { useSpring, animated, to } from 'react-spring'
 import { useMotionConfig } from '@nivo/core'
 import { BasicTooltip, useTooltip } from '@nivo/tooltip'
 
@@ -80,8 +80,8 @@ const SankeyNodesItem = ({
         <animated.rect
             x={animatedProps.x}
             y={animatedProps.y}
-            width={animatedProps.width.interpolate(v => Math.max(v, 0))}
-            height={animatedProps.height.interpolate(v => Math.max(v, 0))}
+            width={to(animatedProps.width, v => Math.max(v, 0))}
+            height={to(animatedProps.height, v => Math.max(v, 0))}
             fill={animatedProps.color}
             fillOpacity={animatedProps.opacity}
             strokeWidth={borderWidth}

diff --git a/packages/treemap/src/TreeMapNode.js b/packages/treemap/src/TreeMapNode.js
@@ -8,7 +8,7 @@
  */
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
-import { animated } from 'react-spring'
+import { animated, to } from 'react-spring'
 import { useTheme } from '@nivo/core'
 
 const TreeMapNode = ({
@@ -31,8 +31,8 @@ const TreeMapNode = ({
     return (
         <animated.g transform={animatedProps.transform}>
             <animated.rect
-                width={animatedProps.width.interpolate(v => Math.max(v, 0))}
-                height={animatedProps.height.interpolate(v => Math.max(v, 0))}
+                width={to(animatedProps.width, v => Math.max(v, 0))}
+                height={to(animatedProps.height, v => Math.max(v, 0))}
                 fill={node.fill ? node.fill : animatedProps.color}
                 strokeWidth={borderWidth}
                 stroke={node.borderColor}