import * as React from 'react' ; import { Plugin , Template , Getter , TemplatePlaceholder , TemplateConnector , } from '@devexpress/dx-react-core' ; import { buildEventHandlers } from '@devexpress/dx-chart-core' ; import { EventTrackerProps , HandlerFn , EventHandlers } from '../types' ; const wrapToList = ( arg ? ) => ( arg ? [ arg ] : [ ] ) ; const EVENT_NAME_TO_REACT_MAP = { click : 'onClick' , mousemove : 'onMouseMove' , mouseleave : 'onMouseLeave' , touchstart : 'onTouchStart' , } ; const translateEventNames = ( handlers ) => { const result = { } ; Object . entries ( handlers ) . forEach ( ( [ name , handler ] ) => { result [ EVENT_NAME_TO_REACT_MAP [ name ] ] = handler ; } ) ; return result ; } ; class EventTrackerBase extends React . PureComponent < EventTrackerProps > { render ( ) { const { onClick , onPointerMove } = this . props ; return ( < Plugin name = "EventTracker" > < Getter name = "clickHandlers" value = { wrapToList ( onClick ) } / > < Getter name = "pointerMoveHandlers" value = { wrapToList ( onPointerMove ) } / > < Template name = "canvas" > { params => ( < TemplateConnector > { ( { series , clickHandlers , pointerMoveHandlers } ) => { const handlers = buildEventHandlers ( series , { clickHandlers , pointerMoveHandlers } ) ; return ( < TemplatePlaceholder params = { { ... params , ... translateEventNames ( handlers ) } } />); } } < /TemplateConnector>)} < /Template> < /Plugin>); } } export const EventTracker = EventTrackerBase ;