Merge branch 'master' of https://192.168.10.40/golfyos/wds-react

README.md

@@ -268,19 +268,110 @@ export default class HomePage extends Component {
 
 ```
 
-การตั้งชื่อ class 
 
-|           |      |
-| --------- | ---- |
-| Component |      |
-| Template  |      |
-| Page      |      |
 
+#### Class Component 
+
+ขึ้นต้นด้วย "WDS " ตามด้วย ชื่อของ Component ที่ขึ้นต้นด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>ใหญ่</u> เฉพาะตัวอักษรตัวแรก
+
+คั่นระหว่างคำด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>ใหญ่</u> เฉพาะตัวอักษรตัวแรก
+
+ตามด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>เล็ก</u>  ตามด้วยคำว่า  "Component"
+
+```javascript
+import React, { Component, Fragment } from 'react';
+import { Input, Icon } from 'antd';
+
+export default class WDSUsernameTextfieldComponent extends Component {
+  render() {
+    return (
+    	<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />    
+    );
+  }
+}
+
+```
+
+
+
+#### Class Template 
+
+ขึ้นต้นด้วย "WDS " ตามด้วย ชื่อของ Template ที่ขึ้นต้นด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>ใหญ่</u> เฉพาะตัวอักษรตัวแรก
+
+คั่นระหว่างคำด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>ใหญ่</u> เฉพาะตัวอักษรตัวแรก
+
+ตามด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>เล็ก</u>  ตามด้วยคำว่า  "Template"
+
+```javascript
+import React, { Component } from 'react';
+import { Layout } from 'antd';
+
+import * as EventConstants from '../../../resources/js/constants/eventConstants';
+
+import { style } from './resources/style/jsx/footerStyle';
+
+const { Footer } = Layout;
+
+export default class WDSFooterTemplate extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      systemFooter: ''
+    };
+  }
+
+  render() {
+    return <Footer style={style}>{this.state.systemFooter}</Footer>;
+  }
+}
+
+```
+
+
+
+#### Class Page 
+
+ขึ้นต้นด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>ใหญ่</u> เฉพาะตัวอักษรตัวแรก
+
+ตามด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์<u>เล็ก</u>  ตามด้วยคำว่า  "Page"
+
+```javascript
+import React from 'react';
+import Axios from 'axios';
+
+import Login from '../../templates/form/login/Login';
+
+import history from '../../history';
+import * as UrlConstants from '../../resources/js/constants/urlConstants';
+
+import Logo from './resources/images/logo_login.png';
+
+import './resources/style/css/login.css';
+
+export default class LoginPage extends React.Component {
+  _login = async params => {
+    const results = await Axios.post(UrlConstants.URL_LOGIN, params);
+
+    if (results.data.success) {
+      history.push('/process');
+    }
+  };
+
+  render() {
+    return (
+      <div className="login">
+        <img src={Logo} className="login-logo" alt="logo" />
+        <br />
+        <br />
+        <br />
+        <Login getFormSubmitFn={this._login} />
+      </div>
+    );
+  }
+}
+```
 
 
-- Component 		
-- Template
-- Page
 
 ### Import
 
@@ -351,12 +442,125 @@ this.props.eventEmitter.removeListener()
 
 ## 4. Routing
 
-route
+### Switch
+
+Switch เป็นการทำ Route แบบเปลี่ยนทั้งหน้า เมื่อ url เปลี่ยนหน้าจอจะแสดงผลที่ตรงกับ path ที่ระบุไว้เพียงหน้าจอเดียว โดยเรียงลำดับการแสดงผลจากบนลงล่าง
+
+```javascript
+// app.js
+
+import React, { Component } from 'react';
+
+import Routing from './routes/mainRoutes';
+
+import './resources/style/css/App.css';
+
+class App extends Component {
+  render() {
+    return <Routing eventEmitter={this.props.eventEmitter} />;
+  }
+}
+
+export default App;
+
+```
+
+import ไฟล์ mainRoutes.js เพื่อใช้ในการกำหนดเส้นทาง App.js
+
+```javascript
+// mainRoutes.js
+
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+
+import LoginPage from '../pages/login/LoginPage';
+import MainPage from '../pages/main/MainPage';
+
+export default ({ eventEmitter }) => (
+  <Switch>
+    <Route exact path="/" component={LoginPage} />
+    <Route path="/login" component={LoginPage} />
+    <Route
+      path="/process"
+      render={props => <MainPage eventEmitter={eventEmitter} {...props} />}
+    />
+  </Switch>
+);
+
+```
+
+
+
+### match
+
+match เป็นการแสดงผล component เฉพาะส่วน ซึ่งสามารถทำงานภายใต้หน้าจอหลักได้ 
+
+```javascript
+// mainPage.jsx
+
+import React from 'react';
+import { Layout } from 'antd';
+
+import ContentRoutes from '../../routes/contentRoutes';
+
+export default class MainPage extends React.Component {
+
+  render() {
+    return (
+      <Layout style={{ minHeight: '100vh' }}>
+        <Header/>
+        <Sider/>
+        <Layout>
+          <Breadcrumb />
+
+          <div className="content" style={{ margin: 10 }}>
+            <ContentRoutes
+              match={this.props.match}
+            />
+          </div>
+
+          <Footer />
+        </Layout>
+      </Layout>
+    );
+  }
+}
+
+```
+
+import ไฟล์ contentRoutes.js เพื่อใช้ในการกำหนดเส้นทาง App.js
+
+```javascript
+//contentRoutes.js
+
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+
+import Content1 from '../pages/content/Content1';
+import Content2 from '../pages/content/Content2';
+import Content3 from '../pages/content/Content3';
+import Home from '../pages/content/Home';
+
+export default ({ match }) => {
+  return (
+    <Switch>
+      <Route path={`${match.url}/home`} component={Home} />
+      <Route path={`${match.url}/content1`} component={Content1} />
+      <Route path={`${match.url}/content2`} component={Content2} />
+      <Route path={`${match.url}/content3`} component={Content3} />
+    </Switch>
+  );	
+};
+
+```
+
+
 
 ## 5. Calling API
 
 call 
 
-## 6. Default Component Property & Behavior
 
-default
\ No newline at end of file
+
+
+