From ca45249082b81a9c37194a2ca7c695865a2c1592 Mon Sep 17 00:00:00 2001 From: plouc Date: Sat, 20 Jun 2020 18:54:40 +0900 Subject: [PATCH] feat(line): replace react-motion by react-spring --- packages/line/package.json | 5 +- packages/line/src/Areas.js | 78 ++++++++----------- packages/line/src/LinesItem.js | 41 +++------- packages/line/src/Points.js | 77 +++++------------- .../tests/__snapshots__/Line.test.js.snap | 6 +- website/src/data/components/line/props.js | 2 +- website/src/pages/line/index.js | 3 +- 7 files changed, 67 insertions(+), 145 deletions(-) diff --git a/packages/line/package.json b/packages/line/package.json index a57b8137c4..9a70496081 100644 --- a/packages/line/package.json +++ b/packages/line/package.json @@ -26,16 +26,15 @@ "@nivo/annotations": "0.62.0", "@nivo/axes": "0.62.0", "@nivo/colors": "0.62.0", - "@nivo/core": "0.62.0", "@nivo/legends": "0.62.0", "@nivo/scales": "0.62.0", "@nivo/tooltip": "0.62.0", "@nivo/voronoi": "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" }, diff --git a/packages/line/src/Areas.js b/packages/line/src/Areas.js index ff8ca75740..9787d8c438 100644 --- a/packages/line/src/Areas.js +++ b/packages/line/src/Areas.js @@ -8,58 +8,44 @@ */ import React, { memo } from 'react' import PropTypes from 'prop-types' -import { useMotionConfig, SmartMotion, blendModePropType } from '@nivo/core' +import { useSprings, animated } from 'react-spring' +import { useMotionConfig, blendModePropType } from '@nivo/core' const Areas = ({ areaGenerator, areaOpacity, areaBlendMode, lines }) => { - const { animate, springConfig } = useMotionConfig() + const { animate, config: springConfig } = useMotionConfig() - if (animate !== true) { - return ( - - {lines - .slice(0) - .reverse() - .map(({ id, data, color: areaColor, fill }) => ( - d.position))} - fill={fill ? fill : areaColor} - fillOpacity={areaOpacity} - strokeWidth={0} - style={{ - mixBlendMode: areaBlendMode, - }} - /> - ))} - - ) - } + const computedLines = lines.slice(0).reverse() + + const springs = useSprings( + computedLines.length, + computedLines.map(line => { + return { + path: areaGenerator(line.data.map(d => d.position)), + color: line.color, + config: springConfig, + immediate: !animate, + } + }) + ) return ( - {lines - .slice(0) - .reverse() - .map(({ id, data, color: areaColor, fill }) => ( - ({ - d: spring(areaGenerator(data.map(d => d.position)), springConfig), - fill: spring(areaColor, springConfig), - })} - > - {style => ( - - )} - - ))} + {springs.map((animatedProps, index) => { + const line = computedLines[index] + + return ( + + ) + })} ) } diff --git a/packages/line/src/LinesItem.js b/packages/line/src/LinesItem.js index e55d7c770f..764a114f1f 100644 --- a/packages/line/src/LinesItem.js +++ b/packages/line/src/LinesItem.js @@ -8,47 +8,24 @@ */ import React, { memo } from 'react' import PropTypes from 'prop-types' +import { useSpring, animated } from 'react-spring' import { useMotionConfig } from '@nivo/core' -import { SmartMotion } from '@nivo/core' -const LinesItem = ({ lineGenerator, id, points, color, thickness }) => { - const { animate, springConfig } = useMotionConfig() +const LinesItem = ({ lineGenerator, points, color, thickness }) => { + const { animate, config: springConfig } = useMotionConfig() - if (animate !== true) { - return ( - - ) - } + const animatedProps = useSpring({ + path: lineGenerator(points), + config: springConfig, + immediate: !animate, + }) return ( - ({ - d: spring(lineGenerator(points), springConfig), - stroke: spring(color, springConfig), - })} - > - {style => ( - - )} - + ) } LinesItem.propTypes = { - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, points: PropTypes.arrayOf( PropTypes.shape({ x: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), diff --git a/packages/line/src/Points.js b/packages/line/src/Points.js index 71411e2b33..4a96c08b78 100644 --- a/packages/line/src/Points.js +++ b/packages/line/src/Points.js @@ -8,12 +8,10 @@ */ import React, { memo } from 'react' import PropTypes from 'prop-types' -import { TransitionMotion, spring } from 'react-motion' -import { useMotionConfig, getLabelGenerator, DotsItem, useTheme } from '@nivo/core' +import { getLabelGenerator, DotsItem, useTheme } from '@nivo/core' const Points = ({ points, symbol, size, borderWidth, enableLabel, label, labelYOffset }) => { const theme = useTheme() - const { animate, springConfig } = useMotionConfig() const getLabel = getLabelGenerator(label) const mappedPoints = points.map(point => { @@ -30,62 +28,25 @@ const Points = ({ points, symbol, size, borderWidth, enableLabel, label, labelYO return mappedPoint }) - if (animate !== true) { - return ( - - {mappedPoints.map(point => ( - - ))} - - ) - } - return ( - { - return { - key: point.id, - data: point, - style: { - x: spring(point.x, springConfig), - y: spring(point.y, springConfig), - size: spring(size, springConfig), - }, - } - })} - > - {interpolatedStyles => ( - - {interpolatedStyles.map(({ key, style, data: point }) => ( - - ))} - - )} - + + {mappedPoints.map(point => ( + + ))} + ) } diff --git a/packages/line/tests/__snapshots__/Line.test.js.snap b/packages/line/tests/__snapshots__/Line.test.js.snap index 58861ab2e9..88f2358556 100644 --- a/packages/line/tests/__snapshots__/Line.test.js.snap +++ b/packages/line/tests/__snapshots__/Line.test.js.snap @@ -8429,7 +8429,7 @@ exports[`should render a basic line chart 1`] = ` @@ -9348,13 +9348,13 @@ exports[`should support multiple lines 1`] = ` diff --git a/website/src/data/components/line/props.js b/website/src/data/components/line/props.js index 6568ea6579..d5fad6c607 100644 --- a/website/src/data/components/line/props.js +++ b/website/src/data/components/line/props.js @@ -623,7 +623,7 @@ const props = [ }, }, }, - ...motionProperties(['svg'], defaults), + ...motionProperties(['svg'], defaults, 'react-spring'), ] export const groups = groupProperties(props) diff --git a/website/src/pages/line/index.js b/website/src/pages/line/index.js index 4e7d2edec1..6cf6d79462 100644 --- a/website/src/pages/line/index.js +++ b/website/src/pages/line/index.js @@ -50,8 +50,7 @@ const initialProperties = { }, ], animate: true, - motionStiffness: 90, - motionDamping: 15, + motionConfig: 'default', } const linearData = [