From c60d0e7392fc708e961614d6b756a045de74f458 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Tue, 30 Apr 2019 14:00:07 +0900
Subject: Rename .js/.jsx to .ts/.tsx

---
 src/settings/components/form/BlacklistForm.jsx  |  63 ----------
 src/settings/components/form/BlacklistForm.tsx  |  63 ++++++++++
 src/settings/components/form/KeymapsForm.jsx    |  51 --------
 src/settings/components/form/KeymapsForm.tsx    |  51 ++++++++
 src/settings/components/form/PropertiesForm.jsx |  65 ----------
 src/settings/components/form/PropertiesForm.tsx |  65 ++++++++++
 src/settings/components/form/SearchForm.jsx     |  92 --------------
 src/settings/components/form/SearchForm.tsx     |  92 ++++++++++++++
 src/settings/components/index.jsx               | 153 ------------------------
 src/settings/components/index.tsx               | 153 ++++++++++++++++++++++++
 src/settings/components/ui/AddButton.jsx        |  12 --
 src/settings/components/ui/AddButton.tsx        |  12 ++
 src/settings/components/ui/DeleteButton.jsx     |  12 --
 src/settings/components/ui/DeleteButton.tsx     |  12 ++
 src/settings/components/ui/Input.jsx            |  60 ----------
 src/settings/components/ui/Input.tsx            |  60 ++++++++++
 16 files changed, 508 insertions(+), 508 deletions(-)
 delete mode 100644 src/settings/components/form/BlacklistForm.jsx
 create mode 100644 src/settings/components/form/BlacklistForm.tsx
 delete mode 100644 src/settings/components/form/KeymapsForm.jsx
 create mode 100644 src/settings/components/form/KeymapsForm.tsx
 delete mode 100644 src/settings/components/form/PropertiesForm.jsx
 create mode 100644 src/settings/components/form/PropertiesForm.tsx
 delete mode 100644 src/settings/components/form/SearchForm.jsx
 create mode 100644 src/settings/components/form/SearchForm.tsx
 delete mode 100644 src/settings/components/index.jsx
 create mode 100644 src/settings/components/index.tsx
 delete mode 100644 src/settings/components/ui/AddButton.jsx
 create mode 100644 src/settings/components/ui/AddButton.tsx
 delete mode 100644 src/settings/components/ui/DeleteButton.jsx
 create mode 100644 src/settings/components/ui/DeleteButton.tsx
 delete mode 100644 src/settings/components/ui/Input.jsx
 create mode 100644 src/settings/components/ui/Input.tsx

(limited to 'src/settings/components')

