import * as React from "react" ; export interface CircleProps extends H . map . Circle . Options , H . geo . IPoint { strokeColor ? : string ; lineWidth ? : number ; fillColor ? : string ; radius ? : number ; } export interface CircleContext { map : H . Map ; } export class Circle extends React . Component < CircleProps , object > { public static contextTypes = { map : React . PropTypes . object , } ; public static defaultProps = { fillColor : "rgba(255, 255, 255, 0.5)" , lineWidth : 1 , radius : 1000 , strokeColor : "black" , } ; public context : CircleContext ; private circle : H . map . Circle ; public componentWillReceiveProps ( nextProps ) { if ( nextProps . lat !== this . props . lat || nextProps . lng !== this . props . lng ) { this . setCenter ( { lat : nextProps . lat , lng : nextProps . lng , } ) ; } if ( nextProps . radius !== this . props . radius ) { this . setRadius ( nextProps . radius ) ; } } public componentWillUnmount ( ) { const { map } = this . context ; if ( this . circle ) { map . removeObject ( this . circle ) ; } } public render ( ) { const { map } = this . context ; if ( map && ! this . circle ) { this . addCircleToMap ( ) ; } return null ; } private addCircleToMap ( ) { const { map , } = this . context ; const { lat , lng , strokeColor , lineWidth , fillColor , radius , } = this . props ; const circle = new H . map . Circle ( { lat , lng , } , radius , { style : { fillColor , lineWidth , strokeColor , } , } ) ; map . addObject ( circle ) ; this . circle = circle ; } private setCenter ( point ) { this . circle . setCenter ( point ) ; } private setRadius ( radius ) { this . circle . setRadius ( radius ) ; } } export default Circle ;