Allow other components inside TabList

examples/basic/app.js

@@ -17,6 +17,8 @@ const App = React.createClass({
             <Tab>React</Tab>
             <Tab>Ember</Tab>
             <Tab>Angular</Tab>
+
+            <span>+</span>
           </TabList>
 
           <TabPanel>

src/components/TabList.js

@@ -1,13 +1,23 @@
 import React, { PropTypes } from 'react';
 import cx from 'classnames';
+import Tab from './Tab';
 
 function renderChildren(props) {
-  return React.Children.map(props.children, (child) =>
-    React.cloneElement(child, {
+  return React.Children.map(props.children, (child) => {
+    // if child is not a tab we don't need to clone it
+    // since we don't need to add custom props
+
+    if (child.type !== Tab) {
+      return child;
+    }
+
+    const clonedProps = {
       activeTabClassName: props.activeTabClassName,
       disabledTabClassName: props.disabledTabClassName,
-    })
-  );
+    };
+
+    return React.cloneElement(child, clonedProps);
+  });
 }
 
 module.exports = React.createClass({

src/components/Tabs.js

@@ -4,6 +4,7 @@ import cx from 'classnames';
 import jss from 'js-stylesheet';
 import uuid from '../helpers/uuid';
 import childrenPropType from '../helpers/childrenPropType';
+import Tab from './Tab';
 
 // Determine if a node from event.target is a Tab element
 function isTabNode(node) {
@@ -209,13 +210,17 @@ module.exports = React.createClass({
 
             index++;
 
-            return cloneElement(tab, {
-              ref,
-              id,
-              panelId,
-              selected,
-              focus,
-            });
+            if (tab.type === Tab) {
+              return cloneElement(tab, {
+                ref,
+                id,
+                panelId,
+                selected,
+                focus,
+              });
+            }
+
+            return tab;
           }),
         });
 

src/components/__tests__/Tabs-test.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-multi-comp */
 /* global jest, describe, it, expect */
 import React from 'react';
 import { shallow, mount } from 'enzyme';
@@ -185,6 +186,27 @@ describe('react-tabs', () => {
       expect(wrapper.childAt(2).text()).toBe('Hello Bar');
       expect(wrapper.childAt(3).text()).toBe('Hello Baz');
     });
+
+    it('should not clone non tabs element', () => {
+      class Demo extends React.Component {
+        render() {
+          const plus = <div ref="yolo">+</div>;
+
+          return (<Tabs>
+            <TabList>
+              <Tab>Foo</Tab>
+              {plus}
+            </TabList>
+
+            <TabPanel>Hello Baz</TabPanel>
+          </Tabs>);
+        }
+      }
+
+      const wrapper = mount(<Demo />);
+
+      expect(wrapper.ref('yolo').text()).toBe('+');
+    });
   });
 
   describe('validation', () => {
@@ -201,7 +223,25 @@ describe('react-tabs', () => {
       expect(result instanceof Error).toBe(true);
     });
 
-    it('should result with a warning when wrong element is found', () => {
+    it(`should result with warning when tabs/panels are imbalanced and
+        it should ignore non tab children`, () => {
+      const wrapper = shallow(
+        <Tabs>
+          <TabList>
+            <Tab>Foo</Tab>
+            <div>+</div>
+          </TabList>
+
+          <TabPanel>Hello Foo</TabPanel>
+          <TabPanel>Hello Bar</TabPanel>
+        </Tabs>
+      );
+
+      const result = Tabs.propTypes.children(wrapper.props(), 'children', 'Tabs');
+      expect(result instanceof Error).toBe(true);
+    });
+
+    it('should not throw a warning when wrong element is found', () => {
       const wrapper = shallow(
         <Tabs>
           <TabList>
@@ -213,7 +253,7 @@ describe('react-tabs', () => {
       );
 
       const result = Tabs.propTypes.children(wrapper.props(), 'children', 'Tabs');
-      expect(result instanceof Error).toBe(true);
+      expect(result instanceof Error).toBe(false);
     });
 
     it('should be okay with rendering without any children', () => {

src/helpers/childrenPropType.js

@@ -25,10 +25,6 @@ module.exports = function childrenPropTypes(props, propName) {
 
         if (c.type === Tab) {
           tabsCount++;
-        } else {
-          error = new Error(
-            `Expected 'Tab' but found '${c.type.displayName || c.type}'`
-          );
         }
       });
     } else if (child.type.displayName === 'TabPanel') {