mobxify settings

app/components/CodeMirrorEditor/index.jsx

@@ -1,7 +1,7 @@
-/*@flow weak*/
 import React, {Component} from 'react';
 import CodeMirror from 'codemirror';
-import {connect} from 'react-redux';
+import { inject, observer } from 'mobx-react'
+import { dispatch } from 'store'
 import './addons';
 import dispatchCommand from '../../commands/dispatchCommand'
 import _ from 'lodash'
@@ -39,10 +39,10 @@ function getMode (tab) {
 
 const debounced = _.debounce(func => func(), 1000)
 
-@connect(state => ({
-  setting: state.SettingState.views.tabs.EDITOR,
-  themeSetting: state.SettingState.views.tabs.THEME,
+@inject(state => ({
+  themeName: state.SettingState.settings.theme.syntax_theme.value,
 }))
+@observer
 class CodeMirrorEditor extends Component {
   static defaultProps = {
     theme: 'default',
@@ -56,15 +56,14 @@ class CodeMirrorEditor extends Component {
   }
 
   componentDidMount () {
-    const { themeSetting, tab } = this.props;
-    const themeConfig = themeSetting.items[1].value
+    const { themeName, tab } = this.props;
     let editorInitialized = false
     // todo add other setting item from config
     if (tab.editor) {
       this.editor = tab.editor
       this.editorContainer.appendChild(this.editor.getWrapperElement())
     } else {
-      this.editor = tab.editor = initializeEditor(this.editorContainer, themeConfig)
+      this.editor = tab.editor = initializeEditor(this.editorContainer, themeName)
       editorInitialized = true
     }
     const editor = this.editor
@@ -100,7 +99,7 @@ class CodeMirrorEditor extends Component {
 
   onChange = (e) => {
     if (!this.isChanging) this.isChanging = true
-    const {tab, dispatch} = this.props;
+    const { tab } = this.props;
     dispatch(TabActions.updateTab({
       id: tab.id,
       flags: { modified: true },
@@ -113,17 +112,17 @@ class CodeMirrorEditor extends Component {
   }
 
   onFocus = () => {
-    this.props.dispatch(TabActions.activateTab(this.props.tab.id))
+    dispatch(TabActions.activateTab(this.props.tab.id))
   }
 
-  componentWillReceiveProps ({ tab, themeSetting }) {
+  componentWillReceiveProps ({ tab, themeName }) {
     if (tab.flags.modified || !this.editor || !tab.content) return
     if (tab.content.body !== this.editor.getValue()) {
       this.editor.setValue(tab.content.body)
     }
 
-    const nextTheme = themeSetting.items[1].value
-    const theme = this.props.themeSetting.items[1].value
+    const nextTheme = themeName
+    const theme = this.props.themeName
     if (theme !== nextTheme) this.editor.setOption('theme', nextTheme)
   }
 
@@ -142,35 +141,34 @@ class CodeMirrorEditor extends Component {
 }
 
 
-@connect(state => ({
-  setting: state.SettingState.views.tabs.EDITOR,
-  themeSetting: state.SettingState.views.tabs.THEME,
+@inject(state => ({
+  themeName: state.SettingState.settings.theme.syntax_theme.value,
 }))
+@observer
 class TablessCodeMirrorEditor extends Component {
   constructor (props) {
     super(props)
     this.state = {}
   }
 
   componentDidMount() {
-    const { themeSetting, width, height } = this.props
-    const theme = themeSetting.items[1].value
+    const { themeName, width, height } = this.props
 
-    this.editor = initializeEditor(this.editorContainer, theme)
+    this.editor = initializeEditor(this.editorContainer, themeName)
     this.editor.focus()
     this.editor.on('change', this.onChange)
   }
 
   onChange = (e) => {
-    this.props.dispatch(TabActions.createTabInGroup(this.props.tabGroupId, {
+    dispatch(TabActions.createTabInGroup(this.props.tabGroupId, {
       flags: { modified: true },
       content: this.editor.getValue()
     }))
   }
 
-  componentWillReceiveProps ({ themeSetting }) {
-    const nextTheme = themeSetting.items[1].value
-    const theme = this.props.themeSetting.items[1].value
+  componentWillReceiveProps ({ themeName }) {
+    const nextTheme = themeName
+    const theme = this.props.themeName
     if (theme !== nextTheme) this.editor.setOption('theme', nextTheme)
   }
 

app/components/Setting/SettingForm.jsx

@@ -0,0 +1,94 @@
+import React, { Component } from 'react'
+import { inject, observer } from 'mobx-react'
+import { runInAction } from 'mobx'
+import cx from 'classnames'
+import _ from 'lodash'
+
+@observer
+class SettingForm extends Component {
+  constructor (props) {
+    super(props)
+  }
+
+  updateSettingItemBind = settingItem => {
+    let update
+    if (this.props.setting.requireConfirm) {
+      update = value => settingItem.tempValue = value
+    } else {
+      update = value => settingItem.value = value
+    }
+    return (e) => {
+      const value = (() => {
+        switch (e.target.type) {
+          case 'checkbox':
+            return e.target.checked
+          case 'number':
+            return Number(e.target.value)
+          case 'text':
+          case 'select-one':
+          default:
+            return e.target.value
+        }
+      })()
+      update(value)
+    }
+  }
+
+  render () {
+    const { setting } = this.props
+    return <div>
+      {setting.items.map(settingItem =>
+        <FormInputGroup
+          key={settingItem.key}
+          settingItem={settingItem}
+          updateSettingItem={this.updateSettingItemBind(settingItem)}
+        />
+      )}
+    </div>
+  }
+}
+
+const FormInputGroup = observer(({ settingItem, updateSettingItem }) => {
+  if (settingItem.options && _.isArray(settingItem.options)) {
+    return (
+      <div className="form-group">
+        <label>{settingItem.name}</label>
+        <select className="form-control"
+          onChange={updateSettingItem}
+          value={settingItem.tempValue === undefined ? settingItem.value : settingItem.tempValue }
+        >
+          {settingItem.options.map(option =>
+            _.isObject(option) ?
+              <option key={option.value} value={option.value}>{option.name}</option>
+            : <option key={option} value={option}>{option}</option>
+          )}
+        </select>
+      </div>)
+  } else if (_.isBoolean(settingItem.value)) {
+    return (
+      <div className="form-group">
+        <div className="checkbox">
+          <label>
+            <input type="checkbox"
+              onChange={updateSettingItem} checked={settingItem.tempValue === undefined ? settingItem.value : settingItem.tempValue }
+            />
+            <strong>{settingItem.name}</strong>
+          </label>
+
+        </div>
+      </div>)
+  } else {
+    return (
+      <div className="form-group">
+        <label>{settingItem.name}</label>
+        <input className="form-control"
+          type={_.isNumber(settingItem.value) ? 'number' : 'text'}
+          min="1"
+          onChange={updateSettingItem}
+          value={settingItem.tempValue === undefined ? settingItem.value : settingItem.tempValue }
+        />
+      </div>)
+  }
+})
+
+export default SettingForm