Support unmounting a TabPane when animation is false

LavaToaster · LavaToaster · commit a85c103b8356 · 2016-04-27T22:16:29.000+01:00
diff --git a/src/TabContent.js b/src/TabContent.js
@@ -30,7 +30,7 @@ let TabContent = React.createClass({
     ]),
 
     /**
-     * Unmounts the content (remove it from the DOM) when animation is not `false` and it is faded out
+     * Unmount the tab (remove it from the DOM) when it is no longer visible
      */
     unmountOnExit: PropTypes.bool,
   },
diff --git a/src/TabPane.js b/src/TabPane.js
@@ -65,7 +65,7 @@ let TabPane = React.createClass({
     onExited: PropTypes.func,
 
     /**
-     * Unmounts the tab (remove it from the DOM) when animation is not `false` and it is faded out
+     * Unmount the tab (remove it from the DOM) when it is no longer visible
      */
     unmountOnExit: PropTypes.bool
   },
@@ -140,10 +140,10 @@ let TabPane = React.createClass({
       : context.animation;
   },
 
-  getUnmountOnExit(props = this.props, context = this.context) {
-    context = this.getContext('$bs_tabcontent', context);
-    return props.unmountOnExit != null
-      ? props.unmountOnExit
+  getUnmountOnExit() {
+    let context = this.getContext('$bs_tabcontent', this.context);
+    return this.props.unmountOnExit != null
+      ? this.props.unmountOnExit
       : context.unmountOnExit;
   },
 
@@ -159,6 +159,10 @@ let TabPane = React.createClass({
 
     let Transition = this.getTransition();
 
+    if (!visible && !Transition && this.getUnmountOnExit()) {
+      return null;
+    }
+
     let classes = {
       active: visible,
       [prefix({ bsClass }, 'pane')]: true
diff --git a/src/Tabs.js b/src/Tabs.js
@@ -65,7 +65,7 @@ const Tabs = React.createClass({
     onSelect: React.PropTypes.func,
 
     /**
-     * Unmount tabs (remove it from the DOM) when animation is not `false` and it is faded out
+     * Unmount tabs (remove it from the DOM) when it is no longer visible
      */
     unmountOnExit: React.PropTypes.bool,
 
diff --git a/test/TabsSpec.js b/test/TabsSpec.js
@@ -155,6 +155,45 @@ describe('Tabs', () => {
     assert.equal(tabs.refs.tabs.context.$bs_tabcontainer.activeKey, 1);
   });
 
+  it('Should mount initial tab and no others when unmountOnExit is true and animation is false', () => {
+    let tab1 = <span className="tab1">Tab 1</span>;
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Tabs id='test' defaultActiveKey={1} animation={false} unmountOnExit={true}>
+        <Tab title={tab1} eventKey={1}>Tab 1 content</Tab>
+        <Tab title="Tab 2" eventKey={2}>Tab 2 content</Tab>
+        <Tab title="Tab 3" eventKey={3}>Tab 3 content</Tab>
+      </Tabs>
+    );
+
+    let panes = ReactTestUtils.scryRenderedComponentsWithType(instance, TabPane);
+
+    expect(ReactDOM.findDOMNode(panes[0])).to.exist;
+    expect(ReactDOM.findDOMNode(panes[1])).to.not.exist;
+    expect(ReactDOM.findDOMNode(panes[2])).to.not.exist;
+  });
+
+  it('Should mount the correct tab when selected and unmount the previous when unmountOnExit is true and animation is false', () => {
+    let tab1 = <span className="tab1">Tab 1</span>;
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Tabs id='test' defaultActiveKey={2} animation={false} unmountOnExit={true}>
+        <Tab title={tab1} eventKey={1}>Tab 1 content</Tab>
+        <Tab title="Tab 2" eventKey={2}>Tab 2 content</Tab>
+      </Tabs>
+    );
+
+    let tabs = instance.refs.inner;
+    let panes = ReactTestUtils.scryRenderedComponentsWithType(instance, TabPane);
+
+    ReactTestUtils.Simulate.click(
+      ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'tab1')
+    );
+
+    expect(ReactDOM.findDOMNode(panes[0])).to.exist;
+    expect(ReactDOM.findDOMNode(panes[1])).to.not.exist;
+
+    assert.equal(tabs.refs.tabs.context.$bs_tabcontainer.activeKey, 1);
+  });
+
   it('Should treat active key of null as nothing selected', () => {
     const instance = ReactTestUtils.renderIntoDocument(
       <Tabs id='test' activeKey={null} onSelect={()=>{}}>
