Merge pull request #416 from gadicc/tabs-render-current

Tabs: only render content of current tab

components/tabs/Tabs.jsx

@@ -82,12 +82,14 @@ class Tabs extends React.Component {
   }
 
   renderContents (contents) {
-    return contents.map((item, idx) => {
-      return React.cloneElement(item, {
-        key: idx,
-        active: this.props.index === idx,
-        tabIndex: idx
-      });
+    const activeIdx = contents.findIndex((item, idx) => {
+      return this.props.index === idx;
+    });
+
+    return React.cloneElement(contents[activeIdx], {
+      key: activeIdx,
+      active: true,
+      tabIndex: activeIdx
     });
   }
 

components/tabs/__tests__/index.spec.jsx

@@ -0,0 +1,51 @@
+import expect from 'expect';
+import utils from '../../utils/testing';
+import ReactTestUtils from 'react-addons-test-utils';
+
+import React, { Component } from 'react';
+
+import Tabs from '../Tabs';
+import Tab from '../Tab';
+import TabContent from '../TabContent';
+
+describe('Tabs', function () {
+  let tabContents, composition;
+
+  it('only renders the current tab', function () {
+    class Composition extends Component {
+      constructor () {
+        super();
+        this.state = { index: 0 };
+      }
+
+      render () {
+        return (
+          <Tabs index={this.state.index}>
+            <Tab label="tab1">tab1</Tab>
+            <Tab label="tab2">tab2</Tab>
+          </Tabs>
+        );
+      }
+    }
+
+    // initial render
+    composition = utils.renderComponent(Composition);
+
+    tabContents = ReactTestUtils
+      .scryRenderedComponentsWithType(composition, TabContent);
+
+    expect(tabContents.length).toEqual(1);
+    expect(tabContents[0].props.tabIndex).toEqual(0);
+
+    // after tab change
+    composition.setState({ index: 1 });
+    composition.forceUpdate();
+
+    tabContents = ReactTestUtils
+      .scryRenderedComponentsWithType(composition, TabContent);
+
+    expect(tabContents.length).toEqual(1);
+    expect(tabContents[0].props.tabIndex).toEqual(1);
+  });
+
+});

components/tabs/readme.md

@@ -1,6 +1,6 @@
 # Tabs
 
-[Tabs](https://www.google.com/design/spec/components/tabs.html) make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets. For now we are using tabs along with content so it's not possible to render just the tab headers with event listeners. In the future we will add this feature but for now you can compose your tabs with content:
+[Tabs](https://www.google.com/design/spec/components/tabs.html) make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets.  Tabs are composed with their content, but only the active tab's content is rendered.  In the future, we may add the ability to render headers only, with event listeners.
 
 <!-- example -->
 ```jsx