{"size": 1765, "ext": "js", "max_stars_repo_path": "espweb/src/js/pane/common/terminal.js", "max_stars_repo_name": "mincrmatt12/MSign", "max_stars_repo_stars_event_min_datetime": "2019-11-04T17:01:46.000Z", "max_stars_repo_stars_event_max_datetime": "2020-06-18T07:07:34.000Z", "max_issues_repo_path": "espweb/src/js/pane/common/terminal.js", "max_issues_repo_name": "mincrmatt12/SignCode", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "espweb/src/js/pane/common/terminal.js", "max_forks_repo_name": "mincrmatt12/SignCode", "max_forks_repo_forks_event_min_datetime": "2020-06-18T07:07:37.000Z", "max_forks_repo_forks_event_max_datetime": "2020-10-14T04:41:12.000Z"}
{"max_stars_count": 5, "max_issues_count": null, "max_forks_count": 2, "avg_line_length": 26.7424242424, "max_line_length": 112, "alphanum_fraction": 0.6668555241}
import React from 'react'
import FormControl from 'react-bootstrap/FormControl'
import Form from 'react-bootstrap/Form'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Card from 'react-bootstrap/Card'
import Container from 'react-bootstrap/Container'
import Button from 'react-bootstrap/Button'

class Terminal extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			editText: ""
		};
		this.willScroll = false; // purposely not in state

		this.scrollRef = React.createRef();
	}

	onChangeText(e) {
		this.setState({editText: e.target.value});
	}

	shouldComponentUpdate() {
		if (this.scrollRef.scrollTop != undefined && this.scrollRef.scrollTop == this.scrollRef.scrollTopMax) {
			this.willScroll = true;
		}
		return true;
	}

	componentDidUpdate() {
		if (this.willScroll) {this.scrollRef.scrollTop = this.scrollRef.scrollTopMax;}
		this.willScroll = false;
	}

	render() {
		return <div>
			<div className="terminal" ref={(ref) => {this.scrollRef = ref}}>
				{this.props.texts.map((x) => {
					return <pre className={this.props.classNames[x[0]] + " terminal-text"}><output>{x[1]}</output></pre>
				})}
			</div>

			{this.props.inputBar && (
				<FormControl type="text rounded-0 rounded-bottom" onChange={(e) => this.onChangeText(e)} onKeyDown={(e) => {
					if (e.key == "Enter") {
						this.props.onSend(this.state.editText);
						this.setState({editText: ""});
					}
				}} value={this.state.editText} placeholder="enter command" />
			)}
		</div>
	}
}

Terminal.defaultProps = {
	classNames: ["text-success", "text-white"],
	inputBar: true,
	onSend: (text) => {console.log("unhooked: " + text);},
	texts: [[0, "test"], [1, "also test"], [1, "also test"]]
}

export default Terminal;
