From b88c07f1d5241ee3b9bec0d28a5fff9e505fa32d Mon Sep 17 00:00:00 2001
From: lixiaoyang <lixiaoyang2345@gmail.com>
Date: Mon, 13 Feb 2017 15:43:54 +0800
Subject: [PATCH] feat: support Tabs.TabPane[closable] (#4807)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 为antd的editable-card类型的TabPane增加不可删除属性

* 在tab内部控制样式

* className={} 前后不加空格
---
 .../tabs/__tests__/__snapshots__/demo.test.js.snap  |  5 ++---
 components/tabs/demo/editable-card.md               |  8 +++++---
 components/tabs/index.tsx                           | 13 +++++++++++--
 components/tabs/style/card-style.less               |  9 ++++++---
 4 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
index 7d16b1f2d4..3c284c77e9 100644
--- a/components/tabs/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
@@ -362,10 +362,9 @@ exports[`test renders ./components/tabs/demo/editable-card.md correctly 1`] = `
               aria-selected="true"
               class="ant-tabs-tab-active ant-tabs-tab"
               role="tab">
-              <div>
+              <div
+                class="ant-tabs-tab-unclosable">
                 Tab 1
-                <i
-                  class="anticon anticon-close" />
               </div>
             </div>
             <div
diff --git a/components/tabs/demo/editable-card.md b/components/tabs/demo/editable-card.md
index 293559d4a0..c5d2f7b0fe 100644
--- a/components/tabs/demo/editable-card.md
+++ b/components/tabs/demo/editable-card.md
@@ -8,10 +8,12 @@ title:
 ## zh-CN
 
 只有卡片样式的页签支持新增和关闭选项。
+使用 `closable={false}` 禁止关闭。
 
 ## en-US
 
-Only card type Tabs support adding & closeable.
+Only card type Tabs support adding & closable.
++Use `closable={false}` to disable close.
 
 ````__react
 import { Tabs } from 'antd';
@@ -21,7 +23,7 @@ const Demo = React.createClass({
   getInitialState() {
     this.newTabIndex = 0;
     const panes = [
-      { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
+      { title: 'Tab 1', content: 'Content of Tab 1', key: '1', closable: false },
       { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
     ];
     return {
@@ -63,7 +65,7 @@ const Demo = React.createClass({
         type="editable-card"
         onEdit={this.onEdit}
       >
-        {this.state.panes.map(pane => <TabPane tab={pane.title} key={pane.key}>{pane.content}</TabPane>)}
+        {this.state.panes.map(pane => <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>{pane.content}</TabPane>)}
       </Tabs>
     );
   },
diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx
index dc0dcde7fc..941b138865 100755
--- a/components/tabs/index.tsx
+++ b/components/tabs/index.tsx
@@ -32,6 +32,7 @@ export interface TabPaneProps {
   /** 选项卡头显示文字 */
   tab?: React.ReactNode | string;
   style?: React.CSSProperties;
+  closable?: boolean;
 }
 
 export default class Tabs extends React.Component<TabsProps, any> {
@@ -98,11 +99,19 @@ export default class Tabs extends React.Component<TabsProps, any> {
     if (type === 'editable-card') {
       childrenWithClose = [];
       React.Children.forEach(children as React.ReactNode, (child: React.ReactElement<any>, index) => {
+        let closable = child.props.closable;
+        closable = typeof closable === 'undefined' ? true : closable;
+        const closeIcon = closable ? (
+           <Icon
+             type="close"
+             onClick={e => this.removeTab(child.key, e)}
+           />
+        ) : null;
         childrenWithClose.push(cloneElement(child, {
           tab: (
-            <div>
+            <div className={closable ? undefined : `${prefixCls}-tab-unclosable`}>
               {child.props.tab}
-              <Icon type="close" onClick={(e) => this.removeTab(child.key, e)} />
+              {closeIcon}
             </div>
           ),
           key: child.key || index,
diff --git a/components/tabs/style/card-style.less b/components/tabs/style/card-style.less
index 7b5be58f58..b3437d76ca 100644
--- a/components/tabs/style/card-style.less
+++ b/components/tabs/style/card-style.less
@@ -52,9 +52,12 @@
     }
   }
 
-  &&-editable-card > &-bar &-tab:not(&-tab-active):hover {
-    padding-left: 8px;
-    padding-right: 8px;
+  &&-editable-card > &-bar &-tab > div {
+    transition: all 0.3s @ease-in-out;
+  }
+  &&-editable-card > &-bar &-tab:not(&-tab-active):hover > div:not(&-tab-unclosable) {
+    margin-left: -8px;
+    margin-right: -8px;
   }
 
   &&-card > &-bar &-tab-active .@{iconfont-css-prefix}-close,