-
-
Notifications
You must be signed in to change notification settings - Fork 1k
/
Slices.tsx
90 lines (79 loc) · 3.08 KB
/
Slices.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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import React, { createElement, useMemo } from 'react'
import { ArcGenerator, ArcsLayer } from '@nivo/arcs'
import { useTooltip } from '@nivo/tooltip'
import { ComputedDatum, CompletePieSvgProps } from './types'
interface SlicesProps<RawDatum> {
center: [number, number]
data: ComputedDatum<RawDatum>[]
arcGenerator: ArcGenerator
borderWidth: CompletePieSvgProps<RawDatum>['borderWidth']
borderColor: CompletePieSvgProps<RawDatum>['borderColor']
isInteractive: CompletePieSvgProps<RawDatum>['isInteractive']
onClick?: CompletePieSvgProps<RawDatum>['onClick']
onMouseEnter?: CompletePieSvgProps<RawDatum>['onMouseEnter']
onMouseMove?: CompletePieSvgProps<RawDatum>['onMouseMove']
onMouseLeave?: CompletePieSvgProps<RawDatum>['onMouseLeave']
setActiveId: (id: null | string | number) => void
tooltip: CompletePieSvgProps<RawDatum>['tooltip']
transitionMode: CompletePieSvgProps<RawDatum>['transitionMode']
}
export const Slices = <RawDatum,>({
center,
data,
arcGenerator,
borderWidth,
borderColor,
isInteractive,
onClick,
onMouseEnter,
onMouseMove,
onMouseLeave,
setActiveId,
tooltip,
transitionMode,
}: SlicesProps<RawDatum>) => {
const { showTooltipFromEvent, hideTooltip } = useTooltip()
const handleClick = useMemo(() => {
if (!isInteractive) return undefined
return (datum: ComputedDatum<RawDatum>, event: React.MouseEvent<SVGPathElement>) => {
onClick?.(datum, event)
}
}, [isInteractive, onClick])
const handleMouseEnter = useMemo(() => {
if (!isInteractive) return undefined
return (datum: ComputedDatum<RawDatum>, event: React.MouseEvent<SVGPathElement>) => {
showTooltipFromEvent(createElement(tooltip, { datum }), event)
setActiveId(datum.id)
onMouseEnter?.(datum, event)
}
}, [isInteractive, showTooltipFromEvent, setActiveId, onMouseEnter])
const handleMouseMove = useMemo(() => {
if (!isInteractive) return undefined
return (datum: ComputedDatum<RawDatum>, event: React.MouseEvent<SVGPathElement>) => {
showTooltipFromEvent(createElement(tooltip, { datum }), event)
onMouseMove?.(datum, event)
}
}, [isInteractive, showTooltipFromEvent, onMouseMove])
const handleMouseLeave = useMemo(() => {
if (!isInteractive) return undefined
return (datum: ComputedDatum<RawDatum>, event: React.MouseEvent<SVGPathElement>) => {
hideTooltip()
setActiveId(null)
onMouseLeave?.(datum, event)
}
}, [isInteractive, hideTooltip, setActiveId, onMouseLeave])
return (
<ArcsLayer<ComputedDatum<RawDatum>>
center={center}
data={data}
arcGenerator={arcGenerator}
borderWidth={borderWidth}
borderColor={borderColor}
transitionMode={transitionMode}
onClick={handleClick}
onMouseEnter={handleMouseEnter}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
/>
)
}