import React from 'react' ; import { EuiFormRow , EuiComboBox , EuiComboBoxOptionOption } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { RENDER_AS } from '../../../../common/constants' ; const options = [ { label : i18n . translate ( 'xpack.maps.source.esGeoGrid.pointsDropdownOption' , { defaultMessage : 'clusters' , } ) , value : RENDER_AS . POINT , } , { label : i18n . translate ( 'xpack.maps.source.esGeoGrid.gridRectangleDropdownOption' , { defaultMessage : 'grids' , } ) , value : RENDER_AS . GRID , } , ] ; export function RenderAsSelect ( props ) { if ( props . renderAs === RENDER_AS . HEATMAP ) { return null ; } function onChange ( selectedOptions ) { if ( ! selectedOptions || ! selectedOptions . length ) { return ; } props . onChange ( selectedOptions [ 0 ] . value as RENDER_AS ) ; } const selectedOptions = [ ] ; const selectedOption = options . find ( ( option ) => option . value === props . renderAs ) ; if ( selectedOption ) { selectedOptions . push ( selectedOption ) ; } return ( < EuiFormRow label = { i18n . translate ( 'xpack.maps.source.esGeoGrid.showAsLabel' , { defaultMessage : 'Show as' , } ) } display = { props . isColumnCompressed ? 'columnCompressed' : 'row' } > < EuiComboBox singleSelection = { { asPlainText : true } } options = { options } selectedOptions = { selectedOptions } onChange = { onChange } isClearable = { false } compressed / > < /EuiFormRow>); }