keymaps form

src/settings/components/form/keymaps-form.jsx

@@ -0,0 +1,95 @@
+import './keymaps-form.scss';
+import { h, Component } from 'preact';
+import Input from '../ui/input';
+
+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 KeymapsForm extends Component {
+
+  render() {
+    return <div className='keymap-fields'>
+      {
+        KeyMapFields.map((group, index) => {
+          return <div key={index} className='form-keymaps-form'>
+            {
+              group.map((field) => {
+                let name = field[0];
+                let label = field[1];
+                let value = this.props.value[name];
+                return <Input
+                  type='text' id={name} name={name} key={name}
+                  label={label} value={value}
+                  onChange={this.bindValue.bind(this)}
+                />;
+              })
+            }
+          </div>;
+        })
+      }
+    </div>;
+  }
+
+  bindValue(e) {
+    if (!this.props.onChange) {
+      return;
+    }
+
+    let next = Object.assign({}, this.props.value);
+    next[e.target.name] = e.target.value;
+
+    this.props.onChange(next);
+  }
+}
+
+export default KeymapsForm;

src/settings/components/form/keymaps-form.scss

@@ -0,0 +1,9 @@
+.form-keymaps-form {
+  column-count: 2;
+  .keymap-fields-group {
+    margin-top: 24px;
+  }
+  .keymap-fields-group:first-of-type {
+    margin-top: 0;
+  }
+}

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'>
+        <KeymapsForm
-          { keymapFields }
+          value={this.state.settings.form.keymaps}
-        </div>
+          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;

src/settings/components/site.scss

@@ -24,14 +24,4 @@
       font-weight: bold;
     }
   }
-
-  .keymap-fields{
-    column-count: 2;
-    .keymap-fields-group {
-      margin-top: 24px;
-    }
-    .keymap-fields-group:first-of-type {
-      margin-top: 0;
-    }
-  }
 }