import { EuiFormRow } from '@elastic/eui' ; import { InjectedIntl , injectI18n } from '@osd/i18n/react' ; import { uniq } from 'lodash' ; import React from 'react' ; import { GenericComboBox , GenericComboBoxProps } from './generic_combo_box' ; import { PhraseSuggestorUI , PhraseSuggestorProps } from './phrase_suggestor' ; import { ValueInputType } from './value_input_type' ; import { withOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public' ; interface Props extends PhraseSuggestorProps { value ? : string ; onChange : ( value : string | number | boolean ) => void ; intl : InjectedIntl ; } class PhraseValueInputUI extends PhraseSuggestorUI < Props > { public render ( ) { return ( < EuiFormRow fullWidth = { true } label = { this . props . intl . formatMessage ( { id : 'data.filter.filterEditor.valueInputLabel' , defaultMessage : 'Value' , } ) } > { this . isSuggestingValues ( ) ? ( this . renderWithSuggestions ( ) ) : ( < ValueInputType fullWidth = { true } placeholder = { this . props . intl . formatMessage ( { id : 'data.filter.filterEditor.valueInputPlaceholder' , defaultMessage : 'Enter a value' , } ) } value = { this . props . value } onChange = { this . props . onChange } type = { this . props . field ? this . props . field . type : 'string' } / > ) } < /EuiFormRow>); } private renderWithSuggestions ( ) { const { suggestions } = this . state ; const { value , intl , onChange } = this . props ; const valueAsStr = String ( value ) ; const options = value ? uniq ( [ valueAsStr , ... suggestions ] ) : suggestions ; return ( < StringComboBox placeholder = { intl . formatMessage ( { id : 'data.filter.filterEditor.valueSelectPlaceholder' , defaultMessage : 'Select a value' , } ) } fullWidth = { true } options = { options } getLabel = { ( option ) => option } selectedOptions = { value ? [ valueAsStr ] : [ ] } onChange = { ( [ newValue = '' ] ) => onChange ( newValue ) } onSearchChange = { this . onSearchChange } singleSelection = { { asPlainText : true } } onCreateOption = { onChange } isClearable = { false } data - test - subj = "filterParamsComboBox phraseParamsComboxBox" / > ) ; } } function StringComboBox ( props ) { return GenericComboBox ( props ) ; } export const PhraseValueInput = injectI18n ( withOpenSearchDashboards ( PhraseValueInputUI ) ) ;