React update

.gitignore

@@ -3,5 +3,4 @@ node_modules
 npm-debug.log
 build/*.js
 build/*.js.map
-package-lock.json
 mercurywm-*.zip

package.json

@@ -1,11 +1,12 @@
 {
     "name": "mercurywm",
-    "version": "1.1.0",
+    "version": "2.0.0",
     "description": "New tab page with multi-windowed terminals",
     "main": "src/index.js",
     "scripts": {
         "dev": "webpack --progress --watch",
         "prod": "cross-env NODE_ENV=production webpack -p --progress",
+        "test": "flow check",
         "travis": "npm run prod && zip -r mercurywm-$(date +%s).zip build/"
     },
     "repository": {
@@ -24,8 +25,8 @@
         "flow-bin": "^0.85.0",
         "flow-interfaces-chrome": "^0.4.0",
         "flow-typed": "^2.5.1",
-        "react": "^15.6.1",
-        "react-dom": "^15.6.1",
+        "react": "^16.6.0",
+        "react-dom": "^16.6.0",
         "react-redux": "^5.0.6",
         "redux": "^3.7.2",
         "remove-flow-types-loader": "^1.1.0",

src/mercury/components/loading.jsx

@@ -19,4 +19,4 @@ const Loading = () => (
   </div>
 );
 
-module.exports = Loading;
+export default Loading;

src/mercury/components/root.jsx

@@ -33,7 +33,7 @@ type DispatchProps = {|
 type Props = StateProps & DispatchProps;
 
 class Root extends React.Component<Props> {
-    componentWillMount() {
+    componentDidMount() {
         window.addEventListener('keydown', (e: KeyboardEvent) => this.handleSystemKey(e), true);
         window.addEventListener('message', (e: MessageEvent) => this.receiveMessage(e), false);
     }

src/mercury/components/scroll.jsx

@@ -0,0 +1,118 @@
+/* @flow strict */
+
+import * as React from 'react';
+
+type Props = {|
+  +children: React.Node,
+  +selected: boolean,
+  +handleKey: (e: SyntheticKeyboardEvent<HTMLDivElement>) => void,
+  +onPaste: (data: string) => void
+|};
+
+class SmoothScroll extends React.Component<Props> {
+  animation: ?AnimationFrameID;
+  input = React.createRef();
+
+  componentDidMount() {
+    const box = this.input.current;
+    if (!box) return;
+
+    if (this.props.selected) {
+      box.focus();
+    }
+
+    box.scrollTop = box.scrollHeight;
+
+    box.addEventListener('paste', (event: ClipboardEvent) => {
+      const clipboardData = event.clipboardData;
+      if (!clipboardData) return;
+
+      const data = clipboardData.getData('text/plain');
+      this.props.onPaste(data);
+    });
+  }
+
+  componentDidUpdate() {
+    if (this.props.selected) {
+      const box = this.input.current;
+      if (box) box.focus();
+
+      this.startSmoothScroll(100, x => 3 * x * x - 2 * x * x * x);
+    }
+  }
+
+  handleKey = (e: SyntheticKeyboardEvent<HTMLDivElement>) => {
+    if (!this.props.selected) return;
+
+    if (this.input && this.input.current) {
+      this.input.current.scrollTop = this.input.current.scrollHeight;
+    }
+
+    this.props.handleKey(e);
+  };
+
+  startSmoothScroll(duration: number, interpolator: number => number) {
+    // Cancel any ongoing scrolling
+    if (this.animation) {
+      cancelAnimationFrame(this.animation);
+      this.animation = null;
+    }
+
+    const box = this.input.current;
+    if (!box) {
+      return;
+    }
+
+    // Start and end points
+    const animationStart = box.scrollTop;
+    const animationEnd = box.scrollHeight - box.offsetHeight;
+
+    // Finish scrolling
+    if (animationStart >= animationEnd) {
+      box.scrollTop = animationEnd;
+      return;
+    }
+
+    const startTime = performance.now();
+
+    const animate = (currTime: DOMHighResTimeStamp) => {
+      const deltaTime = currTime - startTime;
+      // Duration over, finish scrolling
+      if (deltaTime > duration) {
+        if (this.animation) {
+          cancelAnimationFrame(this.animation);
+          this.animation = null;
+        }
+        if (box) box.scrollTop = animationEnd;
+        return;
+      }
+
+      // Continue scrolling
+      const timeStep = deltaTime / duration;
+      const newTop =
+        animationStart +
+        interpolator(timeStep) * (animationEnd - animationStart);
+      if (box) box.scrollTop = newTop;
+
+      this.animation = requestAnimationFrame(animate);
+    };
+
+    // Start animating
+    this.animation = requestAnimationFrame(animate);
+  }
+
+  render(): React.Node {
+    return (
+      <div
+        className="terminal-link"
+        ref={this.input}
+        tabIndex="1"
+        onKeyDown={this.handleKey}
+      >
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default SmoothScroll;