/
Point.js
46 lines (40 loc) · 1.27 KB
/
Point.js
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
import { memo } from 'react'
import PropTypes from 'prop-types'
import { useSpring, animated, to } from '@react-spring/web'
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 (
<animated.circle
cx={animatedProps.x}
cy={animatedProps.y}
r={to(animatedProps.radius, v => Math.max(v, 0))}
fill={animatedProps.color}
strokeWidth={animatedProps.borderWidth}
stroke={borderColor}
style={pointStyle}
/>
)
}
Point.propTypes = {
data: PropTypes.object.isRequired,
x: PropTypes.number.isRequired,
y: PropTypes.number.isRequired,
isActive: PropTypes.bool.isRequired,
isInactive: PropTypes.bool.isRequired,
size: PropTypes.number.isRequired,
color: PropTypes.string.isRequired,
borderColor: PropTypes.string.isRequired,
borderWidth: PropTypes.number.isRequired,
}
export default memo(Point)