import React from 'react' ; import { EuiSelect , EuiSelectOption } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; interface Option { label : string ; value : string ; } const wrapSortingOptionForEuiSelect = ( option ) => ( { text : option . label , value : option . value , } ) ; const getValueFromOption = ( option ) => option . value ; interface Props { options : Option [ ] ; value : string ; onChange ( value ) : void ; } export const SortingView = ( { onChange , options , value } ) => { const valuesFromOptions = options . map ( getValueFromOption ) ; const selectedValue = value && ! valuesFromOptions . includes ( value ) ? undefined : value ; return ( < > < EuiSelect fullWidth options = { options . map ( wrapSortingOptionForEuiSelect ) } value = { selectedValue } prepend = { i18n . translate ( 'xpack.enterpriseSearch.appSearch.documents.search.sortBy' , { defaultMessage : 'Sort by' , } ) } onChange = { ( event ) => onChange ( event . target . value ) } aria - label = { i18n . translate ( 'xpack.enterpriseSearch.appSearch.documents.search.sortBy.ariaLabel' , { defaultMessage : 'Sort results by' , } ) } /> < />); } ;