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:
@ -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"
|
||||||
@ -79,4 +98,5 @@ export function Console({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user