import React , { FC , useCallback , useContext , useMemo } from 'react' ; import { EuiComboBox , EuiComboBoxOptionOption } from '@elastic/eui' ; import { JobCreatorContext } from '../../../job_creator_context' ; import { Field } from '../../../../../../../../../common/types/fields' ; import { createFieldOptions } from '../../../../../common/job_creator/util/general' ; interface Props { fields : Field [ ] ; changeHandler ( i ) : void ; selectedField : string | null ; } export const CategorizationPerPartitionFieldSelect = ( { fields , changeHandler , selectedField , } ) => { const { jobCreator , jobCreatorUpdated } = useContext ( JobCreatorContext ) ; const options = useMemo ( ( ) => [ ... createFieldOptions ( fields , jobCreator . additionalFields ) ] , [ fields , jobCreatorUpdated ] ) ; const selection = useMemo ( ( ) => { const selectedOptions = [ ] ; if ( selectedField !== null ) { selectedOptions . push ( { label : selectedField } ) ; } return selectedOptions ; } , [ selectedField ] ) ; const onChange = useCallback ( ( selectedOptions ) => changeHandler ( ( selectedOptions [ 0 ] && selectedOptions [ 0 ] . label ) ?? null ) , [ changeHandler ] ) ; return ( < EuiComboBox singleSelection = { { asPlainText : true } } options = { options } selectedOptions = { selection } onChange = { onChange } isClearable = { true } data - test - subj = "mlJobWizardCategorizationPerPartitionFieldNameSelect" / > ) ; } ;