Merge pull request #578 from ueokande/move-to-typescript

Move to TypeScript

6 files changed, 107 insertions, 76 deletions

diff --git a/src/console/components/Console.jsx b/src/console/components/Console.tsx
index 5427e43..3274047 100644
--- a/src/console/components/Console.jsx
+++ b/src/console/components/Console.tsx
@@ -1,26 +1,40 @@
 import './console.scss';
 import { connect } from 'react-redux';
 import React from 'react';
-import PropTypes from 'prop-types';
 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;
 
-class Console extends React.Component {
+type StateProps = ReturnType<typeof mapStateToProps>;
+interface DispatchProps {
+  dispatch: (action: any) => void,
+}
+type Props = StateProps & DispatchProps
+
+class Console extends React.Component<Props> {
+  private input: React.RefObject<Input>;
+
+  constructor(props: Props) {
+    super(props);
+
+    this.input = React.createRef();
+  }
+
   onBlur() {
     if (this.props.mode === 'command' || this.props.mode === 'find') {
       return this.props.dispatch(consoleActions.hideCommand());
     }
   }
 
-  doEnter(e) {
+  doEnter(e: React.KeyboardEvent<HTMLInputElement>) {
     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') {
@@ -28,28 +42,25 @@ class Console extends React.Component {
     }
   }
 
-  selectNext(e) {
+  selectNext(e: React.KeyboardEvent<HTMLInputElement>) {
     this.props.dispatch(consoleActions.completionNext());
     e.stopPropagation();
     e.preventDefault();
   }
 
-  selectPrev(e) {
+  selectPrev(e: React.KeyboardEvent<HTMLInputElement>) {
     this.props.dispatch(consoleActions.completionPrev());
     e.stopPropagation();
     e.preventDefault();
   }
 
-  onKeyDown(e) {
-    if (e.keyCode === KeyboardEvent.DOM_VK_ESCAPE && e.ctrlKey) {
-      this.props.dispatch(consoleActions.hideCommand());
-    }
-    switch (e.keyCode) {
-    case KeyboardEvent.DOM_VK_ESCAPE:
+  onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    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 {
@@ -58,22 +69,22 @@ class Console extends React.Component {
       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);
       }
@@ -81,7 +92,7 @@ class Console extends React.Component {
     }
   }
 
-  onChange(e) {
+  onChange(e: React.ChangeEvent<HTMLInputElement>) {
     let text = e.target.value;
     this.props.dispatch(consoleActions.setConsoleText(text));
     if (this.props.mode === 'command') {
@@ -90,10 +101,7 @@ class Console extends React.Component {
   }
 
 
-  componentDidUpdate(prevProps) {
-    if (!this.input) {
-      return;
-    }
+  componentDidUpdate(prevProps: Props) {
     if (prevProps.mode !== 'command' && this.props.mode === 'command') {
       this.props.dispatch(
         consoleActions.getCompletions(this.props.consoleText));
@@ -114,7 +122,7 @@ class Console extends React.Component {
           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)}
@@ -134,16 +142,14 @@ class Console extends React.Component {
 
   focus() {
     window.focus();
-    this.input.focus();
+    if (this.input.current) {
+      this.input.current.focus();
+    }
   }
 }
 
-Console.propTypes = {
-  mode: PropTypes.string,
-  consoleText: PropTypes.string,
-  messageText: PropTypes.string,
-  children: PropTypes.string,
-};
+const mapStateToProps = (state: AppState) => ({ ...state });
 
-const mapStateToProps = state => state;
-export default connect(mapStateToProps)(Console);
+export default connect(
+  mapStateToProps,
+)(Console);
diff --git a/src/console/components/console/Completion.jsx b/src/console/components/console/Completion.tsx
index 5477cb6..169a39c 100644
--- a/src/console/components/console/Completion.jsx
+++ b/src/console/components/console/Completion.tsx
@@ -1,15 +1,36 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import CompletionItem from './CompletionItem';
 import CompletionTitle from './CompletionTitle';
 
-class Completion extends React.Component {
-  constructor() {
-    super();
+interface Item {
+  icon?: string;
+  caption?: string;
+  url?: string;
+}
+
+interface Group {
+  name: string;
+  items: Item[];
+}
+
+interface Props {
+  select: number;
+  size: number;
+  completions: Group[];
+}
+
+interface State {
+  viewOffset: number;
+  select: number;
+}
+
+class Completion extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
     this.state = { viewOffset: 0, select: -1 };
   }
 
-  static getDerivedStateFromProps(nextProps, prevState) {
+  static getDerivedStateFromProps(nextProps: Props, prevState: State) {
     if (prevState.select === nextProps.select) {
       return null;
     }
@@ -24,6 +45,7 @@ class Completion extends React.Component {
         }
         index += g.items.length;
       }
+      return -1;
     })();
 
     let viewOffset = 0;
@@ -70,17 +92,4 @@ class Completion extends React.Component {
   }
 }
 
-Completion.propTypes = {
-  select: PropTypes.number,
-  size: PropTypes.number,
-  completions: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      icon: PropTypes.string,
-      caption: PropTypes.string,
-      url: PropTypes.string,
-    })),
-  })),
-};
-
 export default Completion;
diff --git a/src/console/components/console/CompletionItem.jsx b/src/console/components/console/CompletionItem.tsx
index 3dc552b..1cbf3de 100644
--- a/src/console/components/console/CompletionItem.jsx
+++ b/src/console/components/console/CompletionItem.tsx
@@ -1,7 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const CompletionItem = (props) => {
+interface Props {
+  highlight: boolean;
+  caption?: string;
+  url?: string;
+  icon?: string;
+}
+
+const CompletionItem = (props: Props) => {
   let className = 'vimvixen-console-completion-item';
   if (props.highlight) {
     className += ' vimvixen-completion-selected';
diff --git a/src/console/components/console/CompletionTitle.jsx b/src/console/components/console/CompletionTitle.tsx
index 4fcba3f..2543619 100644
--- a/src/console/components/console/CompletionTitle.jsx
+++ b/src/console/components/console/CompletionTitle.tsx
@@ -1,14 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const CompletionTitle = (props) => {
+interface Props {
+  title: string;
+}
+
+const CompletionTitle = (props: Props) => {
   return <li className='vimvixen-console-completion-title'>
     {props.title}
   </li>;
 };
 
-CompletionTitle.propTypes = {
-  title: PropTypes.string,
-};
-
 export default CompletionTitle;
diff --git a/src/console/components/console/Input.jsx b/src/console/components/console/Input.tsx
index cbd3348..54ea251 100644
--- a/src/console/components/console/Input.jsx
+++ b/src/console/components/console/Input.tsx
@@ -1,9 +1,26 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-class Input extends React.Component {
+interface Props {
+  mode: string;
+  value: string;
+  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: React.RefObject<HTMLInputElement>;
+
+  constructor(props: Props) {
+    super(props);
+
+    this.input = React.createRef();
+  }
+
   focus() {
-    this.input.focus();
+    if (this.input.current) {
+      this.input.current.focus();
+    }
   }
 
   render() {
@@ -21,7 +38,7 @@ class Input extends React.Component {
         </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}
@@ -32,12 +49,4 @@ class Input extends React.Component {
   }
 }
 
-Input.propTypes = {
-  mode: PropTypes.string,
-  value: PropTypes.string,
-  onBlur: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onChange: PropTypes.func,
-};
-
 export default Input;
diff --git a/src/console/components/console/Message.jsx b/src/console/components/console/Message.tsx
index dd96248..9fa2788 100644
--- a/src/console/components/console/Message.jsx
+++ b/src/console/components/console/Message.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const Message = (props) => {
+interface Props {
+  mode: string;
+  children: string;
+}
+
+const Message = (props: Props) => {
   switch (props.mode) {
   case 'error':
     return (
@@ -16,10 +20,7 @@ const Message = (props) => {
       </p>
     );
   }
-};
-
-Message.propTypes = {
-  children: PropTypes.string,
+  return null;
 };
 
 export default Message;