Use es6 class

src/components/Tab.js

@@ -1,11 +1,10 @@
-import React, { PropTypes } from 'react';
+import React, { PropTypes, Component } from 'react';
 import { findDOMNode } from 'react-dom';
 import cx from 'classnames';
 
-module.exports = React.createClass({
-  displayName: 'Tab',
+class Tab extends Component {
 
-  propTypes: {
+  static propTypes = {
     className: PropTypes.string,
     id: PropTypes.string,
     focus: PropTypes.bool,
@@ -19,32 +18,30 @@ module.exports = React.createClass({
       PropTypes.object,
       PropTypes.string,
     ]),
-  },
+  };
 
-  getDefaultProps() {
-    return {
-      focus: false,
-      selected: false,
-      id: null,
-      panelId: null,
-      activeTabClassName: 'ReactTabs__Tab--selected',
-      disabledTabClassName: 'ReactTabs__Tab--disabled',
-    };
-  },
+  static defaultProps = {
+    focus: false,
+    selected: false,
+    id: null,
+    panelId: null,
+    activeTabClassName: 'ReactTabs__Tab--selected',
+    disabledTabClassName: 'ReactTabs__Tab--disabled',
+  };
 
   componentDidMount() {
     this.checkFocus();
-  },
+  }
 
   componentDidUpdate() {
     this.checkFocus();
-  },
+  }
 
   checkFocus() {
     if (this.props.selected && this.props.focus) {
       findDOMNode(this).focus();
     }
-  },
+  }
 
   render() {
     const {
@@ -81,5 +78,7 @@ module.exports = React.createClass({
         {children}
       </li>
     );
-  },
-});
+  }
+}
+
+export default Tab;

src/components/TabList.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react';
+import React, { PropTypes, Component } from 'react';
 import cx from 'classnames';
 import Tab from './Tab';
 
@@ -20,18 +20,17 @@ function renderChildren(props) {
   });
 }
 
