Skip to content

Yossapol / wds-react

Go to a project
Commit 73b827f0 by rtclub11140
Options

add data for menuList

1 parent 5eb3c290
Inline Side-by-side
Showing with 282 additions and 69 deletions
server/App.js
......@@ -8,6 +8,7 @@ const Menu = require('./routes/menu')
const SytemName = require('./routes/systemInfo')
const ButtonType = require('./routes/button/buttonType')
const ButtonIcon = require('./routes/button/buttonIcon')
const MenuNavigationList = require('./routes/menu/menuNavigationList')
app.use(bodyParser.json())
app.use(cors())
......@@ -20,5 +21,6 @@ new SytemName(app)
new Menu(app)
new ButtonType(app)
new ButtonIcon(app)
new MenuNavigationList(app)
app.listen('8000', () => console.log('listen on port 8000'))
server/json/menu.json
......@@ -27,6 +27,39 @@
]
},
{
"menuIcon": "https://dl.dropboxusercontent.com/s/72t3eeh7sjn7kcg/ic_menu_setting.png",
"pageTitle": "Menu",
"path": "/menu",
"default": false,
"submenuList": [
{
"pageTitle": "Top Navigation",
"path": "/topNavigation",
"default": false
},
{
"pageTitle": "Inline Menu",
"path": "/inlineMenu",
"default": false
},
{
"pageTitle": "Collapsed Inline Menu",
"path": "/collapsedInlineMenu",
"default": false
},
{
"pageTitle": "Vertical menu",
"path": "/verticalMenu",
"default": false
},
{
"pageTitle": "Menu Themes",
"path": "/menuThemes",
"default": false
}
]
},
{
"menuIcon": "https://dl.dropboxusercontent.com/s/5vrgps00p02gsah/ic_menu_home.png",
"pageTitle": "Content 1",
"path": "/content1",
......@@ -43,24 +76,6 @@
"pageTitle": "Content 3",
"path": "/content3",
"default": false
},
{
"menuIcon": "https://dl.dropboxusercontent.com/s/72t3eeh7sjn7kcg/ic_menu_setting.png",
"pageTitle": "Menu",
"path": "/menu",
"default": false,
"submenuList": [
{
"pageTitle": "Submenu 1",
"path": "/submenu1",
"default": false
},
{
"pageTitle": "Submenu 2",
"path": "/submenu2",
"default": false
}
]
}
]
}
server/json/menu/menuNavigationList.json 0 → 100644
[
{
"key": "mail",
"name": "Navigation One",
"iconType": "mail",
"disabled": false
},
{
"key": "smile",
"name": "Navigation Two",
"iconType": "appstore",
"disabled": true
},
{
"key": "heat-map",
"name": "Navigation Three - Submenu",
"iconType": "setting",
"disabled": false,
"subMenu": [
{
"title": "Item 1",
"id": "1",
"menuItem": [
{ "menuItemID": "setting:1", "item": "Option 1" },
{ "menuItemID": "setting:2", "item": "Option 2" }
]
},
{
"title": "Item 2",
"id": "2",
"menuItem": [
{ "menuItemID": "setting:3", "item": "Option 3" },
{ "menuItemID": "setting:4", "item": "Option 4" }
]
}
]
}
]
server/routes/menu/menuNavigationList.js 0 → 100644
const menuNavigationList = require('../../json/menu/menuNavigationList.json')
class MenuNavigationList {
constructor(app) {
app.post('/menu/getMenuNavigationList', (req, res) => {
res.send(menuNavigationList)
})
}
}
module.exports = MenuNavigationList
src/components/menus/TopMenu.js → src/components/menus/topMenu/TopMenu.jsx
......@@ -7,30 +7,34 @@ const MenuItemGroup = Menu.ItemGroup
class TopMenu extends Component {
state = {
current: 'mail',
current: 'mail'
}
handleClick = e => {
console.log('click : ', e)
this.setState({
current: e.key,
current: e.key
})
}
render() {
let { menuTitle } = this.props
let { menuProperty } = this.props
console.log(menuProperty)
return (
<Fragment>
<Menu
onClick={this.handleClick}
selectedKeys={[this.state.current]}
mode="horizontal">
{menuTitle &&
menuTitle.map(title => {
mode="horizontal"
>
{menuProperty &&
menuProperty.map(menuPropertys => {
return (
<Menu.Item key={title.key} disabled={title.disabled}>
<Icon type={title.iconType} />
{title.name}
<Menu.Item
key={menuPropertys.key}
disabled={menuPropertys.disabled}
>
<Icon type={menuPropertys.iconType} />
{menuPropertys.name}
</Menu.Item>
)
})}
......@@ -40,7 +44,8 @@ class TopMenu extends Component {
<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>
......@@ -54,7 +59,8 @@ class TopMenu extends Component {
<a
href="https://ant.design"
target="_blank"
rel="noopener noreferrer">
rel="noopener noreferrer"
>
Navigation Four - Link
</a>
</Menu.Item>
......@@ -66,11 +72,11 @@ class TopMenu extends Component {
// You can declare that a prop is a specific JS type.
TopMenu.propTypes = {
titleMenuItem: PropTypes.array.isRequired,
titleMenuItem: PropTypes.array.isRequired
}
// Default values for props
TopMenu.defaultProps = {
titleMenuItem: [],
titleMenuItem: []
}
export default TopMenu
src/pages/content/button/ButtonIcon.jsx
......@@ -32,6 +32,7 @@ export default class ButtonIcon extends Component {
return (
<Fragment>
<ButtonIconCmp buttonProperty={this.state.buttonProperty} />
<br />
<ReactMarkdown source={this.state.terms} className={'markdown-body'} />
</Fragment>
)
......
src/pages/content/button/ButtonType.jsx
......@@ -32,6 +32,7 @@ export default class ButtonType extends Component {
return (
<Fragment>
<ButtonTypeCmp buttonProperty={this.state.buttonProperty} />
<br />
<ReactMarkdown source={this.state.terms} className={'markdown-body'} />
</Fragment>
)
......
src/pages/content/button/resources/md/ButtonIcon.md
......@@ -4,31 +4,38 @@
If you want specific control over the positioning and placement of the `Icon`, then that should be done by placing the `Icon` component within the `Button` rather than using the `icon` property.
- Edit Online : `https://codesandbox.io/s/1o624ny0k7`
- Edit Online : [`https://codesandbox.io/s/1o624ny0k7`](https://codesandbox.io/s/1o624ny0k7)
```js
import React, { Component, Fragment } from 'react'
import { Button } from 'antd'
ReactDOM.render(
<div>
<Button type="primary" shape="circle" icon="search" />
<Button type="primary" icon="search">
Search
</Button>
<Button shape="circle" icon="search" />
<Button icon="search">Search</Button>
<br />
<Button shape="circle" icon="search" />
<Button icon="search">Search</Button>
<Button type="dashed" shape="circle" icon="search" />
<Button type="dashed" icon="search">
Search
</Button>
</div>,
mountNode
)
export default class ButtonIcon extends Component {
render() {
return (
<Fragment>
<Button type="primary" shape="circle" icon="search" />
<Button type="primary" icon="search">
Search
</Button>
<Button shape="circle" icon="search" />
<Button icon="search">Search</Button>
<br />
<Button shape="circle" icon="search" />
<Button icon="search">Search</Button>
<Button type="dashed" shape="circle" icon="search" />
<Button type="dashed" icon="search">
Search
</Button>
</Fragment>
)
}
}
```
| Property | Description | Type | Deault |
| -------- | ------------------------------------------------------------------------------------ | ------ | ------- |
| type | can be set to primary ghost dashed danger(added in 2.7) or omitted (meaning default) | string | default |
| Property | Description | Type | Deault |
| -------- | ------------------------------------------------------------------------------------ | --------------- | --------- |
| type | can be set to primary ghost dashed danger(added in 2.7) or omitted (meaning default) | string | `default` |
| disabled | disabled state of button | boolean | `false` |
| size | can be set to `small` `large` or omitted | string | `default` |
| onClick | set the handler to handle `click` event | (event) => void | - |
src/pages/content/button/resources/md/ButtonType.md
......@@ -2,24 +2,29 @@
There are `primary` button, `default` button, `dashed` button and `danger` button in antd.
- Edit Online : `https://codesandbox.io/s/y0425p669z`
- Edit Online : [`https://codesandbox.io/s/y0425p669z`](https://codesandbox.io/s/y0425p669z)
```js
import React, { Component, Fragment } from 'react'
import { Button } from 'antd'
ReactDOM.render(
<div>
<Button type="primary">Primary</Button>
<Button>Default</Button>
<Button type="dashed">Dashed</Button>
<Button type="danger">Danger</Button>
</div>,
mountNode
)
export default class ButtonType extends Component {
render() {
return (
<Fragment>
<Button type="primary">Primary</Button>
<Button>Default</Button>
<Button type="dashed">Dashed</Button>
<Button type="danger">Danger</Button>
</Fragment>
)
}
}
```
| Property | Description | Type | Deault |
| -------- | ------------------------------------------------------------------------------------ | ------- | --------- |
| type | can be set to primary ghost dashed danger(added in 2.7) or omitted (meaning default) | string | `default` |
| disabled | disabled state of button | boolean | `false` |
| size | can be set to `small` `large` or omitted | string | `default` |
| Property | Description | Type | Deault |
| -------- | ------------------------------------------------------------------------------------ | --------------- | --------- |
| type | can be set to primary ghost dashed danger(added in 2.7) or omitted (meaning default) | string | `default` |
| disabled | disabled state of button | boolean | `false` |
| size | can be set to `small` `large` or omitted | string | `default` |
| onClick | set the handler to handle `click` event | (event) => void | - |
src/pages/content/menu/TopMenu.jsx 0 → 100644
import React, { Component, Fragment } from 'react'
import TopMenuCmp from '../../../components/menus/topMenu/TopMenu.jsx'
import TopMenuMd from './resources/md/TopMenu.md'
import ReactMarkdown from 'react-markdown'
import Axios from 'axios'
import * as UrlConstants from '../../../resources/js/constants/urlConstants'
export default class TopMenu extends Component {
state = {
buttonProperty: [],
terms: null
}
componentDidMount() {
this._requestTopMenu()
}
_requestTopMenu = async () => {
await Axios.post(UrlConstants.URL_GET_MENU_NAVIGATION_LIST).then(
response => {
this.setState({ menuProperty: response.data })
}
)
await Axios({
method: 'get',
url: TopMenuMd,
responseType: 'text'
}).then(res => {
this.setState({ terms: res.data })
})
}
render() {
return (
<Fragment>
<TopMenuCmp menuProperty={this.state.menuProperty} />
<ReactMarkdown source={this.state.terms} className={'markdown-body'} />
</Fragment>
)
}
}
src/pages/content/menu/resources/md/TopMenu.md 0 → 100644
## Top Navigation
Horizontal top navigation menu.
- Edit Online : [`https://codesandbox.io/s/x39wvqoyzq`](https://codesandbox.io/s/x39wvqoyzq)
```js
import React, { Component, Fragment } from 'react'
import { Menu, Icon } from 'antd'
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
export default class TopMenu extends Component {
state = {
current: 'mail'
}
handleClick = e => {
console.log('click ', e)
this.setState({
current: e.key
})
}
render() {
return (
<Menu
onClick={this.handleClick}
selectedKeys={[this.state.current]}
mode="horizontal"
>
<Menu.Item key="mail">
<Icon type="mail" />
Navigation One
</Menu.Item>
<Menu.Item key="app" disabled>
<Icon type="appstore" />
Navigation Two
</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>
)
}
}
```
### Menu
| Property | Description | Type | Deault |
| ------------ | ---------------------------------------------------------------------------- | --------------------------------------------- | ---------- |
| mode | type of the menu; `vertical`, `horizontal`, and `inline` modes are supported | string: `vertical` \| `horizontal` \|`inline` | `vertical` |
| theme | color theme of the menu | string: `light` `dark` | `light` |
| onClick | callback executed when a menu item is clicked | function({ item, key, keyPath }) | - |
| selectedKeys | array with the keys of currently selected menu items | string[] | |
src/resources/js/constants/urlConstants.js
......@@ -9,3 +9,6 @@ export const URL_GET_SYSTEM_INFO = URI + 'getSystemInfo'
// button
export const URL_GET_BUTTON_ICON = URI + 'button/getButtonIcon'
export const URL_GET_BUTTON_TYPE = URI + 'button/getButtonType'
// menu
export const URL_GET_MENU_NAVIGATION_LIST = URI + 'menu/getMenuNavigationList'
src/routes/submenuRoutes.js
......@@ -3,6 +3,7 @@ import { Switch, Route } from 'react-router-dom'
import ButtonIcon from '../pages/content/button/ButtonIcon'
import ButtonType from '../pages/content/button/ButtonType'
import TopMenu from '../pages/content/menu/TopMenu'
import Submenu1 from '../pages/content/Submenu1'
import Submenu2 from '../pages/content/Submenu2'
......@@ -11,6 +12,7 @@ export default ({ match }) => {
<Switch>
<Route path={`${match.url}/button/buttonType`} component={ButtonType} />
<Route path={`${match.url}/button/buttonIcon`} component={ButtonIcon} />
<Route path={`${match.url}/menu/topNavigation`} component={TopMenu} />
<Route path={`${match.url}/menu/submenu1`} component={Submenu1} />
<Route path={`${match.url}/menu/submenu2`} component={Submenu2} />
</Switch>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!