From ebffdb5ecb6c50d89f5484aa3d9d883dca91fdc7 Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Wed, 17 Oct 2018 03:15:25 +0530
Subject: [PATCH] console: add autoscroll

---
 src/components/Console.jsx | 120 +++++++++++++++++++++----------------
 1 file changed, 70 insertions(+), 50 deletions(-)

diff --git a/src/components/Console.jsx b/src/components/Console.jsx
index 2f23035..b44a8a3 100644
--- a/src/components/Console.jsx
+++ b/src/components/Console.jsx
@@ -1,4 +1,5 @@
 import { h, Component } from 'preact';
+import { PureComponent } from 'preact-compat';
 
 import { ObjectInspector, chromeDark } from 'react-inspector';
 
@@ -26,57 +27,76 @@ class LogRow extends Component {
 	}
 }
 
-export function Console({
-	logs,
-	isConsoleOpen,
-	onConsoleHeaderDblClick,
-	onClearConsoleBtnClick,
-	toggleConsole,
-	onEvalInputKeyup
-}) {
-	return (
-		<div id="consoleEl" class={`console ${true ? '' : 'is-minimized'}`}>
-			<div id="consoleLogEl" class="console__log">
-				<div
-					class="js-console__header  code-wrap__header"
-					title="Double click to toggle console"
-					onDblClick={onConsoleHeaderDblClick}
-				>
-					<span class="code-wrap__header-label">
-						Console (<span>{logs.length}</span>)
-					</span>
-					<div class="code-wrap__header-right-options">
-						<a
-							class="code-wrap__header-btn"
-							title="Clear console (CTRL + L)"
-							onClick={onClearConsoleBtnClick}
-						>
-							<svg>
-								<use xlinkHref="#cancel-icon" />
-							</svg>
-						</a>
-						<a
-							class="code-wrap__header-btn  code-wrap__collapse-btn"
-							title="Toggle console"
-							onClick={toggleConsole}
-						/>
+export class Console extends Component {
+	componentWillUpdate(nextProps) {
+		if (nextProps.logs != this.props.logs) {
+			// Scroll down after new log dom is inserted
+			setTimeout(() => {
+				this.logContainerEl.scrollTop = this.logContainerEl.scrollHeight;
+			}, 1);
+		}
+	}
+	render() {
+		const {
+			logs,
+			isConsoleOpen,
+			onConsoleHeaderDblClick,
+			onClearConsoleBtnClick,
+			toggleConsole,
+			onEvalInputKeyup
+		} = this.props;
+
+		return (
+			<div id="consoleEl" class={`console ${true ? '' : 'is-minimized'}`}>
+				<div id="consoleLogEl" class="console__log">
+					<div
+						class="js-console__header  code-wrap__header"
+						title="Double click to toggle console"
+						onDblClick={onConsoleHeaderDblClick}
+					>
+						<span class="code-wrap__header-label">
+							Console (<span>{logs.length}</span>)
+						</span>
+						<div class="code-wrap__header-right-options">
+							<a
+								class="code-wrap__header-btn"
+								title="Clear console (CTRL + L)"
+								onClick={onClearConsoleBtnClick}
+							>
+								<svg>
+									<use xlinkHref="#cancel-icon" />
+								</svg>
+							</a>
+							<a
+								class="code-wrap__header-btn  code-wrap__collapse-btn"
+								title="Toggle console"
+								onClick={toggleConsole}
+							/>
+						</div>
 					</div>
+					<ul
+						class="console__items"
+						ref={el => {
+							this.logContainerEl = el;
+						}}
+					>
+						{logs.map(log => <LogRow data={log} />)}
+					</ul>
+				</div>
+				<div
+					id="consolePromptEl"
+					class="console__prompt flex flex-v-center flex-shrink-0"
+				>
+					<svg width="18" height="18" fill="#346fd2">
+						<use xlinkHref="#chevron-icon" />
+					</svg>
+					<input
+						tabIndex={isConsoleOpen ? 0 : -1}
+						onKeyUp={onEvalInputKeyup}
+						class="console-exec-input"
+					/>
 				</div>
-				<ul class="console__items">{logs.map(log => <LogRow data={log} />)}</ul>
 			</div>
-			<div
-				id="consolePromptEl"
-				class="console__prompt flex flex-v-center flex-shrink-0"
-			>
-				<svg width="18" height="18" fill="#346fd2">
-					<use xlinkHref="#chevron-icon" />
-				</svg>
-				<input
-					tabIndex={isConsoleOpen ? 0 : -1}
-					onKeyUp={onEvalInputKeyup}
-					class="console-exec-input"
-				/>
-			</div>
-		</div>
-	);
+		);
+	}
 }