Clean settings components

src/settings/actions/setting.js

@@ -1,8 +1,8 @@
 import actions from 'settings/actions';
 import * as validator from 'shared/settings/validator';
-import KeymapsForm from '../components/form/keymaps-form';
 import * as settingsValues from 'shared/settings/values';
 import * as settingsStorage from 'shared/settings/storage';
+import keymaps from '../keymaps';
 
 const load = async() => {
   let settings = await settingsStorage.loadRaw();
@@ -29,8 +29,7 @@ const save = async(settings) => {
 const switchToForm = (json) => {
   try {
     validator.validate(JSON.parse(json));
-    // AllowdOps filters operations, this is dirty dependency
+    let form = settingsValues.formFromJson(json, keymaps.allowedOps);
-    let form = settingsValues.formFromJson(json, KeymapsForm.AllowdOps);
     return {
       type: actions.SETTING_SWITCH_TO_FORM,
       form,

src/settings/components/form/BlacklistForm.jsx

@@ -1,6 +1,6 @@
-import './blacklist-form.scss';
+import './BlacklistForm.scss';
-import AddButton from '../ui/add-button';
+import AddButton from '../ui/AddButton';
-import DeleteButton from '../ui/delete-button';
+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 AddButton from '../ui/AddButton';
-import DeleteButton from '../ui/delete-button';
+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/index.jsx

@@ -1,11 +1,11 @@
 import './site.scss';
 import React from 'react';
 import { connect } from 'react-redux';
-import Input from './ui/input';
+import Input from './ui/Input';
-import SearchForm from './form/search-form';
+import SearchForm from './form/SearchForm';
-import KeymapsForm from './form/keymaps-form';
+import KeymapsForm from './form/KeymapsForm';
-import BlacklistForm from './form/blacklist-form';
+import BlacklistForm from './form/BlacklistForm';
-import PropertiesForm from './form/properties-form';
+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 {
 

src/settings/index.jsx

@@ -1,4 +1,5 @@
-import { render } from 'react';
+import React from 'react';
+import ReactDOM from 'react-dom';
 import SettingsComponent from './components';
 import reducer from './reducers/setting';
 import { Provider } from 'react-redux';
@@ -12,9 +13,9 @@ const store = createStore(
 
 document.addEventListener('DOMContentLoaded', () => {
   let wrapper = document.getElementById('vimvixen-settings');
-  render(
+  ReactDOM.render(
     <Provider store={store}>
-      <SettingsComponent />
+      <SettingsComponent store={store} />
     </Provider>,
     wrapper
   );

src/settings/keymaps.js

@@ -1,8 +1,4 @@
-import './keymaps-form.scss';
+const fields = [
-import React from 'react';
-import Input from '../ui/input';
-
-const KeyMapFields = [
   [
     ['scroll.vertically?{"count":1}', 'Scroll down'],
     ['scroll.vertically?{"count":-1}', 'Scroll up'],
@@ -70,49 +66,9 @@ const KeyMapFields = [
   ]
 ];
 
-const AllowdOps = [].concat(...KeyMapFields.map(group => group.map(e => e[0])));
+const allowedOps = [].concat(...fields.map(group => group.map(e => e[0])));
 
-class KeymapsForm extends React.Component {
+export default {
-
+  fields,
-  render() {
+  allowedOps,
-    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;