Skip to content

Commit c020fd3

Browse files
jkazamajkazama
committed
Merge pull request #10 from jkazama/topic/9
JSX で Jade を利用しないように修正 fix #9
2 parents df7cacf + 365c597 commit c020fd3

File tree

18 files changed

+179
-142
lines changed

18 files changed

+179
-142
lines changed

‎gulpfile.babel.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -116,17 +116,13 @@ gulp.task('build:webpack', () => {
116116
watch: !production,
117117
module: {
118118
loaders: [
119-
{test: /\.(js|jsx)$/, loader: 'babel', query: {presets: ['es2015', 'react']}},
120-
{test: /\.jade$/, loader: "react-jade-loader"}
119+
{test: /\.(js|jsx)$/, loader: 'babel', query: {presets: ['es2015', 'react']}}
121120
]
122121
},
123122
resolve: {
124123
modulesDirectories: ['node_modules', 'bower_components', paths.src.js],
125124
extensions: ['', '.js', ".jsx", ".jade"]
126125
},
127-
resolveLoader: {
128-
modulesDirectories: ['node_modules', `${__dirname}/webpack/loaders`]
129-
},
130126
plugins: plugins
131127
}, webpack))
132128
.pipe(gulp.dest(paths.dist.js))

‎source/js/components/asset.js‎

Lines changed: 87 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import {Component} from "platform/react"
2+
import {Message, Text, Label} from "platform/react-ui"
23
import {CashInOuts} from "stores/asset"
34
import ActionTypes from "constants/asset"
45
import ActionCreators from "actions/asset"
56

6-
// parent
7-
import dom from "templates/asset"
7+
const Link = ReactRouter.Link
88

9+
// parent
910
export default class Asset extends Component {
1011
initState() {
1112
return {items: [], loading: false}
@@ -26,22 +27,83 @@ export default class Asset extends Component {
2627
}
2728
}
2829
render() {
29-
return dom(this.param({List: AssetWithdrawalList, Crud: AssetWithdrawalCrud}))
30+
return (
31+
<div className="container-fluid">
32+
<div className="row">
33+
<div className="col-md-4">
34+
<div className="panel panel-default l-panel-mock l-panel-asset-info">
35+
<div className="panel-heading">
36+
<i className="fa fa-fw fa-info-circle" /> 資産残高
37+
</div>
38+
<div className="panel-body"></div>
39+
</div>
40+
</div>
41+
<div className="col-md-8">
42+
<ul className="nav nav-tabs">
43+
<li><a href="#deposit" data-toggle="tab">入金</a></li>
44+
<li className="active"><a href="#withdrawal" data-toggle="tab">出金依頼</a></li>
45+
<li><a href="#cashflow" data-toggle="tab">入出金一覧</a></li>
46+
</ul>
47+
<div className="tab-content">
48+
<div id="deposit" className="tab-pane">TBD</div>
49+
<div id="withdrawal" className="tab-pane active">
50+
<Message message={this.state.message} />
51+
<AssetWithdrawalCrud message={this.state.message} />
52+
<AssetWithdrawalList items={this.state.items} message={this.state.message} />
53+
</div>
54+
<div id="cashflow" className="tab-pane">TBD</div>
55+
</div>
56+
</div>
57+
</div>
58+
<hr />
59+
<div className="row">
60+
<div className="col-md-4">
61+
<div className="panel panel-default l-panel-mock"><div className="panel-body"></div></div>
62+
</div>
63+
<div className="col-md-4">
64+
<div className="panel panel-default l-panel-mock"><div className="panel-body"></div></div>
65+
</div>
66+
<div className="col-md-4">
67+
<div className="panel panel-default l-panel-mock"><div className="panel-body"></div></div>
68+
</div>
69+
</div>
70+
</div>
71+
)
3072
}
3173
}
3274

