Skip to content

Commit

Permalink
feat(line): replace react-motion by react-spring
Browse files Browse the repository at this point in the history
  • Loading branch information
@plouc
plouc committed Jun 20, 2020
1 parent 6e5c7f9 commit ca45249
Show file tree
Hide file tree
Showing 7 changed files with 67 additions and 145 deletions.
5 changes: 2 additions & 3 deletions packages/line/package.json
View file
Expand Up @@ -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"
},
Expand Down
78 changes: 32 additions & 46 deletions packages/line/src/Areas.js
View file
Expand Up @@ -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 (
<g>
{lines
.slice(0)
.reverse()
.map(({ id, data, color: areaColor, fill }) => (
<path
key={id}
d={areaGenerator(data.map(d => d.position))}
fill={fill ? fill : areaColor}
fillOpacity={areaOpacity}
strokeWidth={0}
style={{
mixBlendMode: areaBlendMode,
}}
/>
))}
</g>
)
}
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 (
<g>
{lines
.slice(0)
.reverse()
.map(({ id, data, color: areaColor, fill }) => (
<SmartMotion
key={id}
style={spring => ({
d: spring(areaGenerator(data.map(d => d.position)), springConfig),
fill: spring(areaColor, springConfig),
})}
>
{style => (
<path
key={id}
d={style.d}
fill={fill ? fill : areaColor}
fillOpacity={areaOpacity}
strokeWidth={0}
style={{ mixBlendMode: areaBlendMode }}
/>
)}
</SmartMotion>
))}
{springs.map((animatedProps, index) => {
const line = computedLines[index]

return (
<animated.path
key={line.id}
d={animatedProps.path}
fill={line.fill ? line.fill : animatedProps.color}
fillOpacity={areaOpacity}
strokeWidth={0}
style={{
mixBlendMode: areaBlendMode,
}}
/>
)
})}
</g>
)
}
Expand Down
41 changes: 9 additions & 32 deletions packages/line/src/LinesItem.js
View file
Expand Up @@ -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 (
<path
key={id}
d={lineGenerator(points)}
fill="none"
strokeWidth={thickness}
stroke={color}
/>
)
}
const animatedProps = useSpring({
path: lineGenerator(points),
config: springConfig,
immediate: !animate,
})

return (
<SmartMotion
key={id}
style={spring => ({
d: spring(lineGenerator(points), springConfig),
stroke: spring(color, springConfig),
})}
>
{style => (
<path
key={id}
d={style.d}
fill="none"
strokeWidth={thickness}
stroke={style.stroke}
/>
)}
</SmartMotion>
<animated.path d={animatedProps.path} fill="none" strokeWidth={thickness} stroke={color} />
)
}

LinesItem.propTypes = {
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
points: PropTypes.arrayOf(
PropTypes.shape({
x: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
Expand Down
77 changes: 19 additions & 58 deletions packages/line/src/Points.js
View file
Expand Up @@ -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 => {
Expand All @@ -30,62 +28,25 @@ const Points = ({ points, symbol, size, borderWidth, enableLabel, label, labelYO
return mappedPoint
})

if (animate !== true) {
return (
<g>
{mappedPoints.map(point => (
<DotsItem
key={point.id}
x={point.x}
y={point.y}
datum={point.datum}
symbol={symbol}
size={size}
color={point.fill}
borderWidth={borderWidth}
borderColor={point.stroke}
label={point.label}
labelYOffset={labelYOffset}
theme={theme}
/>
))}
</g>
)
}

return (
<TransitionMotion
styles={mappedPoints.map(point => {
return {
key: point.id,
data: point,
style: {
x: spring(point.x, springConfig),
y: spring(point.y, springConfig),
size: spring(size, springConfig),
},
}
})}
>
{interpolatedStyles => (
<g>
{interpolatedStyles.map(({ key, style, data: point }) => (
<DotsItem
key={key}
{...style}
symbol={symbol}
datum={point.datum}
color={point.fill}
borderWidth={borderWidth}
borderColor={point.stroke}
label={point.label}
labelYOffset={labelYOffset}
theme={theme}
/>
))}
</g>
)}
</TransitionMotion>
<g>
{mappedPoints.map(point => (
<DotsItem
key={point.id}
x={point.x}
y={point.y}
datum={point.datum}
symbol={symbol}
size={size}
color={point.fill}
borderWidth={borderWidth}
borderColor={point.stroke}
label={point.label}
labelYOffset={labelYOffset}
theme={theme}
/>
))}
</g>
)
}

Expand Down
6 changes: 3 additions & 3 deletions packages/line/tests/__snapshots__/Line.test.js.snap
View file
Expand Up @@ -8429,7 +8429,7 @@ exports[`should render a basic line chart 1`] = `
<path
d="M0,218L125,109L250,0L375,55L500,82"
fill="none"
stroke="rgb(232, 193, 160)"
stroke="#e8c1a0"
strokeWidth={2}
/>
<g>
Expand Down Expand Up @@ -9348,13 +9348,13 @@ exports[`should support multiple lines 1`] = `
<path
d="M0,218L125,109L250,0L375,55L500,82"
fill="none"
stroke="rgb(232, 193, 160)"
stroke="#e8c1a0"
strokeWidth={2}
/>
<path
d="M0,273L125,218L250,164L375,109L500,0"
fill="none"
stroke="rgb(244, 117, 96)"
stroke="#f47560"
strokeWidth={2}
/>
<g>
Expand Down
2 changes: 1 addition & 1 deletion website/src/data/components/line/props.js
View file
Expand Up @@ -623,7 +623,7 @@ const props = [
},
},
},
...motionProperties(['svg'], defaults),
...motionProperties(['svg'], defaults, 'react-spring'),
]

export const groups = groupProperties(props)
3 changes: 1 addition & 2 deletions website/src/pages/line/index.js
View file
Expand Up @@ -50,8 +50,7 @@ const initialProperties = {
},
],
animate: true,
motionStiffness: 90,
motionDamping: 15,
motionConfig: 'default',
}

const linearData = [
Expand Down

0 comments on commit ca45249

Please sign in to comment.