import { EuiIcon } from '@elastic/eui' ; import classNames from 'classnames' ; import React from 'react' ; import { QuerySuggestion } from '../../autocomplete' ; function getEuiIconType ( type ) { switch ( type ) { case 'field' : return 'kqlField' ; case 'value' : return 'kqlValue' ; case 'recentSearch' : return 'search' ; case 'conjunction' : return 'kqlSelector' ; case 'operator' : return 'kqlOperand' ; default : throw new Error ( `Unknown type: ${ type }` ) ; } } interface Props { onClick : ( suggestion : QuerySuggestion ) => void ; onMouseEnter : ( ) => void ; selected : boolean ; suggestion : QuerySuggestion ; innerRef : ( node : HTMLDivElement ) => void ; ariaId : string ; shouldDisplayDescription : boolean ; } export function SuggestionComponent ( props ) { return ( < div className = { classNames ( { osdTypeahead__item : true , active : props . selected , } ) } role = "option" onClick = { ( ) => props . onClick ( props . suggestion ) } onMouseEnter = { props . onMouseEnter } ref = { props . innerRef } id = { props . ariaId } aria - selected = { props . selected } data - test - subj = { `autocompleteSuggestion-${ props . suggestion . type }-${ props . suggestion . text . replace ( /\s/g , '-' ) }` } > < div className = { 'osdSuggestionItem osdSuggestionItem--' + props . suggestion . type } > < div className = "osdSuggestionItem__type" > < EuiIcon type = { getEuiIconType ( props . suggestion . type ) } /> < /div> < div className = "osdSuggestionItem__text" data - test - subj = "autoCompleteSuggestionText" > { props . suggestion . text } < /div> { props . shouldDisplayDescription && ( < div className = "osdSuggestionItem__description" > { props . suggestion . description } < /div>)} < /div> < /div>); }