Remove jss and support class properties

Author: danez

.babelrc

@@ -4,6 +4,7 @@
     "react"
   ],
   "plugins": [
-    "transform-object-rest-spread"
+    "transform-object-rest-spread",
+    "transform-class-properties"
   ]
 }

package.json

@@ -45,6 +45,7 @@
     "babel-eslint": "^6.0.4",
     "babel-jest": "^15.0.0",
     "babel-loader": "^6.2.4",
+    "babel-plugin-transform-class-properties": "^6.11.5",
     "babel-plugin-transform-object-rest-spread": "^6.8.0",
     "babel-preset-latest": "^6.14.0",
     "babel-preset-react": "^6.5.0",
@@ -66,8 +67,7 @@
     "webpack-dev-server": "^1.14.1"
   },
   "dependencies": {
-    "classnames": "^2.2.0",
-    "js-stylesheet": "^0.0.1"
+    "classnames": "^2.2.0"
   },
   "jest": {
     "testPathDirs": [

src/components/Tab.js

@@ -1,32 +1,32 @@
-import React, { PropTypes, Component } from 'react';
+import React, { Component, PropTypes } from 'react';
 import cx from 'classnames';
 
-class Tab extends Component {
+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 = {
-    className: PropTypes.string,
-    id: PropTypes.string,
-    tabRef: PropTypes.func,
-    focus: PropTypes.bool,
-    selected: PropTypes.bool,
-    disabled: PropTypes.bool,
     activeTabClassName: PropTypes.string,
     disabledTabClassName: PropTypes.string,
-    panelId: PropTypes.string,
     children: PropTypes.oneOfType([
       PropTypes.array,
       PropTypes.object,
       PropTypes.string,
     ]),
-  };
-
-  static defaultProps = {
-    focus: false,
-    selected: false,
-    id: null,
-    panelId: null,
-    activeTabClassName: 'ReactTabs__Tab--selected',
-    disabledTabClassName: 'ReactTabs__Tab--disabled',
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    focus: PropTypes.bool,
+    id: PropTypes.string,
+    panelId: PropTypes.string,
+    selected: PropTypes.bool,
+    tabRef: PropTypes.func,
   };
 
   componentDidMount() {
@@ -45,18 +45,17 @@ class Tab extends Component {
 
   render() {
     const {
-      selected,
-      disabled,
-      panelId,
       activeTabClassName,
-      disabledTabClassName,
-      className,
       children,
+      className,
+      disabled,
+      disabledTabClassName,
+      focus, // eslint-disable-line no-unused-vars
       id,
+      panelId,
+      selected,
       ...attributes } = this.props;
 
-    delete attributes.focus;
-
     return (
       <li
         {...attributes}
@@ -81,5 +80,3 @@ class Tab extends Component {
     );
   }
 }
-
-export default Tab;

src/components/TabList.js

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

src/components/TabPanel.js

@@ -1,7 +1,17 @@
-import React, { PropTypes, Component } from 'react';
+import React, { Component, PropTypes } from 'react';
 import cx from 'classnames';
 
-class TabPanel extends Component {
+export default class TabPanel extends Component {
+
+  static contextTypes = {
+    forceRenderTabPanel: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    id: null,
+    selected: false,
+    tabId: null,
+  };
 
   static propTypes = {
     children: PropTypes.oneOfType([
@@ -16,18 +26,16 @@ class TabPanel extends Component {
     tabId: PropTypes.string,
   };
 
-  static contextTypes = {
-    forceRenderTabPanel: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    selected: false,
-    id: null,
-    tabId: null,
-  };
-
   render() {
-    const { className, children, selected, id, tabId, style, ...attributes } = this.props;
+    const {
+      children,
+      className,
+      id,
+      selected,
+      style,
+      tabId,
+      ...attributes } = this.props;
+
     return (
       <div
         {...attributes}
@@ -48,5 +56,3 @@ class TabPanel extends Component {
     );
   }
 }
-
-export default TabPanel;

src/components/Tabs.js

@@ -1,6 +1,5 @@
 import React, { PropTypes, cloneElement, Component } from 'react';
 import cx from 'classnames';
-import jss from 'js-stylesheet';
 import uuid from '../helpers/uuid';
 import childrenPropType from '../helpers/childrenPropType';
 import Tab from './Tab';
@@ -15,38 +14,30 @@ function isTabDisabled(node) {
   return node.getAttribute('aria-disabled') === 'true';
 }
 
-let useDefaultStyles = true;
-
-class Tabs extends Component {
-
-  static propTypes = {
-    className: PropTypes.string,
-    selectedIndex: PropTypes.number, // eslint-disable-line react/no-unused-prop-types
-    onSelect: PropTypes.func,
-    focus: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
-    children: childrenPropType,
-    forceRenderTabPanel: PropTypes.bool,
-  };
+export default class Tabs extends Component {
 
   static childContextTypes = {
     forceRenderTabPanel: PropTypes.bool,
   };
 
   static defaultProps = {
-    selectedIndex: -1,
     focus: false,
     forceRenderTabPanel: false,
+    selectedIndex: -1,
   };
 
-  static setUseDefaultStyles = (use) => {
-    useDefaultStyles = use;
+  static propTypes = {
+    children: childrenPropType,
+    className: PropTypes.string,
+    focus: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
+    forceRenderTabPanel: PropTypes.bool,
+    onSelect: PropTypes.func,
+    selectedIndex: PropTypes.number, // eslint-disable-line react/no-unused-prop-types
   };
 
   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() {
@@ -55,12 +46,6 @@ class Tabs extends Component {
     };
   }
 
-  componentDidMount() {
-    if (useDefaultStyles) {
-      jss(require('../helpers/styles')); // eslint-disable-line global-require
-    }
-  }
-
   componentWillReceiveProps(newProps) {
     // Use a transactional update to prevent race conditions
     // when reading the state in copyPropsToState
@@ -210,9 +195,7 @@ class Tabs extends Component {
 
         // Reset index for panels
         index = 0;
-      }
-      // Clone TabPanel components to have refs
-      else {
+      } else {
         const id = panelIds[index];
         const tabId = tabIds[index];
         const selected = state.selectedIndex === index;
@@ -232,7 +215,7 @@ class Tabs extends Component {
 
   tabNodes: [];
 
-  handleKeyDown(e) {
+  handleKeyDown = (e) => {
     if (this.isTabFromContainer(e.target)) {
       let index = this.state.selectedIndex;
       let preventDefault = false;
@@ -256,9 +239,9 @@ class Tabs extends Component {
 
       this.setSelected(index, true);
     }
-  }
+  };
 
-  handleClick(e) {
+  handleClick = (e) => {
     let node = e.target;
     do { // eslint-disable-line no-cond-assign
       if (this.isTabFromContainer(node)) {
@@ -271,7 +254,7 @@ class Tabs extends Component {
         return;
       }
     } while ((node = node.parentNode) !== null);
-  }
+  };
 
   // This is an anti-pattern, so sue me
   copyPropsToState(props, state) {
@@ -371,5 +354,3 @@ class Tabs extends Component {
     );
   }
 }
-
-export default Tabs;