3 files changed, 49 insertions, 4 deletions

diff --git a/.eslintrc b/.eslintrc
index cf11670..0f41e10 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -40,6 +40,7 @@
     "no-alert": "off",
     "no-bitwise": "off",
     "no-console": ["error", { "allow": ["warn", "error"] }],
+    "no-continue": "off",
     "no-empty-function": "off",
     "no-magic-numbers": "off",
     "no-mixed-operators": "off",
diff --git a/src/console/components/console/completion.jsx b/src/console/components/console/completion.jsx
index 5f128d7..096653b 100644
--- a/src/console/components/console/completion.jsx
+++ b/src/console/components/console/completion.jsx
@@ -1,6 +1,8 @@
 import { Component, h } from 'preact';
 import { connect } from 'preact-redux';
 
+const COMPLETION_MAX_ITEMS = 33;
+
 const CompletionTitle = (props) => {
   return <li className='vimvixen-console-completion-title' >{props.title}</li>;
 };
@@ -25,23 +27,64 @@ const CompletionItem = (props) => {
 
 
 class CompletionComponent extends Component {
+  constructor() {
+    super();
+    this.state = { viewOffset: 0, select: -1 };
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (prevState.select === nextProps.select) {
+      return null;
+    }
+
+    let viewSelect = (() => {
+      let view = 0;
+      let index = 0;
+      for (let group of nextProps.completions) {
+        ++view;
+        // TODO refactor
+        for (let _ of group.items) {
+          if (index === nextProps.select) {
+            return view;
+          }
+          ++view;
+          ++index;
+        }
+      }
+    })();
+
+    let viewOffset = 0;
+    if (nextProps.select < 0) {
+      viewOffset = 0;
+    } else if (prevState.select < nextProps.select) {
+      viewOffset = Math.max(prevState.viewOffset,
+        viewSelect - COMPLETION_MAX_ITEMS + 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 i = 0; i < this.props.completions.length; ++i) {
-      let group = this.props.completions[i];
+
+    for (let group of this.props.completions) {
       eles.push(<CompletionTitle title={ group.name }/>);
-      for (let j = 0; j < group.items.length; ++j, ++index) {
-        let item = group.items[j];
+      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 + COMPLETION_MAX_ITEMS);
+
     return (
       <ul className='vimvixen-console-completion'>
         { eles }
diff --git a/src/console/reducers/index.js b/src/console/reducers/index.js
index bcc7a2e..614a72f 100644
--- a/src/console/reducers/index.js
+++ b/src/console/reducers/index.js
@@ -7,6 +7,7 @@ const defaultState = {
   completionSource: '',
   completions: [],
   select: -1,
+  viewIndex: 0,
 };
 
 const nextSelection = (state) => {