-module.exports = React.createClass({
-  displayName: 'TabList',
+class TabList extends Component {
 
-  propTypes: {
+  static propTypes = {
     className: PropTypes.string,
     activeTabClassName: PropTypes.string,
     disabledTabClassName: PropTypes.string,
     children: PropTypes.oneOfType([
       PropTypes.object,
       PropTypes.array,
     ]),
-  },
+  };
 
   render() {
     const {
@@ -53,5 +52,7 @@ module.exports = React.createClass({
         {renderChildren({ activeTabClassName, disabledTabClassName, children })}
       </ul>
     );
-  },
-});
+  }
+}
+
+export default TabList;

src/components/TabPanel.js

@@ -1,10 +1,9 @@
-import React, { PropTypes } from 'react';
+import React, { PropTypes, Component } from 'react';
 import cx from 'classnames';
 
-module.exports = React.createClass({
-  displayName: 'TabPanel',
+class TabPanel extends Component {
 
-  propTypes: {
+  static propTypes = {
     children: PropTypes.oneOfType([
       PropTypes.array,
       PropTypes.object,
@@ -15,23 +14,20 @@ module.exports = React.createClass({
     selected: PropTypes.bool,
     style: PropTypes.object,
     tabId: PropTypes.string,
-  },
+  };
 
-  contextTypes: {
+  static contextTypes = {
     forceRenderTabPanel: PropTypes.bool,
-  },
+  };
 
-  getDefaultProps() {
-    return {
-      selected: false,
-      id: null,
-      tabId: null,
-    };
-  },
+  static defaultProps = {
+    selected: false,
+    id: null,
+    tabId: null,
+  };
 
   render() {
     const { className, children, selected, id, tabId, style, ...attributes } = this.props;
-
     return (
       <div
         {...attributes}
@@ -50,5 +46,7 @@ module.exports = React.createClass({
         {(this.context.forceRenderTabPanel || selected) ? children : null}
       </div>
     );
-  },
-});
+  }
+}
+
+export default TabPanel;

src/components/Tabs.js

@@ -1,4 +1,4 @@
-import React, { PropTypes, cloneElement } from 'react';
+import React, { PropTypes, cloneElement, Component } from 'react';
 import { findDOMNode } from 'react-dom';
 import cx from 'classnames';
 import jss from 'js-stylesheet';
@@ -18,58 +18,56 @@ function isTabDisabled(node) {
 
 let useDefaultStyles = true;
 
-module.exports = React.createClass({
-  displayName: 'Tabs',
+class Tabs extends Component {
 
-  propTypes: {
+  static propTypes = {
     className: PropTypes.string,
     selectedIndex: PropTypes.number,
     onSelect: PropTypes.func,
     focus: PropTypes.bool,
     children: childrenPropType,
     forceRenderTabPanel: PropTypes.bool,
-  },
+  };
 
-  childContextTypes: {
+  static childContextTypes = {
     forceRenderTabPanel: PropTypes.bool,
-  },
+  };
 
-  statics: {
-    setUseDefaultStyles(use) {
-      useDefaultStyles = use;
-    },
-  },
+  static defaultProps = {
+    selectedIndex: -1,
+    focus: false,
+    forceRenderTabPanel: false,
+  };
 
-  getDefaultProps() {
-    return {
-      selectedIndex: -1,
-      focus: false,
-      forceRenderTabPanel: false,
-    };
-  },
+  static setUseDefaultStyles = (use) => {
+    useDefaultStyles = use;
+  };
 
-  getInitialState() {
-    return this.copyPropsToState(this.props, this.state);
-  },
+  constructor(props) {
+    super(props);
+    this.state = this.copyPropsToState(this.props, this.state);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
 
   getChildContext() {
     return {
       forceRenderTabPanel: this.props.forceRenderTabPanel,
     };
-  },
+  }
 
   componentDidMount() {
     if (useDefaultStyles) {
       jss(require('../helpers/styles.js')); // eslint-disable-line global-require
     }
-  },
+  }
 
   componentWillReceiveProps(newProps) {
     // Use a transactional update to prevent race conditions
     // when reading the state in copyPropsToState
     // See https://github.com/reactjs/react-tabs/issues/51
     this.setState(state => this.copyPropsToState(newProps, state));
-  },
+  }
 
   setSelected(index, focus) {
     // Don't do anything if nothing has changed
@@ -92,7 +90,7 @@ module.exports = React.createClass({
       // Update selected index
       this.setState({ selectedIndex: index, focus: focus === true });
     }
-  },
+  }
 
   getNextTab(index) {
     const count = this.getTabsCount();
@@ -115,7 +113,7 @@ module.exports = React.createClass({
 
     // No tabs are disabled, return index
     return index;
-  },
+  }
 
   getPrevTab(index) {
     let i = index;
@@ -139,29 +137,29 @@ module.exports = React.createClass({
 
     // No tabs are disabled, return index
     return index;
-  },
+  }
 
   getTabsCount() {
     return this.props.children && this.props.children[0] ?
             React.Children.count(this.props.children[0].props.children) :
             0;
-  },
+  }
 
   getPanelsCount() {
     return React.Children.count(this.props.children.slice(1));
-  },
+  }
 
   getTabList() {
     return this.refs.tablist;
-  },
+  }
 
   getTab(index) {
     return this.refs[`tabs-${index}`];
-  },
+  }
 
   getPanel(index) {
     return this.refs[`panels-${index}`];
-  },
+  }
 
   getChildren() {
     let index = 0;
@@ -246,7 +244,7 @@ module.exports = React.createClass({
 
       return result;
     });
-  },
+  }
 
   handleKeyDown(e) {
     if (this.isTabFromContainer(e.target)) {
@@ -272,7 +270,7 @@ module.exports = React.createClass({
 
       this.setSelected(index, true);
     }
-  },
+  }
 
   handleClick(e) {
     let node = e.target;
@@ -287,7 +285,7 @@ module.exports = React.createClass({
         return;
       }
     } while ((node = node.parentNode) !== null);
-  },
+  }
 
   // This is an anti-pattern, so sue me
   copyPropsToState(props, state) {
@@ -313,7 +311,7 @@ module.exports = React.createClass({
       selectedIndex,
       focus: props.focus,
     };
-  },
+  }
 
   /**
    * Determine if a node from event.target is a Tab element for the current Tabs container.
@@ -337,7 +335,7 @@ module.exports = React.createClass({
     } while (nodeAncestor);
 
     return false;
-  },
+  }
 
   render() {
     // This fixes an issue with focus management.
@@ -385,5 +383,7 @@ module.exports = React.createClass({
         {this.getChildren()}
       </div>
     );
-  },
-});
+  }
+}
+
+export default Tabs;

src/helpers/childrenPropType.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Tab from '../components/Tab';
 import TabList from '../components/TabList';
+import TabPanel from '../components/TabPanel';
 
 module.exports = function childrenPropTypes(props, propName) {
   let error;
@@ -27,7 +28,7 @@ module.exports = function childrenPropTypes(props, propName) {
           tabsCount++;
         }
       });
-    } else if (child.type.displayName === 'TabPanel') {
+    } else if (child.type === TabPanel) {
       panelsCount++;
     } else {
       error = new Error(