import React , { useCallback } from 'react' ; import { EuiFieldText , EuiFlexItem } from '@elastic/eui' ; import { i18n } from '@osd/i18n' ; import { InputList , InputListConfig , InputObject , InputModel , InputItem } from './input_list' ; import { search } from '../../../../../data/public' ; const EMPTY_STRING = '' ; export interface MaskObject extends InputObject { mask ? : string ; } type MaskModel = InputModel & { mask : InputItem ; } ; interface MaskListProps { list : MaskObject [ ] ; showValidation : boolean ; onBlur ( ) : void ; onChange ( list ) : void ; setValidity ( isValid ) : void ; } const defaultConfig = { defaultValue : { mask : { model : '0.0.0.0/1' , value : '0.0.0.0/1' , isInvalid : false } , } , validateClass : search . aggs . CidrMask , getModelValue : ( item = { } ) => ( { mask : { model : item . mask || EMPTY_STRING , value : item . mask || EMPTY_STRING , isInvalid : false , } , } ) , getRemoveBtnAriaLabel : ( item ) => item . mask . value ? i18n . translate ( 'visDefaultEditor.controls.ipRanges.removeCidrMaskButtonAriaLabel' , { defaultMessage : 'Remove the CIDR mask value of {mask}' , values : { mask : item . mask . value } , } ) : i18n . translate ( 'visDefaultEditor.controls.ipRanges.removeEmptyCidrMaskButtonAriaLabel' , { defaultMessage : 'Remove the CIDR mask default value' , } ) , onChangeFn : ( { mask } ) => { if ( mask . model ) { return { mask : mask . model } ; } return { } ; } , hasInvalidValuesFn : ( { mask } ) => mask . isInvalid , modelNames : 'mask' , } ; function MaskList ( { showValidation , onBlur , ... rest } ) { const renderInputRow = useCallback ( ( { mask } , index , onChangeValue ) => ( < EuiFlexItem > < EuiFieldText aria - label = { i18n . translate ( 'visDefaultEditor.controls.ipRanges.cidrMaskAriaLabel' , { defaultMessage : 'CIDR mask: {mask}' , values : { mask : mask . value || '*' } , } ) } compressed fullWidth isInvalid = { showValidation ? mask . isInvalid : false } placeholder = "*" onChange = { ( ev ) => { onChangeValue ( index , ev . target . value , 'mask' ) ; } } value = { mask . value } onBlur = { onBlur } / > < /EuiFlexItem>), [onBlur, showValidation]); const maskListConfig = { ... defaultConfig , renderInputRow , } ; return < InputList config = { maskListConfig } { ... rest } />; } export { MaskList } ;