feat(Nav): make the Nav can collapsed and opened (#197)

* move top and bottom of site nav to nav component * optimize icon buttons * make nav collapsed * make the subnav can clickable when collapsed * add menu shadow on the top and bottom * add docs-icon-dialog icon * improve icon component * adjust nav top icon position and improve other style * make the sub nav icon can be active if one child is active * add some comments and fix componentDidMount * optimize Nav style and add other props for nav bottom * rename some classes * support adjust nav width * improve docs of Nav * polish style of icon and title color * split Nav into several parts * add basic tests for Nav * update snapshots and add error test * add some tests and fix small issue of nav * polish nav tests and replace enzyme with testing-library * remove unused code
webapp-suite · Feb 20, 2020 · 98aa328 · 98aa328
1 parent d2a9486
commit 98aa328
Show file tree

Hide file tree

Showing 26 changed files with 1,926 additions and 432 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,8 +1,10 @@
 {
   "extends": [
     "standard",
-    "standard-react"
+    "standard-react",
+    "plugin:testing-library/react"
   ],
+  "plugins": ["testing-library"],
   "env": {
     "browser": true,
     "node": true,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -96,6 +96,8 @@
     "@babel/preset-env": "^7.1.6",
     "@babel/preset-react": "^7.0.0",
     "@reach/router": "^1.1.1",
+    "@testing-library/jest-dom": "^5.1.1",
+    "@testing-library/react": "^9.4.0",
     "autoprefixer": "^9.6.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
@@ -113,6 +115,7 @@
     "eslint": "^6.3.0",
     "eslint-config-standard-react": "^9.2.0",
     "eslint-plugin-react": "^7.11.1",
+    "eslint-plugin-testing-library": "^2.2.3",
     "express": "^4.16.3",
     "file-loader": "^5.0.2",
     "friendly-errors-webpack-plugin": "^1.7.0",

diff --git a/site/apps/Chrome/index.js b/site/apps/Chrome/index.js
@@ -1,21 +1,19 @@
-import { Link, navigate } from '@reach/router'
+import { navigate } from '@reach/router'
 import {
   Nav,
   NavItem,
   NavItemGroup,
   SubNav,
   Header,
-  Icon,
   Tab,
   TabList,
   Tabs,
   ToolBar,
-  Tooltip
+  notification
 } from 'earth-ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { Layout, LayoutContent, LayoutSidebar } from 'widgets/Layout'
-import Scrollbar from 'widgets/Scrollbar'
 import { nav as components } from '../config.js'
 import './index.less'
 
@@ -39,42 +37,6 @@ const getTabsByComponentName = (components, componentName) => {
 
 const routerWithDynamicSegments = ['components/', 'start/', 'design/']
 
-function renderNavBottom () {
-  return (
-    <div className="components__navbar-bottom">
-      <div className="components__navbar-bottom-image">
-        <img
-          className="components__navbar-bottom-image-icon"
-          src="/svg/avatarPlaceholder.svg"
-          alt="Avatar"
-        />
-      </div>
-      <div className="components__navbar-bottom-user">
-        <span className="components__navbar-bottom-user-name">KIMI GAO</span>
-        <span className="components__navbar-bottom-user-company">
-          Earthui Corp.
-        </span>
-      </div>
-      <div className="components__navbar-bottom-logout">
-        <Tooltip title="Unfinished feature">
-          <Icon
-            type="logout"
-            className="components__navbar-bottom-logout-icon"
-          />
-        </Tooltip>
-      </div>
-      <div className="components__navbar-bottom-settings">
-        <Tooltip title="Unfinished feature">
-          <Icon
-            type="settings"
-            className="components__navbar-bottom-settings-icon"
-          />
-        </Tooltip>
-      </div>
-    </div>
-  )
-}
-
 class Components extends React.Component {
   constructor (props) {
     super()
@@ -99,6 +61,14 @@ class Components extends React.Component {
     this.switchRoute(props.id)
   }
 
+  handleLogoutClick = () => {
+    this.switchRoute('/')
+  }
+
+  handleSettingClick = () => {
+    notification.success('Coming soon!')
+  }
+
   handleTabClick = doc => {
     this.switchRoute(doc)
   }
@@ -169,7 +139,7 @@ class Components extends React.Component {
       (item.tabs && item.tabs.length && item.tabs[0].doc) || item.name
     const id = path ? `${path}/${nameAfterSlash}` : nameAfterSlash
     return (
-      <NavItem id={id} key={item.name}>
+      <NavItem id={id} key={id}>
         <span>{item.name}</span>
         {/* <span className="chinese">{item.cn}</span> */}
       </NavItem>
@@ -191,51 +161,40 @@ class Components extends React.Component {
       <div className="components">
         <Layout open={open} onToggle={open => this.toggle(open)}>
           <LayoutSidebar>
-            <div className="components__navbar-top">
-              <Link to="/" className="components__navbar-top-logo">
-                <span>EARTHUi</span>
-              </Link>
-              <div className="components__navbar-top-close">
-                <Tooltip direction="down" title="Unfinished feature">
-                  <Icon type="close" />
-                </Tooltip>
-              </div>
-            </div>
-            <Scrollbar className="components__navbar-scrollbar">
-              <Nav
-                selectedId={childComponentPath}
-                onItemClick={this.handleItemClick}
-                width={320}
-                indent={20}
-                className="components__navbar-menu"
-              >
-                {components.map(item => {
-                  if (!item.components) {
-                    return this.renderNavItem(item, 'outside')
-                  }
-                  return (
-                    <SubNav
-                      key={item.name}
-                      title={firstUpperCase(item.name)}
-                      defaultOpen={item.defaultOpen}
-                      icon={`/svg/icons.svg#${item.icon}`}
-                    >
-                      {item.components.map(itemGroup => {
-                        if (itemGroup.group) {
-                          return this.renderNavItemGroup(itemGroup)
-                        }
-                        return this.renderNavItem(
-                          itemGroup,
-                          'inside',
-                          item.path
-                        )
-                      })}
-                    </SubNav>
-                  )
-                })}
-              </Nav>
-            </Scrollbar>
-            {renderNavBottom()}
+            <Nav
+              selectedId={childComponentPath}
+              onItemClick={this.handleItemClick}
+              onSettingClick={this.handleSettingClick}
+              onLogoutClick={this.handleLogoutClick}
+              className="components__nav"
+              user={{
+                avatar:
+                  'https://cosmos-x.oss-cn-hangzhou.aliyuncs.com/avatarPlaceholder.svg',
+                name: 'KIMI GAO',
+                company: 'Earth React UI'
+              }}
+              logoUrl="https://cosmos-x.oss-cn-hangzhou.aliyuncs.com/ui-logo-white.svg"
+            >
+              {components.map(item => {
+                if (!item.components) {
+                  return this.renderNavItem(item, 'outside')
+                }
+                return (
+                  <SubNav
+                    key={item.name}
+                    title={firstUpperCase(item.name)}
+                    icon={`/svg/icons.svg#${item.icon}`}
+                  >
+                    {item.components.map(itemGroup => {
+                      if (itemGroup.group) {
+                        return this.renderNavItemGroup(itemGroup)
+                      }
+                      return this.renderNavItem(itemGroup, 'inside', item.path)
+                    })}
+                  </SubNav>
+                )
+              })}
+            </Nav>
           </LayoutSidebar>
           <LayoutContent>
             {childComponentPath && this.renderTitle(childComponentPath)}

diff --git a/site/apps/Chrome/index.less b/site/apps/Chrome/index.less
@@ -3,94 +3,10 @@
 @import "~dox";
 
 .components {
-  &__navbar-top {
-    height: @ui-unit-triple;
-    line-height: @ui-unit-triple;
-    border-bottom: 1px solid @ui-color-slate;
-    width: @ui-width-aside;
-    color: @ui-color-white;
-    position: fixed;
-    background-color: @ui-color-slate-light;
-    z-index: @ui-zindex-topbar;
-    &-logo {
-      float: left;
-      span {
-        position: relative;
-        left: 80px;
-        font-size: 23px;
-        font-weight: @ui-fontweight;
-        -webkit-font-smoothing: antialiased;
-        font-family: "Eurofighter Expanded";
-        color: @ui-color-white;
-        &:hover {
-          color: @theme;
-        }
-      }
-    }
-    &-close {
-      float: right;
-      width: 60px;
-      height: 60px;
-      text-align: center;
-      cursor: pointer;
-    }
-  }
-  &__navbar-scrollbar {
-  }
-  &__navbar-menu {
-  }
-  &__navbar-bottom {
-    height: @ui-unit-triple;
-    line-height: @ui-unit-triple;
-    border-top: 1px solid @ui-color-slate;
-    width: @ui-width-aside;
-    color: @ui-color-white;
-    position: fixed;
-    background-color: @ui-color-slate-light;
-    z-index: @ui-zindex-topbar;
-    bottom: 0;
-    user-select: none;
-    &-image {
-      float: left;
-      height: @ui-unit-triple;
-      width: @ui-unit-triple;
-      &-icon {
-        margin: @ui-unit-half @ui-unit-plus @ui-unit-half @ui-unit-half;
-        width: @ui-unit-double;
-        height: @ui-unit-double;
-        border-radius: 50% 50%;
-      }
-    }
-    &-user {
-      transition: opacity .2925s cubic-bezier(0,0,.2,1);
-      padding: @ui-unit-half 0 @ui-unit-half @ui-unit-half;
-      height: @ui-unit-triple;
-      width: 80px;
-      float: left;
-      width: ~'calc(100% - 180px)';
-      &-name, &-company {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        display: block;
-        line-height: @ui-unit;
-        min-height: @ui-unit;
-      }
-      &-name {
-        font-weight: @ui-fontweight-bold;
-      }
-      &-company {
-        font-size: @ui-fontsize-mini;
-      }
-    }
-    &-settings, &-logout {
-      float: right;
-      width: @ui-unit-triple;
-      height: @ui-unit-triple;
-      text-align: center;
-      cursor: pointer;
-    }
+  &__nav {
+    height: 100vh;
   }
+
   &__title {
     .earthui-header__bars-tool-item-title {
       text-transform: capitalize;
@@ -106,9 +22,3 @@
     }
   }
 }
-
-.scrollbar {
-  top: @ui-unit-triple;
-  bottom: @ui-unit-triple;
-  background-color: @ui-color-slate-light;
-}
diff --git a/site/apps/apps.json b/site/apps/apps.json
@@ -103,6 +103,10 @@
         "name":"Layout",
         "cn":"布局"
       },
+      {
+        "name":"Nav",
+        "cn":"导航"
+      },
       {
         "name":"Header",
         "cn":"顶栏",
@@ -132,7 +136,7 @@
     ]
   },
   {
-    "icon":"docs-icon-chat-bubble-square-alert-2",
+    "icon":"docs-icon-dialog",
     "path":"components",
     "name":"Dialog",
     "cn":"弹框组件",

diff --git a/site/pages/Home/Section3/index.js b/site/pages/Home/Section3/index.js
@@ -18,7 +18,7 @@ const dataList = [
       'Make the layout more convenient and consistent. Follow the current design trend, also keep simple and rigorous.'
   },
   {
-    icon: 'docs-icon-chat-bubble-square-alert-2',
+    icon: 'docs-icon-dialog',
     title: 'Programmatic Declarative Components',
     intro:
       'This kind of components can build UI quickly without requiring developers’ too much attention to style and typo.'

diff --git a/site/svg/icons.svg b/site/svg/icons.svg
diff --git a/site/widgets/Layout/index.less b/site/widgets/Layout/index.less
@@ -9,7 +9,6 @@
 .layout__sidebar {
   position: relative;
   background-color: @ui-color-slate;
-  width: @ui-width-aside;
   flex-shrink: 0;
   transition: all .2s;
   font-weight: @ui-fontweight-medium;

diff --git a/src/components/Button/docs/Button-gallery.dox b/src/components/Button/docs/Button-gallery.dox
@@ -7,7 +7,7 @@ import { Button } from 'earth-ui'
 const ButtonType = () => {
   return (
     <div>
-      <div style={{border: '1px solid hsl(198, 20%, 83%, .4)'}}>
+      <div style={{border: '1px solid hsl(198, 20%, 83%)'}}>
         <div style={{backgroundColor: '#eff3f5', padding: '15px 15px 15px 30px'}}>
           <strong style={{marginRight: '58px'}}>Type</strong>
           <Button>DEFAULT</Button>