Merge pull request #438 from catchonme/master

tabs增加顶部右侧工具栏

docs/renderers/Form/Tabs.md

@@ -4,6 +4,8 @@
 
 -   `type` 请设置成 `tabs`
 -   `tabs` 选项卡数组
+-   `toolbar` 选项卡右上角工具栏，参考 [Tabs](../Tabs.md) 
+-   `toolbarClassName` 选项卡右上角工具栏 CSS 类名
 -   `tabs[x].title` 标题
 -   `tabs[x].controls` 表单项集合。
 -   `tabs[x].body` 内容容器，跟 `controls` 二选一。

docs/renderers/Tabs.md

@@ -6,27 +6,56 @@
 | className         | `string`                |                                     | 外层 Dom 的类名                                          |
 | tabsClassName     | `string`                |                                     | Tabs Dom 的类名                                          |
 | tabs              | `Array`                 |                                     | tabs 内容                                                |
+| toolbar           | [Container](./Types.md#container) |                                     | tabs 中的工具栏                                                |
+| toolbarClassName  | `string`                |                                     | tabs 中工具栏的类名                                                  |
 | tabs[x].title     | `string`                |                                     | Tab 标题                                                 |
 | tabs[x].icon      | `icon`                  |                                     | Tab 的图标                                               |
-| tabs[x].tab       | [Container](#container) |                                     | 内容区                                                   |
+| tabs[x].tab       | [Container](./Types.md#container) |                                     | 内容区                                                   |
 | tabs[x].hash      | `string`                |                                     | 设置以后将跟 url 的 hash 对应                            |
 | tabs[x].reload    | `boolean`               |                                     | 设置以后内容每次都会重新渲染，对于 crud 的重新拉取很有用 |
 | tabs[x].unmountOnExit    | `boolean`               |                                     | 每次退出都会销毁当前tab栏内容 |
 | tabs[x].className | `string`                | `"bg-white b-l b-r b-b wrapper-md"` | Tab 区域样式                                             |
 
-```schema:height="300" scope="body"
-{
-    "type": "tabs",
-    "tabs": [
-        {
-            "title": "Tab 1",
-            "tab": "Content 1"
-        },
-
-        {
-            "title": "Tab 2",
-            "tab": "Content 2"
-        }
-    ]
-}
+```schema:height="500" scope="body"
+[
+    {
+        "type": "tabs",
+        "tabs": [
+            {
+                "title": "Tab 1",
+                "tab": "Content 1"
+            },
+    
+            {
+                "title": "Tab 2",
+                "tab": "Content 2"
+            }
+        ]
+    },
+    {
+        "type": "tabs",
+        "toolbar": [
+            {
+                "type": "button",
+                "label": "按钮",
+                "actionType": "dialog",
+                "dialog": {
+                    "title": "弹窗标题",
+                    "body": "你点击了"
+                }
+            }
+        ],
+        "tabs": [
+            {
+                "title": "Tab 1",
+                "tab": "Content 1"
+            },
+    
+            {
+                "title": "Tab 2",
+                "tab": "Content 2"
+            }
+        ]
+    }
+]
 ```

scss/components/_tabs.scss

@@ -262,4 +262,10 @@
       flex-grow: 1;
     }
   }
+
+  &-toolbar {
+      display: inline-block;
+      float: right;
+      padding-top: $gap-xs;
+  }
 }

src/components/Tabs.tsx

@@ -43,6 +43,7 @@ export interface TabsProps {
   className?: string;
   tabs?: Array<TabProps>;
   tabRender?: (tab: TabProps, props?: TabsProps) => JSX.Element;
+  toolbar?: React.ReactNode;
 }
 
 export class Tabs extends React.Component<TabsProps> {
@@ -105,7 +106,8 @@ export class Tabs extends React.Component<TabsProps> {
       mode: dMode,
       tabsMode,
       children,
-      additionBtns
+      additionBtns,
+      toolbar,
     } = this.props;
 
     if (!Array.isArray(children)) {
@@ -127,6 +129,7 @@ export class Tabs extends React.Component<TabsProps> {
         <ul className={cx('Tabs-links')} role="tablist">
           {children.map((tab, index) => this.renderNav(tab, index))}
           {additionBtns}
+          {toolbar}
         </ul>
 
         <div className={cx('Tabs-content', contentClassName)}>

src/renderers/Tabs.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
-import {Schema} from '../types';
+import {Action, Schema, SchemaNode} from '../types';
 import find = require('lodash/find');
 import {isVisible, autobind, isDisabled} from '../utils/helper';
 import findIndex = require('lodash/findIndex');
@@ -33,6 +33,7 @@ export interface TabsProps extends RendererProps {
   unmountOnExit?: boolean;
   tabs?: Array<TabProps>;
   tabRender?: (tab: TabProps, props: TabsProps, index: number) => JSX.Element;
+  toolbar?: SchemaNode;
 }
 
 export interface TabsState {
@@ -201,6 +202,21 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
       : -1;
   }
 
+  renderToolbar() {
+    const {
+      toolbar,
+      render,
+      classnames: cx,
+      toolbarClassName
+    } = this.props;
+
+    return toolbar ? (
+      <div className={cx(`Tabs-toolbar`, toolbarClassName)}>
+        {render('toolbar', toolbar)}
+      </div>
+    ) : null;
+  }
+
   renderTabs() {
     const {
       classnames: cx,
@@ -232,6 +248,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
         contentClassName={contentClassName}
         onSelect={this.handleSelect}
         activeKey={this.state.activeKey}
+        toolbar={this.renderToolbar()}
       >
         {tabs.map((tab, index) =>
           isVisible(tab, data) ? (