Change handling of active/disabled class names

They are all toplevel now

Author: danez

src/components/Tab.js

@@ -5,17 +5,15 @@ import cx from 'classnames';
 export default class Tab extends Component {
 
   static defaultProps = {
-    activeTabClassName: 'ReactTabs__Tab--selected',
-    disabledTabClassName: 'ReactTabs__Tab--disabled',
     focus: false,
     id: null,
     panelId: null,
     selected: false,
   };
 
   static propTypes = {
-    activeTabClassName: PropTypes.string,
-    disabledTabClassName: PropTypes.string,
+    activeClassName: PropTypes.string, // private
+    disabledClassName: PropTypes.string, // private
     children: PropTypes.oneOfType([
       PropTypes.array,
       PropTypes.object,
@@ -46,11 +44,11 @@ export default class Tab extends Component {
 
   render() {
     const {
-      activeTabClassName,
+      activeClassName,
       children,
       className,
       disabled,
-      disabledTabClassName,
+      disabledClassName,
       focus, // eslint-disable-line no-unused-vars
       id,
       panelId,
@@ -65,8 +63,8 @@ export default class Tab extends Component {
           'ReactTabs__Tab',
           className,
           {
-            [activeTabClassName]: selected,
-            [disabledTabClassName]: disabled,
+            [activeClassName]: selected,
+            [disabledClassName]: disabled,
           },
         )}
         ref={(node) => { this.node = node; if (tabRef) tabRef(node); }}

src/components/TabList.js

@@ -1,48 +1,21 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import cx from 'classnames';
-import Tab from './Tab';
 
 export default class TabList extends Component {
 
   static propTypes = {
-    activeTabClassName: PropTypes.string,
     children: PropTypes.oneOfType([
       PropTypes.object,
       PropTypes.array,
     ]),
     className: PropTypes.string,
-    disabledTabClassName: PropTypes.string,
   };
 
-  renderChildren() {
-    const {
-      activeTabClassName,
-      children,
-      disabledTabClassName,
-    } = this.props;
-
-    return React.Children.map(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 React.cloneElement(child, {
-          activeTabClassName,
-          disabledTabClassName,
-        });
-      }
-
-      return child;
-    });
-  }
-
   render() {
     const {
-      activeTabClassName, // eslint-disable-line no-unused-vars
-      children, // eslint-disable-line no-unused-vars
+      children,
       className,
-      disabledTabClassName, // eslint-disable-line no-unused-vars
       ...attributes } = this.props;
 
     return (
@@ -54,7 +27,7 @@ export default class TabList extends Component {
         )}
         role="tablist"
       >
-        {this.renderChildren()}
+        {children}
       </ul>
     );
   }

src/components/TabPanel.js

@@ -9,6 +9,7 @@ export default class TabPanel extends Component {
   };
 
   static propTypes = {
+    activeClassName: PropTypes.string, // private
     children: PropTypes.node,
     className: PropTypes.string,
     forceRenderTabPanel: PropTypes.bool, // private
@@ -20,6 +21,7 @@ export default class TabPanel extends Component {
 
   render() {
     const {
+      activeClassName,
       children,
       className,
       forceRenderTabPanel,
@@ -36,7 +38,7 @@ export default class TabPanel extends Component {
           'ReactTabs__TabPanel',
           className,
           {
-            'ReactTabs__TabPanel--selected': selected,
+            [activeClassName]: selected,
           },
         )}
         role="tabpanel"

src/components/Tabs.js

@@ -14,10 +14,13 @@ export default class Tabs extends Component {
   };
 
   static propTypes = {
+    activeTabClassName: PropTypes.string,
+    activeTabPanelClassName: PropTypes.string,
     children: childrenPropType,
     className: PropTypes.string,
     defaultFocus: PropTypes.bool,
     defaultIndex: PropTypes.number,
+    disabledTabClassName: PropTypes.string,
     forceRenderTabPanel: PropTypes.bool,
     onSelect: onSelectPropType,
     selectedIndex: selectedIndexPropType,
@@ -50,17 +53,17 @@ For more information about controlled and uncontrolled mode of react-tabs see th
   }
 
   handleSelected = (index, last, event) => {
-    const state = {
-      // Set focus if the change was triggered from the keyboard
-      focus: event.type === 'keydown',
-    };
-
     // Call change event handler
     if (typeof this.props.onSelect === 'function') {
       // Check if the change event handler cancels the tab change
       if (this.props.onSelect(index, last, event) === false) return;
     }
 
+    const state = {
+      // Set focus if the change was triggered from the keyboard
+      focus: event.type === 'keydown',
+    };
+
     if (Tabs.inUncontrolledMode(this.props)) {
       // Update selected index
       state.selectedIndex = index;

src/components/UncontrolledTabs.js

@@ -21,14 +21,20 @@ function isTabDisabled(node) {
 export default class UncontrolledTabs extends Component {
 
   static defaultProps = {
+    activeTabClassName: 'ReactTabs__Tab--selected',
+    activeTabPanelClassName: 'ReactTabs__TabPanel--selected',
     className: '',
+    disabledTabClassName: 'ReactTabs__Tab--disabled',
     focus: false,
     forceRenderTabPanel: false,
   };
 
   static propTypes = {
+    activeTabClassName: PropTypes.string,
+    activeTabPanelClassName: PropTypes.string,
     children: childrenPropType,
     className: PropTypes.string,
+    disabledTabClassName: PropTypes.string,
     focus: PropTypes.bool,
     forceRenderTabPanel: PropTypes.bool,
     onSelect: PropTypes.func.isRequired,
@@ -149,6 +155,8 @@ export default class UncontrolledTabs extends Component {
             const panelId = this.panelIds[listIndex];
             const selected = this.props.selectedIndex === listIndex;
             const focus = selected && this.props.focus;
+            const activeClassName = this.props.activeTabClassName;
+            const disabledClassName = this.props.disabledTabClassName;
 
             listIndex++;
 
@@ -158,6 +166,8 @@ export default class UncontrolledTabs extends Component {
               panelId,
               selected,
               focus,
+              activeClassName,
+              disabledClassName,
             });
           }),
         });
@@ -166,6 +176,7 @@ export default class UncontrolledTabs extends Component {
         const tabId = this.tabIds[index];
         const selected = this.props.selectedIndex === index;
         const forceRenderTabPanel = this.props.forceRenderTabPanel;
+        const activeClassName = this.props.activeTabPanelClassName;
 
         index++;
 
@@ -174,6 +185,7 @@ export default class UncontrolledTabs extends Component {
           tabId,
           selected,
           forceRenderTabPanel,
+          activeClassName,
         });
       }
 
@@ -260,7 +272,6 @@ export default class UncontrolledTabs extends Component {
         {...attributes}
         className={cx(
           'ReactTabs',
-          'react-tabs',
           className,
         )}
         onClick={this.handleClick}