Refactoring

lib/components/commandLine/commandLine.style.js

@@ -9,4 +9,5 @@ export var commandLineInput = {
     outline: 'none',
     zIndex: -1,
     position: 'absolute',
+    left: '-1000px',
 };

lib/components/terminalStateless.d.ts

@@ -1,3 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ITerminalStatelessProps } from './terminalStateless.interface';
-export declare function TerminalStateless(props: ITerminalStatelessProps): JSX.Element;
+export declare class TerminalStateless extends React.Component<ITerminalStatelessProps> {
+    private boxRef;
+    render(): JSX.Element;
+    componentDidUpdate(): void;
+}

lib/components/terminalStateless.interface.d.ts

@@ -2,4 +2,6 @@ export interface ITerminalStatelessProps {
     history: string[];
     prompt: string;
     onReceiveCommand: (command: string) => void;
+    height?: string;
+    width?: string;
 }

lib/components/terminalStateless.js

@@ -1,12 +1,30 @@
+import * as tslib_1 from "tslib";
 import * as React from 'react';
 import { CommandLine } from './commandLine/commandLine';
 import * as styles from './terminalStateless.style';
-export function TerminalStateless(props) {
-    var history = props.history, prompt = props.prompt, onReceiveCommand = props.onReceiveCommand;
-    return (React.createElement("div", { style: styles.terminalBox },
-        React.createElement("div", { style: styles.terminalContainer },
-            history.map(function (line, index) {
-                return React.createElement("div", { key: index }, line);
-            }),
-            React.createElement(CommandLine, { onReceiveCommand: onReceiveCommand, prompt: prompt }))));
-}
+var TerminalStateless = /** @class */ (function (_super) {
+    tslib_1.__extends(TerminalStateless, _super);
+    function TerminalStateless() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.boxRef = React.createRef();
+        return _this;
+    }
+    TerminalStateless.prototype.render = function () {
+        var _a = this.props, history = _a.history, prompt = _a.prompt, onReceiveCommand = _a.onReceiveCommand, width = _a.width, height = _a.height;
+        var terminalBox = tslib_1.__assign({}, styles.terminalBox, { width: width || styles.terminalBox.width, height: height || styles.terminalBox.height });
+        return (React.createElement("div", { style: terminalBox, ref: this.boxRef },
+            React.createElement("div", { style: styles.terminalContainer },
+                history.map(function (line, index) {
+                    return React.createElement("div", { key: index, style: styles.terminalContainerLine }, line);
+                }),
+                React.createElement(CommandLine, { onReceiveCommand: onReceiveCommand, prompt: prompt }))));
+    };
+    TerminalStateless.prototype.componentDidUpdate = function () {
+        var box = this.boxRef.current;
+        box.scroll({
+            top: box.scrollHeight,
+        });
+    };
+    return TerminalStateless;
+}(React.Component));
+export { TerminalStateless };

lib/components/terminalStateless.style.d.ts

@@ -1,3 +1,4 @@
 import { CSSProperties } from 'react';
 export declare const terminalBox: CSSProperties;
 export declare const terminalContainer: CSSProperties;
+export declare const terminalContainerLine: CSSProperties;

lib/components/terminalStateless.style.js

@@ -1,12 +1,15 @@
 export var terminalBox = {
     fontFamily: 'monospace',
-    display: 'flex',
     backgroundColor: '#44494e',
-    fontWeight: 'bold',
-    height: '400px',
+    height: '500px',
+    overflowY: 'scroll',
 };
 export var terminalContainer = {
     fontSize: '14px',
     color: '#20e444',
     padding: '8px',
 };
+export var terminalContainerLine = {
+    margin: 0,
+    whiteSpace: 'pre',
+};

lib/terminal.interface.d.ts

