import React , { useState , useCallback } from 'react' ; import { EuiFormRow } from '@elastic/eui' ; import { i18n } from '@osd/i18n' ; import { NumberList } from './components/number_list' ; import { AggParamEditorProps } from '../agg_param_props' ; function PercentilesEditor ( { agg , showValidation , value = [ ] , setTouched , setValidity , setValue , } ) { const label = i18n . translate ( 'visDefaultEditor.controls.percentiles.percentsLabel' , { defaultMessage : 'Percents' , } ) ; const [ isValid , setIsValid ] = useState ( true ) ; const setModelValidity = useCallback ( ( isListValid ) => { setIsValid ( isListValid ) ; setValidity ( isListValid ) ; } , [ setValidity ] ) ; return ( < EuiFormRow label = { label } labelType = "legend" fullWidth = { true } id = { `visEditorPercentileLabel${ agg . id }` } isInvalid = { showValidation ? ! isValid : false } compressed > < NumberList labelledbyId = { `visEditorPercentileLabel${ agg . id }-legend` } numberArray = { value } range = "[0,100]" disallowDuplicates = { true } unitName = { i18n . translate ( 'visDefaultEditor.controls.percentileRanks.percentUnitNameText' , { defaultMessage : 'percent' , } ) } showValidation = { showValidation } onChange = { setValue } setTouched = { setTouched } setValidity = { setModelValidity } / > < /EuiFormRow>); } export { PercentilesEditor } ;