import React , { useCallback , useMemo , useEffect , RefObject } from 'react' ; import { TooltipPortal , Placement , TooltipPortalSettings } from '../../../../../components/portal' ; import { AnnotationTooltipState } from '../../../annotations/types' ; import { TooltipContent } from './tooltip_content' ; interface AnnotationTooltipProps { state : AnnotationTooltipState | null ; chartRef : RefObject < HTMLDivElement > ; chartId : string ; zIndex : number ; onScroll ? : ( ) => void ; } internal export const AnnotationTooltip = ( { state , chartRef , chartId , onScroll , zIndex } ) => { const renderTooltip = useCallback ( ( ) => { if ( ! state || ! state . isVisible ) { return null ; } return < TooltipContent { ... state } / > ; } , [ state ] ) ; const handleScroll = ( ) => { if ( onScroll ) { onScroll ( ) ; } } ; useEffect ( ( ) => { if ( onScroll ) { window . addEventListener ( 'scroll' , handleScroll , true ) ; return ( ) => window . removeEventListener ( 'scroll' , handleScroll , true ) ; } } , [ ] ) ; const popperSettings = useMemo ( ( ) : TooltipPortalSettings | undefined => { const settings = state ?. tooltipSettings ; if ( ! settings ) { return ; } const { placement , boundary , ... rest } = settings ; return { ... rest , placement : placement ?? Placement . Right , boundary : boundary === 'chart' ? chartRef . current ?? undefined : boundary , } ; } , [ state ?. tooltipSettings , chartRef ] ) ; const position = useMemo ( ( ) => state ?. anchor ?? null , [ state ?. anchor ] ) ; if ( ! state ?. isVisible ) { return null ; } return ( < TooltipPortal scope = "AnnotationTooltip" chartId = { chartId } zIndex = { zIndex + 100 } anchor = { { position , ref : chartRef . current , } } visible = { state ?. isVisible ?? false } settings = { popperSettings } > { renderTooltip ( ) } < /TooltipPortal>); } ;