import React from 'react' ; import { EuiButtonGroup , EuiSpacer } from '@elastic/eui' ; import { i18n } from '@osd/i18n' ; import { AggParamEditorProps } from '../agg_param_props' ; enum IpRangeTypes { MASK = 'mask' , FROM_TO = 'fromTo' } function IpRangeTypeParamEditor ( { agg , value , setValue } ) { const options = [ { id : `visEditorIpRangeFromToLabel${ agg . id }` , label : i18n . translate ( 'visDefaultEditor.controls.ipRanges.fromToButtonLabel' , { defaultMessage : 'From/to' , } ) , } , { id : `visEditorIpRangeCidrLabel${ agg . id }` , label : i18n . translate ( 'visDefaultEditor.controls.ipRanges.cidrMasksButtonLabel' , { defaultMessage : 'CIDR masks' , } ) , } , ] ; const onClick = ( optionId ) => { setValue ( optionId === options [ 0 ] . id ? IpRangeTypes . FROM_TO : IpRangeTypes . MASK ) ; } ; return ( < > < EuiSpacer size = "m" / > < EuiButtonGroup isFullWidth = { true } onChange = { onClick } idSelected = { value === IpRangeTypes . FROM_TO ? options [ 0 ] . id : options [ 1 ] . id } options = { options } legend = { i18n . translate ( 'visDefaultEditor.controls.ipRangesAriaLabel' , { defaultMessage : 'IP ranges' , } ) } / > < EuiSpacer size = "s" / > < />); } export { IpRangeTypeParamEditor , IpRangeTypes } ;