feat(bump): replace react-motion by react-spring for AreaBump

packages/bump/package.json

@@ -26,14 +26,14 @@
   ],
   "dependencies": {
     "@nivo/colors": "0.62.0",
-    "@nivo/core": "0.62.0",
     "@nivo/legends": "0.62.0",
     "@nivo/tooltip": "0.62.0",
     "d3-shape": "^1.3.5",
     "lodash": "^4.17.11",
-    "react-motion": "^0.5.2"
+    "react-spring": "^8.0.27"
   },
   "peerDependencies": {
+    "@nivo/core": "0.62.0",
     "prop-types": ">= 15.5.10 < 16.0.0",
     "react": ">= 16.8.4 < 17.0.0"
   },

packages/bump/src/area-bump/Area.js

@@ -8,10 +8,9 @@
  */
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
+import { useSpring, animated } from 'react-spring'
 import { useMotionConfig, blendModePropType } from '@nivo/core'
 import { useSerieHandlers } from './hooks'
-import AnimatedArea from './AnimatedArea'
-import StaticArea from './StaticArea'
 
 const Area = ({
     serie,
@@ -36,27 +35,45 @@ const Area = ({
         tooltip,
     })
 
-    const { animate } = useMotionConfig()
-    const AreaComponent = animate ? AnimatedArea : StaticArea
+    const { animate, config: springConfig } = useMotionConfig()
 
-    return React.createElement(AreaComponent, {
-        serie,
-        areaGenerator,
-        blendMode,
-        onMouseEnter: handlers.onMouseEnter,
-        onMouseMove: handlers.onMouseMove,
-        onMouseLeave: handlers.onMouseLeave,
-        onClick: handlers.onClick,
+    const animatedProps = useSpring({
+        path: areaGenerator(serie.areaPoints),
+        color: serie.color,
+        fillOpacity: serie.style.fillOpacity,
+        stroke: serie.style.borderColor,
+        strokeOpacity: serie.style.borderOpacity,
+        config: springConfig,
+        immediate: !animate,
     })
+
+    return (
+        <animated.path
+            d={animatedProps.path}
+            fill={serie.fill ? serie.fill : animatedProps.color}
+            fillOpacity={animatedProps.fillOpacity}
+            stroke={animatedProps.stroke}
+            strokeWidth={serie.style.borderWidth}
+            strokeOpacity={animatedProps.strokeOpacity}
+            style={{ mixBlendMode: blendMode }}
+            onMouseEnter={handlers.onMouseEnter}
+            onMouseMove={handlers.onMouseMove}
+            onMouseLeave={handlers.onMouseLeave}
+            onClick={handlers.onClick}
+        />
+    )
 }
 
 Area.propTypes = {
     serie: PropTypes.shape({
         id: PropTypes.string.isRequired,
         color: PropTypes.string.isRequired,
+        fill: PropTypes.string,
+        areaPoints: PropTypes.array.isRequired,
         style: PropTypes.shape({
             fillOpacity: PropTypes.number.isRequired,
             borderWidth: PropTypes.number.isRequired,
+            borderColor: PropTypes.string.isRequired,
             borderOpacity: PropTypes.number.isRequired,
         }).isRequired,
     }).isRequired,

packages/bump/src/area-bump/AreaBump.js

@@ -6,7 +6,7 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import React, { memo, useState, Fragment } from 'react'
+import React, { memo, useState, Fragment, useMemo } from 'react'
 import { bindDefs, withContainer, useDimensions, SvgWrapper } from '@nivo/core'
 import { Grid, Axes } from '@nivo/axes'
 import { AreaBumpPropTypes, AreaBumpDefaultProps } from './props'
@@ -94,7 +94,11 @@ const AreaBump = props => {
         current: currentSerie,
     })
 
-    const boundDefs = bindDefs(defs, series, fill, { targetKey: 'color' })
+    const boundDefs = useMemo(() => bindDefs(defs, series, fill, { targetKey: 'fill' }), [
+        defs,
+        series,
+        fill,
+    ])
 
     const layerById = {
         grid: enableGridX && (

packages/bump/src/area-bump/AreasLabels.js

@@ -8,76 +8,53 @@
  */
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
-import { TransitionMotion, spring } from 'react-motion'
+import { useSprings, animated } from 'react-spring'
 import { useTheme, useMotionConfig } from '@nivo/core'
 import { inheritedColorPropType } from '@nivo/colors'
 import { useSeriesLabels } from './hooks'
 
 const AreasLabels = ({ series, position, padding, color }) => {
     const theme = useTheme()
-    const { animate, springConfig } = useMotionConfig()
+    const { animate, config: springConfig } = useMotionConfig()
+
     const labels = useSeriesLabels({
         series,
         position,
         padding,
         color,
     })
 
-    if (!animate) {
-        return labels.map(label => {
-            return (
-                <text
-                    key={label.id}
-                    x={label.x}
-                    y={label.y}
-                    textAnchor={label.textAnchor}
-                    dominantBaseline="central"
-                    opacity={label.opacity}
-                    style={{
-                        ...theme.labels.text,
-                        fill: label.color,
-                    }}
-                >
-                    {label.id}
-                </text>
-            )
-        })
-    }
-
-    return (
-        <TransitionMotion
-            styles={labels.map(label => ({
-                key: label.id,
-                data: label,
-                style: {
-                    x: spring(label.x, springConfig),
-                    y: spring(label.y, springConfig),
-                    opacity: spring(label.opacity, springConfig),
-                },
-            }))}
-        >
-            {interpolatedStyles => (
-                <>
-                    {interpolatedStyles.map(({ key, style, data: label }) => (
-                        <text
-                            key={key}
-                            x={style.x}
-                            y={style.y}
-                            textAnchor={label.textAnchor}
-                            dominantBaseline="central"
-                            opacity={style.opacity}
-                            style={{
-                                ...theme.labels.text,
-                                fill: label.color,
-                            }}
-                        >
-                            {label.id}
-                        </text>
-                    ))}
-                </>
-            )}
-        </TransitionMotion>
+    const springs = useSprings(
+        labels.length,
+        labels.map(label => ({
+            x: label.x,
+            y: label.y,
+            opacity: label.opacity,
+            config: springConfig,
+            immediate: !animate,
+        }))
     )
+
+    return springs.map((animatedProps, index) => {
+        const label = labels[index]
+
+        return (
+            <animated.text
+                key={label.id}
+                x={animatedProps.x}
+                y={animatedProps.y}
+                textAnchor={label.textAnchor}
+                dominantBaseline="central"
+                opacity={animatedProps.opacity}
+                style={{
+                    ...theme.labels.text,
+                    fill: label.color,
+                }}
+            >
+                {label.id}
+            </animated.text>
+        )
+    })
 }
 
 AreasLabels.propTypes = {

packages/bump/src/area-bump/props.js

@@ -128,6 +128,5 @@ const commonDefaultProps = {
 export const AreaBumpDefaultProps = {
     ...commonDefaultProps,
     animate: true,
-    motionStiffness: 90,
-    motionDamping: 15,
+    motionConfig: 'gentle',
 }

website/src/data/components/area-bump/props.js

@@ -352,7 +352,7 @@ const props = [
             element and will receive the series's data.
         `,
     },
-    ...motionProperties(['svg'], defaults),
+    ...motionProperties(['svg'], defaults, 'react-spring'),
 ]
 
 export const groups = groupProperties(props)

website/src/pages/area-bump/index.js

@@ -107,8 +107,7 @@ const initialProperties = {
     isInteractive: true,
 
     animate: AreaBumpDefaultProps.animate,
-    motionStiffness: AreaBumpDefaultProps.motionStiffness,
-    motionDamping: AreaBumpDefaultProps.motionDamping,
+    motionConfig: AreaBumpDefaultProps.motionConfig,
 }
 
 const Bump = () => {