Refactoring. Update structure

example/index.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import {terminalEmulator} from '../src/terminalEmulator/terminalEmulator';
 import {Terminal} from '../src/terminal';
-
 import './index.css';
 
 ReactDOM.render(
-    <Terminal/>,
+    <Terminal
+        terminalEmulator={terminalEmulator}
+    />,
     document.getElementById('root') as HTMLElement,
 );

jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'node',
-};
+	preset: 'ts-jest',
+	testEnvironment: 'node',
+	testPathIgnorePatterns: [ '/node_modules/', 'lib', 'example' ],
+};

lib/components/commandLine/commandLine.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ICommandLineOwnProps, ICommandLineState } from './commandLine.interface';
+export declare class CommandLine extends React.Component<ICommandLineOwnProps, ICommandLineState> {
+    state: ICommandLineState;
+    private inputRef;
+    private interval;
+    private keyboardEvents;
+    render(): JSX.Element;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private handleInputChange;
+    private handleSelect;
+    private renderCommandLive;
+    private updateCaretPosition;
+    private handleEnterKeyPress;
+}

lib/components/commandLine/commandLine.interface.d.ts

@@ -0,0 +1,8 @@
+export interface ICommandLineOwnProps {
+    prompt: string;
+    onReceiveCommand: (commandString: string) => void;
+}
+export interface ICommandLineState {
+    commandString: string;
+    caretPosition: number;
+}

lib/components/commandLine/commandLine.js

@@ -0,0 +1,75 @@
+import * as tslib_1 from "tslib";
+import * as React from 'react';
+import { Caret } from './components/caret';
+import * as styles from './commandLine.style';
+var CommandLine = /** @class */ (function (_super) {
+    tslib_1.__extends(CommandLine, _super);
+    function CommandLine() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            commandString: '',
+            caretPosition: 0,
+        };
+        _this.inputRef = React.createRef();
+        _this.keyboardEvents = ['keyup', 'keydown', 'keypress'];
+        _this.handleInputChange = function (event) {
+            var value = event.target.value;
+            _this.setState({
+                commandString: value,
+            });
+            _this.updateCaretPosition();
+        };
+        _this.handleSelect = function (event) {
+            event.target.selectionStart = event.target.selectionEnd;
+        };
+        _this.renderCommandLive = function () {
+            var _a = _this.state, commandString = _a.commandString, caretPosition = _a.caretPosition;
+            var commandStringWithCaret = commandString.split('');
+            commandStringWithCaret.splice(_this.state.caretPosition, 1, React.createElement(Caret, { key: 'caret', commandString: commandString, caretPosition: caretPosition }));
+            return commandStringWithCaret;
+        };
+        _this.updateCaretPosition = function () {
+            var newCaretPosition = _this.inputRef.current.selectionStart;
+            _this.setState({
+                caretPosition: Number(newCaretPosition),
+            });
+        };
+        _this.handleEnterKeyPress = function (event) {
+            if (event.key === 'Enter') {
+                _this.props.onReceiveCommand(_this.state.commandString);
+                _this.setState({
+                    commandString: '',
+                    caretPosition: 0,
+                });
+            }
+        };
+        return _this;
+    }
+    CommandLine.prototype.render = function () {
+        var prompt = this.props.prompt;
+        return (React.createElement("div", null,
+            React.createElement("span", null,
+                prompt,
+                " "),
+            this.renderCommandLive(),
+            React.createElement("input", { type: "text", style: styles.commandLineInput, onChange: this.handleInputChange, autoFocus: true, ref: this.inputRef, onSelect: this.handleSelect, value: this.state.commandString })));
+    };
+    CommandLine.prototype.componentDidMount = function () {
+        var _this = this;
+        this.interval = setInterval(function () { return _this.inputRef.current.focus(); }, 500);
+        this.keyboardEvents.map(function (eventName) {
+            return document.addEventListener(eventName, _this.updateCaretPosition);
+        });
+        document.addEventListener('keypress', this.handleEnterKeyPress);
+    };
+    CommandLine.prototype.componentWillUnmount = function () {
+        var _this = this;
+        clearInterval(this.interval);
+        this.keyboardEvents.map(function (eventName) {
+            return document.removeEventListener(eventName, _this.updateCaretPosition);
+        });
+        document.removeEventListener('keyPress', this.handleEnterKeyPress);
+    };
+    return CommandLine;
+}(React.Component));
+export { CommandLine };

