Skip to content

Commit

Permalink
feat(annotations): 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 0c8dd3b commit 7acc572
Show file tree
Hide file tree
Showing 8 changed files with 138 additions and 230 deletions.
4 changes: 2 additions & 2 deletions packages/annotations/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@
],
"dependencies": {
"@nivo/colors": "0.62.0",
"@nivo/core": "0.62.0",
"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
29 changes: 6 additions & 23 deletions packages/annotations/src/Annotation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@
*/
import React, { memo } from 'react'
import PropTypes from 'prop-types'
import { Motion, spring } from 'react-motion'
import { useMotionConfig } from '@nivo/core'
import { defaultProps } from './props'
import { useComputedAnnotation } from './hooks'
import AnnotationNote from './AnnotationNote'
Expand All @@ -35,7 +33,6 @@ const Annotation = memo(
noteTextOffset,
note,
}) => {
const { animate, springConfig } = useMotionConfig()
const computed = useComputedAnnotation({
type,
containerWidth,
Expand All @@ -60,26 +57,12 @@ const Annotation = memo(
<RectAnnotationOutline x={x} y={y} width={width} height={height} />
)}
<AnnotationLink points={computed.points} />
{!animate && (
<AnnotationNote x={computed.text[0]} y={computed.text[1]} note={note} />
)}
{animate && (
<Motion
style={{
x: spring(computed.text[0], springConfig),
y: spring(computed.text[1], springConfig),
}}
>
{interpolated => (
<AnnotationNote
datum={datum}
x={interpolated.x}
y={interpolated.y}
note={note}
/>
)}
</Motion>
)}
<AnnotationNote
datum={datum}
x={computed.text[0]}
y={computed.text[1]}
note={note}
/>
</>
)
}
Expand Down
35 changes: 15 additions & 20 deletions packages/annotations/src/AnnotationLink.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,23 @@
*/
import React, { memo } from 'react'
import PropTypes from 'prop-types'
import { useTheme, useMotionConfig, SmartMotion } from '@nivo/core'
import { useSpring, animated } from 'react-spring'
import { useTheme, useMotionConfig } from '@nivo/core'

