refactor(Nav): remove react-router and use new properties (#2)

* refactor(Nav): remove react-router and use new properties BREAKING CHANGE: remove IndexNavItem and id, selectedId must be added * refactor(all components): use class arrow function to replace :: syntax * feat(Nav): add SubNav and NavItemGroup sub component * refactor(Nav/site): optimize Nav style and add NavItemGroup in site * fix(Nav/test): add SubNav in nav test * style(site): small tweaks in typo * fix(site): example class function syntax error
webapp-suite · Aug 17, 2018 · 5c5d1b7 · 5c5d1b7
1 parent 1506538
commit 5c5d1b7
Show file tree

Hide file tree

Showing 37 changed files with 480 additions and 332 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -63,7 +63,6 @@
     "invariant": "^2.2.2",
     "justified-layout": "^2.1.1",
     "react-avatar-editor": "^10.3.0",
-    "react-router": "^2.8.1",
     "react-update": "^0.4.4"
   },
   "devDependencies": {
@@ -111,6 +110,7 @@
     "react": "^15.6.2",
     "react-dom": "^15.6.2",
     "react-hot-loader": "^4.0.0-rc.0",
+    "react-router": "^2.8.1",
     "rimraf": "^2.6.2",
     "standard": "^11.0.0",
     "standard-version": "^4.3.0",

diff --git a/site/index.js b/site/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from 'react-dom'
-import { Router, browserHistory, Route, IndexRoute, IndexRedirect } from 'react-router'
+import { Router, browserHistory, Route, IndexRoute, IndexRedirect, withRouter } from 'react-router'
 // import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom'
 import process from 'nprogress'
 import App from './pages/App'
@@ -41,7 +41,7 @@ render((
       </Route>
       <Route path="components" getComponent={(nextState, cb) => {
         require.ensure([], require => {
-          cb(null, require('./pages/Components').default)
+          cb(null, withRouter(require('./pages/Components').default))
         })
       }}>
         <IndexRedirect to="/components/Layout" />

diff --git a/site/pages/Components/components.json b/site/pages/Components/components.json
@@ -7,88 +7,92 @@
   "name": "Icon",
   "cn": "图标"
 }, {
-  "category": "imperative",
-  "cn": "命令式组件",
-  "icon": "retweet",
+  "cn": "组件",
+  "name": "Components",
   "components": [{
-    "name": "message",
-    "cn": "全局提示"
-  }, {
-    "name": "xhr",
-    "cn": "AJAX请求"
-  }]
-}, {
-  "category": "base",
-  "cn": "基础组件",
-  "icon": "th-large",
-  "components": [{
-    "name": "Button",
-    "cn": "按钮"
-  }, {
-    "name": "Input",
-    "cn": "输入框"
-  }, {
-    "name": "Select",
-    "cn": "下拉选择"
+    "group": "Functional",
+    "cn": "函数式组件",
+    "icon": "retweet",
+    "components": [{
+      "name": "message",
+      "cn": "全局提示"
+    }, {
+      "name": "xhr",
+      "cn": "AJAX请求"
+    }]
   }, {
-    "name": "Dropdown",
-    "cn": "下拉菜单"
-  }, {
-    "name": "Form",
-    "cn": "表单"
-  }, {
-    "name": "Modal",
-    "cn": "模态框"
-  }, {
-    "name": "Tooltip",
-    "cn": "提示框"
-  }, {
-    "name": "Spinner",
-    "cn": "加载中"
-  }, {
-    "name": "Nav",
-    "cn": "导航"
-  }]
-}, {
-  "category": "advance",
-  "cn": "辅助组件",
-  "icon": "retweet",
-  "components": [{
-    "name": "ClearableInput",
-    "cn": "清空输入框"
-  }, {
-    "name": "TextOverflow",
-    "cn": "文字溢出"
-  }, {
-    "name": "BackToTop",
-    "cn": "回到顶部"
-  }]
-}, {
-  "category": "tools",
-  "cn": "工具组件",
-  "icon": "wrench",
-  "components": [{
-    "name": "Fetch",
-    "cn": "AJAX加载管理"
-  }, {
-    "name": "Upload",
-    "cn": "上传"
-  }]
-}, {
-  "category": "business",
-  "cn": "业务组件",
-  "icon": "edit",
-  "components": [{
-    "name": "Gallery",
-    "cn": "图片墙"
+    "group": "Basic",
+    "cn": "基础组件",
+    "icon": "th-large",
+    "components": [{
+      "name": "Button",
+      "cn": "按钮"
+    }, {
+      "name": "Input",
+      "cn": "输入框"
+    }, {
+      "name": "Select",
+      "cn": "下拉选择"
+    }, {
+      "name": "Dropdown",
+      "cn": "下拉菜单"
+    }, {
+      "name": "Form",
+      "cn": "表单"
+    }, {
+      "name": "Modal",
+      "cn": "模态框"
+    }, {
+      "name": "Tooltip",
+      "cn": "提示框"
+    }, {
+      "name": "Spinner",
+      "cn": "加载中"
+    }, {
+      "name": "Nav",
+      "cn": "导航"
+    }]
   }, {
-    "name": "Avatar",
-    "cn": "头像"
+    "group": "Auxiliary",
+    "cn": "辅助组件",
+    "icon": "retweet",
+    "components": [{
+      "name": "ClearableInput",
+      "cn": "清空输入框"
+    }, {
+      "name": "TextOverflow",
+      "cn": "文字溢出"
+    }, {
+      "name": "BackToTop",
+      "cn": "回到顶部"
+    }]
   }, {
-    "name": "AvatarUpload",
-    "cn": "上传头像"
+    "group": "Tools",
+    "cn": "工具组件",
+    "icon": "wrench",
+    "components": [{
+      "name": "Fetch",
+      "cn": "AJAX加载管理"
+    }, {
+      "name": "Upload",
+      "cn": "上传"
+    }]
   }, {
-    "name": "AvatarClip",
-    "cn": "裁剪头像"
+    "group": "Customized",
+    "cn": "定制组件",
+    "icon": "edit",
+    "components": [{
+      "name": "Gallery",
+      "cn": "图片墙"
+    }, {
+      "name": "Avatar",
+      "cn": "头像"
+    }, {
+      "name": "AvatarUpload",
+      "cn": "上传头像"
+    }, {
+      "name": "AvatarClip",
+      "cn": "裁剪头像"
+    }]
   }]
 }]
diff --git a/site/pages/Components/docs/AvatarClip.doc b/site/pages/Components/docs/AvatarClip.doc
@@ -16,7 +16,7 @@ class ProfileAvatar extends Component {
       imgSrc: 'https://avatars0.githubusercontent.com/u/12554487'
     }
   }
