From be900aa25ca205c467dcbbab9c284ef680441996 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Mon, 29 Apr 2019 15:27:23 +0900
Subject: Clean settings components

---
 src/settings/components/form/PropertiesForm.jsx | 60 +++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 src/settings/components/form/PropertiesForm.jsx

(limited to 'src/settings/components/form/PropertiesForm.jsx')

diff --git a/src/settings/components/form/PropertiesForm.jsx b/src/settings/components/form/PropertiesForm.jsx
new file mode 100644
index 0000000..77991fc
--- /dev/null
+++ b/src/settings/components/form/PropertiesForm.jsx
@@ -0,0 +1,60 @@
+import './PropertiesForm.scss';
+import React from 'react';
+
+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'>
+      {
+        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 = { ...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;
-- 
cgit v1.2.3


From ee078c677bbb7756636898830f766465d426f68b Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Mon, 29 Apr 2019 15:47:42 +0900
Subject: Declare types on settings

---
 src/settings/components/form/BlacklistForm.jsx  |  6 ++++++
 src/settings/components/form/KeymapsForm.jsx    |  6 ++++++
 src/settings/components/form/PropertiesForm.jsx |  6 ++++++
 src/settings/components/form/SearchForm.jsx     | 10 ++++++++++
 src/settings/components/ui/Input.jsx            |  8 ++++++++
 5 files changed, 36 insertions(+)

(limited to 'src/settings/components/form/PropertiesForm.jsx')

diff --git a/src/settings/components/form/BlacklistForm.jsx b/src/settings/components/form/BlacklistForm.jsx
index 13571f1..7dad9ee 100644
--- a/src/settings/components/form/BlacklistForm.jsx
+++ b/src/settings/components/form/BlacklistForm.jsx
@@ -2,6 +2,7 @@ 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 React.Component {
 
@@ -49,4 +50,9 @@ class BlacklistForm extends React.Component {
   }
 }
 
+BlacklistForm.propTypes = {
+  value: PropTypes.arrayOf(PropTypes.string),
+  onChange: PropTypes.func,
+};
+
 export default BlacklistForm;
diff --git a/src/settings/components/form/KeymapsForm.jsx b/src/settings/components/form/KeymapsForm.jsx
index 25a3710..f5444fc 100644
--- a/src/settings/components/form/KeymapsForm.jsx
+++ b/src/settings/components/form/KeymapsForm.jsx
@@ -1,5 +1,6 @@
 import './KeymapsForm.scss';
 import React from 'react';
+import PropTypes from 'prop-types';
 import Input from '../ui/Input';
 import keymaps from '../../keymaps';
 
@@ -44,4 +45,9 @@ class KeymapsForm extends React.Component {
   }
 }
 
+KeymapsForm.propTypes = {
+  value: PropTypes.objectOf(PropTypes.string),
+  onChange: PropTypes.func,
+};
+
 export default KeymapsForm;
diff --git a/src/settings/components/form/PropertiesForm.jsx b/src/settings/components/form/PropertiesForm.jsx
index 77991fc..9143a7a 100644
--- a/src/settings/components/form/PropertiesForm.jsx
+++ b/src/settings/components/form/PropertiesForm.jsx
@@ -1,5 +1,6 @@
 import './PropertiesForm.scss';
 import React from 'react';
+import PropTypes from 'prop-types';
 
 class PropertiesForm extends React.Component {
 
@@ -57,4 +58,9 @@ class PropertiesForm extends React.Component {
   }
 }
 
+PropertiesForm.propTypes = {
+  value: PropTypes.objectOf(PropTypes.any),
+  onChange: PropTypes.func,
+};
+
 export default PropertiesForm;
diff --git a/src/settings/components/form/SearchForm.jsx b/src/settings/components/form/SearchForm.jsx
index f52fd5f..718cca1 100644
--- a/src/settings/components/form/SearchForm.jsx
+++ b/src/settings/components/form/SearchForm.jsx
@@ -1,5 +1,6 @@
 import './SearchForm.scss';
 import React from 'react';
+import PropTypes from 'prop-types';
 import AddButton from '../ui/AddButton';
 import DeleteButton from '../ui/DeleteButton';
 
@@ -75,4 +76,13 @@ class SearchForm extends React.Component {
   }
 }
 
