/
GridLines.tsx
57 lines (54 loc) · 1.54 KB
/
GridLines.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import React from 'react'
import { useTransition } from 'react-spring'
import { useMotionConfig } from '@nivo/core'
import { GridLine } from './GridLine'
import { Line } from '../types'
export const GridLines = ({ lines }: { lines: Line[] }) => {
const { animate, config: springConfig } = useMotionConfig()
const transition = useTransition<Line, Record<'opacity' | 'x1' | 'x2' | 'y1' | 'y2', number>>(
lines,
{
keys: line => line.key,
initial: line => ({
opacity: 1,
x1: line.x1,
x2: line.x2,
y1: line.y1,
y2: line.y2,
}),
from: line => ({
opacity: 0,
x1: line.x1,
x2: line.x2,
y1: line.y1,
y2: line.y2,
}),
enter: line => ({
opacity: 1,
x1: line.x1,
x2: line.x2,
y1: line.y1,
y2: line.y2,
}),
update: line => ({
opacity: 1,
x1: line.x1,
x2: line.x2,
y1: line.y1,
y2: line.y2,
}),
leave: {
opacity: 0,
},
config: springConfig,
immediate: !animate,
}
)
return (
<g>
{transition((animatedProps, line) => (
<GridLine {...line} key={line.key} animatedProps={animatedProps} />
))}
</g>
)
}