import React , { useCallback } from 'react' ; import { AnnotationType , LineAnnotationDatum , RectAnnotationDatum } from '../../../../specs' ; import { AnnotationTooltipState } from '../../../annotations/types' ; internal export const TooltipContent = ( { annotationType , datum , customTooltip : CustomTooltip , customTooltipDetails , } ) => { const renderLine = useCallback ( ( ) => { const { details , dataValue , header = dataValue . toString ( ) } = datum as LineAnnotationDatum ; return ( < div className = "echAnnotation__tooltip" > < p className = "echAnnotation__header" > { header } < /p> < div className = "echAnnotation__details" > { customTooltipDetails ? customTooltipDetails ( details ) : details } < /div> < /div>); } , [ datum , customTooltipDetails ] ) ; const renderRect = useCallback ( ( ) => { const { details } = datum as RectAnnotationDatum ; const tooltipContent = customTooltipDetails ? customTooltipDetails ( details ) : details ; if ( ! tooltipContent ) { return null ; } return ( < div className = "echAnnotation__tooltip" > < div className = "echAnnotation__details" > < div className = "echAnnotation__detailsText" > { tooltipContent } < /div> < /div> < /div>); } , [ datum , customTooltipDetails ] ) ; if ( CustomTooltip ) { const { details } = datum ; if ( 'header' in datum ) { return < CustomTooltip details = { details } header = { datum . header } datum = { datum } / > ; } return < CustomTooltip details = { details } datum = { datum } / > ; } switch ( annotationType ) { case AnnotationType . Line : { return renderLine ( ) ; } case AnnotationType . Rectangle : { return renderRect ( ) ; } default : return null ; } } ;