import React from 'react' ; import log from 'loglevel' ; export interface IInputBoxProps { onCommandEntered : ( input : string ) => void ; } export default class InputBox extends React . Component < IInputBoxProps > { history : string [ ] ; historyIndex : number ; nameInput : HTMLInputElement | null ; constructor ( props ) { super ( props ) ; this . nameInput = null ; this . history = [ ] ; this . historyIndex = - 1 ; } componentDidMount ( ) { if ( this . nameInput != null ) this . nameInput . focus ( ) ; } render ( ) { return < input id = "in" type = "text" ref = { ( input ) => { this . nameInput = input ; } } onKeyUp = { e => this . onKeyUp ( e ) } onKeyDown = { e => this . onKeyDown ( e ) } className = "expressionInput mono" placeholder = "type expression like '1>>2' or 'help' " autoComplete = "off" / > ; } onKeyUp ( e ) { var input = e . target ; if ( e . keyCode != 13 || input . value . trim ( ) . length == 0 ) { return ; } var commandInput = input . value ; this . history . unshift ( commandInput ) ; this . historyIndex = - 1 ; input . value = '' ; this . props . onCommandEntered ( commandInput ) ; } onKeyDown ( args ) { if ( args . keyCode == 38 ) { var newIndex = this . historyIndex + 1 ; if ( this . history . length > newIndex ) { args . target . value = this . history [ newIndex ] ; this . historyIndex = newIndex ; } args . preventDefault ( ) ; return ; } if ( args . keyCode == 40 ) { if ( this . historyIndex > 0 ) { args . target . value = this . history [ -- this . historyIndex ] ; } args . preventDefault ( ) ; } } }