1 files changed, 12 insertions, 85 deletions

diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
index 8fe7d4d..e5b46ad 100644
--- a/src/settings/components/index.jsx
+++ b/src/settings/components/index.jsx
@@ -2,62 +2,10 @@ import './site.scss';
 import { h, Component } from 'preact';
 import Input from './ui/input';
 import SearchEngineForm from './form/search-engine-form';
+import KeymapsForm from './form/keymaps-form';
 import * as settingActions from 'settings/actions/setting';
 import * as validator from 'shared/validators/setting';
 
-const KeyMapFields = [
-  [
-    ['scroll.vertically?{count:-1}', 'Scroll down'],
-    ['scroll.vertically?{count:1}', 'Scroll up'],
-    ['scroll.horizonally?{count:-1}', 'Scroll left'],
-    ['scroll.horizonally?{count:1}', 'Scroll right'],
-    ['scroll.home', 'Scroll leftmost'],
-    ['scroll.end', 'Scroll last'],
-    ['scroll.pages?{count:-0.5}', 'Scroll up by half of screen'],
-    ['scroll.pages?{count:0.5}', 'Scroll up by half of screen'],
-    ['scroll.pages?{count:-1}', 'Scroll up by a screen'],
-    ['scroll.pages?{count:1}', 'Scroll up by a screen'],
-  ], [
-    ['tabs.close', 'Close a tab'],
-    ['tabs.reopen', 'Reopen closed tab'],
-    ['tabs.next?{count:1}', 'Select next Tab'],
-    ['tabs.prev?{count:1}', 'Select prev Tab'],
-    ['tabs.first', 'Select first tab'],
-    ['tabs.last', 'Select last tab'],
-    ['tabs.reload?{cache:true}', 'Reload current tab'],
-    ['tabs.pin.toggle', 'Toggle pinned state'],
-    ['tabs.duplicate', 'Dupplicate a tab'],
-  ], [
-    ['follow.start?{newTab:false}', 'Follow a link'],
-    ['follow.start?{newTab:true}', 'Follow a link in new tab'],
-    ['navigate.histories.prev', 'Go back in histories'],
-    ['navigate.histories.next', 'Go forward in histories'],
-    ['navigate.link.next', 'Open next link'],
-    ['navigate.link.prev', 'Open previous link'],
-    ['navigate.parent', 'Go to parent directory'],
-    ['navigate.root', 'Go to root directory'],
-  ], [
-    ['find.start', 'Start find mode'],
-    ['find.next', 'Find next word'],
-    ['find.prev', 'Find previous word'],
-  ], [
-    ['command.show', 'Open console'],
-    ['command.show.open?{alter:false}', 'Open URL'],
-    ['command.show.open?{alter:true}', 'Alter URL'],
-    ['command.show.tabopen?{alter:false}', 'Open URL in new Tab'],
-    ['command.show.tabopen?{alter:true}', 'Alter URL in new Tab'],
-    ['command.show.winopen?{alter:false}', 'Open URL in new window'],
-    ['command.show.winopen?{alter:true}', 'Alter URL in new window'],
-    ['command.show.buffer', 'Open buffer command'],
-  ], [
-    ['addon.toggle.enabled', 'Enable or disable'],
-    ['urls.yank', 'Copy current URL'],
-    ['zoom.in', 'Zoom-in'],
-    ['zoom.out', 'Zoom-out'],
-    ['zoom.neutral', 'Reset zoom level'],
-  ]
-];
-
 class SettingsComponent extends Component {
   constructor(props, context) {
     super(props, context);
@@ -89,33 +37,13 @@ class SettingsComponent extends Component {
   }
 
   renderFormFields() {
-    let keymapFields = KeyMapFields.map((group, index) => {
-      return <div key={index} className='keymap-fields-group'>
-        {
-          group.map((field) => {
-            let name = field[0];
-            let label = field[1];
-            let value = this.state.settings.form.keymaps[name];
-            return <Input
-              type='text'
-              id={name}
-              name={name}
-              key={name}
-              label={label}
-              value={value}
-              onChange={this.bindFormKeymapsValue.bind(this)}
-            />;
-          })
-        }
-      </div>;
-    });
-
     return <div>
       <fieldset>
         <legend>Keybindings</legend>
-        <div className='keymap-fields'>
-          { keymapFields }
-        </div>
+        <KeymapsForm
+          value={this.state.settings.form.keymaps}
+          onChange={this.bindKeymapsForm.bind(this)}
+        />
       </fieldset>
       <fieldset>
         <legend>Search Engines</legend>
@@ -189,6 +117,13 @@ class SettingsComponent extends Component {
     this.context.store.dispatch(settingActions.save(next.settings));
   }
 
+  bindKeymapsForm(value) {
+    let next = Object.assign({}, this.state);
+    next.settings.form.keymaps = value;
+    this.setState(next);
+    this.context.store.dispatch(settingActions.save(next.settings));
+  }
+
   bindValue(e) {
     let next = Object.assign({}, this.state);
 
@@ -203,14 +138,6 @@ class SettingsComponent extends Component {
     this.setState(next);
     this.context.store.dispatch(settingActions.save(next.settings));
   }
-
-  bindFormKeymapsValue(e) {
-    let next = Object.assign({}, this.state);
-
-    next.settings.form.keymaps[e.target.name] = e.target.value;
-
-    this.context.store.dispatch(settingActions.save(next.settings));
-  }
 }
 
 export default SettingsComponent;