Skip to content

Yossapol / wds-react

Go to a project
Commit 1614c5fb by rtclub11140
Options

create new branch

1 parent 14f2df84
Expand all
Inline Side-by-side
Showing with 1127 additions and 130 deletions
package-lock.json 0 → 100644
This diff could not be displayed because it is too large.
server/App.js
const cors = require('cors'); const cors = require('cors')
const express = require('express'); const express = require('express')
const app = express(); const app = express()
const bodyParser = require('body-parser'); const bodyParser = require('body-parser')
const Login = require('./routes/login'); const Login = require('./routes/login')
const Logout = require('./routes/logout'); const Logout = require('./routes/logout')
const Menu = require('./routes/menu'); const Menu = require('./routes/menu')
const SytemName = require('./routes/systemInfo'); const SytemName = require('./routes/systemInfo')
const ButtonIcon = require('./routes/button/buttonIcon')
app.use(bodyParser.json()); app.use(bodyParser.json())
app.use(cors()); app.use(cors())
app.use(express.json()); app.use(express.json())
app.use(express.urlencoded({ extended: true })); app.use(express.urlencoded({ extended: true }))
new Login(app); new Login(app)
new Logout(app); new Logout(app)
new SytemName(app); new SytemName(app)
new Menu(app); new Menu(app)
new ButtonIcon(app)
app.listen('8000', () => console.log('listen on port 8000')); app.listen('8000', () => console.log('listen on port 8000'))
server/json/button/buttonIcon.json 0 → 100644
[
{
"value": "ButtonIcon",
"type": "primary",
"disabled": false,
"icon": "search",
"id": "1"
},
{
"value": "ButtonIcon",
"type": "default",
"disabled": false,
"icon": "search",
"id": "2"
},
{
"value": "ButtonIcon",
"type": "dashed",
"disabled": false,
"icon": "search",
"id": "3"
},
{
"value": "ButtonIcon",
"type": "danger",
"disabled": false,
"icon": "search",
"id": "4"
},
{
"value": "",
"type": "primary",
"disabled": true,
"icon": "search",
"shape": "circle",
"id": "5"
}
]
server/json/menu.json
{ {
"success": true, "success": true,
"message": "Menu list", "message": "Menu list",
"dataList": [{ "dataList": [
{
"menuIcon": "https://dl.dropboxusercontent.com/s/5vrgps00p02gsah/ic_menu_home.png", "menuIcon": "https://dl.dropboxusercontent.com/s/5vrgps00p02gsah/ic_menu_home.png",
"pageTitle": "Home", "pageTitle": "Introduction",
"path": "/home", "path": "/introduction",
"default": true "default": true
}, },
{ {
"menuIcon": "https://dl.dropboxusercontent.com/s/72t3eeh7sjn7kcg/ic_menu_setting.png",
"pageTitle": "Button",
"path": "/button",
"default": false,
"submenuList": [
{
"pageTitle": "Button Type",
"path": "/buttonType",
"default": false
},
{
"pageTitle": "Button Icon",
"path": "/buttonIcon",
"default": false
}
]
},
{
"menuIcon": "https://dl.dropboxusercontent.com/s/5vrgps00p02gsah/ic_menu_home.png", "menuIcon": "https://dl.dropboxusercontent.com/s/5vrgps00p02gsah/ic_menu_home.png",
"pageTitle": "Content 1", "pageTitle": "Content 1",
"path": "/content1", "path": "/content1",
...@@ -30,7 +49,8 @@ ...@@ -30,7 +49,8 @@
"pageTitle": "Menu", "pageTitle": "Menu",
"path": "/menu", "path": "/menu",
"default": false, "default": false,
"submenuList": [{ "submenuList": [
{
"pageTitle": "Submenu 1", "pageTitle": "Submenu 1",
"path": "/submenu1", "path": "/submenu1",
"default": false "default": false
......
server/routes/button/buttonIcon.js 0 → 100644
const buttonIcon = require('../../json/button/buttonIcon.json')
class ButtonIcon {
constructor(app) {
app.post('/button/getButtonIcon', (req, res) => {
res.send(buttonIcon)
})
}
}
module.exports = ButtonIcon
src/App.js
import React, { Component } from 'react'; import React, { Component } from 'react'
import './resources/style/css/App.css'; import './resources/style/css/App.css'
import './resources/style/css/markdown.css'
import Routing from './routes/mainRoutes'; import Routing from './routes/mainRoutes'
class App extends Component { class App extends Component {
render() { render() {
// console.log('App: this.props ', this.props); // console.log('App: this.props ', this.props);
return <Routing eventEmitter={this.props.eventEmitter} />; return <Routing eventEmitter={this.props.eventEmitter} />
} }
} }
export default App; export default App
src/components/button/ButtonIcon.jsx 0 → 100644
import React, { Component, Fragment } from 'react'
import { Button } from 'antd'
import PropTypes from 'prop-types'
export default class ButtonIcon extends Component {
render() {
let { buttonTitle } = this.props
return (
<Fragment>
{buttonTitle &&
buttonTitle.map(title => {
return (
<Button
key={title.id}
type={title.type}
disabled={title.disabled}
href={title.href}
icon={title.icon}
shape={title.shape}
>
{title.value}
</Button>
)
})}
</Fragment>
)
}
}
ButtonIcon.propTypes = {
titleMenuItem: PropTypes.array.isRequired
}
// Default values for props
ButtonIcon.defaultProps = {
titleMenuItem: []
}
src/components/button/ButtonType.jsx 0 → 100644
import React, { Component, Fragment } from 'react'
import { Button } from 'antd';
import PropTypes from 'prop-types'
export default class ButtonType extends Component {
render() {
let { buttonTitle } = this.props
return (
<Fragment>
{buttonTitle &&
buttonTitle.map(title => {
return (
<Button type={title.type} disabled={title.disabled} href={title.href}>
{title.value}
</Button>
)
})}
</Fragment>
);
}
}
ButtonType.propTypes = {
titleMenuItem: PropTypes.array.isRequired,
}
// Default values for props
ButtonType.defaultProps = {
titleMenuItem: [],
}
src/components/grids/BasicGrid.js 0 → 100644
import React, { Component, Fragment } from 'react'
import { Row, Col } from 'antd'
class BasicGrid extends Component {
render() {
return (
<Fragment>
<div>
<Row>
<Col span={12}>col-12</Col>
<Col span={12}>col-12</Col>
</Row>
<Row>
<Col span={8}>col-8</Col>
<Col span={8}>col-8</Col>
<Col span={8}>col-8</Col>
</Row>
<Row>
<Col span={6}>col-6</Col>
<Col span={6}>col-6</Col>
<Col span={6}>col-6</Col>
<Col span={6}>col-6</Col>
</Row>
</div>
</Fragment>
)
}
}
export default BasicGrid
\ No newline at end of file
src/components/grids/ColumnOffset.js 0 → 100644
import React, { Component, Fragment } from 'react'
import { Row, Col } from 'antd'
class ColumnOffset extends Component {
render() {
return (
<Fragment>
<div>
<Row>
<Col span={8}>col-8</Col>
<Col span={8} offset={8}>col-8</Col>
</Row>
<Row>
<Col span={6} offset={6}>col-6 col-offset-6</Col>
<Col span={6} offset={6}>col-6 col-offset-6</Col>
</Row>
<Row>
<Col span={12} offset={6}>col-12 col-offset-6</Col>
</Row>
</div>
</Fragment>
)
}
}
export default ColumnOffset
\ No newline at end of file
src/components/grids/FlexAlignment.js 0 → 100644
import React, { Component, Fragment } from 'react'
import { Row, Col } from 'antd'
const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
class FlexAlignment extends Component {
render() {
return (
<Fragment>
<div>
<p>Align Top</p>
<Row type="flex" justify="center" align="top">
<Col span={4}><DemoBox value={100}>col-4</DemoBox></Col>
<Col span={4}><DemoBox value={50}>col-4</DemoBox></Col>
<Col span={4}><DemoBox value={120}>col-4</DemoBox></Col>
<Col span={4}><DemoBox value={80}>col-4</DemoBox></Col>
</Row>
<p>Align Center</p>
<Row type="flex" justify="space-around" align="middle">
<Col span={4}><DemoBox value={100}>col-4</DemoBox></Col>
<Col span={4}><DemoBox value={50}>col-4</DemoBox></Col>
<Col span={4}><DemoBox value={120}>col-4</DemoBox></Col>
<Col span={4}><DemoBox value={80}>col-4</DemoBox></Col>
</Row>
<p>Align Bottom</p>
<Row type="flex" justify="space-between" align="bottom">
<Col span={4}><DemoBox value={100}>col-4</DemoBox></Col>
<Col span={4}><DemoBox value={50}>col-4</DemoBox></Col>
<Col span={4}><DemoBox value={120}>col-4</DemoBox></Col>
<Col span={4}><DemoBox value={80}>col-4</DemoBox></Col>
</Row>
</div>
</Fragment>
)
}
}
export default FlexAlignment
\ No newline at end of file
src/components/grids/FlexLayout.js 0 → 100644
import React, { Component, Fragment } from 'react'
import { Row, Col } from 'antd'
class FlexLayout extends Component {
render() {
return (
<Fragment>
<div>
<p>sub-element align left</p>
<Row type="flex" justify="start">
<Col span={4}>col-4</Col>
<Col span={4}>col-4</Col>
<Col span={4}>col-4</Col>
<Col span={4}>col-4</Col>
</Row>
<p>sub-element align center</p>
<Row type="flex" justify="center">
<Col span={4}>col-4</Col>
<Col span={4}>col-4</Col>
<Col span={4}>col-4</Col>
<Col span={4}>col-4</Col>
</Row>
<p>sub-element align right</p>
<Row type="flex" justify="end">
<Col span={4}>col-4</Col>
<Col span={4}>col-4</Col>
<Col span={4}>col-4</Col>
<Col span={4}>col-4</Col>
</Row>
<p>sub-element monospaced arrangement</p>
<Row type="flex" justify="space-between">
<Col span={4}>col-4</Col>
<Col span={4}>col-4</Col>
<Col span={4}>col-4</Col>
<Col span={4}>col-4</Col>
</Row>
<p>sub-element align full</p>
<Row type="flex" justify="space-around">
<Col span={4}>col-4</Col>
<Col span={4}>col-4</Col>
<Col span={4}>col-4</Col>
<Col span={4}>col-4</Col>
</Row>
</div>
</Fragment>
)
}
}
export default FlexLayout
\ No newline at end of file
src/components/grids/FlexOrder.js 0 → 100644
import React, { Component, Fragment } from 'react'
import { Row, Col } from 'antd'
class FlexOrder extends Component {
render() {
return (
<Fragment>
<div>
<Row type="flex">
<Col span={6} order={4}>1 col-order-4</Col>
<Col span={6} order={3}>2 col-order-3</Col>
<Col span={6} order={2}>3 col-order-2</Col>
<Col span={6} order={1}>4 col-order-1</Col>
</Row>
</div>
</Fragment>
)
}
}
export default FlexOrder
\ No newline at end of file
src/components/grids/GridGutter.js 0 → 100644
import React, { Component, Fragment } from 'react'
import { Row, Col } from 'antd'
class GridGutter extends Component {
render() {
return (
<Fragment>
<div className="gutter-example">
<Row gutter={16}>
<Col className="gutter-row" span={6}>
<div className="gutter-box">col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div className="gutter-box">col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div className="gutter-box">col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div className="gutter-box">col-6</div>
</Col>
</Row>
</div>
</Fragment>
)
}
}
export default GridGutter
\ No newline at end of file
src/components/grids/GridSort.js 0 → 100644
import React, { Component, Fragment } from 'react'
import { Row, Col } from 'antd'
class GridSort extends Component {
render() {
return (
<Fragment>
<div>
<Row>
<Col span={18} push={6}>col-18 col-push-6</Col>
<Col span={6} pull={18}>col-6 col-pull-18</Col>
</Row>
</div>
</Fragment>
)
}
}
export default GridSort
\ No newline at end of file
src/components/grids/Playground.js 0 → 100644
import React, { Component, Fragment } from 'react'
import { Row, Col ,Slider } from 'antd'
class Playground extends Component {
gutters = {};
colCounts = {};
constructor() {
super();
this.state = {
gutterKey: 1,
colCountKey: 2,
};
[8, 16, 24, 32, 40, 48].forEach((value, i) => { this.gutters[i] = value; });
[2, 3, 4, 6, 8, 12].forEach((value, i) => { this.colCounts[i] = value; });
}
onGutterChange = (gutterKey) => {
this.setState({ gutterKey });
}
onColCountChange = (colCountKey) => {
this.setState({ colCountKey });
}
render() {
const { gutterKey, colCountKey } = this.state;
const cols = [];
const colCount = this.colCounts[colCountKey];
let colCode = '';
for (let i = 0; i < colCount; i++) {
cols.push(
<Col key={i.toString()} span={24 / colCount}>
<div>Column</div>
</Col>
);
colCode += ` <Col span={${24 / colCount}} />\n`;
}
return (
<Fragment>
<div>
<div style={{ marginBottom: 16 }}>
<span style={{ marginRight: 6 }}>Gutter (px): </span>
<div style={{ width: '50%' }}>
<Slider
min={0}
max={Object.keys(this.gutters).length - 1}
value={gutterKey}
onChange={this.onGutterChange}
marks={this.gutters}
step={null}
/>
</div>
<span style={{ marginRight: 6 }}>Column Count:</span>
<div style={{ width: '50%' }}>
<Slider
min={0}
max={Object.keys(this.colCounts).length - 1}
value={colCountKey}
onChange={this.onColCountChange}
marks={this.colCounts}
step={null}
/>
</div>
</div>
<Row gutter={this.gutters[gutterKey]}>{cols}</Row>
<pre>{`<Row gutter={${this.gutters[gutterKey]}}>\n${colCode}</Row>`}</pre>
</div>
</Fragment>
);
}
}
export default Playground
\ No newline at end of file
src/components/grids/Responsive.js 0 → 100644
import React, { Component, Fragment } from 'react'
import { Row, Col } from 'antd'
class Responsive extends Component {
render() {
return (
<Fragment>
<Row>
<Col xs={2} sm={4} md={6} lg={8} xl={10}>Col</Col>
<Col xs={20} sm={16} md={12} lg={8} xl={4}>Col</Col>
<Col xs={2} sm={4} md={6} lg={8} xl={10}>Col</Col>
</Row>
</Fragment>
)
}
}
export default Responsive
\ No newline at end of file
src/components/menus/CollapsedInlineMenu.js 0 → 100644
import React, { Component, Fragment } from 'react'
import { Menu, Icon, Button } from 'antd'
const SubMenu = Menu.SubMenu
class CollapsedInlineMenu extends Component {
state = {
collapsed: false,
}
toggleCollapsed = () => {
this.setState({
collapsed: !this.state.collapsed,
})
}
render() {
return (
<Fragment>
<div style={{ width: 256 }}>
<Button
type="primary"
onClick={this.toggleCollapsed}
style={{ marginBottom: 0 }}>
<Icon type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'} />
</Button>
<Menu
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
theme="dark"
inlineCollapsed={this.state.collapsed}>
<Menu.Item key="1">
<Icon type="pie-chart" />
<span>Option 1</span>
</Menu.Item>
<Menu.Item key="2">
<Icon type="desktop" />
<span>Option 2</span>
</Menu.Item>
<Menu.Item key="3">
<Icon type="inbox" />
<span>Option 3</span>
</Menu.Item>
<SubMenu
key="sub1"
title={
<span>
<Icon type="mail" />
<span>Navigation One</span>
</span>
}>
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
<SubMenu
key="sub2"
title={
<span>
<Icon type="appstore" />
<span>Navigation Two</span>
</span>
}>
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</SubMenu>
</Menu>
</div>
</Fragment>
)
}
}
export default CollapsedInlineMenu
src/components/menus/InlineMenu.js 0 → 100644
import React, { Component, Fragment } from 'react'
import { Menu, Icon } from 'antd'
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
class InlineMenu extends Component {
handleClick = e => {
console.log('click : ', e)
}
render() {
return (
<Fragment>
<Menu
onClick={this.handleClick}
style={{ width: 256 }}
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline">
<SubMenu
key="sub1"
title={
<span>
<Icon type="mail" />
<span>Navigation One</span>
</span>
}>
<MenuItemGroup key="g1" title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
</MenuItemGroup>
</SubMenu>
</Menu>
</Fragment>
)
}
}
export default InlineMenu
src/components/menus/MenuThemes.js 0 → 100644
import React, { Component, Fragment } from 'react'
import { Menu, Icon, Switch } from 'antd'
const SubMenu = Menu.SubMenu
class MenuThemes extends Component {
state = {
theme: 'dark',
current: '1',
}
changeTheme = value => {
this.setState({
theme: value ? 'dark' : 'light',
})
}
handleClick = e => {
console.log('click ', e)
this.setState({
current: e.key,
})
}
render() {
return (
<Fragment>
<Switch
checked={this.state.theme === 'dark'}
onChange={this.changeTheme}
checkedChildren="Dark"
unCheckedChildren="Light"
/>
<br />
<br />
<Menu
theme={this.state.theme}
onClick={this.handleClick}
style={{ width: 256 }}
defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]}
mode="inline">
<SubMenu
key="sub1"
title={
<span>
<Icon type="mail" />
<span>Navigation One</span>
</span>
}>
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</SubMenu>
<SubMenu
key="sub2"
title={
<span>
<Icon type="appstore" />
<span>Navigtion Two</span>
</span>
}>
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu
key="sub4"
title={
<span>
<Icon type="setting" />
<span>Navigation Three</span>
</span>
}>
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
</Fragment>
)
}
}
export default MenuThemes
src/components/menus/TopMenu.js 0 → 100644
import React, { Component, Fragment } from 'react'
import { Menu, Icon } from 'antd'
import PropTypes from 'prop-types'
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
class TopMenu extends Component {
state = {
current: 'mail',
}
handleClick = e => {
console.log('click : ', e)
this.setState({
current: e.key,
})
}
render() {
let { menuTitle } = this.props
return (
<Fragment>
<Menu
onClick={this.handleClick}
selectedKeys={[this.state.current]}
mode="horizontal">
{menuTitle &&
menuTitle.map(title => {
return (
<Menu.Item key={title.key} disabled={title.disabled}>
<Icon type={title.iconType} />
{title.name}
</Menu.Item>
)
})}
<SubMenu
title={
<span className="submenu-title-wrapper">
<Icon type="setting" />
Navigation Three - Submenu
</span>
}>
<MenuItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="Item 2">
<Menu.Item key="setting:3">Option 3</Menu.Item>
<Menu.Item key="setting:4">Option 4</Menu.Item>
</MenuItemGroup>
</SubMenu>
<Menu.Item key="alipay">
<a
href="https://ant.design"
target="_blank"
rel="noopener noreferrer">
Navigation Four - Link
</a>
</Menu.Item>
</Menu>
</Fragment>
)
}
}
// You can declare that a prop is a specific JS type.
TopMenu.propTypes = {
titleMenuItem: PropTypes.array.isRequired,
}
// Default values for props
TopMenu.defaultProps = {
titleMenuItem: [],
}
export default TopMenu
src/components/menus/VerticalMenu.js 0 → 100644
import React, { Component, Fragment } from 'react'
import { Menu, Icon } from 'antd'
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
class VerticalMenu extends Component {
handleClick = e => {
console.log('click', e)
}
render() {
return (
<Fragment>
<Menu onClick={this.handleClick} style={{ width: 256 }} mode="vertical">
<SubMenu
key="sub1"
title={
<span>
<Icon type="mail" />
<span>Navigation One</span>
</span>
}>
<MenuItemGroup title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="Iteom 2">
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</MenuItemGroup>
</SubMenu>
<SubMenu
key="sub2"
title={
<span>
<Icon type="appstore" />
<span>Navigation Two</span>
</span>
}>
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu
key="sub4"
title={
<span>
<Icon type="setting" />
<span>Navigation Three</span>
</span>
}>
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
</Fragment>
)
}
}
export default VerticalMenu
src/pages/content/button/ButtonIcon.jsx 0 → 100644
import React, { Component, Fragment } from 'react'
import ButtonIcon from '../../../components/Button/ButtonIcon'
import ButtonIconMd from './resources/md/ButtonIcon.md'
import ReactMarkdown from 'react-markdown'
import Axios from 'axios'
import * as UrlConstants from '../../../resources/js/constants/urlConstants'
export default class Button extends Component {
state = {
buttonTitle: [],
terms: null
}
componentDidMount() {
this._requestButtonIcon()
}
_requestButtonIcon = async () => {
await Axios.post(UrlConstants.URL_GET_BUTTON_ICON).then(response => {
this.setState({ buttonTitle: response.data })
})
await Axios({
method: 'get',
url: ButtonIconMd,
responseType: 'text'
}).then(res => {
console.log(res)
this.setState({ terms: res.data })
})
}
render() {
return (
<Fragment>
<ButtonIcon buttonTitle={this.state.buttonTitle} />
<ReactMarkdown source={this.state.terms} className={'markdown-body'} />
</Fragment>
)
}
}
src/pages/content/button/resources/md/ButtonIcon.md 0 → 100644
## React
- Official : `https://github.com/facebook/create-react-app`
- version : `16.8.1`
- Installation :
```
npx create-react-app my-app
cd my-app
npm start
```
![](https://cdn.rawgit.com/facebook/create-react-app/27b42ac/screencast.svg)
## React Redux
React Redux requires **React 16.4 or later**.
- Official : `https://github.com/reduxjs/react-redux`
- version : `6.0.1`
- Installation :
```
npm install --save react-redux
```
## React Router
- Official : `https://reacttraining.com/react-router/web/guides/quick-start`
- version : `6.0.1`
- Installation :
```
npm install --save react-router-dom
```
## Ant Design of React
- official : `https://github.com/ant-design/ant-design/`
- version : `3.13.6`
- Installation :
```
npm install antd
```
```
yarn add antd
```
##
src/pages/content/introduction/Introduction.jsx 0 → 100644
import React, { Component, Fragment } from 'react'
import IntroductionMd from './resources/md/IntroductionMd.md'
import ReactMarkdown from 'react-markdown'
export default class Introduction extends Component {
state = {
terms: null
}
componentDidMount() {
fetch(IntroductionMd)
.then(response => response.text())
.then(text => {
this.setState({ terms: text })
})
}
render() {
return (
<Fragment>
<ReactMarkdown source={this.state.terms} className={'markdown-body'} />
</Fragment>
)
}
}
src/pages/content/introduction/resources/md/IntroductionMd.md 0 → 100644
## React
- Official : `https://github.com/facebook/create-react-app`
- version : `16.8.1`
- Installation :
```
npx create-react-app my-app
cd my-app
npm start
```
![](https://cdn.rawgit.com/facebook/create-react-app/27b42ac/screencast.svg)
## React Redux
React Redux requires **React 16.4 or later**.
- Official : `https://github.com/reduxjs/react-redux`
- version : `6.0.1`
- Installation :
```
npm install --save react-redux
```
## React Router
- Official : `https://reacttraining.com/react-router/web/guides/quick-start`
- version : `6.0.1`
- Installation :
```
npm install --save react-router-dom
```
## Ant Design of React
- official : `https://github.com/ant-design/ant-design/`
- version : `3.13.6`
- Installation :
```
npm install antd
```
```
yarn add antd
```
##
src/pages/login/LoginPage.jsx
import React from 'react'; import React from 'react'
import Login from '../../templates/form/login/Login'; import Login from '../../templates/form/login/Login'
import Axios from 'axios'; import Axios from 'axios'
import history from '../../history'; import history from '../../history'
import Logo from './resources/images/logo_login.png'; import Logo from './resources/images/logo_login.png'
import * as UrlConstants from '../../resources/js/constants/urlConstants'; import * as UrlConstants from '../../resources/js/constants/urlConstants'
import './resources/style/css/login.css'; import './resources/style/css/login.css'
export default class LoginPage extends React.Component { export default class LoginPage extends React.Component {
_login = async params => { _login = async params => {
const results = await Axios.post(UrlConstants.URL_LOGIN, params); const results = await Axios.post(UrlConstants.URL_LOGIN, params)
if (results.data.success) { if (results.data.success) {
history.push('/process'); history.push('/process/introduction')
}
} }
};
render() { render() {
return ( return (
...@@ -26,6 +26,6 @@ export default class LoginPage extends React.Component { ...@@ -26,6 +26,6 @@ export default class LoginPage extends React.Component {
<br /> <br />
<Login getFormSubmitFn={this._login} /> <Login getFormSubmitFn={this._login} />
</div> </div>
); )
} }
} }
src/pages/main/MainPage.jsx
import React from 'react'; import React from 'react'
import Axios from 'axios'; import Axios from 'axios'
import { Layout } from 'antd'; import { Layout } from 'antd'
import uuid from 'uuid/v4'; import uuid from 'uuid/v4'
import ContentRoutes from '../../routes/contentRoutes'; import ContentRoutes from '../../routes/contentRoutes'
import SubmenuRoutes from '../../routes/submenuRoutes'; import SubmenuRoutes from '../../routes/submenuRoutes'
import Header from '../../templates/layout/header/WDSHeaderTemplate'; import Header from '../../templates/layout/header/WDSHeaderTemplate'
import Sider from '../../templates/layout/sider/WDSSiderTemplate'; import Sider from '../../templates/layout/sider/WDSSiderTemplate'
import Breadcrumb from '../../templates/layout/breadcrumb/WDSBreadcrumbTemplate'; import Breadcrumb from '../../templates/layout/breadcrumb/WDSBreadcrumbTemplate'
import Footer from '../../templates/layout/footer/WDSFooterTemplate'; import Footer from '../../templates/layout/footer/WDSFooterTemplate'
import * as UrlConstants from '../../resources/js/constants/urlConstants'; import * as UrlConstants from '../../resources/js/constants/urlConstants'
import history from '../../history'; import history from '../../history'
import './resources/style/css/mainPage.css'; import './resources/style/css/mainPage.css'
const headerAction = { const headerAction = {
setSystemInfo: uuid(), setSystemInfo: uuid(),
logout: uuid() logout: uuid()
}; }
const mainMenuAction = { const mainMenuAction = {
setMainMenu: uuid(), setMainMenu: uuid(),
setBreadcrumb: uuid() setBreadcrumb: uuid()
}; }
const breadcrumbAction = { const breadcrumbAction = {
setMainMenu: uuid(), setMainMenu: uuid(),
setBreadcrumb: uuid() setBreadcrumb: uuid()
}; }
const footerAction = { const footerAction = {
setFooter: uuid() setFooter: uuid()
}; }
export default class MainPage extends React.Component { export default class MainPage extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { collapsed: false }; this.state = { collapsed: false }
} }
componentDidMount() { componentDidMount() {
this._requestGetSystemInfoApi(); this._requestGetSystemInfoApi()
this._requestGetMenuApi(); this._requestGetMenuApi()
this._handleLogout(); this._handleLogout()
} }
componentWillUnmount() { componentWillUnmount() {
this.props.eventEmitter.removeAllListeners( this.props.eventEmitter.removeAllListeners(
headerAction.setSystemInfo, headerAction.setSystemInfo,
headerAction.logout headerAction.logout
); )
} }
_requestGetSystemInfoApi = async () => { _requestGetSystemInfoApi = async () => {
const params = {}; const params = {}
const results = await Axios.post(UrlConstants.URL_GET_SYSTEM_INFO, params); const results = await Axios.post(UrlConstants.URL_GET_SYSTEM_INFO, params)
if (results.data.success) { if (results.data.success) {
const { eventEmitter } = this.props; const { eventEmitter } = this.props
eventEmitter.emit(headerAction.setSystemInfo, results.data); eventEmitter.emit(headerAction.setSystemInfo, results.data)
}
} }
};
_requestGetMenuApi = async () => { _requestGetMenuApi = async () => {
const params = {}; const params = {}
const results = await Axios.post(UrlConstants.URL_GET_MENU, params); const results = await Axios.post(UrlConstants.URL_GET_MENU, params)
if (results.data.success) { if (results.data.success) {
const { eventEmitter } = this.props; const { eventEmitter } = this.props
eventEmitter.emit(mainMenuAction.setMainMenu, results.data.dataList); eventEmitter.emit(mainMenuAction.setMainMenu, results.data.dataList)
}
} }
};
_handleLogout = () => { _handleLogout = () => {
this.props.eventEmitter.on(headerAction.logout, async data => { this.props.eventEmitter.on(headerAction.logout, async data => {
const params = {}; const params = {}
const results = await Axios.post(UrlConstants.URL_LOGOUT, params); const results = await Axios.post(UrlConstants.URL_LOGOUT, params)
if (results.data.success) { if (results.data.success) {
history.push('/login'); history.push('/login')
}
})
} }
});
};
render() { render() {
return ( return (
...@@ -119,6 +119,6 @@ export default class MainPage extends React.Component { ...@@ -119,6 +119,6 @@ export default class MainPage extends React.Component {
/> />
</Layout> </Layout>
</Layout> </Layout>
); )
} }
} }
src/resources/js/constants/urlConstants.js
const URI = 'http://localhost:8000/'; // local server const URI = 'http://localhost:8000/' // local server
export const URL_LOGIN = URI + 'login'; export const URL_LOGIN = URI + 'login'
export const URL_LOGOUT = URI + 'logout'; export const URL_LOGOUT = URI + 'logout'
export const URL_GET_MENU = URI + 'getMenu'; export const URL_GET_MENU = URI + 'getMenu'
export const URL_GET_SYSTEM_INFO = URI + 'getSystemInfo'; export const URL_GET_SYSTEM_INFO = URI + 'getSystemInfo'
// button
export const URL_GET_BUTTON_ICON = URI + 'button/getButtonIcon'
src/resources/style/css/App.css
@import '~antd/dist/antd.css'; @import '~antd/dist/antd.css';
/* override background antd */
.ant-layout {
background: none !important;
}
src/routes/contentRoutes.js
import React from 'react'; import React from 'react'
import { Switch, Route } from 'react-router-dom'; import { Switch, Route } from 'react-router-dom'
import Content1 from '../pages/content/Content1'; import Content1 from '../pages/content/Content1'
import Content2 from '../pages/content/Content2'; import Content2 from '../pages/content/Content2'
import Content3 from '../pages/content/Content3'; import Content3 from '../pages/content/Content3'
import Home from '../pages/content/Home'; import Introduction from '../pages/content/introduction/Introduction'
export default ({ match }) => { export default ({ match }) => {
return ( return (
<Switch> <Switch>
<Route path={`${match.url}/home`} component={Home} />
<Route path={`${match.url}/content1`} component={Content1} /> <Route path={`${match.url}/content1`} component={Content1} />
<Route path={`${match.url}/content2`} component={Content2} /> <Route path={`${match.url}/content2`} component={Content2} />
<Route path={`${match.url}/content3`} component={Content3} /> <Route path={`${match.url}/content3`} component={Content3} />
<Route path={`${match.url}/introduction`} component={Introduction} />
</Switch> </Switch>
); )
}; }
src/routes/submenuRoutes.js
import React from 'react'; import React from 'react'
import { Switch, Route } from 'react-router-dom'; import { Switch, Route } from 'react-router-dom'
import Submenu1 from '../pages/content/Submenu1'; import ButtonIcon from '../pages/content/button/ButtonIcon'
import Submenu2 from '../pages/content/Submenu2'; import Submenu1 from '../pages/content/Submenu1'
import Submenu2 from '../pages/content/Submenu2'
export default ({ match }) => { export default ({ match }) => {
return ( return (
<Switch> <Switch>
<Route path={`${match.url}/button/buttonType`} component={ButtonIcon} />
<Route path={`${match.url}/menu/submenu1`} component={Submenu1} /> <Route path={`${match.url}/menu/submenu1`} component={Submenu1} />
<Route path={`${match.url}/menu/submenu2`} component={Submenu2} /> <Route path={`${match.url}/menu/submenu2`} component={Submenu2} />
</Switch> </Switch>
); )
}; }
src/templates/layout/breadcrumb/WDSBreadcrumbTemplate.jsx
import React from 'react'; import React from 'react'
import { Breadcrumb } from 'antd'; import { Breadcrumb } from 'antd'
import _ from 'lodash'; import _ from 'lodash'
import { style } from './resources/style/jsx/breadcrumbStyle'; import { style } from './resources/style/jsx/breadcrumbStyle'
export default class BreadcrumbComponent extends React.Component { export default class BreadcrumbComponent extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
menuList: {}, menuList: {},
breadcrumbList: ['Home'] breadcrumbList: ['Document Component']
}; }
} }
componentDidMount() { componentDidMount() {
this.props.eventEmitter.on(this.props.actionEmitter.setMainMenu, data => { this.props.eventEmitter.on(this.props.actionEmitter.setMainMenu, data => {
this.setState({ this.setState({
menuList: data menuList: data
}); })
}); })
this.props.eventEmitter.on(this.props.actionEmitter.setBreadcrumb, data => { this.props.eventEmitter.on(this.props.actionEmitter.setBreadcrumb, data => {
switch (data.length) { switch (data.length) {
case 1: case 1:
const pageTitle = this._getPageTitle(data[0]); const pageTitle = this._getPageTitle(data[0])
this.setState({ this.setState({
// breadcrumbList: [...this.state.breadcrumbList, pageTitle] // breadcrumbList: [...this.state.breadcrumbList, pageTitle]
breadcrumbList: [pageTitle] breadcrumbList: [pageTitle]
}); })
break; break
case 2: case 2:
const pageTitleList = []; const pageTitleList = []
pageTitleList.push(this._getPageTitle(data[1])); pageTitleList.push(this._getPageTitle(data[1]))
pageTitleList.push(this._getPageTitleSubmenu(data[0], data[1])); pageTitleList.push(this._getPageTitleSubmenu(data[0], data[1]))
this.setState({ this.setState({
breadcrumbList: pageTitleList breadcrumbList: pageTitleList
}); })
break; break
default: default:
break; break
} }
}); })
} }
/** /**
...@@ -52,12 +52,12 @@ export default class BreadcrumbComponent extends React.Component { ...@@ -52,12 +52,12 @@ export default class BreadcrumbComponent extends React.Component {
* @return {string} * @return {string}
*/ */
_getPageTitle = path => { _getPageTitle = path => {
let menu; let menu
menu = _.find(this.state.menuList, function(o) { menu = _.find(this.state.menuList, function(o) {
return o.path === path; return o.path === path
}); })
return !_.isEmpty(menu) ? menu.pageTitle : null; return !_.isEmpty(menu) ? menu.pageTitle : null
}; }
/** /**
* @param {string} path * @param {string} path
...@@ -65,18 +65,18 @@ export default class BreadcrumbComponent extends React.Component { ...@@ -65,18 +65,18 @@ export default class BreadcrumbComponent extends React.Component {
* @return {string} * @return {string}
*/ */
_getPageTitleSubmenu = (path, submenuPath) => { _getPageTitleSubmenu = (path, submenuPath) => {
let menu; let menu
_.find(this.state.menuList, o => { _.find(this.state.menuList, o => {
if (submenuPath === o.path) { if (submenuPath === o.path) {
menu = _.find(o.submenuList, function(o) { menu = _.find(o.submenuList, function(o) {
return o.path === path; return o.path === path
}); })
} }
}); })
return !_.isEmpty(menu) ? menu.pageTitle : null; return !_.isEmpty(menu) ? menu.pageTitle : null
}; }
render() { render() {
return ( return (
...@@ -94,7 +94,7 @@ export default class BreadcrumbComponent extends React.Component { ...@@ -94,7 +94,7 @@ export default class BreadcrumbComponent extends React.Component {
> >
{breadcrumb} {breadcrumb}
</Breadcrumb.Item> </Breadcrumb.Item>
); )
} else if (index > 0) { } else if (index > 0) {
// breadcrumb > 1 item but not has last breadcrumb // breadcrumb > 1 item but not has last breadcrumb
return ( return (
...@@ -102,15 +102,15 @@ export default class BreadcrumbComponent extends React.Component { ...@@ -102,15 +102,15 @@ export default class BreadcrumbComponent extends React.Component {
{/* href=""> */} {/* href=""> */}
{breadcrumb} {breadcrumb}
</Breadcrumb.Item> </Breadcrumb.Item>
); )
} else { } else {
// breadcrumb 1 item // breadcrumb 1 item
return ( return (
<Breadcrumb.Item key={breadcrumb}>{breadcrumb}</Breadcrumb.Item> <Breadcrumb.Item key={breadcrumb}>{breadcrumb}</Breadcrumb.Item>
); )
} }
})} })}
</Breadcrumb> </Breadcrumb>
); )
} }
} }
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!