diff --git a/components/tabs/demo/editable-card.md b/components/tabs/demo/editable-card.md
index 7f5ceeed9e..bb17af7bcf 100644
--- a/components/tabs/demo/editable-card.md
+++ b/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(, mountNode);
````
-
diff --git a/components/tabs/index.jsx b/components/tabs/index.jsx
index e84e8c5fa8..29613f0076 100644
--- a/components/tabs/index.jsx
+++ b/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:
- {child.props.tab}
-
-
,
- key: child.key || index,
- });
+ children = children.map((child, index) => {
+ return cloneElement(child, {
+ tab:
+ {child.props.tab}
+
+
,
+ key: child.key || index,
});
- }
+ });
// Add new tab handler
tabBarExtraContent = (
@@ -58,16 +57,15 @@ class AntTabs extends React.Component {
);
}
- // Wrap the extra content
- tabBarExtraContent = (
-
- {tabBarExtraContent}
-
- );
+
return (
+ {tabBarExtraContent}
+
+ }
onChange={this.handleChange}
animation={animation}>
{children}
diff --git a/style/components/tabs.less b/style/components/tabs.less
index fd16c54d47..0d41596bce 100644
--- a/style/components/tabs.less
+++ b/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;
}