import React , { useEffect , useCallback } from 'react' ; import { EuiFieldText , EuiFormRow } from '@elastic/eui' ; import { AggParamEditorProps } from '../agg_param_props' ; function StringParamEditor ( { agg , aggParam , showValidation , value , setValidity , setValue , setTouched , } ) { const isValid = aggParam . required ? ! ! value : true ; useEffect ( ( ) => { setValidity ( isValid ) ; } , [ isValid , setValidity ] ) ; const onChange = useCallback ( ( ev ) => setValue ( ev . target . value ) , [ setValue ] ) ; return ( < EuiFormRow className = "visEditorAggParam__string" label = { aggParam . displayName || aggParam . name } fullWidth = { true } compressed isInvalid = { showValidation ? ! isValid : false } > < EuiFieldText value = { value || '' } data - test - subj = { `visEditorStringInput${ agg . id }${ aggParam . name }` } onChange = { onChange } fullWidth = { true } compressed onBlur = { setTouched } isInvalid = { showValidation ? ! isValid : false } / > < /EuiFormRow>); } export { StringParamEditor } ;