diff --git a/src/settings/components/form/BlacklistForm.jsx b/src/settings/components/form/BlacklistForm.jsx
deleted file mode 100644
index c470758..0000000
--- a/src/settings/components/form/BlacklistForm.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-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 {
-
-  render() {
-    return <div className='form-blacklist-form'>
-      {
-        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)}
-              onBlur={this.props.onBlur}
-            />
-            <DeleteButton data-index={index} name='delete'
-              onClick={this.bindValue.bind(this)}
-              onBlur={this.props.onBlur}
-            />
-          </div>;
-        })
-      }
-      <AddButton name='add' style={{ float: 'right' }}
-        onClick={this.bindValue.bind(this)} />
-    </div>;
-  }
-
-  bindValue(e) {
-    let name = e.target.name;
-    let index = e.target.getAttribute('data-index');
-    let next = this.props.value ? this.props.value.slice() : [];
-
-    if (name === 'url') {
-      next[index] = e.target.value;
-    } else if (name === 'add') {
-      next.push('');
-    } else if (name === 'delete') {
-      next.splice(index, 1);
-    }
-
-    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/BlacklistForm.tsx b/src/settings/components/form/BlacklistForm.tsx
new file mode 100644
index 0000000..c470758
--- /dev/null
+++ b/src/settings/components/form/BlacklistForm.tsx
@@ -0,0 +1,63 @@
+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 {
+
+  render() {
+    return <div className='form-blacklist-form'>
+      {
+        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)}
+              onBlur={this.props.onBlur}
+            />
+            <DeleteButton data-index={index} name='delete'
+              onClick={this.bindValue.bind(this)}
+              onBlur={this.props.onBlur}
+            />
+          </div>;
+        })
+      }
+      <AddButton name='add' style={{ float: 'right' }}
+        onClick={this.bindValue.bind(this)} />
+    </div>;
+  }
+
+  bindValue(e) {
+    let name = e.target.name;
+    let index = e.target.getAttribute('data-index');
+    let next = this.props.value ? this.props.value.slice() : [];
+
+    if (name === 'url') {
+      next[index] = e.target.value;
+    } else if (name === 'add') {
+      next.push('');
+    } else if (name === 'delete') {
+      next.splice(index, 1);
+    }
+
+    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
deleted file mode 100644
index 01acf61..0000000
--- a/src/settings/components/form/KeymapsForm.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-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/KeymapsForm.tsx b/src/settings/components/form/KeymapsForm.tsx
new file mode 100644
index 0000000..01acf61
--- /dev/null
+++ b/src/settings/components/form/KeymapsForm.tsx
@@ -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/PropertiesForm.jsx b/src/settings/components/form/PropertiesForm.jsx
deleted file mode 100644
index 979fdd8..0000000
--- a/src/settings/components/form/PropertiesForm.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import './PropertiesForm.scss';
-import React from 'react';
-import PropTypes from 'prop-types';
-
-class PropertiesForm extends React.Component {
-
-  render() {
-    let types = this.props.types;
-    let value = this.props.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)}
-                onBlur={this.props.onBlur}
-                checked={value[name]}
-              />
-            </label>
-          </div>;
-        })
-      }
-    </div>;
-  }
-
-  bindValue(e) {
-    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);
-  }
-}
-
-PropertiesForm.propTypes = {
-  value: PropTypes.objectOf(PropTypes.any),
-  onChange: PropTypes.func,
-};
-
-PropertiesForm.defaultProps = {
-  value: {},
-  onChange: () => {},
-};
-
-export default PropertiesForm;
diff --git a/src/settings/components/form/PropertiesForm.tsx b/src/settings/components/form/PropertiesForm.tsx
new file mode 100644
index 0000000..979fdd8
--- /dev/null
+++ b/src/settings/components/form/PropertiesForm.tsx
@@ -0,0 +1,65 @@
+import './PropertiesForm.scss';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class PropertiesForm extends React.Component {
+
+  render() {
+    let types = this.props.types;
+    let value = this.props.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)}
+                onBlur={this.props.onBlur}
+                checked={value[name]}
+              />
+            </label>
+          </div>;
+        })
+      }
+    </div>;
+  }
+
+  bindValue(e) {
+    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);
+  }
+}
+
+PropertiesForm.propTypes = {
+  value: PropTypes.objectOf(PropTypes.any),
+  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
deleted file mode 100644
index 6b0bd01..0000000
--- a/src/settings/components/form/SearchForm.jsx
+++ /dev/null
@@ -1,92 +0,0 @@
-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 React.Component {
-
-  render() {
-    let value = this.props.value;
-    if (!value.engines) {
-      value.engines = [];
-    }
-
-    return <div className='form-search-form'>
-      <div className='form-search-form-header'>
-        <div className='column-name'>Name</div>
-        <div className='column-url'>URL</div>
-        <div className='column-option'>Default</div>
-      </div>
-      {
-        value.engines.map((engine, index) => {
-          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)}
-              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)}
-              onBlur={this.props.onBlur}
-            />
-            <div className='column-option'>
-              <input data-index={index} type='radio' name='default'
-                checked={value.default === engine[0]}
-                onChange={this.bindValue.bind(this)} />
-              <DeleteButton data-index={index} name='delete'
-                onClick={this.bindValue.bind(this)} />
-            </div>
-          </div>;
-        })
-      }
-      <AddButton name='add' style={{ float: 'right' }}
-        onClick={this.bindValue.bind(this)} />
-    </div>;
-  }
-
-  bindValue(e) {
-    let value = this.props.value;
-    let name = e.target.name;
-    let index = e.target.getAttribute('data-index');
-    let next = {
-      default: value.default,
-      engines: value.engines ? value.engines.slice() : [],
-    };
-
-    if (name === 'name') {
-      next.engines[index][0] = e.target.value;
-      next.default = this.props.value.engines[index][0];
-    } else if (name === 'url') {
-      next.engines[index][1] = e.target.value;
-    } else if (name === 'default') {
-      next.default = this.props.value.engines[index][0];
-    } else if (name === 'add') {
-      next.engines.push(['', '']);
-    } else if (name === 'delete') {
-      next.engines.splice(index, 1);
-    }
-
-    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/SearchForm.tsx b/src/settings/components/form/SearchForm.tsx
new file mode 100644
index 0000000..6b0bd01
--- /dev/null
+++ b/src/settings/components/form/SearchForm.tsx
@@ -0,0 +1,92 @@
+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 React.Component {
+
+  render() {
+    let value = this.props.value;
+    if (!value.engines) {
+      value.engines = [];
+    }
+
+    return <div className='form-search-form'>
+      <div className='form-search-form-header'>
+        <div className='column-name'>Name</div>
+        <div className='column-url'>URL</div>
+        <div className='column-option'>Default</div>
+      </div>
+      {
+        value.engines.map((engine, index) => {
+          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)}
+              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)}
+              onBlur={this.props.onBlur}
+            />
+            <div className='column-option'>
+              <input data-index={index} type='radio' name='default'
+                checked={value.default === engine[0]}
+                onChange={this.bindValue.bind(this)} />
+              <DeleteButton data-index={index} name='delete'
+                onClick={this.bindValue.bind(this)} />
+            </div>
+          </div>;
+        })
+      }
+      <AddButton name='add' style={{ float: 'right' }}
+        onClick={this.bindValue.bind(this)} />
+    </div>;
+  }
+
+  bindValue(e) {
+    let value = this.props.value;
+    let name = e.target.name;
+    let index = e.target.getAttribute('data-index');
+    let next = {
+      default: value.default,
+      engines: value.engines ? value.engines.slice() : [],
+    };
+
+    if (name === 'name') {
+      next.engines[index][0] = e.target.value;
+      next.default = this.props.value.engines[index][0];
+    } else if (name === 'url') {
+      next.engines[index][1] = e.target.value;
+    } else if (name === 'default') {
+      next.default = this.props.value.engines[index][0];
+    } else if (name === 'add') {
+      next.engines.push(['', '']);
+    } else if (name === 'delete') {
+      next.engines.splice(index, 1);
+    }
+
+    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/index.jsx b/src/settings/components/index.jsx
deleted file mode 100644
index 4ef59d7..0000000
--- a/src/settings/components/index.jsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import './site.scss';
-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';
-
-const DO_YOU_WANT_TO_CONTINUE =
-  'Some settings in JSON can be lost when migrating.  ' +
-  'Do you want to continue?';
-
-class SettingsComponent extends React.Component {
-  componentDidMount() {
-    this.props.dispatch(settingActions.load());
-  }
-
-  renderFormFields(form) {
-    return <div>
-      <fieldset>
-        <legend>Keybindings</legend>
-        <KeymapsForm
-          value={form.keymaps}
-          onChange={value => this.bindForm('keymaps', value)}
-          onBlur={this.save.bind(this)}
-        />
-      </fieldset>
-      <fieldset>
-        <legend>Search Engines</legend>
-        <SearchForm
-          value={form.search}
-          onChange={value => this.bindForm('search', value)}
-          onBlur={this.save.bind(this)}
-        />
-      </fieldset>
-      <fieldset>
-        <legend>Blacklist</legend>
-        <BlacklistForm
-          value={form.blacklist}
-          onChange={value => this.bindForm('blacklist', value)}
-          onBlur={this.save.bind(this)}
-        />
-      </fieldset>
-      <fieldset>
-        <legend>Properties</legend>
-        <PropertiesForm
-          types={properties.types}
-          value={form.properties}
-          onChange={value => this.bindForm('properties', value)}
-          onBlur={this.save.bind(this)}
-        />
-      </fieldset>
-    </div>;
-  }
-
-  renderJsonFields(json, error) {
-    return <div>
-      <Input
-        type='textarea'
-        name='json'
-        label='Plain JSON'
-        spellCheck='false'
-        error={error}
-        onChange={this.bindJson.bind(this)}
-        onBlur={this.save.bind(this)}
-        value={json}
-      />
-    </div>;
-  }
-
-  render() {
-    let fields = null;
-    let disabled = this.props.error.length > 0;
-    if (this.props.source === 'form') {
-      fields = this.renderFormFields(this.props.form);
-    } else if (this.props.source === 'json') {
-      fields = this.renderJsonFields(this.props.json, this.props.error);
-    }
-    return (
-      <div>
-        <h1>Configure Vim-Vixen</h1>
-        <form className='vimvixen-settings-form'>
-          <Input
-            type='radio'
-            id='setting-source-form'
-            name='source'
-            label='Use form'
-            checked={this.props.source === 'form'}
-            value='form'
-            onChange={this.bindSource.bind(this)}
-            disabled={disabled} />
-
-          <Input
-            type='radio'
-            name='source'
-            label='Use plain JSON'
-            checked={this.props.source === 'json'}
-            value='json'
-            onChange={this.bindSource.bind(this)}
-            disabled={disabled} />
-          { fields }
-        </form>
-      </div>
-    );
-  }
-
-  bindForm(name, value) {
-    let settings = {
-      source: this.props.source,
-      json: this.props.json,
-      form: { ...this.props.form },
-    };
-    settings.form[name] = value;
-    this.props.dispatch(settingActions.set(settings));
-  }
-
-  bindJson(e) {
-    let settings = {
-      source: this.props.source,
-      json: e.target.value,
-      form: this.props.form,
-    };
-    this.props.dispatch(settingActions.set(settings));
-  }
-
-  bindSource(e) {
-    let from = this.props.source;
-    let to = e.target.value;
-
-    if (from === 'form' && to === 'json') {
-      this.props.dispatch(settingActions.switchToJson(this.props.form));
-    } else if (from === 'json' && to === 'form') {
-      let b = window.confirm(DO_YOU_WANT_TO_CONTINUE);
-      if (!b) {
-        this.forceUpdate();
-        return;
-      }
-      this.props.dispatch(settingActions.switchToForm(this.props.json));
-    }
-  }
-
-  save() {
-    let settings = this.props.store.getState();
-    this.props.dispatch(settingActions.save(settings));
-  }
-}
-
-const mapStateToProps = state => state;
-
-export default connect(mapStateToProps)(SettingsComponent);
diff --git a/src/settings/components/index.tsx b/src/settings/components/index.tsx
new file mode 100644
index 0000000..4ef59d7
--- /dev/null
+++ b/src/settings/components/index.tsx
@@ -0,0 +1,153 @@
+import './site.scss';
+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';
+
+const DO_YOU_WANT_TO_CONTINUE =
+  'Some settings in JSON can be lost when migrating.  ' +
+  'Do you want to continue?';
+
+class SettingsComponent extends React.Component {
+  componentDidMount() {
+    this.props.dispatch(settingActions.load());
+  }
+
+  renderFormFields(form) {
+    return <div>
+      <fieldset>
+        <legend>Keybindings</legend>
+        <KeymapsForm
+          value={form.keymaps}
+          onChange={value => this.bindForm('keymaps', value)}
+          onBlur={this.save.bind(this)}
+        />
+      </fieldset>
+      <fieldset>
+        <legend>Search Engines</legend>
+        <SearchForm
+          value={form.search}
+          onChange={value => this.bindForm('search', value)}
+          onBlur={this.save.bind(this)}
+        />
+      </fieldset>
+      <fieldset>
+        <legend>Blacklist</legend>
+        <BlacklistForm
+          value={form.blacklist}
+          onChange={value => this.bindForm('blacklist', value)}
+          onBlur={this.save.bind(this)}
+        />
+      </fieldset>
+      <fieldset>
+        <legend>Properties</legend>
+        <PropertiesForm
+          types={properties.types}
+          value={form.properties}
+          onChange={value => this.bindForm('properties', value)}
+          onBlur={this.save.bind(this)}
+        />
+      </fieldset>
+    </div>;
+  }
+
+  renderJsonFields(json, error) {
+    return <div>
+      <Input
+        type='textarea'
+        name='json'
+        label='Plain JSON'
+        spellCheck='false'
+        error={error}
+        onChange={this.bindJson.bind(this)}
+        onBlur={this.save.bind(this)}
+        value={json}
+      />
+    </div>;
+  }
+
+  render() {
+    let fields = null;
+    let disabled = this.props.error.length > 0;
+    if (this.props.source === 'form') {
+      fields = this.renderFormFields(this.props.form);
+    } else if (this.props.source === 'json') {
+      fields = this.renderJsonFields(this.props.json, this.props.error);
+    }
+    return (
+      <div>
+        <h1>Configure Vim-Vixen</h1>
+        <form className='vimvixen-settings-form'>
+          <Input
+            type='radio'
+            id='setting-source-form'
+            name='source'
+            label='Use form'
+            checked={this.props.source === 'form'}
+            value='form'
+            onChange={this.bindSource.bind(this)}
+            disabled={disabled} />
+
+          <Input
+            type='radio'
+            name='source'
+            label='Use plain JSON'
+            checked={this.props.source === 'json'}
+            value='json'
+            onChange={this.bindSource.bind(this)}
+            disabled={disabled} />
+          { fields }
+        </form>
+      </div>
+    );
+  }
+
+  bindForm(name, value) {
+    let settings = {
+      source: this.props.source,
+      json: this.props.json,
+      form: { ...this.props.form },
+    };
+    settings.form[name] = value;
+    this.props.dispatch(settingActions.set(settings));
+  }
+
+  bindJson(e) {
+    let settings = {
+      source: this.props.source,
+      json: e.target.value,
+      form: this.props.form,
+    };
+    this.props.dispatch(settingActions.set(settings));
+  }
+
+  bindSource(e) {
+    let from = this.props.source;
+    let to = e.target.value;
+
+    if (from === 'form' && to === 'json') {
+      this.props.dispatch(settingActions.switchToJson(this.props.form));
+    } else if (from === 'json' && to === 'form') {
+      let b = window.confirm(DO_YOU_WANT_TO_CONTINUE);
+      if (!b) {
+        this.forceUpdate();
+        return;
+      }
+      this.props.dispatch(settingActions.switchToForm(this.props.json));
+    }
+  }
+
+  save() {
+    let settings = this.props.store.getState();
+    this.props.dispatch(settingActions.save(settings));
+  }
+}
+
+const mapStateToProps = state => state;
+
+export default connect(mapStateToProps)(SettingsComponent);
diff --git a/src/settings/components/ui/AddButton.jsx b/src/settings/components/ui/AddButton.jsx
deleted file mode 100644
index 185a03b..0000000
--- a/src/settings/components/ui/AddButton.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import './AddButton.scss';
-import React from 'react';
-
-class AddButton extends React.Component {
-  render() {
-    return <input
-      className='ui-add-button' type='button' value='&#x271a;'
-      {...this.props} />;
-  }
-}
-
-export default AddButton;
diff --git a/src/settings/components/ui/AddButton.tsx b/src/settings/components/ui/AddButton.tsx
new file mode 100644
index 0000000..185a03b
--- /dev/null
+++ b/src/settings/components/ui/AddButton.tsx
@@ -0,0 +1,12 @@
+import './AddButton.scss';
+import React from 'react';
+
+class AddButton extends React.Component {
+  render() {
+    return <input
+      className='ui-add-button' type='button' value='&#x271a;'
+      {...this.props} />;
+  }
+}
+
+export default AddButton;
diff --git a/src/settings/components/ui/DeleteButton.jsx b/src/settings/components/ui/DeleteButton.jsx
deleted file mode 100644
index 75811cd..0000000
--- a/src/settings/components/ui/DeleteButton.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import './DeleteButton.scss';
-import React from 'react';
-
-class DeleteButton extends React.Component {
-  render() {
-    return <input
-      className='ui-delete-button' type='button' value='&#x2716;'
-      {...this.props} />;
-  }
-}
-
-export default DeleteButton;
diff --git a/src/settings/components/ui/DeleteButton.tsx b/src/settings/components/ui/DeleteButton.tsx
new file mode 100644
index 0000000..75811cd
--- /dev/null
+++ b/src/settings/components/ui/DeleteButton.tsx
@@ -0,0 +1,12 @@
+import './DeleteButton.scss';
+import React from 'react';
+
+class DeleteButton extends React.Component {
+  render() {
+    return <input
+      className='ui-delete-button' type='button' value='&#x2716;'
+      {...this.props} />;
+  }
+}
+
+export default DeleteButton;
diff --git a/src/settings/components/ui/Input.jsx b/src/settings/components/ui/Input.jsx
deleted file mode 100644
index 13a246b..0000000
--- a/src/settings/components/ui/Input.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Input.scss';
-
-class Input extends React.Component {
-
-  renderText(props) {
-    let inputClassName = props.error ? 'input-error' : '';
-    return <div className='settings-ui-input'>
-      <label htmlFor={props.id}>{ props.label }</label>
-      <input type='text' className={inputClassName} {...props} />
-    </div>;
-  }
-
-  renderRadio(props) {
-    let inputClassName = props.error ? 'input-error' : '';
-    return <div className='settings-ui-input'>
-      <label>
-        <input type='radio' className={inputClassName} {...props} />
-        { props.label }
-      </label>
-    </div>;
-  }
-
-  renderTextArea(props) {
-    let inputClassName = props.error ? 'input-error' : '';
-    return <div className='settings-ui-input'>
-      <label
-        htmlFor={props.id}
-      >{ props.label }</label>
-      <textarea className={inputClassName} {...props} />
-      <p className='settings-ui-input-error'>{ this.props.error }</p>
-    </div>;
-  }
-
-  render() {
-    let { type } = this.props;
-
-    switch (this.props.type) {
-    case 'text':
-      return this.renderText(this.props);
-    case 'radio':
-      return this.renderRadio(this.props);
-    case 'textarea':
-      return this.renderTextArea(this.props);
-    default:
-      console.warn(`Unsupported input type ${type}`);
-    }
-    return null;
-  }
-}
-
-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.tsx b/src/settings/components/ui/Input.tsx
new file mode 100644
index 0000000..13a246b
--- /dev/null
+++ b/src/settings/components/ui/Input.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Input.scss';
+
+class Input extends React.Component {
+
+  renderText(props) {
+    let inputClassName = props.error ? 'input-error' : '';
+    return <div className='settings-ui-input'>
+      <label htmlFor={props.id}>{ props.label }</label>
+      <input type='text' className={inputClassName} {...props} />
+    </div>;
+  }
+
+  renderRadio(props) {
+    let inputClassName = props.error ? 'input-error' : '';
+    return <div className='settings-ui-input'>
+      <label>
+        <input type='radio' className={inputClassName} {...props} />
+        { props.label }
+      </label>
+    </div>;
+  }
+
+  renderTextArea(props) {
+    let inputClassName = props.error ? 'input-error' : '';
+    return <div className='settings-ui-input'>
+      <label
+        htmlFor={props.id}
+      >{ props.label }</label>
+      <textarea className={inputClassName} {...props} />
+      <p className='settings-ui-input-error'>{ this.props.error }</p>
+    </div>;
+  }
+
+  render() {
+    let { type } = this.props;
+
+    switch (this.props.type) {
+    case 'text':
+      return this.renderText(this.props);
+    case 'radio':
+      return this.renderRadio(this.props);
+    case 'textarea':
+      return this.renderTextArea(this.props);
+    default:
+      console.warn(`Unsupported input type ${type}`);
+    }
+    return null;
+  }
+}
+
+Input.propTypes = {
+  type: PropTypes.string,
+  error: PropTypes.string,
+  label: PropTypes.string,
+  value: PropTypes.string,
+};
+
+export default Input;
-- 
cgit v1.2.3