add forceRenderTabPanel prop to Tab

Setting `forceRenderTabPanel` to true will override the default behavior
of only rendering the selected tab's contents.

Author: meirish

README.md

@@ -27,19 +27,24 @@ var App = React.createClass({
   handleSelect: function (index, last) {
 	console.log('Selected tab: ' + index + ', Last tab: ' + last);
   },
-	
+
   render: function () {
     return (
       {/*
         <Tabs/> is a composite component and acts as the main container.
-	
+
         `onSelect` is called whenever a tab is selected. The handler for
         this function will be passed the current index as well as the last index.
-	
+
         `selectedIndex` is the tab to select when first rendered. By default
         the first (index 0) tab will be selected.
+
+        `forceRenderTabPanel` By default this react-tabs will only render the selected
+        tab's contents. Setting `forceRenderTabPanel` to `true` allows you to override the
+        default behavior, which may be useful in some circumstances (such as animating between tabs).
+
       */}
-	
+
       <Tabs
         onSelect={this.handleSelected}
         selectedIndex={2}
@@ -58,7 +63,7 @@ var App = React.createClass({
             or by using the keyboard tab to give focus then navigating with
             the arrow keys (right/down to select tab to the right of selected,
             left/up to select tab to the left of selected).
-		
+
             The content of the <Tab/> (this.props.children) will be shown as the label.
           */}
 

lib/components/TabPanel.js

@@ -14,6 +14,10 @@ module.exports = React.createClass({
     ])
   },
 
+  contextTypes: {
+    forceRenderTabPanel: PropTypes.bool
+  },
+
 	getDefaultProps() {
     return {
 			selected: false,
@@ -23,7 +27,9 @@ module.exports = React.createClass({
 	},
 
 	render() {
-    const children = this.props.selected ? this.props.children : null;
+    const children = (this.context.forceRenderTabPanel || this.props.selected) ?
+      this.props.children :
+      null;
 
     return (
       <div

lib/components/Tabs.js

@@ -21,20 +21,32 @@ module.exports = React.createClass({
 		selectedIndex: PropTypes.number,
 		onSelect: PropTypes.func,
 		focus: PropTypes.bool,
-    children: childrenPropType
+    children: childrenPropType,
+    forceRenderTabPanel: PropTypes.bool
 	},
 
+  childContextTypes: {
+    forceRenderTabPanel: PropTypes.bool
+  },
+
 	getDefaultProps() {
 		return {
 			selectedIndex: -1,
-			focus: false
+			focus: false,
+      forceRenderTabPanel: false
 		};
 	},
 
 	getInitialState() {
     return this.copyPropsToState(this.props);
   },
 
+  getChildContext() {
+    return {
+      forceRenderTabPanel: this.props.forceRenderTabPanel
+    };
+  },
+
 	componentWillMount() {
     jss(require('../helpers/styles.js'));
 	},

lib/components/__tests__/Tabs-test.js

@@ -4,12 +4,10 @@ import { ok, equal } from 'assert';
 const TestUtils = React.addons.TestUtils;
 
 function createTabs(props = {}) {
-  props.selectedIndex = props.selectedIndex || 0;
-  props.focus = props.focus || false;
-  props.onSelect = props.onSelect || null;
+  const {selectedIndex=0, focus=false, onSelect=null, forceRenderTabPanel=false} = props;
 
   return (
-    <Tabs focus={props.focus} selectedIndex={props.selectedIndex} onSelect={props.onSelect}>
+    <Tabs focus={focus} selectedIndex={selectedIndex} onSelect={onSelect} forceRenderTabPanel={forceRenderTabPanel}>
       <TabList>
         <Tab>Foo</Tab>
         <Tab>Bar</Tab>
@@ -152,6 +150,13 @@ describe('react-tabs', function() {
       equal(tabs.getPanel(1).getDOMNode().innerHTML, '');
       equal(tabs.getPanel(2).getDOMNode().innerHTML, 'Hello Baz');
     });
+
+    it('should render all tabs if forceRenderTabPanel is true', function() {
+      const tabs = TestUtils.renderIntoDocument(createTabs({forceRenderTabPanel: true}));
+      equal(tabs.getPanel(0).getDOMNode().innerHTML, 'Hello Foo');
+      equal(tabs.getPanel(1).getDOMNode().innerHTML, 'Hello Bar');
+      equal(tabs.getPanel(2).getDOMNode().innerHTML, 'Hello Baz');
+    });
   });
 
   describe('validation', function() {