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; }