-  onUpload (files) {
+  onUpload = files => {
     let reader = new FileReader()
     let file = files[0]
     if (!file) return
@@ -31,7 +31,7 @@ class ProfileAvatar extends Component {
     reader.readAsDataURL(file)
   }
   // 当对话框点击X按钮时候回调
-  onClose () {
+  onClose = () => {
     this.setState({
       cropperOpen: false
     })
@@ -47,7 +47,7 @@ class ProfileAvatar extends Component {
     }
     return new Blob([u8arr], {type: mime})
   }
-  handleSave (dataURL) {
+  handleSave = dataURL => {
     const blob = this.dataURLtoBlob(dataURL)
 
     xhr.header = {
@@ -73,14 +73,14 @@ class ProfileAvatar extends Component {
   render () {
     return (
       <div>
-        <Upload onUpload={::this.onUpload}>
+        <Upload onUpload={this.onUpload}>
           <AvatarUpload size="lg" text="更换头像" src="https://avatars0.githubusercontent.com/u/12554487"/>
         </Upload>
         {this.state.cropperOpen &&
           <AvatarClip
             open={this.state.cropperOpen}
-            onSave={::this.handleSave}
-            onClose={::this.onClose}
+            onSave={this.handleSave}
+            onClose={this.onClose}
             cropButtonName="保存"
             image={this.state.img}
             width={160}

diff --git a/site/pages/Components/docs/Fetch.doc b/site/pages/Components/docs/Fetch.doc
@@ -14,15 +14,15 @@ class FetchDemo extends Component {
     }
   }
 
-  handleChange(value) {
+  handleChange = value => {
     this.setState({url: '/data/loading.json?type=' + value})
   }
 
   render() {
     const { url, data } = this.state
     return (
       <div>
-        <Select defaultValue="0" onChange={::this.handleChange} width={200}>
+        <Select defaultValue="0" onChange={this.handleChange} width={200}>
           <Option value="0">昨天</Option>
           <Option value="1">最近7天</Option>
           <Option value="2">最近30天</Option>

diff --git a/site/pages/Components/docs/Form.doc b/site/pages/Components/docs/Form.doc
@@ -35,7 +35,7 @@ class FormBasic extends Component {
     this.update('set', 'formData.cities', selects)
   }
 
-  handleSuccess(res) {
+  handleSuccess = res => {
     console.log(res)
     message.success('操作成功！')
   }
@@ -48,7 +48,7 @@ class FormBasic extends Component {
         data={formData}
         onChange={formData => this.update('set', { formData })}
         rules={this.rules}
-        onSuccess={::this.handleSuccess}
+        onSuccess={this.handleSuccess}
         width={460}
       >
         <FormItem label="用户群" required name="name" help="5个字符以内">