import * as React from 'react' ; import { Plugin , Getter , Getters , } from '@devexpress/dx-react-core' ; import { changeSeriesState , processPointerMove , HOVERED , TargetData , } from '@devexpress/dx-chart-core' ; import { HoverStateProps , HoverStateState , GetPointerMoveHandlersFn } from '../types' ; const dependencies = [ { name : 'EventTracker' , optional : true } ] ; class HoverStateBase extends React . PureComponent < HoverStateProps , HoverStateState > { getPointerMoveHandlers : GetPointerMoveHandlersFn ; constructor ( props ) { super ( props ) ; this . state = { hover : props . hover || props . defaultHover , } ; const handlePointerMove = this . handlePointerMove . bind ( this ) ; this . getPointerMoveHandlers = ( { pointerMoveHandlers = [ ] } ) => [ ... pointerMoveHandlers , handlePointerMove , ] ; } static getDerivedStateFromProps ( props , state ) { return { hover : props . hover !== undefined ? props . hover : state . hover } ; } handlePointerMove ( { targets } ) { this . setState ( ( { hover : currentTarget } , { onHoverChange } ) => { const hover = processPointerMove ( targets , currentTarget ! , onHoverChange ) ; return hover !== undefined ? { hover : hover ! } : null ; } ) ; } render ( ) { const { hover } = this . state ; const targets = hover ? [ hover ] : [ ] ; const getSeries = ( { series } ) => changeSeriesState ( series , targets , HOVERED ) ; return ( < Plugin name = "HoverState" dependencies = { dependencies } > < Getter name = "pointerMoveHandlers" computed = { this . getPointerMoveHandlers } / > < Getter name = "series" computed = { getSeries } / > < /Plugin>); } } export const HoverState = HoverStateBase ;