Skip to content

Commit

Permalink
feat(bump): replace react-motion by react-spring for Bump
Browse files Browse the repository at this point in the history
  • Loading branch information
@plouc
plouc committed Jun 20, 2020
1 parent 90c3232 commit edf2daf
Show file tree
Hide file tree
Showing 9 changed files with 109 additions and 291 deletions.
86 changes: 0 additions & 86 deletions packages/bump/src/bump/AnimatedLine.js
View file

This file was deleted.

53 changes: 40 additions & 13 deletions packages/bump/src/bump/Line.js
View file
Expand Up @@ -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,
Expand All @@ -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 (
<>
<animated.path
fill="none"
d={animatedProps.path}
stroke={animatedProps.color}
strokeWidth={animatedProps.lineWidth}
strokeLinecap="round"
strokeOpacity={animatedProps.opacity}
style={{ pointerEvents: 'none' }}
/>
{isInteractive && (
<path
fill="none"
stroke="red"
strokeOpacity={0}
strokeWidth={yStep}
d={linePath}
strokeLinecap="butt"
onMouseEnter={handlers.onMouseEnter}
onMouseMove={handlers.onMouseMove}
onMouseLeave={handlers.onMouseLeave}
onClick={handlers.onClick}
/>
)}
</>
)
}

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,
Expand Down
89 changes: 33 additions & 56 deletions packages/bump/src/bump/LinesLabels.js
View file
Expand Up @@ -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,
Expand All @@ -24,61 +25,37 @@ const LinesLabels = ({ series, getLabel, position, padding, color }) => {
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.label}
</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.label}
</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.label}
</animated.text>
)
})
}

LinesLabels.propTypes = {
Expand Down
26 changes: 20 additions & 6 deletions packages/bump/src/bump/Point.js
View file
Expand Up @@ -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 (
<circle
cx={x}
cy={y}
r={size / 2}
fill={color}
strokeWidth={borderWidth}
<animated.circle
cx={animatedProps.x}
cy={animatedProps.y}
r={animatedProps.radius.interpolate(v => Math.max(v, 0))}
fill={animatedProps.color}
strokeWidth={animatedProps.borderWidth}
stroke={borderColor}
style={pointStyle}
/>
Expand Down
66 changes: 13 additions & 53 deletions packages/bump/src/bump/Points.js
View file
Expand Up @@ -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 (
<TransitionMotion
styles={points.map(point => ({
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),
})
})}
</>
)}
</TransitionMotion>
)
})
}

Points.propTypes = {
Expand Down

0 comments on commit edf2daf

Please sign in to comment.