Allow close last tab, fix #1071

components/tabs/demo/editable-card.md

@@ -36,10 +36,15 @@ const Demo = React.createClass({
   },
   remove(targetKey) {
     let activeKey = this.state.activeKey;
-    let lastIndex = this.state.panes.findIndex(pane => pane.key === targetKey) - 1;
+    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 (activeKey === targetKey) {
-      activeKey = panes[lastIndex >= 0 ? lastIndex : 0].key;
+    if (lastIndex >= 0 && activeKey === targetKey) {
+      activeKey = panes[lastIndex].key;
     }
     this.setState({ panes, activeKey });
   },
@@ -55,4 +60,3 @@ const Demo = React.createClass({
 
 ReactDOM.render(<Demo />, mountNode);
 ````
-

components/tabs/index.jsx

@@ -33,23 +33,22 @@ class AntTabs extends React.Component {
       [`${prefixCls}-mini`]: size === 'small' || size === 'mini',
       [`${prefixCls}-vertical`]: tabPosition === 'left' || tabPosition === 'right',
       [`${prefixCls}-card`]: type.indexOf('card') >= 0,
+      [`${prefixCls}-${type}`]: true,
     });
     if (tabPosition === 'left' || tabPosition === 'right' || type.indexOf('card') >= 0) {
       animation = null;
     }
     // only card type tabs can be added and closed
     if (type === 'editable-card') {
-      if (children.length > 1) {
-        children = children.map((child, index) => {
-          return cloneElement(child, {
-            tab: <div>
-              {child.props.tab}
-              <Icon type="cross" onClick={this.removeTab.bind(this, child.key)} />
-            </div>,
-            key: child.key || index,
-          });
+      children = children.map((child, index) => {
+        return cloneElement(child, {
+          tab: <div>
+            {child.props.tab}
+            <Icon type="cross" onClick={this.removeTab.bind(this, child.key)} />
+          </div>,
+          key: child.key || index,
         });
-      }
+      });
       // Add new tab handler
       tabBarExtraContent = (
         <span>
@@ -58,16 +57,15 @@ class AntTabs extends React.Component {
         </span>
       );
     }
-    // Wrap the extra content
-    tabBarExtraContent = (
-      <div className={`${prefixCls}-extra-content`}>
-        {tabBarExtraContent}
-      </div>
-    );
+
     return (
       <Tabs {...this.props}
         className={className}
-        tabBarExtraContent={tabBarExtraContent}
+        tabBarExtraContent={
+          <div className={`${prefixCls}-extra-content`}>
+            {tabBarExtraContent}
+          </div>
+        }
         onChange={this.handleChange}
         animation={animation}>
         {children}

style/components/tabs.less

@@ -39,6 +39,7 @@
     overflow: hidden;
     font-size: 14px;
     line-height: @line-height-base;
+    height: 36px;
     box-sizing: border-box;
     position: relative;
     white-space: nowrap;
@@ -419,7 +420,7 @@
     }
   }
 
-  &&-card &-tab:not(&-tab-active):hover &-tab-inner {
+  &&-editable-card &-tab:not(&-tab-active):hover &-tab-inner {
     padding-left: 8px;
     padding-right: 8px;
   }