ui(terminal history): scroll to bottom input when off screen

CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 0.6.2 - 2019-07-15
+
+### Updated
+
+- Scroll to bottom input when off screen
+
 ## 0.6.1 - 2019-07-15
 
 ### Updated

jest.config.js

@@ -1,31 +1,14 @@
 module.exports = {
-  // A list of paths to directories that Jest should use to search for files in
   roots: ['<rootDir>/src'],
-
-  // A map from regular expressions to paths to transformers
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
   },
-
-  // The regexp pattern or array of patterns that Jest uses to detect test files
   testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
-
-  // An array of file extensions your modules use
   moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'node'],
-
-  // An array of regexp pattern strings used to skip coverage collection
   coveragePathIgnorePatterns: ['\\\\node_modules\\\\'],
-
-  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
   testPathIgnorePatterns: ['\\\\node_modules\\\\'],
-
-  // The directory where Jest should output its coverage files
   coverageDirectory: 'coverage',
-
-  // Make calling deprecated APIs throw helpful error messages
   errorOnDeprecated: true,
-
-  // A map from regular expressions to module names that allow to stub out resources with a single module
   moduleNameMapper: {
     '\\.(scss|jpg|png)$': '<rootDir>/node_modules/jest-css-modules',
     '^-!svg-react-loader.*$': '<rootDir>/src/__mocks__/svgMock.tsx',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "termy-the-terminal",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Web-based terminal powered by React",
   "main": "./dist/Terminal.js",
   "license": "MIT",

src/__tests__/index.test.tsx

@@ -8,6 +8,10 @@ import {
 import { Terminal } from '..';
 import exampleFileSystem from '../data/exampleFileSystem';
 
+beforeAll((): void => {
+  Element.prototype.scrollIntoView = jest.fn();
+});
+
 afterEach(cleanup);
 
 describe('general', (): void => {

src/index.tsx

@@ -14,6 +14,13 @@ export class Terminal extends Component<TerminalProps, TerminalState> {
     fileSystem: this.props.fileSystem,
   };
 
+  private inputWrapper: HTMLDivElement | null = null;
+
+  public componentDidUpdate(): void {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    this.inputWrapper!.scrollIntoView({ behavior: 'smooth' });
+  }
+
   private handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
     this.setState({
       inputValue: event.target.value,
@@ -77,14 +84,20 @@ export class Terminal extends Component<TerminalProps, TerminalState> {
     return (
       <div id="terminal-wrapper">
         <History history={history} />
-        <Input
-          currentPath={currentPath}
-          handleChange={this.handleChange}
-          handleSubmit={this.handleSubmit}
-          inputValue={inputValue}
-          promptChar={promptChar}
-          readOnly={false}
-        />
+        <div
+          ref={(el): void => {
+            this.inputWrapper = el;
+          }}
+        >
+          <Input
+            currentPath={currentPath}
+            handleChange={this.handleChange}
+            handleSubmit={this.handleSubmit}
+            inputValue={inputValue}
+            promptChar={promptChar}
+            readOnly={false}
+          />
+        </div>
       </div>
     );
   }

src/styles/Terminal.scss

@@ -10,7 +10,36 @@
   overflow: auto;
   padding: 0 1em;
 
+  #input-container {
+    padding: 1em 0;
+
+    form {
+      display: flex;
+
+      input {
+        background: none;
+        border: none;
+        color: map-get($themeDark, fontColor);
+        font-family: $fontFamily;
+        font-size: $fontSize;
+        outline: none;
+        -webkit-appearance: none;
+
+        flex-grow: 100;
+        margin: 0 10px;
+      }
+
+      #inputPromptChar {
+        color: map-get($themeDark, green);
+      }
+    }
+  }
+
   #history-container {
+    & > ul > li > #input-container {
+      padding-bottom: 0;
+    }
+
     #help-container ul > li {
       margin: 5px 0;
 
@@ -56,29 +85,4 @@
       }
     }
   }
-
-  #input-container {
-    padding-top: 1em;
-
-    form {
-      display: flex;
-
-      input {
-        background: none;
-        border: none;
-        color: map-get($themeDark, fontColor);
-        font-family: $fontFamily;
-        font-size: $fontSize;
-        outline: none;
-        -webkit-appearance: none;
-
-        flex-grow: 100;
-        margin: 0 10px;
-      }
-
-      #inputPromptChar {
-        color: map-get($themeDark, green);
-      }
-    }
-  }
 }

src/templates/index.html

@@ -1,22 +1,27 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Inconsolata"
+      rel="stylesheet"
+    />
   </head>
   <body>
-  <style>
-    html, body {
-      height: 100%;
-      width: 100%;
-    }
-    #terminal-container {
-      height: 100%;
-    }
-  </style>
-    <div id="terminal-container">
-    </div>
+    <style>
+      html,
+      body {
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+      }
+      #terminal-container {
+        height: 100%;
+      }
+    </style>
+    <div id="terminal-container"></div>
   </body>
 </html>