fix typo

src/components/ElementGroup.js

@@ -21,7 +21,7 @@ export default class ElementGroup extends React.Component {
   }
   }
 
 
   store() {
   store() {
-    return this.props.ElementGroupStore
+    return this.props.elementGroupStore
   }
   }
 
 
   sidebar() {
   sidebar() {

src/components/Header.js

@@ -4,7 +4,7 @@ import Loader from 'halogen/PulseLoader'
 import { Link } from 'react-router-dom'
 import { Link } from 'react-router-dom'
 import { observer } from 'mobx-react'
 import { observer } from 'mobx-react'
 import autobind from 'autobind-decorator'
 import autobind from 'autobind-decorator'
-import ModalRepoFormStore from '../stores/ModalRepoFormStore'
+import stores from '../stores'
 
 
 @autobind
 @autobind
 @observer
 @observer
@@ -41,7 +41,7 @@ export default class Header extends React.Component {
 
 
     return (
     return (
       <div className="text-left top-header">
       <div className="text-left top-header">
-        <ModalRepoForm handleNewRepo={ this.addRepo } ModalRepoFormStore={ ModalRepoFormStore } />
+        <ModalRepoForm handleNewRepo={ this.addRepo } modalRepoFormStore={ stores.ModalRepoFormStore } />
         <div className='col-md-10'>
         <div className='col-md-10'>
           { result }
           { result }
         </div>
         </div>

src/components/ModalRepoForm.js

@@ -8,24 +8,20 @@ import { observer } from 'mobx-react'
 @autobind
 @autobind
 @observer
 @observer
 export default class ModalRepoForm extends React.Component {
 export default class ModalRepoForm extends React.Component {
-  constructor(props){
-    super(props);
-    this.state = {
-      showModal: false, name: ''
-    };
-    this.init_state = this.state;
+  store() {
+    return this.props.modalRepoFormStore
   }
   }
 
 
   close() {
   close() {
-    this.setState({ showModal: false })
+    this.store().close();
   }
   }
 
 
   open() {
   open() {
-    this.setState({ showModal: true })
+    this.store().open();
   }
   }
 
 
   handleChange(e) {
   handleChange(e) {
-    return this.setState({ name: e.target.value })
+    this.store().handleChange(e);
   }
   }
 
 
   save(e) {
   save(e) {
@@ -54,7 +50,7 @@ export default class ModalRepoForm extends React.Component {
           新建仓库
           新建仓库
         </Button>
         </Button>
 
 
-        <Modal backdrop='static' show={this.state.showModal} onHide={this.close}>
+        <Modal backdrop='static' show={this.store().showModal} onHide={this.close}>
           <Modal.Header closeButton>
           <Modal.Header closeButton>
             <Modal.Title>新建仓库</Modal.Title>
             <Modal.Title>新建仓库</Modal.Title>
           </Modal.Header>
           </Modal.Header>
@@ -62,9 +58,9 @@ export default class ModalRepoForm extends React.Component {
             <form className='form-horizontal'>
             <form className='form-horizontal'>
               <label htmlFor="formHorizontalName" className="col-sm-2 control-label">仓库名</label>
               <label htmlFor="formHorizontalName" className="col-sm-2 control-label">仓库名</label>
               <div className="col-sm-5">
               <div className="col-sm-5">
-                <input autoFocus type="text" id="formHorizontalName" className="form-control" ref='name' value={ this.state.name } onChange={ this.handleChange } />
+                <input autoFocus type="text" id="formHorizontalName" className="form-control" ref='name' value={ this.store().name } onChange={ this.handleChange } />
                 {function(){
                 {function(){
-                  if (this.state.showNameError) {
+                  if (this.store().showNameError) {
                     return <p className="text-danger">仓库名不能为空</p>
                     return <p className="text-danger">仓库名不能为空</p>
                   }
                   }
                 }.call(this)}
                 }.call(this)}

src/containers/Spd.js

@@ -3,8 +3,7 @@ import ElementGroup from '../components/ElementGroup'
 import Header from '../components/Header'
 import Header from '../components/Header'
 import AlertContainer from 'react-alert'
 import AlertContainer from 'react-alert'
 import EventEmitter from '../libs/eventEmitter'
 import EventEmitter from '../libs/eventEmitter'
-import headerStore from '../stores/HeaderStore'
-import ElementGroupStore from '../stores/ElementGroupStore'
+import stores from '../stores'
 
 
 export default class Spd extends React.Component {
 export default class Spd extends React.Component {
   componentDidMount() {
   componentDidMount() {
@@ -40,12 +39,12 @@ export default class Spd extends React.Component {
       <div id="app">
       <div id="app">
         <AlertContainer ref={a => this.msg = a} {...this.alertOptions} />
         <AlertContainer ref={a => this.msg = a} {...this.alertOptions} />
         <div className="row">
         <div className="row">
-          <Header headerStore={ headerStore } />
+          <Header headerStore={ stores.HeaderStore } />
         </div>
         </div>
         <div className="row">
         <div className="row">
           <div className="col-md-2 sidebar" id='sidebar'>
           <div className="col-md-2 sidebar" id='sidebar'>
             <h3 className='sidebar-header'>元件</h3>
             <h3 className='sidebar-header'>元件</h3>
-            <ElementGroup ElementGroupStore={ ElementGroupStore } />
+            <ElementGroup elementGroupStore={ stores.ElementGroupStore } />
           </div>
           </div>
           <div id="dropzone" className="col-md-10 dropzone">
           <div id="dropzone" className="col-md-10 dropzone">
             {this.props.children}
             {this.props.children}

src/stores/HeaderStore.js → src/stores/Header.js

@@ -3,7 +3,7 @@ import $ from 'jquery'
 
 
 useStrict(true)
 useStrict(true)
 
 
-class headerStore {
+class HeaderStore {
   @observable data = []
   @observable data = []
   @observable loading = true
   @observable loading = true
   @observable error = null
   @observable error = null
@@ -29,4 +29,4 @@ class headerStore {
   }
   }
 }
 }
 
 
-export default new headerStore()
+export default new HeaderStore()

src/stores/ModalRepoForm.js

+import { observable, useStrict, action } from 'mobx'
+
+useStrict(true)
+
+class ModalRepoFormStore {
+  @observable showModal = false
+  @observable name = ''
+
+  @action open() {
+    this.showModal = true
+  }
+
+  @action close() {
+    this.showModal = false
+  }
+
+  @action handleChange(e) {
+    this.name = e.target.value
+  }
+
+  @action save() {
+
+  }
+}
+
+export default new ModalRepoFormStore()

src/stores/ModalRepoFormStore.js

-import { observable, useStrict, action } from 'mobx'
-
-useStrict(true)
-
-class ModalRepoFormStore {
-  @observable elements = [
-    { id: 1, name: "药库", initialPos: {x: 80, y: 70}, target_type: 'RegionalDesign::Repo' },
-    { id: 2, name: "药架", initialPos: {x: 80, y: 70 + 60}, target_type: 'RegionalDesign::DrugRepo' },
-    { id: 3, name: "药架格", initialPos: {x: 80, y: 70 + 60 * 2}, target_type: 'RegionalDesign::DrugBrandreth' }
-  ]
-
-  @action cloneElement(element) {
-    this.elements.push(element)
-  }
-
-  @action deleteElement(element) {
-    this.elements.remove(element)
-  }
-
-  @action deleteLastElement() {
-    this.elements.pop()
-  }
-}
-
-export default new ModalRepoFormStore()

src/stores/index.js

+import ModalRepoFormStore from './ModalRepoForm'
+import HeaderStore from './Header'
+import ElementGroupStore from './ElementGroup'
+
+const stores = {
+  ModalRepoFormStore,
+  HeaderStore,
+  ElementGroupStore
+}
+
+export default stores