1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-10 08:26:19 +02:00

console: add autoscroll

This commit is contained in:
Kushagra Gour
2018-10-17 03:15:25 +05:30
parent 7032dfe03f
commit ebffdb5ecb

View File

@ -1,4 +1,5 @@
import { h, Component } from 'preact'; import { h, Component } from 'preact';
import { PureComponent } from 'preact-compat';
import { ObjectInspector, chromeDark } from 'react-inspector'; import { ObjectInspector, chromeDark } from 'react-inspector';
@ -26,14 +27,25 @@ class LogRow extends Component {
} }
} }
export function Console({ 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, logs,
isConsoleOpen, isConsoleOpen,
onConsoleHeaderDblClick, onConsoleHeaderDblClick,
onClearConsoleBtnClick, onClearConsoleBtnClick,
toggleConsole, toggleConsole,
onEvalInputKeyup onEvalInputKeyup
}) { } = this.props;
return ( return (
<div id="consoleEl" class={`console ${true ? '' : 'is-minimized'}`}> <div id="consoleEl" class={`console ${true ? '' : 'is-minimized'}`}>
<div id="consoleLogEl" class="console__log"> <div id="consoleLogEl" class="console__log">
@ -62,7 +74,14 @@ export function Console({
/> />
</div> </div>
</div> </div>
<ul class="console__items">{logs.map(log => <LogRow data={log} />)}</ul> <ul
class="console__items"
ref={el => {
this.logContainerEl = el;
}}
>
{logs.map(log => <LogRow data={log} />)}
</ul>
</div> </div>
<div <div
id="consolePromptEl" id="consolePromptEl"
@ -80,3 +99,4 @@ export function Console({
</div> </div>
); );
} }
}