Merge pull request #303 from ueokande/properties

Properties support

4 files changed, 90 insertions, 12 deletions

diff --git a/src/settings/actions/setting.js b/src/settings/actions/setting.js
index 1d01fda..92c9f8a 100644
--- a/src/settings/actions/setting.js
+++ b/src/settings/actions/setting.js
@@ -1,26 +1,22 @@
 import actions from 'settings/actions';
 import messages from 'shared/messages';
 import DefaultSettings from 'shared/settings/default';
+import * as settingsStorage from 'shared/settings/storage';
 import * as settingsValues from 'shared/settings/values';
 
 const load = () => {
-  return browser.storage.local.get('settings').then(({ settings }) => {
-    if (!settings) {
-      return set(DefaultSettings);
-    }
-    return set(Object.assign({}, DefaultSettings, settings));
-  }, console.error);
+  return settingsStorage.loadRaw().then((settings) => {
+    return set(settings);
+  });
 };
 
 const save = (settings) => {
-  return browser.storage.local.set({
-    settings,
-  }).then(() => {
+  return settingsStorage.save(settings).then(() => {
     return browser.runtime.sendMessage({
       type: messages.SETTINGS_RELOAD
-    }).then(() => {
-      return set(settings);
     });
+  }).then(() => {
+    return set(settings);
   });
 };
 
diff --git a/src/settings/components/form/properties-form.jsx b/src/settings/components/form/properties-form.jsx
new file mode 100644
index 0000000..55c8512
--- /dev/null
+++ b/src/settings/components/form/properties-form.jsx
@@ -0,0 +1,60 @@
+import './properties-form.scss';
+import { h, Component } from 'preact';
+
+class PropertiesForm extends Component {
+
+  render() {
+    let types = this.props.types;
+    let value = this.props.value;
+    if (!value) {
+      value = {};
+    }
+
+    return <div className='form-properties-form'>
+      {
+        Object.keys(types).map((name) => {
+          let type = types[name];
+          let inputType = null;
+          if (type === 'string') {
+            inputType = 'text';
+          } else if (type === 'number') {
+            inputType = 'number';
+          } else if (type === 'boolean') {
+            inputType = 'checkbox';
+          }
+          return <div key={name} className='form-properties-form-row'>
+            <label>
+              <span className='column-name'>{name}</span>
+              <input type={inputType} name={name}
+                className='column-input'
+                value={value[name] ? value[name] : ''}
+                onChange={this.bindValue.bind(this)}
+                checked={value[name]}
+              />
+            </label>
+          </div>;
+        })
+      }
+    </div>;
+  }
+
+  bindValue(e) {
+    if (!this.props.onChange) {
+      return;
+    }
+
+    let name = e.target.name;
+    let next = Object.assign({}, this.props.value);
+    if (e.target.type.toLowerCase() === 'checkbox') {
+      next[name] = e.target.checked;
+    } else if (e.target.type.toLowerCase() === 'number') {
+      next[name] = Number(e.target.value);
+    } else {
+      next[name] = e.target.value;
+    }
+
+    this.props.onChange(next);
+  }
+}
+
+export default PropertiesForm;
diff --git a/src/settings/components/form/properties-form.scss b/src/settings/components/form/properties-form.scss
new file mode 100644
index 0000000..7c9e167
--- /dev/null
+++ b/src/settings/components/form/properties-form.scss
@@ -0,0 +1,12 @@
+.form-properties-form {
+  &-row {
+    .column-name {
+      display: inline-block;
+      min-width: 5rem;
+      font-weight: bold;
+    }
+    .column-input {
+      line-height: 2.2rem;
+    }
+  }
+}
diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
index 73520ca..d7696a1 100644
--- a/src/settings/components/index.jsx
+++ b/src/settings/components/index.jsx
@@ -4,8 +4,10 @@ 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 * as properties from 'shared/settings/properties';
 import * as settingActions from 'settings/actions/setting';
-import * as validator from 'shared/validators/setting';
+import * as validator from 'shared/settings/validator';
 import * as settingsValues from 'shared/settings/values';
 
 const DO_YOU_WANT_TO_CONTINUE =
@@ -65,6 +67,14 @@ class SettingsComponent extends Component {
           onChange={value => this.bindForm('blacklist', value)}
         />
       </fieldset>
+      <fieldset>
+        <legend>Properties</legend>
+        <PropertiesForm
+          types={properties.types}
+          value={this.state.settings.form.properties}
+          onChange={value => this.bindForm('properties', value)}
+        />
+      </fieldset>
     </div>;
   }