import * as React from 'react' ; import Constants from '../../model/enums/Constants' ; import './NumericTextBox.css' ; interface NumericTextBoxProps { value : number ; onValueChanged : ( value : number ) => void ; onCancel : ( ) => void ; } interface NumericTextBoxState { value : string ; } export default class NumericTextBox extends React . Component < NumericTextBoxProps , NumericTextBoxState > { constructor ( props ) { super ( props ) ; this . state = { value : props . value . toString ( ) } ; } componentDidUpdate ( prevProps ) { if ( prevProps . value !== this . props . value ) { this . setState ( ( ) => ( { value : this . props . value . toString ( ) } ) ) ; } } onValueChanged = ( e ) : void => { const { value } = e . target ; this . setState ( ( ) => ( { value } ) ) ; } ; onFocus = ( e ) : void => { e . target . select ( ) ; } ; onBlur = ( ) : void => { const newValue = parseInt ( this . state . value , 10 ) ; if ( this . props . value !== newValue ) { this . props . onValueChanged ( newValue ) ; } } ; onKeyDown = ( e ) : void => { if ( e . keyCode === Constants . KEY_ENTER ) { const newValue = parseInt ( this . state . value , 10 ) ; if ( this . props . value !== newValue ) { this . props . onValueChanged ( newValue ) ; } else { this . props . onCancel ( ) ; } } else if ( e . keyCode === Constants . KEY_ESCAPE ) { this . props . onCancel ( ) ; } } ; render ( ) { return ( < input className = "numericTextBox" type = "text" value = { this . state . value } onChange = { this . onValueChanged } onFocus = { this . onFocus } onBlur = { this . onBlur } onKeyDown = { this . onKeyDown } / > ) ; } }