import React , { useEffect } from 'react' ; import { EuiFormRow , EuiSelect } from '@elastic/eui' ; import { i18n } from '@osd/i18n' ; import { OptionedValueProp } from 'src/plugins/data/public' ; import { AggParamEditorProps , OptionedParamEditorProps } from '../agg_param_props' ; function OrderParamEditor ( { aggParam , value , showValidation , setValue , setValidity , setTouched , } ) { const label = i18n . translate ( 'visDefaultEditor.controls.orderLabel' , { defaultMessage : 'Order' , } ) ; const isValid = ! ! value ; useEffect ( ( ) => { setValidity ( isValid ) ; } , [ isValid , setValidity ] ) ; return ( < EuiFormRow label = { label } fullWidth = { true } isInvalid = { showValidation ? ! isValid : false } compressed > < EuiSelect options = { aggParam . options } value = { value && value . value } onChange = { ( ev ) => setValue ( aggParam . options . find ( ( opt ) => opt . value === ev . target . value ) ) } fullWidth = { true } compressed isInvalid = { showValidation ? ! isValid : false } onBlur = { setTouched } / > < /EuiFormRow>); } export { OrderParamEditor } ;