lib/components/commandLine/commandLine.style.d.ts

@@ -0,0 +1,2 @@
+import { CSSProperties } from 'react';
+export declare const commandLineInput: CSSProperties;

lib/components/commandLine/commandLine.style.js

@@ -0,0 +1,12 @@
+export var commandLineInput = {
+    fontFamily: 'monospace',
+    fontWeight: 'bold',
+    backgroundColor: '#44494e',
+    border: 'none',
+    color: '#20e444',
+    fontSize: '14px',
+    marginLeft: '4px',
+    outline: 'none',
+    zIndex: -1,
+    position: 'absolute',
+};

lib/components/commandLine/components/caret.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ICaretOwnProps, ICaretState } from './caret.interface';
+export declare class Caret extends React.Component<ICaretOwnProps, ICaretState> {
+    state: ICaretState;
+    private interval;
+    render(): JSX.Element;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private getCaretStyles;
+}

lib/components/commandLine/components/caret.interface.d.ts

@@ -0,0 +1,7 @@
+export interface ICaretOwnProps {
+    caretPosition: number;
+    commandString: string;
+}
+export interface ICaretState {
+    blinked: boolean;
+}

lib/components/commandLine/components/caret.js

@@ -0,0 +1,38 @@
+import * as tslib_1 from "tslib";
+import * as React from 'react';
+import * as styles from './caret.style';
+var Caret = /** @class */ (function (_super) {
+    tslib_1.__extends(Caret, _super);
+    function Caret() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            blinked: false,
+        };
+        return _this;
+    }
+    Caret.prototype.render = function () {
+        var _a = this.props, commandString = _a.commandString, caretPosition = _a.caretPosition;
+        var caretSymbol = commandString[caretPosition] === undefined
+            ? 'C'
+            : React.createElement("span", { style: styles.caretCaretWithSymbol }, commandString[caretPosition]);
+        return (React.createElement("span", { key: 'caret', style: this.getCaretStyles() }, caretSymbol));
+    };
+    Caret.prototype.componentDidMount = function () {
+        var _this = this;
+        this.interval = setInterval(function () {
+            _this.setState({
+                blinked: !_this.state.blinked,
+            });
+        }, 550);
+    };
+    Caret.prototype.componentWillUnmount = function () {
+        clearInterval(this.interval);
+    };
+    Caret.prototype.getCaretStyles = function () {
+        return this.state.blinked
+            ? styles.caretCaretBlinked
+            : styles.caretCaret;
+    };
+    return Caret;
+}(React.Component));
+export { Caret };

lib/components/commandLine/components/caret.style.d.ts

@@ -0,0 +1,4 @@
+import { CSSProperties } from 'react';
+export declare const caretCaret: CSSProperties;
+export declare const caretCaretBlinked: CSSProperties;
+export declare const caretCaretWithSymbol: CSSProperties;

lib/components/commandLine/components/caret.style.js

@@ -0,0 +1,10 @@
+export var caretCaret = {
+    backgroundColor: '#20e444',
+};
+export var caretCaretBlinked = {
+    backgroundColor: '#44494e',
+    color: '#44494e',
+};
+export var caretCaretWithSymbol = {
+    color: '#20e444',
+};

lib/components/terminalStateless.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ITerminalStatelessProps } from './terminalStateless.interface';
+export declare function TerminalStateless(props: ITerminalStatelessProps): JSX.Element;

lib/components/terminalStateless.interface.d.ts

@@ -0,0 +1,5 @@
+export interface ITerminalStatelessProps {
+    history: string[];
+    prompt: string;
+    onReceiveCommand: (command: string) => void;
+}

lib/components/terminalStateless.js

@@ -0,0 +1,12 @@
+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 }))));
+}

lib/components/terminalStateless.style.d.ts

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

lib/components/terminalStateless.style.js

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

lib/index.d.ts

@@ -0,0 +1,2 @@
+export { Terminal } from './terminal';
+export { terminalEmulator } from './terminalEmulator/terminalEmulator';

lib/index.js

@@ -0,0 +1,2 @@
+export { Terminal } from './terminal';
+export { terminalEmulator } from './terminalEmulator/terminalEmulator';