Skip to content

hfpp2012 / react-spd

Go to a project
Commit 54785816 by hfpp2012 yinsigan
Options

add mobx

1 parent 986572e0
Inline Side-by-side
Showing 7 changed files with 68 additions and 24 deletions
.babelrc
{ {
"presets": ["es2015", "stage-0", "react"], "presets": ["es2015", "stage-1", "react"],
"plugins": [ "plugins": [
["transform-decorators-legacy"], ["transform-decorators-legacy"],
] ]
......
package.json
...@@ -9,10 +9,11 @@ ...@@ -9,10 +9,11 @@
}, },
"dependencies": { "dependencies": {
"autobind-decorator": "^1.4.1", "autobind-decorator": "^1.4.1",
"babel-preset-stage-0": "^6.24.1",
"halogen": "^0.2.0", "halogen": "^0.2.0",
"html-webpack-plugin": "^2.28.0", "html-webpack-plugin": "^2.28.0",
"jquery": "^3.2.1", "jquery": "^3.2.1",
"mobx": "^3.1.10",
"mobx-react": "^4.1.8",
"path": "^0.12.7", "path": "^0.12.7",
"react": "^15.5.4", "react": "^15.5.4",
"react-addons-update": "^15.5.2", "react-addons-update": "^15.5.2",
...@@ -30,6 +31,7 @@ ...@@ -30,6 +31,7 @@
"babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.24.1", "babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1", "babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"css-loader": "^0.28.1", "css-loader": "^0.28.1",
"eslint": "^3.19.0", "eslint": "^3.19.0",
"eslint-loader": "^1.7.1", "eslint-loader": "^1.7.1",
......
src/components/Header.js
import React from 'react' import React from 'react'
import ModalRepoForm from './ModalRepoForm' import ModalRepoForm from './ModalRepoForm'
import ReactAddonsUpdate from 'react-addons-update'
import Loader from 'halogen/PulseLoader' import Loader from 'halogen/PulseLoader'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { observer } from 'mobx-react'
import autobind from 'autobind-decorator' import autobind from 'autobind-decorator'
@autobind @autobind
@observer
export default class Header extends React.Component { export default class Header extends React.Component {
constructor(props){
super(props);
this.state = {
data: null, loading: true, error: null
};
}
componentDidMount() { componentDidMount() {
this.props.promise.then( this.props.headerStore.loadHeaderData()
value => this.setState({loading: false, data: value}),
error => this.setState({loading: false, error: error})
)
} }
addRepo(repo) { addRepo(repo) {
let data = ReactAddonsUpdate(this.state.data, { $push: [repo] }) this.props.headerStore.addRepo(repo)
this.setState({ data: data })
} }
render() { render() {
const { headerStore } = this.props;
let result = null; let result = null;
if (this.state.loading) {
if (headerStore.loading) {
result = <Loader color="#286090" size="12px" margin="4px"/>; result = <Loader color="#286090" size="12px" margin="4px"/>;
} }
else if (this.state.error !== null) { else if (headerStore.error !== null) {
result = <span>Error: {this.state.error.message}</span>; result = <span>Error: {headerStore.error}</span>;
} }
else { else {
const data = this.state.data.map((repo) => { const data = headerStore.data.map((repo) => {
const url = `/web/regional_design/${repo.id}?object=repo` const url = `/web/regional_design/${repo.id}?object=repo`
return ( return (
<Link key={ repo.id } className='btn btn-default mr15' to={ url }>{ repo.name }</Link> <Link key={ repo.id } className='btn btn-default mr15' to={ url }>{ repo.name }</Link>
...@@ -44,6 +37,7 @@ export default class Header extends React.Component { ...@@ -44,6 +37,7 @@ export default class Header extends React.Component {
result = data; result = data;
} }
return ( return (
<div className="text-left top-header"> <div className="text-left top-header">
<ModalRepoForm handleNewRepo={ this.addRepo } /> <ModalRepoForm handleNewRepo={ this.addRepo } />
......
src/containers/Spd.js
...@@ -3,7 +3,9 @@ import ElementGroup from '../components/ElementGroup' ...@@ -3,7 +3,9 @@ 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 $ from 'jquery'
import headerModel from '../stores/HeaderStore'
const headerStore = new headerModel()
export default class Spd extends React.Component { export default class Spd extends React.Component {
componentDidMount() { componentDidMount() {
...@@ -39,7 +41,7 @@ export default class Spd extends React.Component { ...@@ -39,7 +41,7 @@ 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 promise={$.getJSON('/regional_design/repos.json')} /> <Header headerStore={ 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'>
......
src/libs/move.js
...@@ -17,7 +17,7 @@ function startMove(obj, json, endFn) { ...@@ -17,7 +17,7 @@ function startMove(obj, json, endFn) {
iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100) || 100 iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100) || 100
} }
} else { } else {
iCur = parseInt(getStyle(obj,attr)) || 0 iCur = parseInt(getStyle(obj, attr)) || 0
} }
let iSpeed = (json[attr] - iCur)/8 let iSpeed = (json[attr] - iCur)/8
......
src/stores/HeaderStore.js 0 → 100644
import { observable, useStrict, action, runInAction } from 'mobx'
import $ from 'jquery'
useStrict(true)
export default class headerStore {
@observable data = []
@observable loading = true
@observable error = null
@action addRepo(repo) {
this.data.push(repo)
}
@action loadHeaderData() {
$.getJSON('/regional_design/repos.json').then(
value => {
runInAction("update state after fetching data", () => {
this.data = value
this.loading = false
})
},
error => {
runInAction("error", () => {
this.error = error.statusText
this.loading = false
})
})
}
}
yarn.lock
...@@ -785,6 +785,12 @@ babel-plugin-transform-regenerator@^6.24.1: ...@@ -785,6 +785,12 @@ babel-plugin-transform-regenerator@^6.24.1:
dependencies: dependencies:
regenerator-transform "0.9.11" regenerator-transform "0.9.11"
babel-plugin-transform-runtime@^6.23.0:
version "6.23.0"
resolved "http://registry.npm.taobao.org/babel-plugin-transform-runtime/download/babel-plugin-transform-runtime-6.23.0.tgz#88490d446502ea9b8e7efb0fe09ec4d99479b1ee"
dependencies:
babel-runtime "^6.22.0"
babel-plugin-transform-strict-mode@^6.24.1: babel-plugin-transform-strict-mode@^6.24.1:
version "6.24.1" version "6.24.1"
resolved "http://registry.npm.taobao.org/babel-plugin-transform-strict-mode/download/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758" resolved "http://registry.npm.taobao.org/babel-plugin-transform-strict-mode/download/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"
...@@ -885,7 +891,7 @@ babel-register@^6.24.1: ...@@ -885,7 +891,7 @@ babel-register@^6.24.1:
mkdirp "^0.5.1" mkdirp "^0.5.1"
source-map-support "^0.4.2" source-map-support "^0.4.2"
babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0: babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0:
version "6.23.0" version "6.23.0"
resolved "http://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b" resolved "http://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
dependencies: dependencies:
...@@ -3294,6 +3300,16 @@ mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdi ...@@ -3294,6 +3300,16 @@ mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdi
dependencies: dependencies:
minimist "0.0.8" minimist "0.0.8"
mobx-react@^4.1.8:
version "4.1.8"
resolved "http://registry.npm.taobao.org/mobx-react/download/mobx-react-4.1.8.tgz#5b636c01c599bbee248c05c5aab6c77a41ab07f9"
dependencies:
hoist-non-react-statics "^1.2.0"
mobx@^3.1.10:
version "3.1.10"
resolved "http://registry.npm.taobao.org/mobx/download/mobx-3.1.10.tgz#61171f8b347e6c15e8a671100f6ef887fe52e80e"
ms@0.7.1: ms@0.7.1:
version "0.7.1" version "0.7.1"
resolved "http://registry.npm.taobao.org/ms/download/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098" resolved "http://registry.npm.taobao.org/ms/download/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!