import React from 'react' ; import { EuiSelect , EuiSelectOption } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; const wrapResultsPerPageOptionForEuiSelect = ( option ) => ( { text : option , value : option , } ) ; interface Props { options : number [ ] ; value : number ; onChange ( value ) : void ; } export const ResultsPerPageView = ( { onChange , options , value } ) => { const selectedValue = value && ! options . includes ( value ) ? undefined : value ; return ( < div > < EuiSelect options = { options . map ( wrapResultsPerPageOptionForEuiSelect ) } value = { selectedValue } prepend = { i18n . translate ( 'xpack.enterpriseSearch.appSearch.documents.search.resultsPerPage.show' , { defaultMessage : 'Show:' , } ) } onChange = { ( event ) => onChange ( parseInt ( event . target . value , 10 ) ) } aria - label = { i18n . translate ( 'xpack.enterpriseSearch.appSearch.documents.search.resultsPerPage.ariaLabel' , { defaultMessage : 'Number of results to show per page' , } ) } /> < /div>); } ;