+SearchForm.propTypes = {
+  value: PropTypes.shape({
+    default: PropTypes.string,
+    engines: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
+  }),
+  onChange: PropTypes.func,
+
+};
+
 export default SearchForm;
diff --git a/src/settings/components/ui/Input.jsx b/src/settings/components/ui/Input.jsx
index d090f5b..13a246b 100644
--- a/src/settings/components/ui/Input.jsx
+++ b/src/settings/components/ui/Input.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './Input.scss';
 
 class Input extends React.Component {
@@ -49,4 +50,11 @@ class Input extends React.Component {
   }
 }
 
+Input.propTypes = {
+  type: PropTypes.string,
+  error: PropTypes.string,
+  label: PropTypes.string,
+  value: PropTypes.string,
+};
+
 export default Input;
-- 
cgit v1.2.3


From fce2434dcdef126a3ab180447e7cb48bc24ec1f9 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Tue, 30 Apr 2019 09:15:58 +0900
Subject: Specify default props

---
 src/settings/components/form/BlacklistForm.jsx  |  5 +----
 src/settings/components/form/KeymapsForm.jsx    |  5 +----
 src/settings/components/form/PropertiesForm.jsx | 12 +++++-------
 src/settings/components/form/SearchForm.jsx     |  5 +----
 4 files changed, 8 insertions(+), 19 deletions(-)

(limited to 'src/settings/components/form/PropertiesForm.jsx')

diff --git a/src/settings/components/form/BlacklistForm.jsx b/src/settings/components/form/BlacklistForm.jsx
index cee04bd..cf7cffe 100644
--- a/src/settings/components/form/BlacklistForm.jsx
+++ b/src/settings/components/form/BlacklistForm.jsx
@@ -25,10 +25,6 @@ class BlacklistForm extends React.Component {
   }
 
   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() : [];