3375
// list
34-
import domList from "templates/partials/asset-withdrawal-list"
35-
3676
class AssetWithdrawalList extends Component {
3777
render() {
38-
return domList(this.param())
78+
return (
79+
<div className="l-withdrawal-list">
80+
<div className="row">
81+
<div className="col-md-12">
82+
<div className="l-list-body l-scrollable">
83+
<ul className="list-group">
84+
<li className="list-group-item l-list-wait-row l-center">
85+
<i className="fa fa-spin fa-spinner" />
86+
</li>
87+
{this.props.items.map((item, i) => { return (
88+
<li className="list-group-item clearfix" key={item.id}>
89+
<Label className="l-item l-item-day" type="day" value={item.requestDay} />
90+
<div className="l-item l-item-type">
91+
<div className="label label-default">{item.statusType}</div>
92+
</div>
93+
<Label className="l-item l-item-currency" value={item.currency} />
94+
<Label className="l-item l-item-amount pull-right" type="amount" value={item.absAmount} />
95+
</li>
96+
)})}
97+
</ul>
98+
</div>
99+
</div>
100+
</div>
101+
</div>
102+
)
39103
}
40104
}
41105

42106
// crud
43-
import domCrud from "templates/partials/asset-withdrawal-crud"
44-
45107
class AssetWithdrawalCrud extends Component {
46108
initialize() {
47109
this.watchStore(CashInOuts)
@@ -56,6 +118,22 @@ class AssetWithdrawalCrud extends Component {
56118
ActionCreators.requestWithdrawal(data)
57119
}
58120
render() {
59-
return domCrud(this.param())
121+
return (
122+
<div className="l-withdrawal-crud">
123+
<div className="row l-row">
124+
<div className="col-md-4">
125+
<Text ref="absAmount" id="absAmount" placeholder="出金金額" suffix="円" message={this.props.message} />
126+
</div>
127+
<div className="col-md-2">
128+
<button className="btn btn-default btn-block" onClick={this.register.bind(this)}>依頼する</button>
129+
</div>
130+
</div>
131+
<div className="row l-row">
132+
<div className="col-md-12">
133+
<div className="alert alert-warning">出金依頼に関わる注記文言を記載。動作確認用サンプルなので導線なり重複依頼はルーズに。</div>
134+
</div>
135+
</div>
136+
</div>
137+
)
60138
}
61139
}

‎source/js/components/header.js‎

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ import {Logins} from "stores/master"
55
import ActionTypes from "constants/master"
66
import ActionCreators from "actions/master"
77

8-
import domHeader from "templates/header"
9-
import domHeaderSimple from "templates/header-simple"
8+
const Link = ReactRouter.Link
109

1110
export default class Header extends Component {
1211
initialize() {
@@ -46,6 +45,48 @@ export default class Header extends Component {
4645
ActionCreators.logout()
4746
}
4847
render() {
49-
return this.state.logined ? domHeader(this.param()) : domHeaderSimple()
48+
if (this.state.logined) {
49+
return (
50+
<nav className="navbar navbar-default navbar-static-top l-nav-header">
51+
<div className="navbar-header">
52+
<a className="navbar-brand" href="/">App</a>
53+
</div>
54+
<ul className="nav navbar-nav">
55+
<li><Link to="top">"取扱い商品名 (TOP)"</Link></li>
56+
<li><Link to="trade">取引情報</Link></li>
57+
<li><Link to="asset">口座資産</Link></li>
58+
</ul>
59+
<ul className="nav navbar-nav navbar-right">
60+
<li className="dropdown">
61+
<a className="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
62+
○○ 様
63+
<span className="caret" />
64+
</a>
65+
<ul className="dropdown-menu" role="menu">
66+
<li>
67+
<a href="#">
68+
<i className="fa fa-fw fa-user" /> アカウント情報
69+
</a>
70+
</li>
71+
<li className="divider" />
72+
<li>
73+
<a href="#" onClick={this.logout.bind(this)}>
74+
<i className="fa fa-fw fa-sign-out" /> ログアウト
75+
</a>
76+
</li>
77+
</ul>
78+
</li>
79+
</ul>
80+
</nav>
81+
)
82+
} else {
83+
return (
84+
<nav className="navbar navbar-default navbar-static-top">
85+
<div className="navbar-header">
86+
<div className="navbar-brand">App</div>
87+
</div>
88+
</nav>
89+
)
90+
}
5091
}
5192
}

‎source/js/components/login.js‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import {Component} from "platform/react"
2+
import {Message, Text} from "platform/react-ui"
23
import {Logins} from "stores/master"
34
import ActionCreators from "actions/master"
45

5-
// parent
6-
import dom from "templates/login"
7-
86
export default class Login extends Component {
97
initialize() {
108
this.watchStore(Logins)
@@ -13,6 +11,27 @@ export default class Login extends Component {
1311
ActionCreators.login(this.refValues())
1412
}
1513
render() {
16-
return dom(this.param())
14+
return (
15+
<div className="container">
16+
<div className="col-xs-6 col-xs-offset-3">
17+
<div className="panel panel-default l-panel-login">
18+
<div className="panel-heading">ログインフォーム</div>
19+
<div className="panel-body">
20+
<Message message={this.state.message} />
21+
<Text ref="loginId" id="loginId" placeholder="ログインID" row="true" />
22+
<Text ref="password" id="password" placeholder="パスワード" />
23+
</div>
24+
<div className="panel-footer">
25+
<button className="btn btn-block btn-primary" onClick={this.login.bind(this)}>
26+
<i className="fa fa-fw fa-lg fa-sign-in" /> 　ログイン
27+
</button>
28+
</div>
29+
</div>
30+
<div className="alert alert-warning">
31+
サーバ側（サンプル実装版）の認証モードを有効にした時は sample/sample でログインしてください。
32+
</div>
33+
</div>
34+
</div>
35+
)
1736
}
1837
}

‎source/js/components/timeout.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
11
import {Component} from "platform/react"
22

3-
import dom from "templates/timeout"
4-
53
export default class Timeout extends Component {
64
render() {
7-
return dom(this.param())
5+
const Link = ReactRouter.Link
6+
return (
7+
<div className="col-xs-6 col-xs-offset-3">
8+
<div className="panel panel-default">
9+
<div className="panel-heading">セッションタイムアウト</div>
10+
<div className="panel-body">
11+
<div className="alert alert-warning">ログインしていないか一定時間操作がありませんでした。</div>
12+
</div>
13+
<div className="panel-footer">
14+
<Link className="btn btn-block btn-default" to="login">ログイン画面へ戻る</Link>
15+
</div>
16+
</div>
17+
</div>
18+
)
819
}
920
}

‎source/js/components/top.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import {Component} from "platform/react"
2-
import dom from "templates/top"
32

43
export default class Top extends Component {
54
render() {
6-
return dom(this.param())
5+
return (
6+
<div className="container">
7+
<div className="alert alert-warning l-center">取り扱い商品名（TOP）作成中</div>
8+
</div>
9+
)
710
}
811
}

‎source/js/components/trade.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import {Component} from "platform/react"
2-
import dom from "templates/trade"
32

43
export default class Trade extends Component {
54
render() {
6-
return dom(this.param())
5+
return (
6+
<div className="container">
7+
<div className="alert alert-warning l-center">取引情報作成中</div>
8+
</div>
9+
)
710
}
811
}

‎source/js/platform/react.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,11 +69,6 @@ export class Component extends React.Component {
6969
this.refValueSet(key, null)
7070
})
7171
}
72-
param(appendItems = {}) {
73-
let base = {owner: this, Link: Router.Link}
74-
let ui = {Text: ReactUI.Text, Label: ReactUI.Label, Message: ReactUI.Message}
75-
return Object.assign(base, ui, appendItems)
76-
}
7772
// React Action
7873
componentDidMount() {
7974
this.storeListeners.forEach((v) => {

‎source/js/templates/asset.jade‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎source/js/templates/header-simple.jade‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

0 commit comments

Comments
 (0)