import React , { FC , useContext } from 'react' ; import { EuiComboBox , EuiComboBoxOptionOption } from '@elastic/eui' ; import { JobCreatorContext } from '../../../job_creator_context' ; import { Field } from '../../../../../../../../../common/types/fields' ; import { createFieldOptions , createMlcategoryFieldOption , } from '../../../../../common/job_creator/util/general' ; interface Props { fields : Field [ ] ; changeHandler ( i ) : void ; selectedInfluencers : string [ ] ; } export const InfluencersSelect = ( { fields , changeHandler , selectedInfluencers } ) => { const { jobCreator } = useContext ( JobCreatorContext ) ; const options = [ ... createFieldOptions ( fields , jobCreator . additionalFields ) , ... createMlcategoryFieldOption ( jobCreator . categorizationFieldName ) , ] ; const selection = selectedInfluencers . map ( ( i ) => ( { label : i } ) ) ; function onChange ( selectedOptions ) { changeHandler ( selectedOptions . map ( ( o ) => o . label ) ) ; } return ( < EuiComboBox options = { options } selectedOptions = { selection } onChange = { onChange } isClearable = { false } data - test - subj = "mlInfluencerSelect" / > ) ; } ;