src/content

src/console/components/Console.tsx

@@ -5,23 +5,23 @@ import Input from './console/Input';
 import Completion from './console/Completion';
 import Message from './console/Message';
 import * as consoleActions from '../../console/actions/console';
+import { State as AppState } from '../reducers';
 
 const COMPLETION_MAX_ITEMS = 33;
 
-interface Props {
-  mode?: string;
-  consoleText?: string;
-  messageText?: string;
-  children?: string;
+type StateProps = ReturnType<typeof mapStateToProps>;
+interface DispatchProps {
+  dispatch: (action: any) => void,
 }
+type Props = StateProps & DispatchProps
 
 class Console extends React.Component<Props> {
-  private input: HTMLInputElement | null;
+  private input: React.RefObject<Input>;
 
   constructor(props: Props) {
     super(props);
 
-    this.input = null;
+    this.input = React.createRef();
   }
 
   onBlur() {
@@ -34,7 +34,7 @@ class Console extends React.Component<Props> {
     e.stopPropagation();
     e.preventDefault();
 
-    let value = e.target.value;
+    let value = (e.target as HTMLInputElement).value;
     if (this.props.mode === 'command') {
       return this.props.dispatch(consoleActions.enterCommand(value));
     } else if (this.props.mode === 'find') {
@@ -55,15 +55,12 @@ class Console extends React.Component<Props> {
   }
 
   onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
-    if (e.keyCode === KeyboardEvent.DOM_VK_ESCAPE && e.ctrlKey) {
-      this.props.dispatch(consoleActions.hideCommand());
-    }
-    switch (e.keyCode) {
-    case KeyboardEvent.DOM_VK_ESCAPE:
+    switch (e.key) {
+    case 'Escape':
       return this.props.dispatch(consoleActions.hideCommand());
-    case KeyboardEvent.DOM_VK_RETURN:
+    case 'Enter':
       return this.doEnter(e);
-    case KeyboardEvent.DOM_VK_TAB:
+    case 'Tab':
       if (e.shiftKey) {
         this.props.dispatch(consoleActions.completionPrev());
       } else {
@@ -72,22 +69,22 @@ class Console extends React.Component<Props> {
       e.stopPropagation();
       e.preventDefault();
       break;
-    case KeyboardEvent.DOM_VK_OPEN_BRACKET:
+    case '[':
       if (e.ctrlKey) {
         return this.props.dispatch(consoleActions.hideCommand());
       }
       break;
-    case KeyboardEvent.DOM_VK_M:
+    case 'm':
       if (e.ctrlKey) {
         return this.doEnter(e);
       }
       break;
-    case KeyboardEvent.DOM_VK_N:
+    case 'n':
       if (e.ctrlKey) {
         this.selectNext(e);
       }
       break;
-    case KeyboardEvent.DOM_VK_P:
+    case 'p':
       if (e.ctrlKey) {
         this.selectPrev(e);
       }
@@ -105,9 +102,6 @@ class Console extends React.Component<Props> {
 
 
   componentDidUpdate(prevProps: Props) {
-    if (!this.input) {
-      return;
-    }
     if (prevProps.mode !== 'command' && this.props.mode === 'command') {
       this.props.dispatch(
         consoleActions.getCompletions(this.props.consoleText));
@@ -128,7 +122,7 @@ class Console extends React.Component<Props> {
           select={this.props.select}
         />
         <Input
-          ref={(c) => { this.input = c; }}
+          ref={this.input}
           mode={this.props.mode}
           onBlur={this.onBlur.bind(this)}
           onKeyDown={this.onKeyDown.bind(this)}
@@ -148,11 +142,14 @@ class Console extends React.Component<Props> {
 
   focus() {
     window.focus();
-    if (this.input) {
-      this.input.focus();
+    if (this.input.current) {
+      this.input.current.focus();
     }
   }
 }
 
-const mapStateToProps = (state: any) => state;
-export default connect(mapStateToProps)(Console);
+const mapStateToProps = (state: AppState) => ({ ...state });
+
+export default connect(
+  mapStateToProps,
+)(Console);

src/console/components/console/Input.tsx

@@ -3,23 +3,23 @@ import React from 'react';
 interface Props {
   mode: string;
   value: string;
-  onBlur: (e: React.FocusEvent<Element>) => void;
-  onKeyDown: (e: React.KeyboardEvent<Element>) => void;
-  onChange: (e: React.ChangeEvent<Element>) => void;
+  onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+  onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 class Input extends React.Component<Props> {
-  private input: HTMLInputElement | null;
+  private input: React.RefObject<HTMLInputElement>;
 
   constructor(props: Props) {
     super(props);
 
-    this.input = null;
+    this.input = React.createRef();
   }
 
   focus() {
-    if (this.input) {
-      this.input.focus();
+    if (this.input.current) {
+      this.input.current.focus();
     }
   }
 
@@ -38,7 +38,7 @@ class Input extends React.Component<Props> {
         </i>
         <input
           className='vimvixen-console-command-input'
-          ref={(c) => { this.input = c; }}
+          ref={this.input}
           onBlur={this.props.onBlur}
           onKeyDown={this.props.onKeyDown}
           onChange={this.props.onChange}

src/console/components/console/Message.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 interface Props {
   mode: string;
-  children: string[];
+  children: string;
 }
 
 const Message = (props: Props) => {

src/console/reducers/index.ts

@@ -1,6 +1,6 @@
 import * as actions from '../actions';
 
-interface State {
+export interface State {
   mode: string;
   messageText: string;
   consoleText: string;