From 55f15c9350cc531324e6182895f494eeb8174bc6 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Mon, 29 Apr 2019 09:13:59 +0900
Subject: Move to react

---
 src/console/components/console.jsx            | 34 ++++++++++++++-------------
 src/console/components/console/completion.jsx |  4 ++--
 src/console/components/console/input.jsx      |  4 ++--
 src/console/components/console/message.jsx    |  2 --
 4 files changed, 22 insertions(+), 22 deletions(-)

(limited to 'src/console/components')

diff --git a/src/console/components/console.jsx b/src/console/components/console.jsx
index 7994f78..b792088 100644
--- a/src/console/components/console.jsx
+++ b/src/console/components/console.jsx
@@ -1,6 +1,6 @@
 import './console.scss';
-import { connect } from 'preact-redux';
-import { Component, h } from 'preact';
+import { connect } from 'react-redux';
+import React from 'react';
 import Input from './console/input';
 import Completion from './console/completion';
 import Message from './console/message';
@@ -8,10 +8,10 @@ import * as consoleActions from '../../console/actions/console';
 
 const COMPLETION_MAX_ITEMS = 33;
 
-class ConsoleComponent extends Component {
+class ConsoleComponent extends React.Component {
   onBlur() {
     if (this.props.mode === 'command' || this.props.mode === 'find') {
-      return this.context.store.dispatch(consoleActions.hideCommand());
+      return this.props.dispatch(consoleActions.hideCommand());
     }
   }
 
@@ -21,45 +21,45 @@ class ConsoleComponent extends Component {
 
     let value = e.target.value;
     if (this.props.mode === 'command') {
-      return this.context.store.dispatch(consoleActions.enterCommand(value));
+      return this.props.dispatch(consoleActions.enterCommand(value));
     } else if (this.props.mode === 'find') {
-      return this.context.store.dispatch(consoleActions.enterFind(value));
+      return this.props.dispatch(consoleActions.enterFind(value));
     }
   }
 
   selectNext(e) {
-    this.context.store.dispatch(consoleActions.completionNext());
+    this.props.dispatch(consoleActions.completionNext());
     e.stopPropagation();
     e.preventDefault();
   }
 
   selectPrev(e) {
-    this.context.store.dispatch(consoleActions.completionPrev());
+    this.props.dispatch(consoleActions.completionPrev());
     e.stopPropagation();
     e.preventDefault();
   }
 
   onKeyDown(e) {
     if (e.keyCode === KeyboardEvent.DOM_VK_ESCAPE && e.ctrlKey) {
-      this.context.store.dispatch(consoleActions.hideCommand());
+      this.props.dispatch(consoleActions.hideCommand());
     }
     switch (e.keyCode) {
     case KeyboardEvent.DOM_VK_ESCAPE:
-      return this.context.store.dispatch(consoleActions.hideCommand());
+      return this.props.dispatch(consoleActions.hideCommand());
     case KeyboardEvent.DOM_VK_RETURN:
       return this.doEnter(e);
     case KeyboardEvent.DOM_VK_TAB:
       if (e.shiftKey) {
-        this.context.store.dispatch(consoleActions.completionPrev());
+        this.props.dispatch(consoleActions.completionPrev());
       } else {
-        this.context.store.dispatch(consoleActions.completionNext());
+        this.props.dispatch(consoleActions.completionNext());
       }
       e.stopPropagation();
       e.preventDefault();
       break;
     case KeyboardEvent.DOM_VK_OPEN_BRACKET:
       if (e.ctrlKey) {
-        return this.context.store.dispatch(consoleActions.hideCommand());
+        return this.props.dispatch(consoleActions.hideCommand());
       }
       break;
     case KeyboardEvent.DOM_VK_M:
@@ -82,9 +82,9 @@ class ConsoleComponent extends Component {
 
   onInput(e) {
     let text = e.target.value;
-    this.context.store.dispatch(consoleActions.setConsoleText(text));
+    this.props.dispatch(consoleActions.setConsoleText(text));
     if (this.props.mode === 'command') {
-      this.context.store.dispatch(consoleActions.getCompletions(text));
+      this.props.dispatch(consoleActions.getCompletions(text));
     }
   }
 
@@ -94,7 +94,7 @@ class ConsoleComponent extends Component {
       return;
     }
     if (prevProps.mode !== 'command' && this.props.mode === 'command') {
-      this.context.store.dispatch(
+      this.props.dispatch(
         consoleActions.getCompletions(this.props.consoleText));
       this.focus();
     } else if (prevProps.mode !== 'find' && this.props.mode === 'find') {
@@ -126,6 +126,8 @@ class ConsoleComponent extends Component {
       return <Message mode={ this.props.mode } >
         { this.props.messageText }
       </Message>;
+    default:
+      return null;
     }
   }
 
diff --git a/src/console/components/console/completion.jsx b/src/console/components/console/completion.jsx
index d836cec..5d248a0 100644
--- a/src/console/components/console/completion.jsx
+++ b/src/console/components/console/completion.jsx
@@ -1,4 +1,4 @@
-import { Component, h } from 'preact';
+import React from 'react';
 
 const CompletionTitle = (props) => {
   return <li className='vimvixen-console-completion-title' >{props.title}</li>;
@@ -23,7 +23,7 @@ const CompletionItem = (props) => {
 };
 
 
-class CompletionComponent extends Component {
+class CompletionComponent extends React.Component {
   constructor() {
     super();
     this.state = { viewOffset: 0, select: -1 };
diff --git a/src/console/components/console/input.jsx b/src/console/components/console/input.jsx
index d59e6e7..3ac075e 100644
--- a/src/console/components/console/input.jsx
+++ b/src/console/components/console/input.jsx
@@ -1,6 +1,6 @@
-import { Component, h } from 'preact';
+import React from 'react';
 
-export default class InputComponent extends Component {
+export default class InputComponent extends React.Component {
   focus() {
     this.input.focus();
   }
diff --git a/src/console/components/console/message.jsx b/src/console/components/console/message.jsx
index 5b60af4..0370f01 100644
--- a/src/console/components/console/message.jsx
+++ b/src/console/components/console/message.jsx
@@ -1,5 +1,3 @@
-import { h } from 'preact';
-
 export default function Message(props) {
   switch (props.mode) {
   case 'error':
-- 
cgit v1.2.3


From 46228c6b184a662b3b8398b6d5604c177f0c158e Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Mon, 29 Apr 2019 09:15:58 +0900
Subject: Uninstall preact

---
 package-lock.json                          | 22 ----------------------
 package.json                               |  3 ---
 src/console/components/console/message.jsx |  2 ++
 3 files changed, 2 insertions(+), 25 deletions(-)

(limited to 'src/console/components')

diff --git a/package-lock.json b/package-lock.json
index 45497fa..8a03588 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1168,16 +1168,6 @@
         "babel-plugin-transform-flow-strip-types": "^6.22.0"
       }
     },
-    "babel-preset-preact": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/babel-preset-preact/-/babel-preset-preact-1.1.0.tgz",
-      "integrity": "sha1-NaxlWnOkm4Q4FjzgU4Fld+GYCGE=",
-      "dev": true,
-      "requires": {
-        "babel-plugin-syntax-jsx": "^6.0.2",
-        "babel-plugin-transform-react-jsx": "^6.0.2"
-      }
-    },
     "babel-preset-react": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-preset-react/-/babel-preset-react-6.24.1.tgz",
@@ -8443,18 +8433,6 @@
       "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
       "dev": true
     },
-    "preact": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-8.4.2.tgz",
-      "integrity": "sha512-TsINETWiisfB6RTk0wh3/mvxbGRvx+ljeBccZ4Z6MPFKgu/KFGyf2Bmw3Z/jlXhL5JlNKY6QAbA9PVyzIy9//A==",
-      "dev": true
-    },
-    "preact-redux": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/preact-redux/-/preact-redux-2.0.3.tgz",
-      "integrity": "sha1-lgpTXDImQ801mY8z8MLme8Hn6qs=",
-      "dev": true
-    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
diff --git a/package.json b/package.json
index ea3291c..2ab1feb 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
     "babel-cli": "^6.26.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^7.1.5",
-    "babel-preset-preact": "^1.1.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "chai": "^4.2.0",
@@ -43,8 +42,6 @@
     "lanthan": "git+https://github.com/ueokande/lanthan.git#master",
     "mocha": "^6.1.4",
     "node-sass": "^4.12.0",
-    "preact": "^8.4.2",
-    "preact-redux": "^2.0.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-redux": "^7.0.3",
diff --git a/src/console/components/console/message.jsx b/src/console/components/console/message.jsx
index 0370f01..6c8297f 100644
--- a/src/console/components/console/message.jsx
+++ b/src/console/components/console/message.jsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 export default function Message(props) {
   switch (props.mode) {
   case 'error':
-- 
cgit v1.2.3


From 25111f9de4b7959cdd97b51bfdd2f1c2a7124e48 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Mon, 29 Apr 2019 10:31:58 +0900
Subject: Declare component prop types on console

---
 src/console/components/Console.jsx                 | 152 +++++++++++++++++++++
 src/console/components/console.jsx                 | 141 -------------------
 src/console/components/console/Completion.jsx      |  86 ++++++++++++
 src/console/components/console/CompletionItem.jsx  |  28 ++++
 src/console/components/console/CompletionTitle.jsx |  14 ++
 src/console/components/console/Input.jsx           |  43 ++++++
 src/console/components/console/Message.jsx         |  25 ++++
 src/console/components/console/completion.jsx      |  89 ------------
 src/console/components/console/input.jsx           |  32 -----
 src/console/components/console/message.jsx         |  18 ---
 src/console/index.jsx                              |   2 +-
 11 files changed, 349 insertions(+), 281 deletions(-)
 create mode 100644 src/console/components/Console.jsx
 delete mode 100644 src/console/components/console.jsx
 create mode 100644 src/console/components/console/Completion.jsx
 create mode 100644 src/console/components/console/CompletionItem.jsx
 create mode 100644 src/console/components/console/CompletionTitle.jsx
 create mode 100644 src/console/components/console/Input.jsx
 create mode 100644 src/console/components/console/Message.jsx
 delete mode 100644 src/console/components/console/completion.jsx
 delete mode 100644 src/console/components/console/input.jsx
 delete mode 100644 src/console/components/console/message.jsx

(limited to 'src/console/components')

diff --git a/src/console/components/Console.jsx b/src/console/components/Console.jsx
new file mode 100644
index 0000000..6a9cebd
--- /dev/null
+++ b/src/console/components/Console.jsx
@@ -0,0 +1,152 @@
+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';
+
+const COMPLETION_MAX_ITEMS = 33;
+
+class Console extends React.Component {
+  onBlur() {
+    if (this.props.mode === 'command' || this.props.mode === 'find') {
+      return this.props.dispatch(consoleActions.hideCommand());
+    }
+  }
+
+  doEnter(e) {
+    e.stopPropagation();
+    e.preventDefault();
+
+    let value = e.target.value;
+    if (this.props.mode === 'command') {
+      return this.props.dispatch(consoleActions.enterCommand(value));
+    } else if (this.props.mode === 'find') {
+      return this.props.dispatch(consoleActions.enterFind(value));
+    }
+  }
+
+  selectNext(e) {
+    this.props.dispatch(consoleActions.completionNext());
+    e.stopPropagation();
+    e.preventDefault();
+  }
+
+  selectPrev(e) {
+    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:
+      return this.props.dispatch(consoleActions.hideCommand());
+    case KeyboardEvent.DOM_VK_RETURN:
+      return this.doEnter(e);
+    case KeyboardEvent.DOM_VK_TAB:
+      if (e.shiftKey) {
+        this.props.dispatch(consoleActions.completionPrev());
+      } else {
+        this.props.dispatch(consoleActions.completionNext());
+      }
+      e.stopPropagation();
+      e.preventDefault();
+      break;
+    case KeyboardEvent.DOM_VK_OPEN_BRACKET:
+      if (e.ctrlKey) {
+        return this.props.dispatch(consoleActions.hideCommand());
+      }
+      break;
+    case KeyboardEvent.DOM_VK_M:
+      if (e.ctrlKey) {
+        return this.doEnter(e);
+      }
+      break;
+    case KeyboardEvent.DOM_VK_N:
+      if (e.ctrlKey) {
+        this.selectNext(e);
+      }
+      break;
+    case KeyboardEvent.DOM_VK_P:
+      if (e.ctrlKey) {
+        this.selectPrev(e);
+      }
+      break;
+    }
+  }
+
+  onInput(e) {
+    let text = e.target.value;
+    this.props.dispatch(consoleActions.setConsoleText(text));
+    if (this.props.mode === 'command') {
+      this.props.dispatch(consoleActions.getCompletions(text));
+    }
+  }
+
+
+  componentDidUpdate(prevProps) {
+    if (!this.input) {
+      return;
+    }
+    if (prevProps.mode !== 'command' && this.props.mode === 'command') {
+      this.props.dispatch(
+        consoleActions.getCompletions(this.props.consoleText));
+      this.focus();
+    } else if (prevProps.mode !== 'find' && this.props.mode === 'find') {
+      this.focus();
+    }
+  }
+
+  render() {
+    switch (this.props.mode) {
+    case 'command':
+    case 'find':
+      return <div className='vimvixen-console-command-wrapper'>
+        <Completion
+          size={COMPLETION_MAX_ITEMS}
+          completions={this.props.completions}
+          select={this.props.select}
+        />
+        <Input
+          ref={(c) => { this.input = c; }}
+          mode={this.props.mode}
+          onBlur={this.onBlur.bind(this)}
+          onKeyDown={this.onKeyDown.bind(this)}
+          onInput={this.onInput.bind(this)}
+          value={this.props.consoleText}
+        />
+      </div>;
+    case 'info':
+    case 'error':
+      return <Message mode={ this.props.mode } >
+        { this.props.messageText }
+      </Message>;
+    default:
+      return null;
+    }
+  }
+
+  focus() {
+    window.focus();
+    this.input.focus();
+  }
+}
+
+Console.propTypes = {
+  mode: PropTypes.string,
+  onBlur: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onInput: PropTypes.func,
+  consoleText: PropTypes.string,
+  messageText: PropTypes.string,
+  children: PropTypes.string,
+};
+
+const mapStateToProps = state => state;
+export default connect(mapStateToProps)(Console);
diff --git a/src/console/components/console.jsx b/src/console/components/console.jsx
deleted file mode 100644
index b792088..0000000
--- a/src/console/components/console.jsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import './console.scss';
-import { connect } from 'react-redux';
-import React from 'react';
-import Input from './console/input';
-import Completion from './console/completion';
-import Message from './console/message';
-import * as consoleActions from '../../console/actions/console';
-
-const COMPLETION_MAX_ITEMS = 33;
-
-class ConsoleComponent extends React.Component {
-  onBlur() {
-    if (this.props.mode === 'command' || this.props.mode === 'find') {
-      return this.props.dispatch(consoleActions.hideCommand());
-    }
-  }
-
-  doEnter(e) {
-    e.stopPropagation();
-    e.preventDefault();
-
-    let value = e.target.value;
-    if (this.props.mode === 'command') {
-      return this.props.dispatch(consoleActions.enterCommand(value));
-    } else if (this.props.mode === 'find') {
-      return this.props.dispatch(consoleActions.enterFind(value));
-    }
-  }
-
-  selectNext(e) {
-    this.props.dispatch(consoleActions.completionNext());
-    e.stopPropagation();
-    e.preventDefault();
-  }
-
-  selectPrev(e) {
-    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:
-      return this.props.dispatch(consoleActions.hideCommand());
-    case KeyboardEvent.DOM_VK_RETURN:
-      return this.doEnter(e);
-    case KeyboardEvent.DOM_VK_TAB:
-      if (e.shiftKey) {
-        this.props.dispatch(consoleActions.completionPrev());
-      } else {
-        this.props.dispatch(consoleActions.completionNext());
-      }
-      e.stopPropagation();
-      e.preventDefault();
-      break;
-    case KeyboardEvent.DOM_VK_OPEN_BRACKET:
-      if (e.ctrlKey) {
-        return this.props.dispatch(consoleActions.hideCommand());
-      }
-      break;
-    case KeyboardEvent.DOM_VK_M:
-      if (e.ctrlKey) {
-        return this.doEnter(e);
-      }
-      break;
-    case KeyboardEvent.DOM_VK_N:
-      if (e.ctrlKey) {
-        this.selectNext(e);
-      }
-      break;
-    case KeyboardEvent.DOM_VK_P:
-      if (e.ctrlKey) {
-        this.selectPrev(e);
-      }
-      break;
-    }
-  }
-
-  onInput(e) {
-    let text = e.target.value;
-    this.props.dispatch(consoleActions.setConsoleText(text));
-    if (this.props.mode === 'command') {
-      this.props.dispatch(consoleActions.getCompletions(text));
-    }
-  }
-
-
-  componentDidUpdate(prevProps) {
-    if (!this.input) {
-      return;
-    }
-    if (prevProps.mode !== 'command' && this.props.mode === 'command') {
-      this.props.dispatch(
-        consoleActions.getCompletions(this.props.consoleText));
-      this.focus();
-    } else if (prevProps.mode !== 'find' && this.props.mode === 'find') {
-      this.focus();
-    }
-  }
-
-  render() {
-    switch (this.props.mode) {
-    case 'command':
-    case 'find':
-      return <div className='vimvixen-console-command-wrapper'>
-        <Completion
-          size={COMPLETION_MAX_ITEMS}
-          completions={this.props.completions}
-          select={this.props.select}
-        />
-        <Input
-          ref={(c) => { this.input = c; }}
-          mode={this.props.mode}
-          onBlur={this.onBlur.bind(this)}
-          onKeyDown={this.onKeyDown.bind(this)}
-          onInput={this.onInput.bind(this)}
-          value={this.props.consoleText}
-        />
-      </div>;
-    case 'info':
-    case 'error':
-      return <Message mode={ this.props.mode } >
-        { this.props.messageText }
-      </Message>;
-    default:
-      return null;
-    }
-  }
-
-  focus() {
-    window.focus();
-    this.input.focus();
-  }
-}
-
-const mapStateToProps = state => state;
-export default connect(mapStateToProps)(ConsoleComponent);
diff --git a/src/console/components/console/Completion.jsx b/src/console/components/console/Completion.jsx
new file mode 100644
index 0000000..5477cb6
--- /dev/null
+++ b/src/console/components/console/Completion.jsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CompletionItem from './CompletionItem';
+import CompletionTitle from './CompletionTitle';
+
+class Completion extends React.Component {
+  constructor() {
+    super();
+    this.state = { viewOffset: 0, select: -1 };
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (prevState.select === nextProps.select) {
+      return null;
+    }
+
+    let viewSelect = (() => {
+      let index = 0;
+      for (let i = 0; i < nextProps.completions.length; ++i) {
+        ++index;
+        let g = nextProps.completions[i];
+        if (nextProps.select + i + 1 < index + g.items.length) {
+          return nextProps.select + i + 1;
+        }
+        index += g.items.length;
+      }
+    })();
+
+    let viewOffset = 0;
+    if (nextProps.select < 0) {
+      viewOffset = 0;
+    } else if (prevState.select < nextProps.select) {
+      viewOffset = Math.max(prevState.viewOffset,
+        viewSelect - nextProps.size + 1);
+    } else if (prevState.select > nextProps.select) {
+      viewOffset = Math.min(prevState.viewOffset, viewSelect);
+    }
+    return { viewOffset, select: nextProps.select };
+  }
+
+  render() {
+    let eles = [];
+    let index = 0;
+
+    for (let group of this.props.completions) {
+      eles.push(<CompletionTitle
+        key={`group-${index}`}
+        title={ group.name }
+      />);
+      for (let item of group.items) {
+        eles.push(<CompletionItem
+          key={`item-${index}`}
+          icon={item.icon}
+          caption={item.caption}
+          url={item.url}
+          highlight={index === this.props.select}
+        / >);
+        ++index;
+      }
+    }
+
+    let viewOffset = this.state.viewOffset;
+    eles = eles.slice(viewOffset, viewOffset + this.props.size);
+
+    return (
+      <ul className='vimvixen-console-completion'>
+        { eles }
+      </ul>
+    );
+  }
+}
+
+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.jsx
new file mode 100644
index 0000000..3dc552b
--- /dev/null
+++ b/src/console/components/console/CompletionItem.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const CompletionItem = (props) => {
+  let className = 'vimvixen-console-completion-item';
+  if (props.highlight) {
+    className += ' vimvixen-completion-selected';
+  }
+  return <li
+    className={className}
+    style={{ backgroundImage: 'url(' + props.icon + ')' }}
+  >
+    <span
+      className='vimvixen-console-completion-item-caption'
+    >{props.caption}</span>
+    <span
+      className='vimvixen-console-completion-item-url'
+    >{props.url}</span>
+  </li>;
+};
+
+CompletionItem.propTypes = {
+  highlight: PropTypes.bool,
+  caption: PropTypes.string,
+  url: PropTypes.string,
+};
+
+export default CompletionItem;
diff --git a/src/console/components/console/CompletionTitle.jsx b/src/console/components/console/CompletionTitle.jsx
new file mode 100644
index 0000000..4fcba3f
--- /dev/null
+++ b/src/console/components/console/CompletionTitle.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const CompletionTitle = (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.jsx
new file mode 100644
index 0000000..c85d252
--- /dev/null
+++ b/src/console/components/console/Input.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class Input extends React.Component {
+  focus() {
+    this.input.focus();
+  }
+
+  render() {
+    let prompt = '';
+    if (this.props.mode === 'command') {
+      prompt = ':';
+    } else if (this.props.mode === 'find') {
+      prompt = '/';
+    }
+
+    return (
+      <div className='vimvixen-console-command'>
+        <i className='vimvixen-console-command-prompt'>
+          { prompt }
+        </i>
+        <input
+          className='vimvixen-console-command-input'
+          ref={(c) => { this.input = c; }}
+          onBlur={this.props.onBlur}
+          onKeyDown={this.props.onKeyDown}
+          onInput={this.props.onInput}
+          value={this.props.value}
+        />
+      </div>
+    );
+  }
+}
+
+Input.propTypes = {
+  mode: PropTypes.string,
+  value: PropTypes.string,
+  onBlur: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onInput: PropTypes.func,
+};
+
+export default Input;
diff --git a/src/console/components/console/Message.jsx b/src/console/components/console/Message.jsx
new file mode 100644
index 0000000..dd96248
--- /dev/null
+++ b/src/console/components/console/Message.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Message = (props) => {
+  switch (props.mode) {
+  case 'error':
+    return (
+      <p className='vimvixen-console-message vimvixen-console-error'>
+        { props.children }
+      </p>
+    );
+  case 'info':
+    return (
+      <p className='vimvixen-console-message vimvixen-console-info'>
+        { props.children }
+      </p>
+    );
+  }
+};
+
+Message.propTypes = {
+  children: PropTypes.string,
+};
+
+export default Message;
diff --git a/src/console/components/console/completion.jsx b/src/console/components/console/completion.jsx
deleted file mode 100644
index 5d248a0..0000000
--- a/src/console/components/console/completion.jsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react';
-
-const CompletionTitle = (props) => {
-  return <li className='vimvixen-console-completion-title' >{props.title}</li>;
-};
-
-const CompletionItem = (props) => {
-  let className = 'vimvixen-console-completion-item';
-  if (props.highlight) {
-    className += ' vimvixen-completion-selected';
-  }
-  return <li
-    className={className}
-    style={{ backgroundImage: 'url(' + props.icon + ')' }}
-  >
-    <span
-      className='vimvixen-console-completion-item-caption'
-    >{props.caption}</span>
-    <span
-      className='vimvixen-console-completion-item-url'
-    >{props.url}</span>
-  </li>;
-};
-
-
-class CompletionComponent extends React.Component {
-  constructor() {
-    super();
-    this.state = { viewOffset: 0, select: -1 };
-  }
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (prevState.select === nextProps.select) {
-      return null;
-    }
-
-    let viewSelect = (() => {
-      let index = 0;
-      for (let i = 0; i < nextProps.completions.length; ++i) {
-        ++index;
-        let g = nextProps.completions[i];
-        if (nextProps.select + i + 1 < index + g.items.length) {
-          return nextProps.select + i + 1;
-        }
-        index += g.items.length;
-      }
-    })();
-
-    let viewOffset = 0;
-    if (nextProps.select < 0) {
-      viewOffset = 0;
-    } else if (prevState.select < nextProps.select) {
-      viewOffset = Math.max(prevState.viewOffset,
-        viewSelect - nextProps.size + 1);
-    } else if (prevState.select > nextProps.select) {
-      viewOffset = Math.min(prevState.viewOffset, viewSelect);
-    }
-    return { viewOffset, select: nextProps.select };
-  }
-
-  render() {
-    let eles = [];
-    let index = 0;
-
-    for (let group of this.props.completions) {
-      eles.push(<CompletionTitle title={ group.name }/>);
-      for (let item of group.items) {
-        eles.push(<CompletionItem
-          icon={item.icon}
-          caption={item.caption}
-          url={item.url}
-          highlight={index === this.props.select}
-        / >);
-        ++index;
-      }
-    }
-
-    let viewOffset = this.state.viewOffset;
-    eles = eles.slice(viewOffset, viewOffset + this.props.size);
-
-    return (
-      <ul className='vimvixen-console-completion'>
-        { eles }
-      </ul>
-    );
-  }
-}
-
-export default CompletionComponent;
diff --git a/src/console/components/console/input.jsx b/src/console/components/console/input.jsx
deleted file mode 100644
index 3ac075e..0000000
--- a/src/console/components/console/input.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-
-export default class InputComponent extends React.Component {
-  focus() {
-    this.input.focus();
-  }
-
-  render() {
-    let prompt = '';
-    if (this.props.mode === 'command') {
-      prompt = ':';
-    } else if (this.props.mode === 'find') {
-      prompt = '/';
-    }
-
-    return (
-      <div className='vimvixen-console-command'>
-        <i className='vimvixen-console-command-prompt'>
-          { prompt }
-        </i>
-        <input
-          className='vimvixen-console-command-input'
-          ref={(c) => { this.input = c; }}
-          onBlur={this.props.onBlur}
-          onKeyDown={this.props.onKeyDown}
-          onInput={this.props.onInput}
-          value={this.props.value}
-        />
-      </div>
-    );
-  }
-}
diff --git a/src/console/components/console/message.jsx b/src/console/components/console/message.jsx
deleted file mode 100644
index 6c8297f..0000000
--- a/src/console/components/console/message.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-
-export default function Message(props) {
-  switch (props.mode) {
-  case 'error':
-    return (
-      <p className='vimvixen-console-message vimvixen-console-error'>
-        { props.children }
-      </p>
-    );
-  case 'info':
-    return (
-      <p className='vimvixen-console-message vimvixen-console-info'>
-        { props.children }
-      </p>
-    );
-  }
-}
diff --git a/src/console/index.jsx b/src/console/index.jsx
index 0d0a8b9..3190a9a 100644
--- a/src/console/index.jsx
+++ b/src/console/index.jsx
@@ -4,7 +4,7 @@ import { createStore, applyMiddleware } from 'redux';
 import promise from 'redux-promise';
 import * as consoleActions from 'console/actions/console';
 import { Provider } from 'react-redux';
-import Console from './components/console';
+import Console from './components/Console';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-- 
cgit v1.2.3


From 9ad3b53f7cb7986275476b4c03b1f94959cdcc37 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Tue, 30 Apr 2019 09:58:21 +0900
Subject: Use onChange instead of onInput

---
 src/console/components/Console.jsx       | 7 ++-----
 src/console/components/console/Input.jsx | 4 ++--
 2 files changed, 4 insertions(+), 7 deletions(-)

(limited to 'src/console/components')

diff --git a/src/console/components/Console.jsx b/src/console/components/Console.jsx
index 6a9cebd..5427e43 100644
--- a/src/console/components/Console.jsx
+++ b/src/console/components/Console.jsx
@@ -81,7 +81,7 @@ class Console extends React.Component {
     }
   }
 
-  onInput(e) {
+  onChange(e) {
     let text = e.target.value;
     this.props.dispatch(consoleActions.setConsoleText(text));
     if (this.props.mode === 'command') {
@@ -118,7 +118,7 @@ class Console extends React.Component {
           mode={this.props.mode}
           onBlur={this.onBlur.bind(this)}
           onKeyDown={this.onKeyDown.bind(this)}
-          onInput={this.onInput.bind(this)}
+          onChange={this.onChange.bind(this)}
           value={this.props.consoleText}
         />
       </div>;
@@ -140,9 +140,6 @@ class Console extends React.Component {
 
 Console.propTypes = {
   mode: PropTypes.string,
-  onBlur: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onInput: PropTypes.func,
   consoleText: PropTypes.string,
   messageText: PropTypes.string,
   children: PropTypes.string,
diff --git a/src/console/components/console/Input.jsx b/src/console/components/console/Input.jsx
index c85d252..cbd3348 100644
--- a/src/console/components/console/Input.jsx
+++ b/src/console/components/console/Input.jsx
@@ -24,7 +24,7 @@ class Input extends React.Component {
           ref={(c) => { this.input = c; }}
           onBlur={this.props.onBlur}
           onKeyDown={this.props.onKeyDown}
-          onInput={this.props.onInput}
+          onChange={this.props.onChange}
           value={this.props.value}
         />
       </div>
@@ -37,7 +37,7 @@ Input.propTypes = {
   value: PropTypes.string,
   onBlur: PropTypes.func,
   onKeyDown: PropTypes.func,
-  onInput: PropTypes.func,
+  onChange: PropTypes.func,
 };
 
 export default Input;
-- 
cgit v1.2.3