Types src/settings

src/settings/actions/index.ts

@@ -1,7 +1,32 @@
-export default {
-  // Settings
-  SETTING_SET_SETTINGS: 'setting.set.settings',
-  SETTING_SHOW_ERROR: 'setting.show.error',
-  SETTING_SWITCH_TO_FORM: 'setting.switch.to.form',
-  SETTING_SWITCH_TO_JSON: 'setting.switch.to.json',
-};
+// Settings
+export const SETTING_SET_SETTINGS = 'setting.set.settings';
+export const SETTING_SHOW_ERROR = 'setting.show.error';
+export const SETTING_SWITCH_TO_FORM = 'setting.switch.to.form';
+export const SETTING_SWITCH_TO_JSON = 'setting.switch.to.json';
+
+interface SettingSetSettingsAcion {
+  type: typeof SETTING_SET_SETTINGS;
+  source: string;
+  json: string;
+  form: any;
+}
+
+interface SettingShowErrorAction {
+  type: typeof SETTING_SHOW_ERROR;
+  error: string;
+  json: string;
+}
+
+interface SettingSwitchToFormAction {
+  type: typeof SETTING_SWITCH_TO_FORM;
+  form: any;
+}
+
+interface SettingSwitchToJsonAction {
+  type: typeof SETTING_SWITCH_TO_JSON;
+  json: string;
+}
+
+export type SettingAction =
+  SettingSetSettingsAcion | SettingShowErrorAction |
+  SettingSwitchToFormAction | SettingSwitchToJsonAction;

src/settings/actions/setting.ts

@@ -1,15 +1,15 @@
-import actions from 'settings/actions';
-import * as validator from 'shared/settings/validator';
-import * as settingsValues from 'shared/settings/values';
-import * as settingsStorage from 'shared/settings/storage';
+import * as actions from './index';
+import * as validator from '../../shared/settings/validator';
+import * as settingsValues from '../../shared/settings/values';
+import * as settingsStorage from '../../shared/settings/storage';
 import keymaps from '../keymaps';
 
