import React , { FC } from 'react' ; import { EuiComboBox , EuiComboBoxOptionOption } from '@elastic/eui' ; import { Field , SplitField } from '../../../../../../../../../common/types/fields' ; interface DropDownLabel { label : string ; field : Field ; } interface Props { fields : Field [ ] ; changeHandler ( f ) : void ; selectedField : SplitField ; testSubject ? : string ; placeholder ? : string ; } export const RareFieldSelect = ( { fields , changeHandler , selectedField , testSubject , placeholder , } ) => { const options = fields . map ( ( f ) => ( { label : f . name , field : f , } as DropDownLabel ) ) ; const selection = [ ] ; if ( selectedField !== null ) { selection . push ( { label : selectedField . name , field : selectedField } as DropDownLabel ) ; } function onChange ( selectedOptions ) { const option = selectedOptions [ 0 ] as DropDownLabel ; if ( typeof option !== 'undefined' ) { changeHandler ( option . field ) ; } else { changeHandler ( null ) ; } } return ( < EuiComboBox singleSelection = { { asPlainText : true } } options = { options } selectedOptions = { selection } onChange = { onChange } placeholder = { placeholder } data - test - subj = { testSubject } isClearable = { false } / > ) ; } ;