mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-10 00:16:18 +02:00
Code Issues Releases Wiki Activity

console: add autoscroll

Browse Source
This commit is contained in:
Kushagra Gour
2018-10-17 03:15:25 +05:30
parent 7032dfe03f
commit ebffdb5ecb
1 changed files with 70 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/components/Console.jsx
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,57 +27,76 @@ class LogRow extends Component {
} }
} }
export function Console({ export class Console extends Component {
logs, componentWillUpdate(nextProps) {
isConsoleOpen, if (nextProps.logs != this.props.logs) {
onConsoleHeaderDblClick, // Scroll down after new log dom is inserted
onClearConsoleBtnClick, setTimeout(() => {
toggleConsole, this.logContainerEl.scrollTop = this.logContainerEl.scrollHeight;
onEvalInputKeyup }, 1);
}) { }
return ( }
<div id="consoleEl" class={`console ${true ? '' : 'is-minimized'}`}> render() {
<div id="consoleLogEl" class="console__log"> const {
<div logs,
class="js-console__header code-wrap__header" isConsoleOpen,
title="Double click to toggle console" onConsoleHeaderDblClick,
onDblClick={onConsoleHeaderDblClick} onClearConsoleBtnClick,
> toggleConsole,
<span class="code-wrap__header-label"> onEvalInputKeyup
Console (<span>{logs.length}</span>) } = this.props;
</span>
<div class="code-wrap__header-right-options"> return (
<a <div id="consoleEl" class={`console ${true ? '' : 'is-minimized'}`}>
class="code-wrap__header-btn" <div id="consoleLogEl" class="console__log">
title="Clear console (CTRL + L)" <div
onClick={onClearConsoleBtnClick} class="js-console__header code-wrap__header"
> title="Double click to toggle console"
<svg> onDblClick={onConsoleHeaderDblClick}
<use xlinkHref="#cancel-icon" /> >
</svg> <span class="code-wrap__header-label">
</a> Console (<span>{logs.length}</span>)
<a </span>
class="code-wrap__header-btn code-wrap__collapse-btn" <div class="code-wrap__header-right-options">
title="Toggle console" <a
onClick={toggleConsole} 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> </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> </div>
<ul class="console__items">{logs.map(log => <LogRow data={log} />)}</ul>
</div> </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>
);
} }