@@ -4,6 +4,8 @@ export interface ITerminalOwnProps {
     terminalEmulator: {
         execute: (command: string, setState: SetState) => void;
     };
+    height?: string;
+    width?: string;
 }
 export interface ITerminalState {
     history: string[];

lib/terminal.js

@@ -22,7 +22,8 @@ var Terminal = /** @class */ (function (_super) {
     }
     Terminal.prototype.render = function () {
         var _a = this.state, history = _a.history, prompt = _a.prompt;
-        return (React.createElement(TerminalStateless, { history: history, prompt: prompt, onReceiveCommand: this.handleReceiveCommand }));
+        var _b = this.props, height = _b.height, width = _b.width;
+        return (React.createElement(TerminalStateless, { history: history, prompt: prompt, onReceiveCommand: this.handleReceiveCommand, height: height, width: width }));
     };
     Terminal.defaultProps = {
         history: [],

lib/terminalEmulator/executors/baseExecutor.d.ts

@@ -1,7 +1,8 @@
 import { SetState } from '../terminalEmulator.interface';
 export declare abstract class BaseExecutor {
-    protected commandPattern: RegExp;
     abstract execute(command: string, setState: SetState): void;
     checkCommand(command: string): boolean;
+    init(): void;
     abstract isCompleted(): boolean;
+    protected abstract getCommandPattern(): RegExp;
 }

lib/terminalEmulator/executors/baseExecutor.js

@@ -2,7 +2,11 @@ var BaseExecutor = /** @class */ (function () {
     function BaseExecutor() {
     }
     BaseExecutor.prototype.checkCommand = function (command) {
-        return this.commandPattern.test(command);
+        var commandPattern = this.getCommandPattern();
+        return commandPattern.test(command);
+    };
+    BaseExecutor.prototype.init = function () {
+        // it necessary for complicated command
     };
     return BaseExecutor;
 }());

lib/terminalEmulator/executors/clearExecutor.d.ts

@@ -1,7 +1,7 @@
 import { SetState } from '../terminalEmulator.interface';
 import { BaseExecutor } from './baseExecutor';
 export declare class ClearExecutor extends BaseExecutor {
-    readonly commandPattern: RegExp;
     execute(command: string, setState: SetState): void;
     isCompleted(): boolean;
+    protected getCommandPattern(): RegExp;
 }

lib/terminalEmulator/executors/clearExecutor.js

@@ -3,9 +3,7 @@ import { BaseExecutor } from './baseExecutor';
 var ClearExecutor = /** @class */ (function (_super) {
     tslib_1.__extends(ClearExecutor, _super);
     function ClearExecutor() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.commandPattern = new RegExp('^clear$', 'i');
-        return _this;
+        return _super !== null && _super.apply(this, arguments) || this;
     }
     ClearExecutor.prototype.execute = function (command, setState) {
         setState(function (prevState, props) {
@@ -18,6 +16,9 @@ var ClearExecutor = /** @class */ (function (_super) {
     ClearExecutor.prototype.isCompleted = function () {
         return true;
     };
+    ClearExecutor.prototype.getCommandPattern = function () {
+        return /^clear$/i;
+    };
     return ClearExecutor;
 }(BaseExecutor));
 export { ClearExecutor };

lib/terminalEmulator/executors/helpExecutor.d.ts

@@ -1,7 +1,7 @@
 import { SetState } from '../terminalEmulator.interface';
 import { BaseExecutor } from './baseExecutor';
 export declare class HelpExecutor extends BaseExecutor {
-    constructor();
     execute(command: string, setState: SetState): void;
     isCompleted(): boolean;
+    protected getCommandPattern(): RegExp;
 }

lib/terminalEmulator/executors/helpExecutor.js

@@ -3,9 +3,7 @@ import { BaseExecutor } from './baseExecutor';
 var HelpExecutor = /** @class */ (function (_super) {
     tslib_1.__extends(HelpExecutor, _super);
     function HelpExecutor() {
-        var _this = _super.call(this) || this;
-        _this.commandPattern = new RegExp('^help$', 'i');
-        return _this;
+        return _super !== null && _super.apply(this, arguments) || this;
     }
     HelpExecutor.prototype.execute = function (command, setState) {
         setState(function (prevState, props) { return ({
@@ -18,6 +16,9 @@ var HelpExecutor = /** @class */ (function (_super) {
     HelpExecutor.prototype.isCompleted = function () {
         return true;
     };
+    HelpExecutor.prototype.getCommandPattern = function () {
+        return /^help$/i;
+    };
     return HelpExecutor;
 }(BaseExecutor));
 export { HelpExecutor };

lib/terminalEmulator/terminalEmulator.d.ts

@@ -3,7 +3,7 @@ import { ICommandExecutor, SetState } from './terminalEmulator.interface';
 export declare class TerminalEmulator {
     private command;
     private readonly executors;
-    private ranExecutor;
+    private currentExecutor;
     constructor(params: ICommandExecutor);
     addExecutor(executor: BaseExecutor): void;
     execute(command: string, setState: SetState): void;

lib/terminalEmulator/terminalEmulator.js

@@ -9,14 +9,15 @@ var TerminalEmulator = /** @class */ (function () {
     };
     TerminalEmulator.prototype.execute = function (command, setState) {
         this.command = command.trim();
-        if (this.ranExecutor && !this.ranExecutor.isCompleted()) {
-            this.ranExecutor.execute(command, setState);
+        if (this.currentExecutor && !this.currentExecutor.isCompleted()) {
+            this.currentExecutor.execute(command, setState);
         }
         else {
             var matchedExecutor = this.executors.find(function (executor) { return executor.checkCommand(command); });
             if (matchedExecutor) {
-                this.ranExecutor = matchedExecutor;
-                this.ranExecutor.execute(command, setState);
+                this.currentExecutor = matchedExecutor;
+                this.currentExecutor.init();
+                this.currentExecutor.execute(command, setState);
             }
             else if (command !== '') {
                 this.errorExecutor(setState);

src/components/commandLine/commandLine.style.ts

@@ -11,4 +11,5 @@ export const commandLineInput: CSSProperties = {
     outline: 'none',
     zIndex: -1,
     position: 'absolute',
+    left: '-1000px',
 };

src/components/terminalStateless.interface.ts

@@ -2,4 +2,6 @@ export interface ITerminalStatelessProps {
     history: string[];
     prompt: string;
     onReceiveCommand: (command: string) => void;
+    height?: string;
+    width?: string;
 }

src/components/terminalStateless.style.ts

@@ -2,14 +2,18 @@ import {CSSProperties} from 'react';
 
 export const terminalBox: CSSProperties = {
     fontFamily: 'monospace',
-    display: 'flex',
     backgroundColor: '#44494e',
-    fontWeight: 'bold',
-    height: '400px',
+    height: '500px',
+    overflowY: 'scroll',
 };
 
 export const terminalContainer: CSSProperties = {
     fontSize: '14px',
     color: '#20e444',
     padding: '8px',
 };
+
+export const terminalContainerLine: CSSProperties = {
+    margin: 0,
+    whiteSpace: 'pre',
+};

src/components/terminalStateless.tsx

@@ -1,18 +1,35 @@
+import {CSSProperties} from 'react';
 import * as React from 'react';
 import {CommandLine} from './commandLine/commandLine';
 import {ITerminalStatelessProps} from './terminalStateless.interface';
 import * as styles from './terminalStateless.style';
 
-export function TerminalStateless(props: ITerminalStatelessProps) {
-    const {history, prompt, onReceiveCommand} = props;
+export class TerminalStateless extends React.Component<ITerminalStatelessProps> {
+    private boxRef = React.createRef<HTMLDivElement>();
 
-    return (
-        <div style={styles.terminalBox}>
-            <div style={styles.terminalContainer}>
-                {history.map((line, index) =>
-                    <div key={index}>{line}</div>)}
-                <CommandLine onReceiveCommand={onReceiveCommand} prompt={prompt}/>
+    public render() {
+        const {history, prompt, onReceiveCommand, width, height} = this.props;
+        const terminalBox: CSSProperties = {
+            ...styles.terminalBox,
+            width: width || styles.terminalBox.width,
+            height: height || styles.terminalBox.height,
+        };
+
+        return (
+            <div style={terminalBox} ref={this.boxRef}>
+                <div style={styles.terminalContainer}>
+                    {history.map((line, index) =>
+                        <div key={index} style={styles.terminalContainerLine}>{line}</div>)}
+                    <CommandLine onReceiveCommand={onReceiveCommand} prompt={prompt}/>
+                </div>
             </div>
-        </div>
-    );
+        );
+    }
+
+    public componentDidUpdate() {
+        const box = this.boxRef.current!;
+        box.scroll({
+            top: box.scrollHeight,
+        });
+    }
 }

src/terminal.interface.ts

@@ -4,6 +4,8 @@ export interface ITerminalOwnProps {
     terminalEmulator: {
         execute: (command: string, setState: SetState) => void;
     };
+    height?: string;
+    width?: string;
 }
 
 export interface ITerminalState {

src/terminal.tsx

@@ -15,11 +15,14 @@ export class Terminal extends React.Component<ITerminalOwnProps, ITerminalState>
 
     public render() {
         const {history, prompt} = this.state;
+        const {height, width} = this.props;
         return (
             <TerminalStateless
                 history={history}
                 prompt={prompt}
                 onReceiveCommand={this.handleReceiveCommand}
+                height={height}
+                width={width}
             />
         );
     }

src/terminalEmulator/executors/baseExecutor.ts

@@ -1,13 +1,18 @@
 import {SetState} from '../terminalEmulator.interface';
 
 export abstract class BaseExecutor {
-    protected commandPattern: RegExp;
-
     public abstract execute(command: string, setState: SetState): void;
 
     public checkCommand(command: string): boolean {
-        return this.commandPattern.test(command);
+        const commandPattern = this.getCommandPattern();
+        return commandPattern.test(command);
+    }
+
+    public init(): void {
+        // it necessary for complicated command
     }
 
     public abstract isCompleted(): boolean;
+
+    protected abstract getCommandPattern(): RegExp;
 }

src/terminalEmulator/executors/clearExecutor.ts

@@ -2,8 +2,6 @@ import {SetState} from '../terminalEmulator.interface';
 import {BaseExecutor} from './baseExecutor';
 
 export class ClearExecutor extends BaseExecutor {
-    public readonly commandPattern = new RegExp('^clear$', 'i');
-
     public execute(command: string, setState: SetState): void {
         setState((prevState, props) => {
             return {
@@ -16,4 +14,8 @@ export class ClearExecutor extends BaseExecutor {
     public isCompleted(): boolean {
         return true;
     }
+
+    protected getCommandPattern(): RegExp {
+        return /^clear$/i;
+    }
 }

src/terminalEmulator/executors/helpExecutor.ts

@@ -2,12 +2,6 @@ import {SetState} from '../terminalEmulator.interface';
 import {BaseExecutor} from './baseExecutor';
 
 export class HelpExecutor extends BaseExecutor {
-    constructor() {
-        super();
-
-        this.commandPattern = new RegExp('^help$', 'i');
-    }
-
     public execute(command: string, setState: SetState): void {
         setState((prevState, props) => ({
             history: [
@@ -21,4 +15,8 @@ export class HelpExecutor extends BaseExecutor {
     public isCompleted(): boolean {
         return true;
     }
+
+    protected getCommandPattern(): RegExp {
+        return /^help$/i;
+    }
 }