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') ...@@ -8,6 +8,7 @@ const Menu = require('./routes/menu')
const SytemName = require('./routes/systemInfo') const SytemName = require('./routes/systemInfo')
const ButtonType = require('./routes/button/buttonType') const ButtonType = require('./routes/button/buttonType')
const ButtonIcon = require('./routes/button/buttonIcon') const ButtonIcon = require('./routes/button/buttonIcon')
const MenuNavigationList = require('./routes/menu/menuNavigationList')
app.use(bodyParser.json()) app.use(bodyParser.json())
app.use(cors()) app.use(cors())
...@@ -20,5 +21,6 @@ new SytemName(app) ...@@ -20,5 +21,6 @@ new SytemName(app)
new Menu(app) new Menu(app)
new ButtonType(app) new ButtonType(app)
new ButtonIcon(app) new ButtonIcon(app)
new MenuNavigationList(app)
app.listen('8000', () => console.log('listen on port 8000')) app.listen('8000', () => console.log('listen on port 8000'))
server/json/menu.json
...@@ -27,6 +27,39 @@ ...@@ -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", "menuIcon": "https://dl.dropboxusercontent.com/s/5vrgps00p02gsah/ic_menu_home.png",
"pageTitle": "Content 1", "pageTitle": "Content 1",
"path": "/content1", "path": "/content1",
...@@ -43,24 +76,6 @@ ...@@ -43,24 +76,6 @@
"pageTitle": "Content 3", "pageTitle": "Content 3",
"path": "/content3", "path": "/content3",
"default": false "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 ...@@ -7,30 +7,34 @@ const MenuItemGroup = Menu.ItemGroup
class TopMenu extends Component { class TopMenu extends Component {
state = { state = {
current: 'mail', current: 'mail'
} }
handleClick = e => { handleClick = e => {
console.log('click : ', e)
this.setState({ this.setState({
current: e.key, current: e.key
}) })
} }
render() { render() {
let { menuTitle } = this.props let { menuProperty } = this.props
console.log(menuProperty)
return ( return (
<Fragment> <Fragment>
<Menu <Menu
onClick={this.handleClick} onClick={this.handleClick}
selectedKeys={[this.state.current]} selectedKeys={[this.state.current]}
mode="horizontal"> mode="horizontal"
{menuTitle && >
menuTitle.map(title => { {menuProperty &&
menuProperty.map(menuPropertys => {
return ( return (
<Menu.Item key={title.key} disabled={title.disabled}> <Menu.Item
<Icon type={title.iconType} /> key={menuPropertys.key}
{title.name} disabled={menuPropertys.disabled}
>
<Icon type={menuPropertys.iconType} />
{menuPropertys.name}
</Menu.Item> </Menu.Item>
) )
})} })}
...@@ -40,7 +44,8 @@ class TopMenu extends Component { ...@@ -40,7 +44,8 @@ class TopMenu extends Component {
<Icon type="setting" /> <Icon type="setting" />
Navigation Three - Submenu Navigation Three - Submenu
</span> </span>
}> }
>
<MenuItemGroup title="Item 1"> <MenuItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item> <Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item> <Menu.Item key="setting:2">Option 2</Menu.Item>
...@@ -54,7 +59,8 @@ class TopMenu extends Component { ...@@ -54,7 +59,8 @@ class TopMenu extends Component {
<a <a
href="https://ant.design" href="https://ant.design"
target="_blank" target="_blank"
rel="noopener noreferrer"> rel="noopener noreferrer"
>
Navigation Four - Link Navigation Four - Link
</a> </a>
</Menu.Item> </Menu.Item>
...@@ -66,11 +72,11 @@ class TopMenu extends Component { ...@@ -66,11 +72,11 @@ class TopMenu extends Component {
// You can declare that a prop is a specific JS type. // You can declare that a prop is a specific JS type.
TopMenu.propTypes = { TopMenu.propTypes = {
titleMenuItem: PropTypes.array.isRequired, titleMenuItem: PropTypes.array.isRequired
} }
// Default values for props // Default values for props
TopMenu.defaultProps = { TopMenu.defaultProps = {
titleMenuItem: [], titleMenuItem: []
} }
export default TopMenu export default TopMenu
src/pages/content/button/ButtonIcon.jsx
...@@ -32,6 +32,7 @@ export default class ButtonIcon extends Component { ...@@ -32,6 +32,7 @@ export default class ButtonIcon extends Component {
return ( return (
<Fragment> <Fragment>
<ButtonIconCmp buttonProperty={this.state.buttonProperty} /> <ButtonIconCmp buttonProperty={this.state.buttonProperty} />
<br />
<ReactMarkdown source={this.state.terms} className={'markdown-body'} /> <ReactMarkdown source={this.state.terms} className={'markdown-body'} />
</Fragment> </Fragment>
) )
......
src/pages/content/button/ButtonType.jsx
...@@ -32,6 +32,7 @@ export default class ButtonType extends Component { ...@@ -32,6 +32,7 @@ export default class ButtonType extends Component {
return ( return (
<Fragment> <Fragment>
<ButtonTypeCmp buttonProperty={this.state.buttonProperty} /> <ButtonTypeCmp buttonProperty={this.state.buttonProperty} />
<br />
<ReactMarkdown source={this.state.terms} className={'markdown-body'} /> <ReactMarkdown source={this.state.terms} className={'markdown-body'} />
</Fragment> </Fragment>
) )
......
src/pages/content/button/resources/md/ButtonIcon.md
...@@ -4,31 +4,38 @@ ...@@ -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. 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 ```js
import React, { Component, Fragment } from 'react'
import { Button } from 'antd' import { Button } from 'antd'
ReactDOM.render( export default class ButtonIcon extends Component {
<div> render() {
<Button type="primary" shape="circle" icon="search" /> return (
<Button type="primary" icon="search"> <Fragment>
Search <Button type="primary" shape="circle" icon="search" />
</Button> <Button type="primary" icon="search">
<Button shape="circle" icon="search" /> Search
<Button icon="search">Search</Button> </Button>
<br /> <Button shape="circle" icon="search" />
<Button shape="circle" icon="search" /> <Button icon="search">Search</Button>
<Button icon="search">Search</Button> <br />
<Button type="dashed" shape="circle" icon="search" /> <Button shape="circle" icon="search" />
<Button type="dashed" icon="search"> <Button icon="search">Search</Button>
Search <Button type="dashed" shape="circle" icon="search" />
</Button> <Button type="dashed" icon="search">
</div>, Search
mountNode </Button>
) </Fragment>
)
}
}
``` ```
| Property | Description | Type | Deault | | Property | Description | Type | Deault |
| -------- | ------------------------------------------------------------------------------------ | ------ | ------- | | -------- | ------------------------------------------------------------------------------------ | --------------- | --------- |
| type | can be set to primary ghost dashed danger(added in 2.7) or omitted (meaning default) | string | default | | 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 @@ ...@@ -2,24 +2,29 @@
There are `primary` button, `default` button, `dashed` button and `danger` button in antd. 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 ```js
import React, { Component, Fragment } from 'react'
import { Button } from 'antd' import { Button } from 'antd'
ReactDOM.render( export default class ButtonType extends Component {
<div> render() {
<Button type="primary">Primary</Button> return (
<Button>Default</Button> <Fragment>
<Button type="dashed">Dashed</Button> <Button type="primary">Primary</Button>
<Button type="danger">Danger</Button> <Button>Default</Button>
</div>, <Button type="dashed">Dashed</Button>
mountNode <Button type="danger">Danger</Button>
) </Fragment>
)
}
}
``` ```
| Property | Description | Type | Deault | | Property | Description | Type | Deault |
| -------- | ------------------------------------------------------------------------------------ | ------- | --------- | | -------- | ------------------------------------------------------------------------------------ | --------------- | --------- |
| type | can be set to primary ghost dashed danger(added in 2.7) or omitted (meaning default) | string | `default` | | 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` | | disabled | disabled state of button | boolean | `false` |
| size | can be set to `small` `large` or omitted | string | `default` | | 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' ...@@ -9,3 +9,6 @@ export const URL_GET_SYSTEM_INFO = URI + 'getSystemInfo'
// button // button
export const URL_GET_BUTTON_ICON = URI + 'button/getButtonIcon' export const URL_GET_BUTTON_ICON = URI + 'button/getButtonIcon'
export const URL_GET_BUTTON_TYPE = URI + 'button/getButtonType' 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' ...@@ -3,6 +3,7 @@ import { Switch, Route } from 'react-router-dom'
import ButtonIcon from '../pages/content/button/ButtonIcon' import ButtonIcon from '../pages/content/button/ButtonIcon'
import ButtonType from '../pages/content/button/ButtonType' import ButtonType from '../pages/content/button/ButtonType'
import TopMenu from '../pages/content/menu/TopMenu'
import Submenu1 from '../pages/content/Submenu1' import Submenu1 from '../pages/content/Submenu1'
import Submenu2 from '../pages/content/Submenu2' import Submenu2 from '../pages/content/Submenu2'
...@@ -11,6 +12,7 @@ export default ({ match }) => { ...@@ -11,6 +12,7 @@ export default ({ match }) => {
<Switch> <Switch>
<Route path={`${match.url}/button/buttonType`} component={ButtonType} /> <Route path={`${match.url}/button/buttonType`} component={ButtonType} />
<Route path={`${match.url}/button/buttonIcon`} component={ButtonIcon} /> <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/submenu1`} component={Submenu1} />
<Route path={`${match.url}/menu/submenu2`} component={Submenu2} /> <Route path={`${match.url}/menu/submenu2`} component={Submenu2} />
</Switch> </Switch>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!