import React , { ChangeEvent , FocusEvent } from 'react' ; import { EuiFieldNumber } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { SIZE_FIELD_MAXIMUM , SIZE_FIELD_MINIMUM } from '../constants' ; import { FieldResultSetting } from '../types' ; const updateOrClearSizeForField = ( fieldName , fieldValue , updateAction , clearAction ) => { if ( typeof fieldValue === 'number' && ! isNaN ( fieldValue ) ) { updateAction ( fieldName , fieldValue ) ; } else { clearAction ( fieldName ) ; } } ; const handleFieldNumberChange = ( fieldName , updateAction , clearAction ) => { return ( e ) => { const fieldValue = parseInt ( e . target . value , 10 ) ; updateOrClearSizeForField ( fieldName , fieldValue , updateAction , clearAction ) ; } ; } ; const handleFieldNumberBlur = ( fieldName , updateAction , clearAction ) => { return ( e ) => { let fieldValue = parseInt ( e . target . value , 10 ) ; if ( ! isNaN ( fieldValue ) ) { fieldValue = Math . min ( SIZE_FIELD_MAXIMUM , Math . max ( SIZE_FIELD_MINIMUM , fieldValue ) ) ; } updateOrClearSizeForField ( fieldName , fieldValue , updateAction , clearAction ) ; } ; } ; interface Props { fieldSettings : Partial < FieldResultSetting > ; fieldName : string ; fieldEnabledProperty : keyof FieldResultSetting ; fieldSizeProperty : keyof FieldResultSetting ; updateAction : ( fieldName : string , size : number ) => void ; clearAction : ( fieldName : string ) => void ; } export const FieldNumber = ( { fieldSettings , fieldName , fieldEnabledProperty , fieldSizeProperty , updateAction , clearAction , } ) => { return ( < EuiFieldNumber value = { typeof fieldSettings [ fieldSizeProperty ] === 'number' ? ( fieldSettings [ fieldSizeProperty ] as number ) : ' ' } placeholder = { i18n . translate ( 'xpack.enterpriseSearch.appSearch.engine.resultSettings.numberFieldPlaceholder' , { defaultMessage : 'No limit' } ) } disabled = { ! fieldSettings [ fieldEnabledProperty ] } min = { SIZE_FIELD_MINIMUM } max = { SIZE_FIELD_MAXIMUM } onChange = { handleFieldNumberChange ( fieldName , updateAction , clearAction ) } onBlur = { handleFieldNumberBlur ( fieldName , updateAction , clearAction ) } size = { 4 } / > ) ; } ;