feat(ToolBar): add ToolBar for tabs just now

site/apps/Chrome/index.js

@@ -3,6 +3,7 @@ import HeaderBar from 'earth-ui/lib/HeaderBar'
 import Icon from 'earth-ui/lib/Icon'
 import { Nav, NavItem, NavItemGroup, SubNav } from 'earth-ui/lib/Nav'
 import { Tab, TabList, Tabs } from 'earth-ui/lib/Tabs'
+import ToolBar from 'earth-ui/lib/ToolBar'
 import Tooltip from 'earth-ui/lib/Tooltip'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -106,30 +107,33 @@ class Components extends React.Component {
     const title = name === 'intro' ? 'Earth UI' : `${name} ${cn}`
     const tabs = getTabsByComponentName(components, name)
     return (
-      <HeaderBar
-        className="components__title"
-        icon="./svg/appLogo.svg"
-        title={title}
-      >
+      <div>
+        <HeaderBar
+          className="components__title"
+          icon="./svg/appLogo.svg"
+          title={title}
+        />
         {!!tabs && (
-          <Tabs activeKey={nameAfterSlash}>
-            <TabList>
-              {!!tabs.length &&
-                tabs.map(tab => (
-                  <Tab
-                    activeKey={tab.doc}
-                    key={tab.doc}
-                    onClick={() =>
-                      this.handleTabClick(`${nameBeforeSlash}/${tab.doc}`)
-                    }
-                  >
-                    {tab.label}
-                  </Tab>
-                ))}
-            </TabList>
-          </Tabs>
+          <ToolBar>
+            <Tabs activeKey={nameAfterSlash}>
+              <TabList>
+                {!!tabs.length &&
+                  tabs.map(tab => (
+                    <Tab
+                      activeKey={tab.doc}
+                      key={tab.doc}
+                      onClick={() =>
+                        this.handleTabClick(`${nameBeforeSlash}/${tab.doc}`)
+                      }
+                    >
+                      {tab.label}
+                    </Tab>
+                  ))}
+              </TabList>
+            </Tabs>
+          </ToolBar>
         )}
-      </HeaderBar>
+      </div>
     )
   }
 

site/router.js

@@ -22,7 +22,6 @@ const asyncComponent = path =>
   })
 
 const WIP = [
-  'ToolBar',
   'Header',
   'Footer',
   'SideBar',

src/components/ToolBar/docs/ToolBar.dox

@@ -0,0 +1,48 @@
+/**
+ * @title 带 Tabs 的 ToolBar
+ * @renderModel right
+ */
+import ToolBar from 'earth-ui/lib/ToolBar'
+import notification from 'earth-ui/lib/notification'
+import { Tabs, TabList, Tab } from 'earth-ui/lib/Tabs'
+
+const ToolBarWithTabs = () => {
+  return (
+    <ToolBar>
+      <Tabs>
+        <TabList>
+          <Tab>One</Tab>
+          <Tab onClick={()=>notification.success('yes')}>Two</Tab>
+        </TabList>
+      </Tabs>
+    </ToolBar>
+  )
+}
+
+
+/**
+ * @title 动态页签
+ * @renderModel right
+ */
+import ToolBar from 'earth-ui/lib/ToolBar'
+import { Tabs, TabList, Tab } from 'earth-ui/lib/Tabs'
+
+class TabsDynamic extends Component {
+  render() {
+    return (
+      <ToolBar>
+        <Tabs dynamic>
+          <TabList newTab={{name: `My New Tab`, closeable: true}}>
+              <Tab key="A" closeable>Closeable One</Tab>
+              <Tab key="B" closeable>Closeable Two</Tab>
+          </TabList>
+        </Tabs>
+      </ToolBar>
+    )
+  }
+}
+
+@component ToolBar
+@component Tabs/Tabs
+@component Tabs/TabList
+@component Tabs/Tab

src/components/ToolBar/index.js

@@ -0,0 +1,24 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import './index.less'
+
+class ToolBar extends React.Component {
+  render () {
+    const { className, children, icon, title, ...other } = this.props
+    return (
+      <div className={cx(`${prefixCls}-toolbar`, className)} {...other}>
+        <ul className={`${prefixCls}-toolbar__bars`}>
+          {children && <li>{children}</li>}
+        </ul>
+      </div>
+    )
+  }
+}
+
+ToolBar.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node
+}
+
+export default ToolBar

src/components/ToolBar/index.less

@@ -0,0 +1,17 @@
+@import '~ui-variables';
+@import '~ui-mixins';
+
+@width: 100%;
+@height: @ui-unit-triple;
+
+.@{prefix-cls}-toolbar {
+  position: relative;
+  z-index: @ui-zindex-topbar;
+  width: 100%;
+  background-color: @ui-color-white;
+  border-bottom: 1px solid @ui-color-gray-light;
+  .ui-mixin-transition(opacity);
+  &__bars {
+
+  }
+}

src/components/index.js

@@ -25,5 +25,6 @@ import './Spinner'
 import './Switch'
 import './Tabs'
 import './TextOverflow'
+import './ToolBar'
 import './Tooltip'
 import './Upload'