-const load = async() => {
+const load = async(): Promise<actions.SettingAction> => {
   let settings = await settingsStorage.loadRaw();
   return set(settings);
 };
 
-const save = async(settings) => {
+const save = async(settings: any): Promise<actions.SettingAction> => {
   try {
     if (settings.source === 'json') {
       let value = JSON.parse(settings.json);
@@ -26,7 +26,7 @@ const save = async(settings) => {
   return set(settings);
 };
 
-const switchToForm = (json) => {
+const switchToForm = (json: string): actions.SettingAction => {
   try {
     validator.validate(JSON.parse(json));
     let form = settingsValues.formFromJson(json, keymaps.allowedOps);
@@ -43,15 +43,15 @@ const switchToForm = (json) => {
   }
 };
 
-const switchToJson = (form) => {
+const switchToJson = (form: any): actions.SettingAction => {
   let json = settingsValues.jsonFromForm(form);
   return {
     type: actions.SETTING_SWITCH_TO_JSON,
     json,
   };
 };
 
-const set = (settings) => {
+const set = (settings: any): actions.SettingAction => {
   return {
     type: actions.SETTING_SET_SETTINGS,
     source: settings.source,

src/settings/components/form/BlacklistForm.tsx

@@ -2,9 +2,19 @@ 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 {
+interface Props {
+  value: string[];
+  onChange: (value: string[]) => void;
+  onBlur: () => void;
+}
+
+class BlacklistForm extends React.Component<Props> {
+  public static defaultProps: Props = {
+    value: [],
+    onChange: () => {},
+    onBlur: () => {},
+  };
 
   render() {
     return <div className='form-blacklist-form'>
@@ -28,7 +38,7 @@ class BlacklistForm extends React.Component {
     </div>;
   }
 
-  bindValue(e) {
+  bindValue(e: any) {
     let name = e.target.name;
     let index = e.target.getAttribute('data-index');
     let next = this.props.value ? this.props.value.slice() : [];
@@ -48,16 +58,4 @@ class BlacklistForm extends React.Component {
   }
 }
 
-BlacklistForm.propTypes = {
-  value: PropTypes.arrayOf(PropTypes.string),
-  onChange: PropTypes.func,
-  onBlur: PropTypes.func,
-};
-
-BlacklistForm.defaultProps = {
-  value: [],
-  onChange: () => {},
-  onBlur: () => {},
-};
-
 export default BlacklistForm;

src/settings/components/form/KeymapsForm.tsx

@@ -1,10 +1,22 @@
 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 {
+type Value = {[key: string]: string};
+
+interface Props{
+  value: Value;
+  onChange: (e: Value) => void;
+  onBlur: () => void;
+}
+
+class KeymapsForm extends React.Component<Props> {
+  public static defaultProps: Props = {
+    value: {},
+    onChange: () => {},
+    onBlur: () => {},
+  }
 
   render() {
     return <div className='form-keymaps-form'>
@@ -19,7 +31,7 @@ class KeymapsForm extends React.Component {
                 return <Input
                   type='text' id={name} name={name} key={name}
                   label={label} value={value}
-                  onChange={this.bindValue.bind(this)}
+                  onValueChange={this.bindValue.bind(this)}
                   onBlur={this.props.onBlur}
                 />;
               })
@@ -30,22 +42,12 @@ class KeymapsForm extends React.Component {
     </div>;
   }
 
-  bindValue(e) {
+  bindValue(name: string, value: string) {
     let next = { ...this.props.value };
-    next[e.target.name] = e.target.value;
+    next[name] = value;
 
     this.props.onChange(next);
   }
 }
 
-KeymapsForm.propTypes = {
-  value: PropTypes.objectOf(PropTypes.string),
-  onChange: PropTypes.func,
-};
-
-KeymapsForm.defaultProps = {
-  value: {},
-  onChange: () => {},
-};
-
 export default KeymapsForm;

src/settings/components/form/PropertiesForm.tsx

@@ -1,8 +1,20 @@
 import './PropertiesForm.scss';
 import React from 'react';
-import PropTypes from 'prop-types';
 
-class PropertiesForm extends React.Component {
+interface Props {
+  types: {[key: string]: string};
+  value: {[key: string]: any};
+  onChange: (value: any) => void;
+  onBlur: () => void;
+}
+
+class PropertiesForm extends React.Component<Props> {
+  public static defaultProps: Props = {
+    types: {},
+    value: {},
+    onChange: () => {},
+    onBlur: () => {},
+  };
 
   render() {
     let types = this.props.types;
@@ -12,13 +24,15 @@ class PropertiesForm extends React.Component {
       {
         Object.keys(types).map((name) => {
           let type = types[name];
-          let inputType = null;
+          let inputType = '';
           if (type === 'string') {
             inputType = 'text';
           } else if (type === 'number') {
             inputType = 'number';
           } else if (type === 'boolean') {
             inputType = 'checkbox';
+          } else {
+            return null;
           }
           return <div key={name} className='form-properties-form-row'>
             <label>
@@ -37,7 +51,7 @@ class PropertiesForm extends React.Component {
     </div>;
   }
 
-  bindValue(e) {
+  bindValue(e: React.ChangeEvent<HTMLInputElement>) {
     let name = e.target.name;
     let next = { ...this.props.value };
     if (e.target.type.toLowerCase() === 'checkbox') {
@@ -52,14 +66,4 @@ class PropertiesForm extends React.Component {
   }
 }
 
-PropertiesForm.propTypes = {
-  value: PropTypes.objectOf(PropTypes.any),
-  onChange: PropTypes.func,
-};
-
-PropertiesForm.defaultProps = {
-  value: {},
-  onChange: () => {},
-};
-
 export default PropertiesForm;

src/settings/components/form/SearchForm.tsx

@@ -1,10 +1,25 @@
 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 {
+interface Value {
+  default: string;
+  engines: string[][];
+}
+
+interface Props {
+  value: Value;
+  onChange: (value: Value) => void;
+  onBlur: () => void;
+}
+
+class SearchForm extends React.Component<Props> {
+  public static defaultProps: Props = {
+    value: { default: '', engines: []},
+    onChange: () => {},
+    onBlur: () => {},
+  }
 
   render() {
     let value = this.props.value;
@@ -47,11 +62,11 @@ class SearchForm extends React.Component {
     </div>;
   }
 
-  bindValue(e) {
+  bindValue(e: any) {
     let value = this.props.value;
     let name = e.target.name;
-    let index = e.target.getAttribute('data-index');
-    let next = {
+    let index = Number(e.target.getAttribute('data-index'));
+    let next: Value = {
       default: value.default,
       engines: value.engines ? value.engines.slice() : [],
     };
@@ -76,17 +91,4 @@ class SearchForm extends React.Component {
   }
 }
 
-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;