add data for menuList

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

+[
+  {
+    "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

+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,13 +4,16 @@
 
 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>
+export default class ButtonIcon extends Component {
+  render() {
+    return (
+      <Fragment>
         <Button type="primary" shape="circle" icon="search" />
         <Button type="primary" icon="search">
           Search
@@ -24,11 +27,15 @@ ReactDOM.render(
         <Button type="dashed" icon="search">
           Search
         </Button>
-  </div>,
-  mountNode
-)
+      </Fragment>
+    )
+  }
+}
 ```
 
 | 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 @@
 
 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>
+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>
-  </div>,
-  mountNode
-)
+      </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` |
+| onClick  | set the handler to handle `click` event                                              | (event) => void | -         |

src/pages/content/menu/TopMenu.jsx

+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

+## 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>