mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-09 16:06:21 +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 { 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>
);
);
}
}