Merge pull request #1821 from ddcat1115/fix-1750

fix #1750

components/tabs/demo/custom-add-trigger.md

@@ -0,0 +1,66 @@
+---
+order: 11
+title: 自定义新增页签触发器
+---
+
+隐藏默认的页签增加图标，给自定义触发器绑定事件。
+
+````jsx
+import { Tabs, Button } from 'antd';
+const TabPane = Tabs.TabPane;
+
+const Demo = React.createClass({
+  getInitialState() {
+    this.newTabIndex = 0;
+    const panes = [
+      <TabPane tab="选项卡" key="1">选项卡一内容</TabPane>,
+      <TabPane tab="选项卡" key="2">选项卡二内容</TabPane>,
+    ];
+    return {
+      activeKey: panes[0].key,
+      panes,
+    };
+  },
+  onChange(activeKey) {
+    this.setState({ activeKey });
+  },
+  onEdit(targetKey, action) {
+    this[action](targetKey);
+  },
+  add() {
+    const panes = this.state.panes;
+    const activeKey = `newTab${this.newTabIndex++}`;
+    panes.push(<TabPane tab="新建页签" key={activeKey}>新页面</TabPane>);
+    this.setState({ panes, activeKey });
+  },
+  remove(targetKey) {
+    let activeKey = this.state.activeKey;
+    let lastIndex;
+    this.state.panes.forEach((pane, i) => {
+      if (pane.key === targetKey) {
+        lastIndex = i - 1;
+      }
+    });
+    const panes = this.state.panes.filter(pane => pane.key !== targetKey);
+    if (lastIndex >= 0 && activeKey === targetKey) {
+      activeKey = panes[lastIndex].key;
+    }
+    this.setState({ panes, activeKey });
+  },
+  render() {
+    return (
+      <div>
+        <div style={{ marginBottom: 16 }}>
+          <Button type="ghost" onClick={this.add}>新增</Button>
+        </div>
+        <Tabs hideAdd onChange={this.onChange} activeKey={this.state.activeKey}
+          type="editable-card" onEdit={this.onEdit}>
+          {this.state.panes}
+        </Tabs>
+      </div>
+    );
+  },
+});
+
+ReactDOM.render(<Demo />, mountNode);
+````

components/tabs/index.jsx

@@ -12,6 +12,7 @@ export default class Tabs extends React.Component {
     type: 'line', // or 'card' 'editable-card'
     onChange() {},
     onEdit() {},
+    hideAdd: false,
   }
 
   createNewTab = (targetKey) => {
@@ -32,7 +33,7 @@ export default class Tabs extends React.Component {
 
   render() {
     let { prefixCls, size, tabPosition, animation, type,
-          children, tabBarExtraContent } = this.props;
+          children, tabBarExtraContent, hideAdd } = this.props;
     let className = classNames({
       [this.props.className]: !!this.props.className,
       [`${prefixCls}-mini`]: size === 'small' || size === 'mini',
@@ -55,12 +56,14 @@ export default class Tabs extends React.Component {
         });
       });
       // Add new tab handler
-      tabBarExtraContent = (
-        <span>
-          <Icon type="plus" className={`${prefixCls}-new-tab`} onClick={this.createNewTab} />
-          {tabBarExtraContent}
-        </span>
-      );
+      if (!hideAdd) {
+        tabBarExtraContent = (
+          <span>
+            <Icon type="plus" className={`${prefixCls}-new-tab`} onClick={this.createNewTab} />
+            {tabBarExtraContent}
+          </span>
+        );
+      }
     }
 
     tabBarExtraContent = tabBarExtraContent ? (

components/tabs/index.md

@@ -32,6 +32,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | size | 大小，提供 `default` 和 `small` 两种大小  | String   | 'default'      |
 | tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left`  | String   | 'top'      |
 | onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | Function(targetKey, action) | 无 |
+| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | Boolean   | false    |
 
 ### Tabs.TabPane