add component button

server/App.js

@@ -6,6 +6,7 @@ const Login = require('./routes/login')
 const Logout = require('./routes/logout')
 const Menu = require('./routes/menu')
 const SytemName = require('./routes/systemInfo')
+const ButtonType = require('./routes/button/buttonType')
 const ButtonIcon = require('./routes/button/buttonIcon')
 
 app.use(bodyParser.json())
@@ -17,6 +18,7 @@ new Login(app)
 new Logout(app)
 new SytemName(app)
 new Menu(app)
+new ButtonType(app)
 new ButtonIcon(app)
 
 app.listen('8000', () => console.log('listen on port 8000'))

server/json/button/buttonType.json

+[
+  { "value": "Button Type", "type": "primary", "disabled": false, "id": "1" },
+  { "value": "Button Type", "type": "default", "disabled": false, "id": "2" },
+  { "value": "Button Type", "type": "dashed", "disabled": false, "id": "3" },
+  { "value": "Button Type", "type": "danger", "disabled": false, "id": "4" },
+  { "value": "Button Type", "type": "default", "disabled": true, "id": "5" }
+]

server/json/menu.json

@@ -15,12 +15,12 @@
       "default": false,
       "submenuList": [
         {
-          "pageTitle": "Button Type",
+          "pageTitle": "Type",
           "path": "/buttonType",
           "default": false
         },
         {
-          "pageTitle": "Button Icon",
+          "pageTitle": "Icon",
           "path": "/buttonIcon",
           "default": false
         }

server/routes/button/buttonType.js

+const buttonType = require('../../json/button/buttonType.json')
+
+class ButtonType {
+  constructor(app) {
+    app.post('/button/getButtonType', (req, res) => {
+      res.send(buttonType)
+    })
+  }
+}
+
+module.exports = ButtonType

src/components/button/ButtonIcon.jsx → src/components/button/icon/ButtonIcon.jsx

@@ -4,11 +4,11 @@ import PropTypes from 'prop-types'
 
 export default class ButtonIcon extends Component {
   render() {
-    let { buttonTitle } = this.props
+    let { buttonProperty } = this.props
     return (
       <Fragment>
-        {buttonTitle &&
-          buttonTitle.map(title => {
+        {buttonProperty &&
+          buttonProperty.map(title => {
             return (
               <Button
                 key={title.id}
@@ -28,10 +28,10 @@ export default class ButtonIcon extends Component {
 }
 
 ButtonIcon.propTypes = {
-  titleMenuItem: PropTypes.array.isRequired
+  buttonProperty: PropTypes.array.isRequired
 }
 
 // Default values for props
 ButtonIcon.defaultProps = {
-  titleMenuItem: []
+  buttonProperty: []
 }

src/components/button/ButtonType.jsx → src/components/button/type/ButtonType.jsx

 import React, { Component, Fragment } from 'react'
-import { Button } from 'antd';
+import { Button } from 'antd'
 import PropTypes from 'prop-types'
 
 export default class ButtonType extends Component {
   render() {
-        let { buttonTitle } = this.props
+    let { buttonProperty } = this.props
     return (
       <Fragment>
-          {buttonTitle &&
-            buttonTitle.map(title => {
+        {buttonProperty &&
+          buttonProperty.map(title => {
             return (
-                <Button type={title.type} disabled={title.disabled} href={title.href}>
+              <Button
+                key={title.id}
+                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: [],
-  }
+  buttonProperty: PropTypes.array.isRequired
+}
 
+// Default values for props
+ButtonType.defaultProps = {
+  buttonProperty: []
+}

src/pages/content/button/ButtonIcon.jsx

 import React, { Component, Fragment } from 'react'
-import ButtonIcon from '../../../components/Button/ButtonIcon'
+import ButtonIconCmp from '../../../components/button/icon/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 {
+export default class ButtonIcon extends Component {
   state = {
-    buttonTitle: [],
+    buttonProperty: [],
     terms: null
   }
 
@@ -17,14 +17,13 @@ export default class Button extends Component {
 
   _requestButtonIcon = async () => {
     await Axios.post(UrlConstants.URL_GET_BUTTON_ICON).then(response => {
-      this.setState({ buttonTitle: response.data })
+      this.setState({ buttonProperty: response.data })
     })
     await Axios({
       method: 'get',
       url: ButtonIconMd,
       responseType: 'text'
     }).then(res => {
-      console.log(res)
       this.setState({ terms: res.data })
     })
   }
@@ -32,7 +31,7 @@ export default class Button extends Component {
   render() {
     return (
       <Fragment>
-        <ButtonIcon buttonTitle={this.state.buttonTitle} />
+        <ButtonIconCmp buttonProperty={this.state.buttonProperty} />
         <ReactMarkdown source={this.state.terms} className={'markdown-body'} />
       </Fragment>
     )

src/pages/content/button/ButtonType.jsx

+import React, { Component, Fragment } from 'react'
+import ButtonTypeCmp from '../../../components/button/type/ButtonType'
+import ButtonIconMd from './resources/md/ButtonType.md'
+import ReactMarkdown from 'react-markdown'
+import Axios from 'axios'
+import * as UrlConstants from '../../../resources/js/constants/urlConstants'
+
+export default class ButtonType extends Component {
+  state = {
+    buttonProperty: [],
+    terms: null
+  }
+
+  componentDidMount() {
+    this._requestButtonType()
+  }
+
+  _requestButtonType = async () => {
+    await Axios.post(UrlConstants.URL_GET_BUTTON_TYPE).then(response => {
+      this.setState({ buttonProperty: response.data })
+    })
+    await Axios({
+      method: 'get',
+      url: ButtonIconMd,
+      responseType: 'text'
+    }).then(res => {
+      this.setState({ terms: res.data })
+    })
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <ButtonTypeCmp buttonProperty={this.state.buttonProperty} />
+        <ReactMarkdown source={this.state.terms} className={'markdown-body'} />
+      </Fragment>
+    )
+  }
+}

src/pages/content/button/resources/md/ButtonIcon.md

-## 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
-```
-
-##
+## Icon
+
+`Button` components can contain an `Icon.` This is done by setting the `icon` property or placing an `Icon` component within the `Button`
+
+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`
+
+```js
+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
+)
+```
+
+| Property | Description                                                                          | Type   | Deault  |
+| -------- | ------------------------------------------------------------------------------------ | ------ | ------- |
+| type     | can be set to primary ghost dashed danger(added in 2.7) or omitted (meaning default) | string | default |

src/pages/content/button/resources/md/ButtonType.md

+## Type
+
+There are `primary` button, `default` button, `dashed` button and `danger` button in antd.
+
+- Edit Online : `https://codesandbox.io/s/y0425p669z`
+
+```js
+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
+)
+```
+
+| 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` |

src/pages/content/introduction/Introduction.jsx

 import React, { Component, Fragment } from 'react'
+import Axios from 'axios'
 import IntroductionMd from './resources/md/IntroductionMd.md'
 import ReactMarkdown from 'react-markdown'
 
@@ -8,12 +9,19 @@ export default class Introduction extends Component {
   }
 
   componentDidMount() {
-    fetch(IntroductionMd)
-      .then(response => response.text())
-      .then(text => {
-        this.setState({ terms: text })
+    this._requestIntroduction()
+  }
+
+  _requestIntroduction = async () => {
+    await Axios({
+      method: 'get',
+      url: IntroductionMd,
+      responseType: 'text'
+    }).then(res => {
+      this.setState({ terms: res.data })
     })
   }
+
   render() {
     return (
       <Fragment>

src/resources/js/constants/urlConstants.js

@@ -8,3 +8,4 @@ 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'

src/routes/submenuRoutes.js

@@ -2,13 +2,15 @@ import React from 'react'
 import { Switch, Route } from 'react-router-dom'
 
 import ButtonIcon from '../pages/content/button/ButtonIcon'
+import ButtonType from '../pages/content/button/ButtonType'
 import Submenu1 from '../pages/content/Submenu1'
 import Submenu2 from '../pages/content/Submenu2'
 
 export default ({ match }) => {
   return (
     <Switch>
-      <Route path={`${match.url}/button/buttonType`} component={ButtonIcon} />
+      <Route path={`${match.url}/button/buttonType`} component={ButtonType} />
+      <Route path={`${match.url}/button/buttonIcon`} component={ButtonIcon} />
       <Route path={`${match.url}/menu/submenu1`} component={Submenu1} />
       <Route path={`${match.url}/menu/submenu2`} component={Submenu2} />
     </Switch>