18 files changed, 173 insertions, 121 deletions

diff --git a/src/settings/actions/setting.js b/src/settings/actions/setting.js
index 0277159..db63a45 100644
--- a/src/settings/actions/setting.js
+++ b/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, KeymapsForm.AllowdOps);
+    let form = settingsValues.formFromJson(json, keymaps.allowedOps);
     return {
       type: actions.SETTING_SWITCH_TO_FORM,
       form,
@@ -61,4 +60,4 @@ const set = (settings) => {
   };
 };
 
-export { load, save, switchToForm, switchToJson };
+export { load, save, set, switchToForm, switchToJson };
diff --git a/src/settings/components/form/blacklist-form.jsx b/src/settings/components/form/BlacklistForm.jsx
index 7ae9652..c470758 100644
--- a/src/settings/components/form/blacklist-form.jsx
+++ b/src/settings/components/form/BlacklistForm.jsx
@@ -1,38 +1,34 @@
-import './blacklist-form.scss';
-import AddButton from '../ui/add-button';
-import DeleteButton from '../ui/delete-button';
-import { h, Component } from 'preact';
+import './BlacklistForm.scss';
+import AddButton from '../ui/AddButton';
+import DeleteButton from '../ui/DeleteButton';
+import React from 'react';
+import PropTypes from 'prop-types';
 
-class BlacklistForm extends Component {
+class BlacklistForm extends React.Component {
 
   render() {
-    let value = this.props.value;
-    if (!value) {
-      value = [];
-    }
-
     return <div className='form-blacklist-form'>
       {
-        value.map((url, index) => {
+        this.props.value.map((url, index) => {
           return <div key={index} className='form-blacklist-form-row'>
             <input data-index={index} type='text' name='url'
               className='column-url' value={url}
-              onChange={this.bindValue.bind(this)} />
+              onChange={this.bindValue.bind(this)}
+              onBlur={this.props.onBlur}
+            />
             <DeleteButton data-index={index} name='delete'
-              onClick={this.bindValue.bind(this)} />
+              onClick={this.bindValue.bind(this)}
+              onBlur={this.props.onBlur}
+            />
           </div>;
         })
       }
-      <AddButton name='add' style='float:right'
+      <AddButton name='add' style={{ float: 'right' }}
         onClick={this.bindValue.bind(this)} />
     </div>;
   }
 
   bindValue(e) {
-    if (!this.props.onChange) {
-      return;
-    }
-
     let name = e.target.name;
     let index = e.target.getAttribute('data-index');
     let next = this.props.value ? this.props.value.slice() : [];
@@ -46,7 +42,22 @@ class BlacklistForm extends Component {
     }
 
     this.props.onChange(next);
+    if (name === 'delete') {
+      this.props.onBlur();
+    }
   }
 }
 
+BlacklistForm.propTypes = {
+  value: PropTypes.arrayOf(PropTypes.string),
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+};
+
+BlacklistForm.defaultProps = {
+  value: [],
+  onChange: () => {},
+  onBlur: () => {},
+};
+
 export default BlacklistForm;
diff --git a/src/settings/components/form/blacklist-form.scss b/src/settings/components/form/BlacklistForm.scss
index a230d0d..a230d0d 100644
--- a/src/settings/components/form/blacklist-form.scss
+++ b/src/settings/components/form/BlacklistForm.scss
diff --git a/src/settings/components/form/KeymapsForm.jsx b/src/settings/components/form/KeymapsForm.jsx
new file mode 100644
index 0000000..01acf61
--- /dev/null
+++ b/src/settings/components/form/KeymapsForm.jsx
@@ -0,0 +1,51 @@
+import './KeymapsForm.scss';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Input from '../ui/Input';
+import keymaps from '../../keymaps';
+
+class KeymapsForm extends React.Component {
+
+  render() {
+    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 = this.props.value[name] || '';
+                return <Input
+                  type='text' id={name} name={name} key={name}
+                  label={label} value={value}
+                  onChange={this.bindValue.bind(this)}
+                  onBlur={this.props.onBlur}
+                />;
+              })
+            }
+          </div>;
+        })
+      }
+    </div>;
+  }
+
+  bindValue(e) {
+    let next = { ...this.props.value };
+    next[e.target.name] = e.target.value;
+
+    this.props.onChange(next);
+  }
+}
+
+KeymapsForm.propTypes = {
+  value: PropTypes.objectOf(PropTypes.string),
+  onChange: PropTypes.func,
+};
+
+KeymapsForm.defaultProps = {
+  value: {},
+  onChange: () => {},
+};
+
+export default KeymapsForm;
diff --git a/src/settings/components/form/keymaps-form.scss b/src/settings/components/form/KeymapsForm.scss
index 1a4e5cd..1a4e5cd 100644
--- a/src/settings/components/form/keymaps-form.scss
+++ b/src/settings/components/form/KeymapsForm.scss
diff --git a/src/settings/components/form/properties-form.jsx b/src/settings/components/form/PropertiesForm.jsx
index ceb79d7..979fdd8 100644
--- a/src/settings/components/form/properties-form.jsx
+++ b/src/settings/components/form/PropertiesForm.jsx
@@ -1,14 +1,12 @@
-import './properties-form.scss';
-import { h, Component } from 'preact';
+import './PropertiesForm.scss';
+import React from 'react';
+import PropTypes from 'prop-types';
 
