import React , { useCallback } from 'react' ; import { EuiFormRow } from '@elastic/eui' ; import { FromToList , FromToObject } from './components/from_to_list' ; import { MaskList , MaskObject } from './components/mask_list' ; import { IpRangeTypes } from './ip_range_type' ; import { AggParamEditorProps } from '../agg_param_props' ; interface IpRange { fromTo : FromToObject [ ] ; mask : MaskObject [ ] ; } function IpRangesParamEditor ( { agg , value = { fromTo : [ ] as FromToObject [ ] , mask : [ ] as MaskObject [ ] } , setTouched , setValue , setValidity , showValidation , } ) { const handleMaskListChange = useCallback ( ( items ) => setValue ( { ... value , [ IpRangeTypes . MASK ] : items , } ) , [ setValue , value ] ) ; const handleFromToListChange = useCallback ( ( items ) => setValue ( { ... value , [ IpRangeTypes . FROM_TO ] : items , } ) , [ setValue , value ] ) ; return ( < EuiFormRow fullWidth = { true } id = { `visEditorIpRange${ agg . id }` } compressed > { agg . params . ipRangeType === IpRangeTypes . MASK ? ( < MaskList list = { value . mask } showValidation = { showValidation } onBlur = { setTouched } onChange = { handleMaskListChange } setValidity = { setValidity } / > ) : ( < FromToList list = { value . fromTo } showValidation = { showValidation } onBlur = { setTouched } onChange = { handleFromToListChange } setValidity = { setValidity } / > ) } < /EuiFormRow>); } export { IpRangesParamEditor } ;