From edf2daf63f360fd1c4d78229ddff233bc2ddf080 Mon Sep 17 00:00:00 2001 From: plouc Date: Sat, 20 Jun 2020 20:11:31 +0900 Subject: [PATCH] feat(bump): replace react-motion by react-spring for Bump --- packages/bump/src/bump/AnimatedLine.js | 86 ---------------------- packages/bump/src/bump/Line.js | 53 ++++++++++---- packages/bump/src/bump/LinesLabels.js | 89 +++++++++-------------- packages/bump/src/bump/Point.js | 26 +++++-- packages/bump/src/bump/Points.js | 66 ++++------------- packages/bump/src/bump/StaticLine.js | 72 ------------------ packages/bump/src/bump/props.js | 3 +- website/src/data/components/bump/props.js | 2 +- website/src/pages/bump/index.js | 3 +- 9 files changed, 109 insertions(+), 291 deletions(-) delete mode 100644 packages/bump/src/bump/AnimatedLine.js delete mode 100644 packages/bump/src/bump/StaticLine.js diff --git a/packages/bump/src/bump/AnimatedLine.js b/packages/bump/src/bump/AnimatedLine.js deleted file mode 100644 index fd3cd49b7f..0000000000 --- a/packages/bump/src/bump/AnimatedLine.js +++ /dev/null @@ -1,86 +0,0 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ -import React, { memo, useMemo } from 'react' -import PropTypes from 'prop-types' -import { SmartMotion, useMotionConfig } from '@nivo/core' - -const AnimatedLine = ({ - serie, - lineGenerator, - yStep, - isInteractive, - onMouseEnter, - onMouseMove, - onMouseLeave, - onClick, -}) => { - const { springConfig } = useMotionConfig() - - const path = useMemo(() => lineGenerator(serie.linePoints), [lineGenerator, serie.linePoints]) - - return ( - ({ - d: spring(path, springConfig), - stroke: spring(serie.color, springConfig), - opacity: spring(serie.style.opacity, springConfig), - strokeWidth: spring(serie.style.lineWidth, springConfig), - })} - > - {interpolated => ( - <> - - {isInteractive && ( - - )} - - )} - - ) -} - -AnimatedLine.propTypes = { - serie: PropTypes.shape({ - id: PropTypes.string.isRequired, - color: PropTypes.string.isRequired, - linePoints: PropTypes.array.isRequired, - style: PropTypes.shape({ - lineWidth: PropTypes.number.isRequired, - opacity: PropTypes.number.isRequired, - }).isRequired, - }).isRequired, - lineGenerator: PropTypes.func.isRequired, - yStep: PropTypes.number.isRequired, - isInteractive: PropTypes.bool.isRequired, - onMouseEnter: PropTypes.func, - onMouseMove: PropTypes.func, - onMouseLeave: PropTypes.func, - onClick: PropTypes.func, -} - -export default memo(AnimatedLine) diff --git a/packages/bump/src/bump/Line.js b/packages/bump/src/bump/Line.js index b92cfaafba..4db1ee75ba 100644 --- a/packages/bump/src/bump/Line.js +++ b/packages/bump/src/bump/Line.js @@ -8,10 +8,9 @@ */ import React, { memo } from 'react' import PropTypes from 'prop-types' +import { useSpring, animated } from 'react-spring' import { useMotionConfig } from '@nivo/core' import { useSerieHandlers } from './hooks' -import AnimatedLine from './AnimatedLine' -import StaticLine from './StaticLine' const Line = ({ serie, @@ -36,25 +35,53 @@ const Line = ({ tooltip, }) - const { animate } = useMotionConfig() - const LineComponent = animate ? AnimatedLine : StaticLine + const { animate, config: springConfig } = useMotionConfig() - return React.createElement(LineComponent, { - serie, - lineGenerator, - yStep, - isInteractive, - onMouseEnter: handlers.onMouseEnter, - onMouseMove: handlers.onMouseMove, - onMouseLeave: handlers.onMouseLeave, - onClick: handlers.onClick, + const linePath = lineGenerator(serie.linePoints) + + const animatedProps = useSpring({ + path: linePath, + color: serie.color, + opacity: serie.style.opacity, + lineWidth: serie.style.lineWidth, + config: springConfig, + immediate: !animate, }) + + return ( + <> + + {isInteractive && ( + + )} + + ) } Line.propTypes = { serie: PropTypes.shape({ id: PropTypes.string.isRequired, color: PropTypes.string.isRequired, + linePoints: PropTypes.array.isRequired, style: PropTypes.shape({ lineWidth: PropTypes.number.isRequired, opacity: PropTypes.number.isRequired, diff --git a/packages/bump/src/bump/LinesLabels.js b/packages/bump/src/bump/LinesLabels.js index c9c17a50c3..41ad81cee0 100644 --- a/packages/bump/src/bump/LinesLabels.js +++ b/packages/bump/src/bump/LinesLabels.js @@ -8,14 +8,15 @@ */ 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 LinesLabels = ({ series, getLabel, position, padding, color }) => { const theme = useTheme() - const { animate, springConfig } = useMotionConfig() + const { animate, config: springConfig } = useMotionConfig() + const labels = useSeriesLabels({ series, getLabel, @@ -24,61 +25,37 @@ const LinesLabels = ({ series, getLabel, position, padding, color }) => { color, }) - if (!animate) { - return labels.map(label => { - return ( - - {label.label} - - ) - }) - } - - return ( - ({ - 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 }) => ( - - {label.label} - - ))} - - )} - + 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 ( + + {label.label} + + ) + }) } LinesLabels.propTypes = { diff --git a/packages/bump/src/bump/Point.js b/packages/bump/src/bump/Point.js index 0677cb7db9..1b65dcae3f 100644 --- a/packages/bump/src/bump/Point.js +++ b/packages/bump/src/bump/Point.js @@ -8,17 +8,31 @@ */ import React, { memo } from 'react' import PropTypes from 'prop-types' +import { useSpring, animated } from 'react-spring' +import { useMotionConfig } from '@nivo/core' const pointStyle = { pointerEvents: 'none' } const Point = ({ x, y, size, color, borderColor, borderWidth }) => { + const { animate, config: springConfig } = useMotionConfig() + + const animatedProps = useSpring({ + x, + y, + radius: size / 2, + color, + borderWidth, + config: springConfig, + immediate: !animate, + }) + return ( - Math.max(v, 0))} + fill={animatedProps.color} + strokeWidth={animatedProps.borderWidth} stroke={borderColor} style={pointStyle} /> diff --git a/packages/bump/src/bump/Points.js b/packages/bump/src/bump/Points.js index 8ceb1bcbc1..bb0f8565ec 100644 --- a/packages/bump/src/bump/Points.js +++ b/packages/bump/src/bump/Points.js @@ -8,62 +8,22 @@ */ import React, { memo } from 'react' import PropTypes from 'prop-types' -import { TransitionMotion, spring } from 'react-motion' -import { useMotionConfig } from '@nivo/core' const Points = ({ pointComponent, points }) => { - const { animate, springConfig } = useMotionConfig() - - if (!animate) { - return points.map(point => { - return React.createElement(pointComponent, { - key: point.id, - data: point.data, - x: point.x, - y: point.y, - isActive: point.isActive, - isInactive: point.isInactive, - size: point.style.size, - color: point.color, - borderColor: point.borderColor, - borderWidth: point.style.borderWidth, - }) + return points.map(point => { + return React.createElement(pointComponent, { + key: point.id, + data: point.data, + x: point.x, + y: point.y, + isActive: point.isActive, + isInactive: point.isInactive, + size: point.style.size, + color: point.color, + borderColor: point.borderColor, + borderWidth: point.style.borderWidth, }) - } - - return ( - ({ - key: point.id, - data: point, - style: { - x: spring(point.x, springConfig), - y: spring(point.y, springConfig), - size: spring(point.style.size, springConfig), - borderWidth: spring(point.style.borderWidth, springConfig), - }, - }))} - > - {interpolated => ( - <> - {interpolated.map(({ key, style, data: point }) => { - return React.createElement(pointComponent, { - key, - data: point.data, - x: style.x, - y: style.y, - isActive: point.isActive, - isInactive: point.isInactive, - size: Math.max(style.size, 0), - color: point.color, - borderColor: point.borderColor, - borderWidth: Math.max(style.borderWidth, 0), - }) - })} - - )} - - ) + }) } Points.propTypes = { diff --git a/packages/bump/src/bump/StaticLine.js b/packages/bump/src/bump/StaticLine.js deleted file mode 100644 index 7854b5d29b..0000000000 --- a/packages/bump/src/bump/StaticLine.js +++ /dev/null @@ -1,72 +0,0 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ -import React, { memo, useMemo } from 'react' -import PropTypes from 'prop-types' - -const StaticLine = ({ - serie, - lineGenerator, - yStep, - isInteractive, - onMouseEnter, - onMouseMove, - onMouseLeave, - onClick, -}) => { - const path = useMemo(() => lineGenerator(serie.linePoints), [lineGenerator, serie.linePoints]) - - return ( - <> - - {isInteractive && ( - - )} - - ) -} - -StaticLine.propTypes = { - serie: PropTypes.shape({ - id: PropTypes.string.isRequired, - color: PropTypes.string.isRequired, - linePoints: PropTypes.array.isRequired, - style: PropTypes.shape({ - lineWidth: PropTypes.number.isRequired, - opacity: PropTypes.number.isRequired, - }).isRequired, - }).isRequired, - lineGenerator: PropTypes.func.isRequired, - yStep: PropTypes.number.isRequired, - isInteractive: PropTypes.bool.isRequired, - onMouseEnter: PropTypes.func, - onMouseMove: PropTypes.func, - onMouseLeave: PropTypes.func, - onClick: PropTypes.func, -} - -export default memo(StaticLine) diff --git a/packages/bump/src/bump/props.js b/packages/bump/src/bump/props.js index 1600d94fdd..c86f59d752 100644 --- a/packages/bump/src/bump/props.js +++ b/packages/bump/src/bump/props.js @@ -131,6 +131,5 @@ export const BumpDefaultProps = { ...commonDefaultProps, pointComponent: Point, animate: true, - motionStiffness: 90, - motionDamping: 15, + motionConfig: 'gentle', } diff --git a/website/src/data/components/bump/props.js b/website/src/data/components/bump/props.js index ba62e7e1d0..d31bc80d07 100644 --- a/website/src/data/components/bump/props.js +++ b/website/src/data/components/bump/props.js @@ -393,7 +393,7 @@ const props = [ element and will receive the series's data. `, }, - ...motionProperties(['svg'], defaults), + ...motionProperties(['svg'], defaults, 'react-spring'), ] export const groups = groupProperties(props) diff --git a/website/src/pages/bump/index.js b/website/src/pages/bump/index.js index 843dc116a2..5df4896ad4 100644 --- a/website/src/pages/bump/index.js +++ b/website/src/pages/bump/index.js @@ -119,8 +119,7 @@ const initialProperties = { isInteractive: true, animate: BumpDefaultProps.animate, - motionStiffness: BumpDefaultProps.motionStiffness, - motionDamping: BumpDefaultProps.motionDamping, + motionConfig: BumpDefaultProps.motionConfig, } const Bump = () => {