-class PropertiesForm extends Component {
+class PropertiesForm extends React.Component {
 
   render() {
     let types = this.props.types;
     let value = this.props.value;
-    if (!value) {
-      value = {};
-    }
 
     return <div className='form-properties-form'>
       {
@@ -29,6 +27,7 @@ class PropertiesForm extends Component {
                 className='column-input'
                 value={value[name] ? value[name] : ''}
                 onChange={this.bindValue.bind(this)}
+                onBlur={this.props.onBlur}
                 checked={value[name]}
               />
             </label>
@@ -39,10 +38,6 @@ class PropertiesForm extends Component {
   }
 
   bindValue(e) {
-    if (!this.props.onChange) {
-      return;
-    }
-
     let name = e.target.name;
     let next = { ...this.props.value };
     if (e.target.type.toLowerCase() === 'checkbox') {
@@ -57,4 +52,14 @@ class PropertiesForm extends Component {
   }
 }
 
+PropertiesForm.propTypes = {
+  value: PropTypes.objectOf(PropTypes.any),
+  onChange: PropTypes.func,
+};
+
+PropertiesForm.defaultProps = {
+  value: {},
+  onChange: () => {},
+};
+
 export default PropertiesForm;
diff --git a/src/settings/components/form/properties-form.scss b/src/settings/components/form/PropertiesForm.scss
index 7c9e167..7c9e167 100644
--- a/src/settings/components/form/properties-form.scss
+++ b/src/settings/components/form/PropertiesForm.scss
diff --git a/src/settings/components/form/search-form.jsx b/src/settings/components/form/SearchForm.jsx
index 2d5f01b..6b0bd01 100644
--- a/src/settings/components/form/search-form.jsx
+++ b/src/settings/components/form/SearchForm.jsx
@@ -1,15 +1,13 @@
-import './search-form.scss';
-import { h, Component } from 'preact';
-import AddButton from '../ui/add-button';
-import DeleteButton from '../ui/delete-button';
+import './SearchForm.scss';
+import React from 'react';
+import PropTypes from 'prop-types';
+import AddButton from '../ui/AddButton';
+import DeleteButton from '../ui/DeleteButton';
 
-class SearchForm extends Component {
+class SearchForm extends React.Component {
 
   render() {
     let value = this.props.value;
-    if (!value) {
-      value = { default: '', engines: []};
-    }
     if (!value.engines) {
       value.engines = [];
     }
@@ -25,11 +23,15 @@ class SearchForm extends Component {
           return <div key={index} className='form-search-form-row'>
             <input data-index={index} type='text' name='name'
               className='column-name' value={engine[0]}
-              onChange={this.bindValue.bind(this)} />
+              onChange={this.bindValue.bind(this)}
+              onBlur={this.props.onBlur}
+            />
             <input data-index={index} type='text' name='url'
               placeholder='http://example.com/?q={}'
               className='column-url' value={engine[1]}
-              onChange={this.bindValue.bind(this)} />
+              onChange={this.bindValue.bind(this)}
+              onBlur={this.props.onBlur}
+            />
             <div className='column-option'>
               <input data-index={index} type='radio' name='default'
                 checked={value.default === engine[0]}
@@ -40,16 +42,12 @@ class SearchForm extends Component {
           </div>;
         })
       }
-      <AddButton name='add' style='float:right'
+      <AddButton name='add' style={{ float: 'right' }}
         onClick={this.bindValue.bind(this)} />
     </div>;
   }
 
   bindValue(e) {
-    if (!this.props.onChange) {
-      return;
-    }
-
     let value = this.props.value;
     let name = e.target.name;
     let index = e.target.getAttribute('data-index');
@@ -72,7 +70,23 @@ class SearchForm extends Component {
     }
 
     this.props.onChange(next);
+    if (name === 'delete' || name === 'default') {
+      this.props.onBlur();
+    }
   }
 }
 
+SearchForm.propTypes = {
+  value: PropTypes.shape({
+    default: PropTypes.string,
+    engines: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
+  }),
+  onChange: PropTypes.func,
+};
+
+SearchForm.defaultProps = {
+  value: { default: '', engines: []},
+  onChange: () => {},
+};
+
 export default SearchForm;
diff --git a/src/settings/components/form/search-form.scss b/src/settings/components/form/SearchForm.scss
index 26b2f44..26b2f44 100644
--- a/src/settings/components/form/search-form.scss
+++ b/src/settings/components/form/SearchForm.scss
diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
index 9633359..4ef59d7 100644
--- a/src/settings/components/index.jsx
+++ b/src/settings/components/index.jsx
@@ -1,11 +1,11 @@
 import './site.scss';
-import { h, Component } from 'preact';
-import { connect } from 'preact-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 React from 'react';
+import { connect } from 'react-redux';
+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';
 
@@ -13,7 +13,7 @@ const DO_YOU_WANT_TO_CONTINUE =
   'Some settings in JSON can be lost when migrating.  ' +
   'Do you want to continue?';
 
-class SettingsComponent extends Component {
+class SettingsComponent extends React.Component {
   componentDidMount() {
     this.props.dispatch(settingActions.load());
   }
@@ -25,6 +25,7 @@ class SettingsComponent extends Component {
         <KeymapsForm
           value={form.keymaps}
           onChange={value => this.bindForm('keymaps', value)}
+          onBlur={this.save.bind(this)}
         />
       </fieldset>
       <fieldset>
@@ -32,6 +33,7 @@ class SettingsComponent extends Component {
         <SearchForm
           value={form.search}
           onChange={value => this.bindForm('search', value)}
+          onBlur={this.save.bind(this)}
         />
       </fieldset>
       <fieldset>
@@ -39,6 +41,7 @@ class SettingsComponent extends Component {
         <BlacklistForm
           value={form.blacklist}
           onChange={value => this.bindForm('blacklist', value)}
+          onBlur={this.save.bind(this)}
         />
       </fieldset>
       <fieldset>
@@ -47,6 +50,7 @@ class SettingsComponent extends Component {
           types={properties.types}
           value={form.properties}
           onChange={value => this.bindForm('properties', value)}
+          onBlur={this.save.bind(this)}
         />
       </fieldset>
     </div>;
@@ -61,6 +65,7 @@ class SettingsComponent extends Component {
         spellCheck='false'
         error={error}
         onChange={this.bindJson.bind(this)}
+        onBlur={this.save.bind(this)}
         value={json}
       />
     </div>;
@@ -109,7 +114,7 @@ class SettingsComponent extends Component {
       form: { ...this.props.form },
     };
     settings.form[name] = value;
-    this.props.dispatch(settingActions.save(settings));
+    this.props.dispatch(settingActions.set(settings));
   }
 
   bindJson(e) {
@@ -118,7 +123,7 @@ class SettingsComponent extends Component {
       json: e.target.value,
       form: this.props.form,
     };
-    this.props.dispatch(settingActions.save(settings));
+    this.props.dispatch(settingActions.set(settings));
   }
 
   bindSource(e) {
@@ -135,8 +140,10 @@ class SettingsComponent extends Component {
       }
       this.props.dispatch(settingActions.switchToForm(this.props.json));
     }
+  }
 
-    let settings = this.context.store.getState();
+  save() {
+    let settings = this.props.store.getState();
     this.props.dispatch(settingActions.save(settings));
   }
 }
diff --git a/src/settings/components/ui/add-button.jsx b/src/settings/components/ui/AddButton.jsx
index 79292d8..185a03b 100644
--- a/src/settings/components/ui/add-button.jsx
+++ b/src/settings/components/ui/AddButton.jsx
@@ -1,7 +1,7 @@
-import './add-button.scss';
-import { h, Component } from 'preact';
+import './AddButton.scss';
+import React from 'react';
 
-class AddButton extends Component {
+class AddButton extends React.Component {
   render() {
     return <input
       className='ui-add-button' type='button' value='&#x271a;'
diff --git a/src/settings/components/ui/add-button.scss b/src/settings/components/ui/AddButton.scss
index beb5688..beb5688 100644
--- a/src/settings/components/ui/add-button.scss
+++ b/src/settings/components/ui/AddButton.scss
diff --git a/src/settings/components/ui/delete-button.jsx b/src/settings/components/ui/DeleteButton.jsx
index 8077a76..75811cd 100644
--- a/src/settings/components/ui/delete-button.jsx
+++ b/src/settings/components/ui/DeleteButton.jsx
@@ -1,7 +1,7 @@
-import './delete-button.scss';
-import { h, Component } from 'preact';
+import './DeleteButton.scss';
+import React from 'react';
 
-class DeleteButton extends Component {
+class DeleteButton extends React.Component {
   render() {
     return <input
       className='ui-delete-button' type='button' value='&#x2716;'
diff --git a/src/settings/components/ui/delete-button.scss b/src/settings/components/ui/DeleteButton.scss
index 5932a72..5932a72 100644
--- a/src/settings/components/ui/delete-button.scss
+++ b/src/settings/components/ui/DeleteButton.scss
diff --git a/src/settings/components/ui/input.jsx b/src/settings/components/ui/Input.jsx
index e99dbc7..13a246b 100644
--- a/src/settings/components/ui/input.jsx
+++ b/src/settings/components/ui/Input.jsx
@@ -1,7 +1,8 @@
-import { h, Component } from 'preact';
-import './input.scss';
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Input.scss';
 
-class Input extends Component {
+class Input extends React.Component {
 
   renderText(props) {
     let inputClassName = props.error ? 'input-error' : '';
@@ -49,4 +50,11 @@ class Input extends Component {
   }
 }
 
+Input.propTypes = {
+  type: PropTypes.string,
+  error: PropTypes.string,
+  label: PropTypes.string,
+  value: PropTypes.string,
+};
+
 export default Input;
diff --git a/src/settings/components/ui/input.scss b/src/settings/components/ui/Input.scss
index ad4daf8..ad4daf8 100644
--- a/src/settings/components/ui/input.scss
+++ b/src/settings/components/ui/Input.scss
diff --git a/src/settings/index.jsx b/src/settings/index.jsx
index 8097d31..6aec7a0 100644
--- a/src/settings/index.jsx
+++ b/src/settings/index.jsx
@@ -1,7 +1,8 @@
-import { h, render } from 'preact';
+import React from 'react';
+import ReactDOM from 'react-dom';
 import SettingsComponent from './components';
 import reducer from './reducers/setting';
-import { Provider } from 'preact-redux';
+import { Provider } from 'react-redux';
 import promise from 'redux-promise';
 import { createStore, applyMiddleware } from '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
   );
diff --git a/src/settings/components/form/keymaps-form.jsx b/src/settings/keymaps.js
index ca51c96..ccfc74c 100644
--- a/src/settings/components/form/keymaps-form.jsx
+++ b/src/settings/keymaps.js
@@ -1,8 +1,4 @@
-import './keymaps-form.scss';
-import { h, Component } from 'preact';
-import Input from '../ui/input';
-
-const KeyMapFields = [
+const fields = [
   [
     ['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])));
-
-class KeymapsForm extends 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;
+const allowedOps = [].concat(...fields.map(group => group.map(e => e[0])));
 
-export default KeymapsForm;
+export default {
+  fields,
+  allowedOps,
+};