Feature/add custom active and disabled class (#108)

* Adds support for custom active/disabled class names

* Add tests

Author: selvagsz

src/components/Tab.js

@@ -11,6 +11,8 @@ module.exports = React.createClass({
     focus: PropTypes.bool,
     selected: PropTypes.bool,
     disabled: PropTypes.bool,
+    activeTabClassName: PropTypes.string,
+    disabledTabClassName: PropTypes.string,
     panelId: PropTypes.string,
     children: PropTypes.oneOfType([
       PropTypes.array,
@@ -25,6 +27,8 @@ module.exports = React.createClass({
       selected: false,
       id: null,
       panelId: null,
+      activeTabClassName: 'ReactTabs__Tab--selected',
+      disabledTabClassName: 'ReactTabs__Tab--disabled',
     };
   },
 
@@ -43,7 +47,16 @@ module.exports = React.createClass({
   },
 
   render() {
-    const { selected, disabled, panelId, className, children, id, ...attributes } = this.props;
+    const {
+      selected,
+      disabled,
+      panelId,
+      activeTabClassName,
+      disabledTabClassName,
+      className,
+      children,
+      id,
+      ...attributes } = this.props;
 
     return (
       <li
@@ -52,8 +65,8 @@ module.exports = React.createClass({
           'ReactTabs__Tab',
           className,
           {
-            'ReactTabs__Tab--selected': selected,
-            'ReactTabs__Tab--disabled': disabled,
+            [activeTabClassName]: selected,
+            [disabledTabClassName]: disabled,
           }
         )}
         role="tab"

src/components/TabList.js

@@ -1,19 +1,35 @@
 import React, { PropTypes } from 'react';
 import cx from 'classnames';
 
+function renderChildren(props) {
+  return React.Children.map(props.children, (child) =>
+    React.cloneElement(child, {
+      activeTabClassName: props.activeTabClassName,
+      disabledTabClassName: props.disabledTabClassName,
+    })
+  );
+}
+
 module.exports = React.createClass({
   displayName: 'TabList',
 
   propTypes: {
     className: PropTypes.string,
+    activeTabClassName: PropTypes.string,
+    disabledTabClassName: PropTypes.string,
     children: PropTypes.oneOfType([
       PropTypes.object,
       PropTypes.array,
     ]),
   },
 
   render() {
-    const { className, children, ...attributes } = this.props;
+    const {
+      className,
+      activeTabClassName,
+      disabledTabClassName,
+      children,
+      ...attributes } = this.props;
 
     return (
       <ul
@@ -24,7 +40,7 @@ module.exports = React.createClass({
         )}
         role="tablist"
       >
-        {children}
+        {renderChildren({ activeTabClassName, disabledTabClassName, children })}
       </ul>
     );
   },

src/components/__tests__/TabList-test.js

@@ -1,7 +1,13 @@
 /* global jest, describe, it, expect */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
+import Tab from '../Tab';
 import TabList from '../TabList';
+import Tabs from '../Tabs';
+
+function hasClassAt(wrapper, index, className) {
+  return wrapper.childAt(index).find('li').hasClass(className);
+}
 
 describe('<TabList />', () => {
   it('should have sane defaults', () => {
@@ -30,4 +36,37 @@ describe('<TabList />', () => {
 
     expect(wrapper.prop('role')).toBe('tablist');
   });
+
+  it('should retain the default classnames for active and disabled tab', () => {
+    const wrapper = mount(
+      <Tabs selectedIndex={0}>
+        <TabList>
+          <Tab>Foo</Tab>
+          <Tab disabled>Bar</Tab>
+        </TabList>
+      </Tabs>
+    );
+
+    const tabsList = wrapper.childAt(0);
+    expect(hasClassAt(tabsList, 0, 'ReactTabs__Tab--selected')).toBe(true);
+    expect(hasClassAt(tabsList, 1, 'ReactTabs__Tab--disabled')).toBe(true);
+  });
+
+  it('should display the custom classnames for active and disabled tab', () => {
+    const wrapper = mount(
+      <Tabs selectedIndex={0}>
+        <TabList activeTabClassName="active" disabledTabClassName="disabled">
+          <Tab>Foo</Tab>
+          <Tab disabled>Bar</Tab>
+        </TabList>
+      </Tabs>
+    );
+
+    const tabsList = wrapper.childAt(0);
+    expect(hasClassAt(tabsList, 0, 'ReactTabs__Tab--selected')).toBe(false);
+    expect(hasClassAt(tabsList, 1, 'ReactTabs__Tab--disabled')).toBe(false);
+
+    expect(hasClassAt(tabsList, 0, 'active')).toBe(true);
+    expect(hasClassAt(tabsList, 1, 'disabled')).toBe(true);
+  });
 });