JSX で Jade を利用しないように修正 fix #9

gulpfile.babel.js

@@ -116,17 +116,13 @@ gulp.task('build:webpack', () => {
       watch: !production,
       module: {
         loaders: [
-          {test: /\.(js|jsx)$/, loader: 'babel', query: {presets: ['es2015', 'react']}},
-          {test: /\.jade$/, loader: "react-jade-loader"}
+          {test: /\.(js|jsx)$/, loader: 'babel', query: {presets: ['es2015', 'react']}}
         ]
       },
       resolve: {
         modulesDirectories: ['node_modules', 'bower_components', paths.src.js],
         extensions: ['', '.js', ".jsx", ".jade"]
       },
-      resolveLoader: {
-        modulesDirectories: ['node_modules', `${__dirname}/webpack/loaders`]
-      },
       plugins: plugins
      }, webpack))
     .pipe(gulp.dest(paths.dist.js))

source/js/components/asset.js

@@ -1,11 +1,12 @@
 import {Component} from "platform/react"
+import {Message, Text, Label} from "platform/react-ui"
 import {CashInOuts} from "stores/asset"
 import ActionTypes from "constants/asset"
 import ActionCreators from "actions/asset"
 
-// parent
-import dom from "templates/asset"
+const Link = ReactRouter.Link
 
+// parent
 export default class Asset extends Component {
   initState() {
     return {items: [], loading: false}
@@ -26,22 +27,83 @@ export default class Asset extends Component {
     }
   }
   render() {
-    return dom(this.param({List: AssetWithdrawalList, Crud: AssetWithdrawalCrud}))
+    return (
+      <div className="container-fluid">
+        <div className="row">
+          <div className="col-md-4">
+            <div className="panel panel-default l-panel-mock l-panel-asset-info">
+              <div className="panel-heading">
+                <i className="fa fa-fw fa-info-circle" />  資産残高
+              </div>
+              <div className="panel-body"></div>
+            </div>
+          </div>
+          <div className="col-md-8">
+            <ul className="nav nav-tabs">
+              <li><a href="#deposit" data-toggle="tab">入金</a></li>
+              <li className="active"><a href="#withdrawal" data-toggle="tab">出金依頼</a></li>
+              <li><a href="#cashflow" data-toggle="tab">入出金一覧</a></li>
+            </ul>
+            <div className="tab-content">
+              <div id="deposit" className="tab-pane">TBD</div>
+              <div id="withdrawal" className="tab-pane active">
+                <Message message={this.state.message} />
+                <AssetWithdrawalCrud message={this.state.message} />
+                <AssetWithdrawalList items={this.state.items} message={this.state.message} />
+              </div>
+              <div id="cashflow" className="tab-pane">TBD</div>
+            </div>
+          </div>
+        </div>
+        <hr />
+        <div className="row">
+          <div className="col-md-4">
+            <div className="panel panel-default l-panel-mock"><div className="panel-body"></div></div>
+          </div>
+          <div className="col-md-4">
+            <div className="panel panel-default l-panel-mock"><div className="panel-body"></div></div>
+          </div>
+          <div className="col-md-4">
+            <div className="panel panel-default l-panel-mock"><div className="panel-body"></div></div>
+          </div>
+        </div>
+      </div>
+    )
   }
 }
 
 // list
