Clean settings components

src/settings/components/form/BlacklistForm.jsx

@@ -1,6 +1,6 @@
-import './blacklist-form.scss';
-import AddButton from '../ui/add-button';
-import DeleteButton from '../ui/delete-button';
+import './BlacklistForm.scss';
+import AddButton from '../ui/AddButton';
+import DeleteButton from '../ui/DeleteButton';
 import React from 'react';
 
 class BlacklistForm extends React.Component {
@@ -23,7 +23,7 @@ class BlacklistForm extends React.Component {
           </div>;
         })
       }
-      <AddButton name='add' style='float:right'
+      <AddButton name='add' style={{ float: 'right' }}
         onClick={this.bindValue.bind(this)} />
     </div>;
   }

src/settings/components/form/KeymapsForm.jsx

@@ -0,0 +1,47 @@
+import './KeymapsForm.scss';
+import React from 'react';
+import Input from '../ui/Input';
+import keymaps from '../../keymaps';
+
+class KeymapsForm extends React.Component {
+
+  render() {
+    let values = this.props.value;
+    if (!values) {
+      values = {};
+    }
+    return <div className='form-keymaps-form'>
+      {
+        keymaps.fields.map((group, index) => {
+          return <div key={index} className='form-keymaps-form-field-group'>
+            {
+              group.map((field) => {
+                let name = field[0];
+                let label = field[1];
+                let value = values[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 = { ...this.props.value };
+    next[e.target.name] = e.target.value;
+
+    this.props.onChange(next);
+  }
+}
+
+export default KeymapsForm;

src/settings/components/form/PropertiesForm.jsx

@@ -1,4 +1,4 @@
-import './properties-form.scss';
+import './PropertiesForm.scss';
 import React from 'react';
 
 class PropertiesForm extends React.Component {

src/settings/components/form/SearchForm.jsx

@@ -1,7 +1,7 @@
-import './search-form.scss';
+import './SearchForm.scss';
 import React from 'react';
-import AddButton from '../ui/add-button';
-import DeleteButton from '../ui/delete-button';
+import AddButton from '../ui/AddButton';
+import DeleteButton from '../ui/DeleteButton';
 
 class SearchForm extends React.Component {
 
@@ -40,7 +40,7 @@ class SearchForm extends React.Component {
           </div>;
         })
       }
-      <AddButton name='add' style='float:right'
+      <AddButton name='add' style={{ float: 'right' }}
         onClick={this.bindValue.bind(this)} />
     </div>;
   }

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

@@ -1,118 +0,0 @@
-import './keymaps-form.scss';
-import React from 'react';
-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 to leftmost'],
-    ['scroll.end', 'Scroll to rightmost'],
-    ['scroll.top', 'Scroll to top'],
-    ['scroll.bottom', 'Scroll to bottom'],
-    ['scroll.pages?{"count":-0.5}', 'Scroll up by half of screen'],
-    ['scroll.pages?{"count":0.5}', 'Scroll down by half of screen'],
-    ['scroll.pages?{"count":-1}', 'Scroll up by a screen'],
-    ['scroll.pages?{"count":1}', 'Scroll down by a screen'],
-  ], [
-    ['mark.set.prefix', 'Set mark at current position'],
-    ['mark.jump.prefix', 'Jump to the mark'],
-  ], [
-    ['tabs.close', 'Close a tab'],
-    ['tabs.close.right', 'Close tabs to the right'],
-    ['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":false}', 'Reload current tab'],
-    ['tabs.reload?{"cache":true}', 'Reload with no caches'],
-    ['tabs.pin.toggle', 'Toggle pinned state'],
-    ['tabs.duplicate', 'Duplicate a tab'],
-  ], [
-    ['follow.start?{"newTab":false}', 'Follow a link'],
-    ['follow.start?{"newTab":true}', 'Follow a link in new tab'],
-    ['navigate.history.prev', 'Go back in histories'],
-    ['navigate.history.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'],
-    ['page.source', 'Open page source'],
-    ['page.home', 'Open start page to current tab'],
-    ['page.home?{"newTab":true}', 'Open start page in new tab'],
-    ['focus.input', 'Focus input'],
-  ], [
-    ['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'],
-    ['command.show.addbookmark?{"alter":true}', 'Open addbookmark command'],
-  ], [
-    ['addon.toggle.enabled', 'Enable or disable'],
-    ['urls.yank', 'Copy current URL'],
-    ['urls.paste?{"newTab":false}', 'Open clipboard\'s URL in current tab'],
-    ['urls.paste?{"newTab":true}', 'Open clipboard\'s URL in new tab'],
-    ['zoom.in', 'Zoom-in'],
-    ['zoom.out', 'Zoom-out'],
-    ['zoom.neutral', 'Reset zoom level'],
-    ['page.source', 'Open a page source'],
-  ]
-];
-
-const AllowdOps = [].concat(...KeyMapFields.map(group => group.map(e => e[0])));
-
-class KeymapsForm extends React.Component {
-
-  render() {
-    let values = this.props.value;
-    if (!values) {
-      values = {};
-    }
-    return <div className='form-keymaps-form'>
-      {
-        KeyMapFields.map((group, index) => {
-          return <div key={index} className='form-keymaps-form-field-group'>
-            {
-              group.map((field) => {
-                let name = field[0];
-                let label = field[1];
-                let value = values[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 = { ...this.props.value };
-    next[e.target.name] = e.target.value;
-
-    this.props.onChange(next);
-  }
-}
-
-KeymapsForm.AllowdOps = AllowdOps;
-
-export default KeymapsForm;

src/settings/components/index.jsx

@@ -1,11 +1,11 @@
 import './site.scss';
 import React from 'react';
 import { connect } from 'react-redux';
-import Input from './ui/input';
-import SearchForm from './form/search-form';
-import KeymapsForm from './form/keymaps-form';
-import BlacklistForm from './form/blacklist-form';
-import PropertiesForm from './form/properties-form';
+import Input from './ui/Input';
+import SearchForm from './form/SearchForm';
+import KeymapsForm from './form/KeymapsForm';
+import BlacklistForm from './form/BlacklistForm';
+import PropertiesForm from './form/PropertiesForm';
 import * as properties from 'shared/settings/properties';
 import * as settingActions from 'settings/actions/setting';
 
@@ -136,7 +136,7 @@ class SettingsComponent extends React.Component {
       this.props.dispatch(settingActions.switchToForm(this.props.json));
     }
 
-    let settings = this.props.getState();
+    let settings = this.props.store.getState();
     this.props.dispatch(settingActions.save(settings));
   }
 }

src/settings/components/ui/AddButton.jsx

@@ -1,4 +1,4 @@
-import './add-button.scss';
+import './AddButton.scss';
 import React from 'react';
 
 class AddButton extends React.Component {

src/settings/components/ui/DeleteButton.jsx

@@ -1,4 +1,4 @@
-import './delete-button.scss';
+import './DeleteButton.scss';
 import React from 'react';
 
 class DeleteButton extends React.Component {

src/settings/components/ui/Input.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import './input.scss';
+import './Input.scss';
 
 class Input extends React.Component {