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);
+ });
 });