const AnnotationLink = memo(({ points, isOutline }) => {
const theme = useTheme()
const { animate, springConfig } = useMotionConfig()

let path = `M${points[0][0]},${points[0][1]}`
points.slice(1).forEach(point => {
path = `${path} L${point[0]},${point[1]}`
})

const { animate, config: springConfig } = useMotionConfig()
const animatedProps = useSpring({
path,
config: springConfig,
immediate: !animate,
})

if (isOutline && theme.annotations.link.outlineWidth <= 0) {
return null
Expand All @@ -26,24 +38,7 @@ const AnnotationLink = memo(({ points, isOutline }) => {
style.stroke = theme.annotations.link.outlineColor
}

let path = `M${points[0][0]},${points[0][1]}`
points.slice(1).forEach(point => {
path = `${path} L${point[0]},${point[1]}`
})

if (!animate) {
return <path fill="none" d={path} style={style} />
}

return (
<SmartMotion
style={spring => ({
d: spring(path, springConfig),
})}
>
{interpolated => <path fill="none" d={interpolated.d} style={style} />}
</SmartMotion>
)
return <animated.path fill="none" d={animatedProps.path} style={style} />
})

AnnotationLink.displayName = 'AnnotationLink'
Expand Down
27 changes: 18 additions & 9 deletions packages/annotations/src/AnnotationNote.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,19 @@
import React, { memo } from 'react'
import omit from 'lodash/omit'
import PropTypes from 'prop-types'
import { useTheme } from '@nivo/core'
import { useSpring, animated } from 'react-spring'
import { useTheme, useMotionConfig } from '@nivo/core'

const AnnotationNote = memo(({ datum, x, y, note }) => {
const theme = useTheme()
const { animate, config: springConfiig } = useMotionConfig()

const animatedProps = useSpring({
x,
y,
config: springConfiig,
immediate: !animate,
})

if (typeof note === 'function') {
return note({ x, y, datum })
Expand All @@ -21,9 +30,9 @@ const AnnotationNote = memo(({ datum, x, y, note }) => {
return (
<>
{theme.annotations.text.outlineWidth > 0 && (
<text
x={x}
y={y}
<animated.text
x={animatedProps.x}
y={animatedProps.y}
style={{
...theme.annotations.text,
strokeLinejoin: 'round',
Expand All @@ -32,15 +41,15 @@ const AnnotationNote = memo(({ datum, x, y, note }) => {
}}
>
{note}
</text>
</animated.text>
)}
<text
x={x}
y={y}
<animated.text
x={animatedProps.x}
y={animatedProps.y}
style={omit(theme.annotations.text, ['outlineWidth', 'outlineColor'])}
>
{note}
</text>
</animated.text>
</>
)
})
Expand Down
87 changes: 31 additions & 56 deletions packages/annotations/src/CircleAnnotationOutline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,70 +8,45 @@
*/
import React, { memo } from 'react'
import PropTypes from 'prop-types'
import { Motion, spring } from 'react-motion'
import { useSpring, animated } from 'react-spring'
import { useMotionConfig, useTheme } from '@nivo/core'

const CircleAnnotationOutline = memo(({ x, y, size }) => {
const theme = useTheme()
const { animate, springConfig } = useMotionConfig()
const { animate, config: springConfig } = useMotionConfig()

if (!animate) {
return (
<>
{theme.annotations.outline.outlineWidth > 0 && (
<circle
cx={x}
cy={y}
r={size / 2}
style={{
...theme.annotations.outline,
fill: 'none',
strokeWidth:
theme.annotations.outline.strokeWidth +
theme.annotations.outline.outlineWidth * 2,
stroke: theme.annotations.outline.outlineColor,
}}
/>
)}
<circle cx={x} cy={y} r={size / 2} style={theme.annotations.outline} />
</>
)
}
const animatedProps = useSpring({
x,
y,
radius: size / 2,
config: springConfig,
immediate: !animate,
})

return (
<Motion
style={{
x: spring(x, springConfig),
y: spring(y, springConfig),
size: spring(size, springConfig),
}}
>
{interpolated => (
<>
{theme.annotations.outline.outlineWidth > 0 && (
<circle
cx={interpolated.x}
cy={interpolated.y}
r={interpolated.size / 2}
style={{
...theme.annotations.outline,
fill: 'none',
strokeWidth:
theme.annotations.outline.strokeWidth +
theme.annotations.outline.outlineWidth * 2,
stroke: theme.annotations.outline.outlineColor,
}}
/>
)}
<circle
cx={interpolated.x}
cy={interpolated.y}
r={interpolated.size / 2}
style={theme.annotations.outline}
/>
</>
<>
{theme.annotations.outline.outlineWidth > 0 && (
<animated.circle
cx={animatedProps.x}
cy={animatedProps.y}
r={animatedProps.radius}
style={{
...theme.annotations.outline,
fill: 'none',
strokeWidth:
theme.annotations.outline.strokeWidth +
theme.annotations.outline.outlineWidth * 2,
stroke: theme.annotations.outline.outlineColor,
}}
/>
)}
</Motion>
<animated.circle
cx={animatedProps.x}
cy={animatedProps.y}
r={animatedProps.radius}
style={theme.annotations.outline}
/>
</>
)
})

Expand Down
81 changes: 29 additions & 52 deletions packages/annotations/src/DotAnnotationOutline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,66 +8,43 @@
*/
import React, { memo } from 'react'
import PropTypes from 'prop-types'
import { Motion, spring } from 'react-motion'
import { useSpring, animated } from 'react-spring'
import { useMotionConfig, useTheme } from '@nivo/core'

const DotAnnotationOutline = memo(({ x, y, size }) => {
const theme = useTheme()
const { animate, springConfig } = useMotionConfig()
const { animate, config: springConfig } = useMotionConfig()

if (!animate) {
return (
<>
{theme.annotations.outline.outlineWidth > 0 && (
<circle
cx={x}
cy={y}
r={size / 2}
style={{
...theme.annotations.outline,
fill: 'none',
strokeWidth: theme.annotations.outline.outlineWidth * 2,
stroke: theme.annotations.outline.outlineColor,
}}
/>
)}
<circle cx={x} cy={y} r={size / 2} style={theme.annotations.symbol} />
</>
)
}
const animatedProps = useSpring({
x,
y,
radius: size / 2,
config: springConfig,
immediate: !animate,
})

return (
<Motion
style={{
x: spring(x, springConfig),
y: spring(y, springConfig),
size: spring(size, springConfig),
}}
>
{interpolated => (
<>
{theme.annotations.outline.outlineWidth > 0 && (
<circle
cx={interpolated.x}
cy={interpolated.y}
r={interpolated.size / 2}
style={{
...theme.annotations.outline,
fill: 'none',
strokeWidth: theme.annotations.outline.outlineWidth * 2,
stroke: theme.annotations.outline.outlineColor,
}}
/>
)}
<circle
cx={interpolated.x}
cy={interpolated.y}
r={interpolated.size / 2}
style={theme.annotations.symbol}
/>
</>
<>
{theme.annotations.outline.outlineWidth > 0 && (
<animated.circle
cx={animatedProps.x}
cy={animatedProps.y}
r={animatedProps.radius}
style={{
...theme.annotations.outline,
fill: 'none',
strokeWidth: theme.annotations.outline.outlineWidth * 2,
stroke: theme.annotations.outline.outlineColor,
}}
/>
)}
</Motion>
<animated.circle
cx={animatedProps.x}
cy={animatedProps.y}
r={animatedProps.radius}
style={theme.annotations.symbol}
/>
</>
)
})

Expand Down
Loading

0 comments on commit 7acc572

Please sign in to comment.