@@ -52,6 +48,7 @@ BlacklistForm.propTypes = {
 
 BlacklistForm.defaultProps = {
   value: [],
+  onChange: () => {},
 };
 
 export default BlacklistForm;
diff --git a/src/settings/components/form/KeymapsForm.jsx b/src/settings/components/form/KeymapsForm.jsx
index 26a22d7..5bb65cb 100644
--- a/src/settings/components/form/KeymapsForm.jsx
+++ b/src/settings/components/form/KeymapsForm.jsx
@@ -30,10 +30,6 @@ class KeymapsForm extends React.Component {
   }
 
   bindValue(e) {
-    if (!this.props.onChange) {
-      return;
-    }
-
     let next = { ...this.props.value };
     next[e.target.name] = e.target.value;
 
@@ -48,6 +44,7 @@ KeymapsForm.propTypes = {
 
 KeymapsForm.defaultProps = {
   value: {},
+  onChange: () => {},
 };
 
 export default KeymapsForm;
diff --git a/src/settings/components/form/PropertiesForm.jsx b/src/settings/components/form/PropertiesForm.jsx
index 9143a7a..0014899 100644
--- a/src/settings/components/form/PropertiesForm.jsx
+++ b/src/settings/components/form/PropertiesForm.jsx
@@ -7,9 +7,6 @@ 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'>
       {
@@ -40,10 +37,6 @@ class PropertiesForm extends React.Component {
   }
 
   bindValue(e) {
-    if (!this.props.onChange) {
-      return;
-    }
-
     let name = e.target.name;
     let next = { ...this.props.value };
     if (e.target.type.toLowerCase() === 'checkbox') {
@@ -63,4 +56,9 @@ PropertiesForm.propTypes = {
   onChange: PropTypes.func,
 };
 
+PropertiesForm.defaultProps = {
+  value: {},
+  onChange: () => {},
+};
+
 export default PropertiesForm;
diff --git a/src/settings/components/form/SearchForm.jsx b/src/settings/components/form/SearchForm.jsx
index 2e070fc..d2f2d48 100644
--- a/src/settings/components/form/SearchForm.jsx
+++ b/src/settings/components/form/SearchForm.jsx
@@ -44,10 +44,6 @@ class SearchForm extends React.Component {
   }
 
   bindValue(e) {
-    if (!this.props.onChange) {
-      return;
-    }
-
     let value = this.props.value;
     let name = e.target.name;
     let index = e.target.getAttribute('data-index');
@@ -83,6 +79,7 @@ SearchForm.propTypes = {
 
 SearchForm.defaultProps = {
   value: { default: '', engines: []},
+  onChange: () => {},
 };
 
 export default SearchForm;
-- 
cgit v1.2.3


From 20f79f1da54441fe22a172009d34734af1bd3807 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Tue, 30 Apr 2019 09:49:45 +0900
Subject: Save settings by onBlur callback

---
 src/settings/actions/setting.js                 |  2 +-
 src/settings/components/form/BlacklistForm.jsx  | 13 +++++++++++--
 src/settings/components/form/KeymapsForm.jsx    |  1 +
 src/settings/components/form/PropertiesForm.jsx |  1 +
 src/settings/components/form/SearchForm.jsx     | 11 +++++++++--
 src/settings/components/index.jsx               | 11 +++++++++--
 6 files changed, 32 insertions(+), 7 deletions(-)

(limited to 'src/settings/components/form/PropertiesForm.jsx')

diff --git a/src/settings/actions/setting.js b/src/settings/actions/setting.js
index 8844252..db63a45 100644
--- a/src/settings/actions/setting.js
+++ b/src/settings/actions/setting.js
@@ -60,4 +60,4 @@ const set = (settings) => {
   };
 };
 
-export { load, save, switchToForm, switchToJson };
+export { load, save, set, switchToForm, switchToJson };
diff --git a/src/settings/components/form/BlacklistForm.jsx b/src/settings/components/form/BlacklistForm.jsx
index cf7cffe..c470758 100644
--- a/src/settings/components/form/BlacklistForm.jsx
+++ b/src/settings/components/form/BlacklistForm.jsx
@@ -13,9 +13,13 @@ class BlacklistForm extends React.Component {
           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>;
         })
       }
@@ -38,17 +42,22 @@ class BlacklistForm extends React.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/KeymapsForm.jsx b/src/settings/components/form/KeymapsForm.jsx
index 5bb65cb..01acf61 100644
--- a/src/settings/components/form/KeymapsForm.jsx
+++ b/src/settings/components/form/KeymapsForm.jsx
@@ -20,6 +20,7 @@ class KeymapsForm extends React.Component {
                   type='text' id={name} name={name} key={name}
                   label={label} value={value}
                   onChange={this.bindValue.bind(this)}
+                  onBlur={this.props.onBlur}
                 />;
               })
             }
diff --git a/src/settings/components/form/PropertiesForm.jsx b/src/settings/components/form/PropertiesForm.jsx
index 0014899..979fdd8 100644
--- a/src/settings/components/form/PropertiesForm.jsx
+++ b/src/settings/components/form/PropertiesForm.jsx
@@ -27,6 +27,7 @@ class PropertiesForm extends React.Component {
                 className='column-input'
                 value={value[name] ? value[name] : ''}
                 onChange={this.bindValue.bind(this)}
+                onBlur={this.props.onBlur}
                 checked={value[name]}
               />
             </label>
diff --git a/src/settings/components/form/SearchForm.jsx b/src/settings/components/form/SearchForm.jsx
index d2f2d48..6b0bd01 100644
--- a/src/settings/components/form/SearchForm.jsx
+++ b/src/settings/components/form/SearchForm.jsx
@@ -23,11 +23,15 @@ class SearchForm extends React.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]}
@@ -66,6 +70,9 @@ class SearchForm extends React.Component {
     }
 
     this.props.onChange(next);
+    if (name === 'delete' || name === 'default') {
+      this.props.onBlur();
+    }
   }
 }
 
diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
index affa2e9..4ef59d7 100644
--- a/src/settings/components/index.jsx
+++ b/src/settings/components/index.jsx
@@ -25,6 +25,7 @@ class SettingsComponent extends React.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 React.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 React.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 React.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 React.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 React.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 React.Component {
       json: e.target.value,
       form: this.props.form,
     };
-    this.props.dispatch(settingActions.save(settings));
+    this.props.dispatch(settingActions.set(settings));
   }
 
   bindSource(e) {
@@ -135,7 +140,9 @@ class SettingsComponent extends React.Component {
       }
       this.props.dispatch(settingActions.switchToForm(this.props.json));
     }
+  }
 
+  save() {
     let settings = this.props.store.getState();
     this.props.dispatch(settingActions.save(settings));
   }
-- 
cgit v1.2.3