add tabs

Author: LeoAJ

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;