From b6b51a41fc7378b0b736ccf89e516c3cb2285db9 Mon Sep 17 00:00:00 2001
From: Gadi Cohen <dragon@wastelands.net>
Date: Mon, 28 Mar 2016 17:29:25 +0200
Subject: [PATCH] only render content of current tab + linting, docs, test

---
 components/tabs/Tabs.jsx                 | 14 ++++---
 components/tabs/__tests__/index.spec.jsx | 51 ++++++++++++++++++++++++
 components/tabs/readme.md                |  2 +-
 3 files changed, 60 insertions(+), 7 deletions(-)
 create mode 100644 components/tabs/__tests__/index.spec.jsx

diff --git a/components/tabs/Tabs.jsx b/components/tabs/Tabs.jsx
index 561f4a89..ad73e249 100644
--- a/components/tabs/Tabs.jsx
+++ b/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
     });
   }
 
diff --git a/components/tabs/__tests__/index.spec.jsx b/components/tabs/__tests__/index.spec.jsx
new file mode 100644
index 00000000..311c6331
--- /dev/null
+++ b/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);
+  });
+
+});
diff --git a/components/tabs/readme.md b/components/tabs/readme.md
index d3b7995b..c7fc006f 100644
--- a/components/tabs/readme.md
+++ b/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