import { EuiFieldNumber , EuiFieldText , EuiSelect } from '@elastic/eui' ; import { InjectedIntl , injectI18n } from '@osd/i18n/react' ; import { isEmpty } from 'lodash' ; import React , { Component } from 'react' ; import { validateParams } from './lib/filter_editor_utils' ; interface Props { value ? : string | number ; type : string ; onChange : ( value : string | number | boolean ) => void ; onBlur ? : ( value : string | number | boolean ) => void ; fullWidth ? : boolean ; placeholder : string ; intl : InjectedIntl ; controlOnly ? : boolean ; className ? : string ; } class ValueInputTypeUI extends Component < Props > { public render ( ) { const value = this . props . value ; let inputElement ; switch ( this . props . type ) { case 'string' : inputElement = ( < EuiFieldText fullWidth = { this . props . fullWidth } placeholder = { this . props . placeholder } value = { value } onChange = { this . onChange } controlOnly = { this . props . controlOnly } className = { this . props . className } / > ) ; break ; case 'number' : inputElement = ( < EuiFieldNumber fullWidth = { this . props . fullWidth } placeholder = { this . props . placeholder } value = { typeof value === 'string' ? parseFloat ( value ) : value } onChange = { this . onChange } controlOnly = { this . props . controlOnly } className = { this . props . className } / > ) ; break ; case 'date' : inputElement = ( < EuiFieldText fullWidth = { this . props . fullWidth } placeholder = { this . props . placeholder } value = { value } onChange = { this . onChange } onBlur = { this . onBlur } isInvalid = { ! isEmpty ( value ) && ! validateParams ( value , this . props . type ) } controlOnly = { this . props . controlOnly } className = { this . props . className } / > ) ; break ; case 'ip' : inputElement = ( < EuiFieldText fullWidth = { this . props . fullWidth } placeholder = { this . props . placeholder } value = { value } onChange = { this . onChange } isInvalid = { ! isEmpty ( value ) && ! validateParams ( value , this . props . type ) } controlOnly = { this . props . controlOnly } className = { this . props . className } / > ) ; break ; case 'boolean' : inputElement = ( < EuiSelect fullWidth = { this . props . fullWidth } options = { [ { value : undefined , text : this . props . placeholder } , { value : 'true' , text : this . props . intl . formatMessage ( { id : 'data.filter.filterEditor.trueOptionLabel' , defaultMessage : 'true' , } ) , } , { value : 'false' , text : this . props . intl . formatMessage ( { id : 'data.filter.filterEditor.falseOptionLabel' , defaultMessage : 'false' , } ) , } , ] } value = { value } onChange = { this . onBoolChange } className = { this . props . className } / > ) ; break ; default : break ; } return inputElement ; } private onBoolChange = ( event ) => { const boolValue = event . target . value === 'true' ; this . props . onChange ( boolValue ) ; } ; private onChange = ( event ) => { const params = event . target . value ; this . props . onChange ( params ) ; } ; private onBlur = ( event ) => { if ( this . props . onBlur ) { const params = event . target . value ; this . props . onBlur ( params ) ; } } ; } export const ValueInputType = injectI18n ( ValueInputTypeUI ) ;