Declare setting types

src/settings/components/form/KeymapsForm.tsx

@@ -2,32 +2,30 @@ import './KeymapsForm.scss';
 import React from 'react';
 import Input from '../ui/Input';
 import keymaps from '../../keymaps';
+import { FormKeymaps } from '../../../shared/SettingData';
 
-type Value = {[key: string]: string};
-
-interface Props{
-  value: Value;
-  onChange: (e: Value) => void;
+interface Props {
+  value: FormKeymaps;
+  onChange: (e: FormKeymaps) => void;
   onBlur: () => void;
 }
 
 class KeymapsForm extends React.Component<Props> {
   public static defaultProps: Props = {
-    value: {},
+    value: FormKeymaps.valueOf({}),
     onChange: () => {},
     onBlur: () => {},
   }
 
   render() {
+    let values = this.props.value.toJSON();
     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] || '';
+              group.map(([name, label]) => {
+                let value = values[name] || '';
                 return <Input
                   type='text' id={name} name={name} key={name}
                   label={label} value={value}
@@ -43,10 +41,7 @@ class KeymapsForm extends React.Component<Props> {
   }
 
   bindValue(name: string, value: string) {
-    let next = { ...this.props.value };
-    next[name] = value;
-
-    this.props.onChange(next);
+    this.props.onChange(this.props.value.buildWithOverride(name, value));
   }
 }
 

src/settings/components/form/SearchForm.tsx

@@ -2,31 +2,23 @@ import './SearchForm.scss';
 import React from 'react';
 import AddButton from '../ui/AddButton';
 import DeleteButton from '../ui/DeleteButton';
-
-interface Value {
-  default: string;
-  engines: string[][];
-}
+import { FormSearch } from '../../../shared/SettingData';
 
 interface Props {
-  value: Value;
-  onChange: (value: Value) => void;
+  value: FormSearch;
+  onChange: (value: FormSearch) => void;
   onBlur: () => void;
 }
 
 class SearchForm extends React.Component<Props> {
   public static defaultProps: Props = {
-    value: { default: '', engines: []},
+    value: FormSearch.valueOf({ default: '', engines: []}),
     onChange: () => {},
     onBlur: () => {},
   }
 
   render() {
-    let value = this.props.value;
-    if (!value.engines) {
-      value.engines = [];
-    }
-
+    let value = this.props.value.toJSON();
     return <div className='form-search-form'>
       <div className='form-search-form-header'>
         <div className='column-name'>Name</div>
@@ -63,28 +55,28 @@ class SearchForm extends React.Component<Props> {
   }
 
   bindValue(e: any) {
-    let value = this.props.value;
+    let value = this.props.value.toJSON();
     let name = e.target.name;
     let index = Number(e.target.getAttribute('data-index'));
-    let next: Value = {
+    let next: typeof value = {
       default: value.default,
-      engines: value.engines ? value.engines.slice() : [],
+      engines: value.engines.slice(),
     };
 
     if (name === 'name') {
       next.engines[index][0] = e.target.value;
-      next.default = this.props.value.engines[index][0];
+      next.default = 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];
+      next.default = value.engines[index][0];
     } else if (name === 'add') {
       next.engines.push(['', '']);
     } else if (name === 'delete') {
       next.engines.splice(index, 1);
     }
 
-    this.props.onChange(next);
+    this.props.onChange(FormSearch.valueOf(next));
     if (name === 'delete' || name === 'default') {
       this.props.onBlur();
     }