-import domList from "templates/partials/asset-withdrawal-list"
-
 class AssetWithdrawalList extends Component {
   render() {
-    return domList(this.param())
+    return (
+      <div className="l-withdrawal-list">
+        <div className="row">
+          <div className="col-md-12">
+            <div className="l-list-body l-scrollable">
+              <ul className="list-group">
+                <li className="list-group-item l-list-wait-row l-center">
+                  <i className="fa fa-spin fa-spinner" />
+                </li>
+                {this.props.items.map((item, i) => { return (
+                  <li className="list-group-item clearfix" key={item.id}>
+                    <Label className="l-item l-item-day" type="day" value={item.requestDay} />
+                    <div className="l-item l-item-type">
+                      <div className="label label-default">{item.statusType}</div>
+                    </div>
+                    <Label className="l-item l-item-currency" value={item.currency} />
+                    <Label className="l-item l-item-amount pull-right" type="amount" value={item.absAmount} />
+                  </li>
+                )})}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
   }
 }
 
 // crud
-import domCrud from "templates/partials/asset-withdrawal-crud"
-
 class AssetWithdrawalCrud extends Component {
   initialize() {
     this.watchStore(CashInOuts)
@@ -56,6 +118,22 @@ class AssetWithdrawalCrud extends Component {
     ActionCreators.requestWithdrawal(data)
   }
   render() {
-    return domCrud(this.param())
+    return (
+      <div className="l-withdrawal-crud">
+        <div className="row l-row">
+          <div className="col-md-4">
+            <Text ref="absAmount" id="absAmount" placeholder="出金金額" suffix="円" message={this.props.message} />
+          </div>
+          <div className="col-md-2">
+            <button className="btn btn-default btn-block" onClick={this.register.bind(this)}>依頼する</button>
+          </div>
+        </div>
+        <div className="row l-row">
+          <div className="col-md-12">
+            <div className="alert alert-warning">出金依頼に関わる注記文言を記載。動作確認用サンプルなので導線なり重複依頼はルーズに。</div>
+          </div>
+        </div>
+      </div>
+    )
   }
 }

source/js/components/header.js

@@ -5,8 +5,7 @@ import {Logins} from "stores/master"
 import ActionTypes from "constants/master"
 import ActionCreators from "actions/master"
 
-import domHeader from "templates/header"
-import domHeaderSimple from "templates/header-simple"
+const Link = ReactRouter.Link
 
 export default class Header extends Component {
   initialize() {
@@ -46,6 +45,48 @@ export default class Header extends Component {
     ActionCreators.logout()
   }
   render() {
-    return this.state.logined ? domHeader(this.param()) : domHeaderSimple()
+    if (this.state.logined) {
+      return (
+        <nav className="navbar navbar-default navbar-static-top l-nav-header">
+          <div className="navbar-header">
+            <a className="navbar-brand" href="/">App</a>
+          </div>
+          <ul className="nav navbar-nav">
+            <li><Link to="top">"取扱い商品名 (TOP)"</Link></li>
+            <li><Link to="trade">取引情報</Link></li>
+            <li><Link to="asset">口座資産</Link></li>
+          </ul>
+          <ul className="nav navbar-nav navbar-right">
+            <li className="dropdown">
+              <a className="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                 ○○ 様 
+                <span className="caret" />
+              </a>
+              <ul className="dropdown-menu" role="menu">
+                <li>
+                  <a href="#">
+                    <i className="fa fa-fw fa-user" />  アカウント情報
+                  </a>
+                </li>
+                <li className="divider" />
+                <li>
+                  <a href="#" onClick={this.logout.bind(this)}>
+                    <i className="fa fa-fw fa-sign-out" />  ログアウト
+                  </a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </nav>
+      )
+    } else {
+      return (
+        <nav className="navbar navbar-default navbar-static-top">
+          <div className="navbar-header">
+            <div className="navbar-brand">App</div>
+          </div>
+        </nav>
+      )
+    }
   }
 }

source/js/components/login.js

@@ -1,10 +1,8 @@
 import {Component} from "platform/react"
+import {Message, Text} from "platform/react-ui"
 import {Logins} from "stores/master"
 import ActionCreators from "actions/master"
 
-// parent
-import dom from "templates/login"
-
 export default class Login extends Component {
   initialize() {
     this.watchStore(Logins)
@@ -13,6 +11,27 @@ export default class Login extends Component {
     ActionCreators.login(this.refValues())
   }
   render() {
-    return dom(this.param())
+    return (
+      <div className="container">
+        <div className="col-xs-6 col-xs-offset-3">
+          <div className="panel panel-default l-panel-login">
+            <div className="panel-heading">ログインフォーム</div>
+            <div className="panel-body">
+              <Message message={this.state.message} />
+              <Text ref="loginId" id="loginId" placeholder="ログインID" row="true" />
+              <Text ref="password" id="password" placeholder="パスワード" />
+            </div>
+            <div className="panel-footer">
+              <button className="btn btn-block btn-primary" onClick={this.login.bind(this)}>
+                <i className="fa fa-fw fa-lg fa-sign-in" /> 　ログイン
+              </button>
+            </div>
+          </div>
+          <div className="alert alert-warning">
+            サーバ側（サンプル実装版）の認証モードを有効にした時は sample/sample でログインしてください。
+          </div>
+        </div>
+      </div>
+    )
   }
 }

source/js/components/timeout.js

@@ -1,9 +1,20 @@
 import {Component} from "platform/react"
 
-import dom from "templates/timeout"
-
 export default class Timeout extends Component {
   render() {
-    return dom(this.param())
+    const Link = ReactRouter.Link
+    return (
+      <div className="col-xs-6 col-xs-offset-3">
+        <div className="panel panel-default">
+          <div className="panel-heading">セッションタイムアウト</div>
+          <div className="panel-body">
+            <div className="alert alert-warning">ログインしていないか一定時間操作がありませんでした。</div>
+          </div>
+          <div className="panel-footer">
+            <Link className="btn btn-block btn-default" to="login">ログイン画面へ戻る</Link>
+          </div>
+        </div>
+      </div>
+    )
   }
 }

source/js/components/top.js

@@ -1,8 +1,11 @@
 import {Component} from "platform/react"
-import dom from "templates/top"
 
 export default class Top extends Component {
   render() {
-    return dom(this.param())
+    return (
+      <div className="container">
+        <div className="alert alert-warning l-center">取り扱い商品名（TOP）作成中</div>
+      </div>
+    )
   }
 }

source/js/components/trade.js

@@ -1,8 +1,11 @@
 import {Component} from "platform/react"
-import dom from "templates/trade"
 
 export default class Trade extends Component {
   render() {
-    return dom(this.param())
+    return (
+      <div className="container">
+        <div className="alert alert-warning l-center">取引情報作成中</div>
+      </div>
+    )
   }
 }

source/js/platform/react.js

@@ -69,11 +69,6 @@ export class Component extends React.Component {
       this.refValueSet(key, null)
     })
   }
-  param(appendItems = {}) {
-    let base = {owner: this, Link: Router.Link}
-    let ui = {Text: ReactUI.Text, Label: ReactUI.Label, Message: ReactUI.Message}
-    return Object.assign(base, ui, appendItems)
-  }
   // React Action
   componentDidMount() {
     this.storeListeners.forEach((v) => {