Merge 1fbde02 into 54068c0

react-component · Nov 10, 2018 · eb744c2 · eb744c2
2 parents 54068c0 + 1fbde02
commit eb744c2
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 3 deletions.
diff --git a/examples/activeKey.js b/examples/activeKey.js
@@ -39,6 +39,12 @@ class Demo extends React.Component {
     });
   }
 
+  handleNotExistKey = () => {
+    this.setState({
+      activeKey: '-1',
+    });
+  }
+
   render() {
     const start = this.state.start;
     return (
@@ -65,6 +71,11 @@ class Demo extends React.Component {
           </TabPane>
         </Tabs>
         <button onClick={this.tick}>rerender</button>
+        <button onClick={this.handleNotExistKey}
+          style={{ marginLeft: 10 }}
+        >
+          change to a non-existent activeKey
+        </button>
       </div>
     );
   }

diff --git a/src/InkTabBarNode.js b/src/InkTabBarNode.js
@@ -1,16 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { setTransform, isTransformSupported, getLeft, getTop } from './utils';
+import { setTransform, isTransformSupported, getLeft, getTop, getActiveIndex } from './utils';
 
 function componentDidUpdate(component, init) {
-  const { styles } = component.props;
+  const { styles, panels, activeKey } = component.props;
   const rootNode = component.props.getRef('root');
   const wrapNode = component.props.getRef('nav') || rootNode;
   const inkBarNode = component.props.getRef('inkBar');
   const activeTab = component.props.getRef('activeTab');
   const inkBarNodeStyle = inkBarNode.style;
   const tabBarPosition = component.props.tabBarPosition;
+  const activeIndex = getActiveIndex(panels, activeKey);
   if (init) {
     // prevent mount animation
     inkBarNodeStyle.display = 'none';
@@ -66,7 +67,7 @@ function componentDidUpdate(component, init) {
       }
     }
   }
-  inkBarNodeStyle.display = activeTab ? 'block' : 'none';
+  inkBarNodeStyle.display = activeIndex !== -1 ? 'block' : 'none';
 }
 
 export default class InkTabBarNode extends React.Component {

diff --git a/tests/index.spec.js b/tests/index.spec.js
@@ -188,4 +188,23 @@ describe('rc-tabs', () => {
     wrapper.find('TabBarTabsNode').find('.rc-tabs-tab').at(1).simulate('click', {});
     expect(wrapper.find('InkTabBarNode').html().indexOf('display: block;') !== -1).toBe(true);
   });
+
+  it('un-activate tab should not show inkbar', (done) => {
+    const children = [1, 2]
+      .map(number => <TabPane tab={number} key={number.toString()}>{number}</TabPane>);
+    const wrapper = mount(
+      <Tabs
+        renderTabBar={() => <InkTabBar />}
+        renderTabContent={() => <TabContent/>}
+        activeKey="-1"
+      >
+        {children}
+      </Tabs>
+    );
+
+    setTimeout(() => {
+      expect(wrapper.find('InkTabBarNode').html().indexOf('display: none;') !== -1).toBe(true);
+      done();
+    }, 0);
+  });
 });