Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(chord): fix various hooks dependencies issues
  • Loading branch information
plouc committed Jan 1, 2022
1 parent 00d839e commit 5469cc9
Show file tree
Hide file tree
Showing 7 changed files with 24 additions and 18 deletions.
1 change: 0 additions & 1 deletion packages/chord/src/Chord.tsx
Expand Up @@ -85,7 +85,6 @@ const InnerChord = ({
})

const { setCurrentArc, setCurrentRibbon, getArcOpacity, getRibbonOpacity } = useChordSelection({
arcs,
arcOpacity,
activeArcOpacity,
inactiveArcOpacity,
Expand Down
4 changes: 2 additions & 2 deletions packages/chord/src/ChordArc.tsx
Expand Up @@ -42,7 +42,7 @@ export const ChordArc = memo(
showTooltipFromEvent(createElement(tooltip, { arc }), event)
onMouseEnter?.(arc, event)
}
}, [isInteractive, showTooltipFromEvent, tooltip, arc, onMouseEnter])
}, [isInteractive, showTooltipFromEvent, tooltip, arc, onMouseEnter, setCurrent])

const handleMouseMove = useMemo(() => {
if (!isInteractive) return undefined
Expand All @@ -61,7 +61,7 @@ export const ChordArc = memo(
hideTooltip()
onMouseLeave?.(arc, event)
}
}, [isInteractive, hideTooltip, arc, onMouseLeave])
}, [isInteractive, hideTooltip, arc, onMouseLeave, setCurrent])

const handleClick = useMemo(() => {
if (!isInteractive || !onClick) return undefined
Expand Down
5 changes: 4 additions & 1 deletion packages/chord/src/ChordCanvas.tsx
Expand Up @@ -103,7 +103,6 @@ const InnerChordCanvas = ({
})

const { currentArc, setCurrentArc, getArcOpacity, getRibbonOpacity } = useChordSelection({
arcs,
arcOpacity,
activeArcOpacity,
inactiveArcOpacity,
Expand Down Expand Up @@ -257,6 +256,8 @@ const InnerChordCanvas = ({
outerHeight,
margin,
pixelRatio,
center,
radius,
theme,
layers,
arcs,
Expand Down Expand Up @@ -316,8 +317,10 @@ const InnerChordCanvas = ({
innerRadius,
arcs,
setCurrentArc,
currentArc,
showTooltipFromEvent,
hideTooltip,
arcTooltip,
onArcMouseEnter,
onArcMouseMove,
onArcMouseLeave,
Expand Down
2 changes: 1 addition & 1 deletion packages/chord/src/ChordLabels.tsx
Expand Up @@ -41,7 +41,7 @@ export const ChordLabels = memo(({ arcs, radius, rotation, color }: ChordLabelsP
dominantBaseline: textProps.baseline,
}
}),
[arcs, radius, radius, rotation, getColor]
[arcs, radius, rotation, getColor]
)

const transition = useTransition<
Expand Down
12 changes: 6 additions & 6 deletions packages/chord/src/ChordRibbon.tsx
Expand Up @@ -48,16 +48,16 @@ export const ChordRibbon = memo(
return (event: MouseEvent) => {
setCurrent(ribbon)
showTooltipFromEvent(createElement(tooltip, { ribbon }), event)
onMouseEnter && onMouseEnter(ribbon, event)
onMouseEnter?.(ribbon, event)
}
}, [isInteractive, showTooltipFromEvent, tooltip, ribbon, onMouseEnter])
}, [isInteractive, showTooltipFromEvent, tooltip, ribbon, onMouseEnter, setCurrent])

const handleMouseMove = useMemo(() => {
if (!isInteractive) return undefined

return (event: MouseEvent) => {
showTooltipFromEvent(createElement(tooltip, { ribbon }), event)
onMouseMove && onMouseMove(ribbon, event)
onMouseMove?.(ribbon, event)
}
}, [isInteractive, showTooltipFromEvent, tooltip, ribbon, onMouseMove])

Expand All @@ -67,14 +67,14 @@ export const ChordRibbon = memo(
return (event: MouseEvent) => {
setCurrent(null)
hideTooltip()
onMouseLeave && onMouseLeave(ribbon, event)
onMouseLeave?.(ribbon, event)
}
}, [isInteractive, hideTooltip, ribbon, onMouseLeave])
}, [isInteractive, hideTooltip, ribbon, onMouseLeave, setCurrent])

const handleClick = useMemo(() => {
if (!isInteractive || !onClick) return undefined

return (event: MouseEvent) => onClick(ribbon, event)
return (event: MouseEvent) => onClick?.(ribbon, event)
}, [isInteractive, ribbon, onClick])

return (
Expand Down
14 changes: 9 additions & 5 deletions packages/chord/src/hooks.ts
Expand Up @@ -120,7 +120,6 @@ export const useChord = ({
}

export const useChordSelection = ({
arcs,
arcOpacity = commonDefaultProps.arcOpacity,
activeArcOpacity = commonDefaultProps.activeArcOpacity,
inactiveArcOpacity = commonDefaultProps.inactiveArcOpacity,
Expand All @@ -129,7 +128,6 @@ export const useChordSelection = ({
activeRibbonOpacity = commonDefaultProps.activeRibbonOpacity,
inactiveRibbonOpacity = commonDefaultProps.inactiveRibbonOpacity,
}: {
arcs: ArcDatum[]
arcOpacity?: ChordCommonProps['arcOpacity']
activeArcOpacity?: ChordCommonProps['activeArcOpacity']
inactiveArcOpacity?: ChordCommonProps['inactiveArcOpacity']
Expand Down Expand Up @@ -164,7 +162,7 @@ export const useChordSelection = ({
}

return { selectedArcIds, selectedRibbonIds }
}, [currentArc, currentRibbon, arcs, ribbons])
}, [currentArc, currentRibbon, ribbons])

const hasSelection =
selection.selectedArcIds.length > 1 || selection.selectedRibbonIds.length > 0
Expand All @@ -175,7 +173,7 @@ export const useChordSelection = ({

return selection.selectedArcIds.includes(arc.id) ? activeArcOpacity : inactiveArcOpacity
},
[selection.selectedArcIds, arcOpacity, activeArcOpacity, inactiveArcOpacity]
[hasSelection, selection.selectedArcIds, arcOpacity, activeArcOpacity, inactiveArcOpacity]
)
const getRibbonOpacity = useMemo(
() => (ribbon: RibbonDatum) => {
Expand All @@ -185,7 +183,13 @@ export const useChordSelection = ({
? activeRibbonOpacity
: inactiveRibbonOpacity
},
[selection.selectedRibbonIds, ribbonOpacity, activeRibbonOpacity, inactiveRibbonOpacity]
[
hasSelection,
selection.selectedRibbonIds,
ribbonOpacity,
activeRibbonOpacity,
inactiveRibbonOpacity,
]
)

return {
Expand Down
4 changes: 2 additions & 2 deletions packages/chord/src/types.ts
Expand Up @@ -18,9 +18,9 @@ export interface CustomLayerProps {
center: [number, number]
radius: number
arcs: ArcDatum[]
arcGenerator: any
arcGenerator: ArcGenerator
ribbons: RibbonDatum[]
ribbonGenerator: any
ribbonGenerator: RibbonGenerator
}
export type CustomLayer = FunctionComponent<CustomLayerProps>
export type CustomCanvasLayer = (ctx: CanvasRenderingContext2D, props: CustomLayerProps) => void
Expand Down

0 comments on commit 5469cc9

Please sign in to comment.