diff --git a/package.json b/package.json index 42c5514..4ee2e4e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@webscopeio/react-console", - "version": "1.0.4", + "version": "1.0.5", "description": "React component that emulates console behaviour", "author": "jvorcak", "license": "MIT", diff --git a/src/index.tsx b/src/index.tsx index 426b393..bbb67e9 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -17,11 +17,11 @@ export type Props = { type State = { output: Array, commandInProgress: boolean, + input: string, } export default class ReactConsole extends React.Component { - formRef: any = null; inputRef: any = null; wrapperRef: any = null; @@ -31,6 +31,7 @@ export default class ReactConsole extends React.Component { }; state = { + input: '', output: [], commandInProgress: false, }; @@ -44,16 +45,11 @@ export default class ReactConsole extends React.Component { } } - - scrollToBottom = () => { - this.wrapperRef.scrollTo(0, this.wrapperRef.scrollHeight) - }; - onSubmit = async (e: any) => { - const {prompt} = this.props + const {prompt} = this.props; e.preventDefault(); - const data = new FormData(e.target); - const inputString: string = data.get('input') as string; + + const inputString: string = this.state.input if (inputString === null) { return } @@ -61,16 +57,17 @@ export default class ReactConsole extends React.Component { const log = `${prompt}\xa0${inputString}`; if(inputString === '') { - this.setState({ output: [...this.state.output, log]}) - this.formRef.reset() + this.setState({ + output: [...this.state.output, log], + input: '', + }); return } const [cmd, ...args] = inputString.split(" "); if(cmd === 'clear') { - this.formRef.reset() - this.setState({output: []}) + this.setState({output: [], input: ''}) return } @@ -88,15 +85,13 @@ export default class ReactConsole extends React.Component { } catch (err) { } - this.scrollToBottom() } else { this.setState({ output: [...this.state.output, log, `Command '${cmd}' does not exist`] - }, this.scrollToBottom) + }) } - this.formRef.reset() - this.setState({commandInProgress: false}); + this.setState({commandInProgress: false, input: ''}); this.inputRef.focus() }; @@ -114,7 +109,6 @@ export default class ReactConsole extends React.Component { )}
this.formRef = ref} onSubmit={this.onSubmit} >
@@ -123,6 +117,8 @@ export default class ReactConsole extends React.Component { disabled={this.state.commandInProgress} ref={ref => this.inputRef = ref} autoFocus={autoFocus} + value={this.state.input} + onChange={this.onInputChange} autoComplete={'off'} spellCheck={false} autoCapitalize={'false'} @@ -135,6 +131,12 @@ export default class ReactConsole extends React.Component { ) } + onInputChange = (e: any) => { + this.setState({ + input: e.target.value, + }) + } + focusConsole = () => { this.inputRef.focus() }