Update dependencies (#132)

* Update dependencies

Remove react-dom peer-dependency and replace all findDOMNode calls

* Better tabRef callback

* Fix linting

* be explicit about travis 6

* Lower peer dependency, we don't need 0.14.7

Author: danez

.babelrc

@@ -1,7 +1,9 @@
 {
   "presets": [
-    "es2015",
-    "react",
-    "stage-1"
+    "latest",
+    "react"
+  ],
+  "plugins": [
+    "transform-object-rest-spread"
   ]
 }

.eslintrc

@@ -7,6 +7,11 @@
   },
   "rules": {
     "react/prefer-es6-class": 0,
-    "react/prefer-stateless-function": 0
+    "react/prefer-stateless-function": 0,
+    "no-plusplus": 0,
+    "react/jsx-filename-extension": ["error", { "extensions": [".js"] }],
+    "react/forbid-prop-types": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "import/no-extraneous-dependencies": 0
   }
 }

.travis.yml

@@ -3,7 +3,7 @@ language: node_js
 node_js:
   - "4"
   - "5"
-  - stable
+  - "6"
 script:
   - npm run lint
   - npm test

package.json

@@ -37,26 +37,26 @@
     "react-component"
   ],
   "peerDependencies": {
-    "react": "^0.14.7 || ^15.0.0",
-    "react-dom": "^0.14.7 || ^15.0.0"
+    "react": "^0.14.0 || ^15.0.0"
   },
   "devDependencies": {
     "babel-cli": "^6.9.0",
     "babel-core": "^6.9.1",
     "babel-eslint": "^6.0.4",
-    "babel-jest": "^13.0.0",
+    "babel-jest": "^15.0.0",
     "babel-loader": "^6.2.4",
-    "babel-preset-es2015": "^6.9.0",
+    "babel-plugin-transform-object-rest-spread": "^6.8.0",
+    "babel-preset-latest": "^6.14.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-1": "^6.5.0",
-    "cross-env": "^1.0.8",
+    "cross-env": "^2.0.0",
     "enzyme": "^2.3.0",
-    "eslint": "^2.11.1",
-    "eslint-config-airbnb": "^9.0.1",
+    "eslint": "^3.5.0",
+    "eslint-config-airbnb": "^11.0.0",
     "eslint-plugin-import": "^1.8.0",
-    "eslint-plugin-jsx-a11y": "^1.2.2",
-    "eslint-plugin-react": "^5.1.1",
-    "jest-cli": "^13.0.0",
+    "eslint-plugin-jsx-a11y": "^2.2.2",
+    "eslint-plugin-react": "^6.2.1",
+    "jest-cli": "^15.0.0",
     "react": "^15.0.0",
     "react-addons-test-utils": "^15.0.0",
     "react-dom": "^15.0.0",
@@ -70,13 +70,8 @@
     "js-stylesheet": "^0.0.1"
   },
   "jest": {
-    "automock": false,
     "testPathDirs": [
       "src"
-    ],
-    "unmockedModulePathPatterns": [
-      "node_modules",
-      "babel"
     ]
   }
 }

src/__tests__/main-test.js

@@ -1,4 +1,5 @@
-/* global describe, it, expect */
+/* eslint-env jest */
+/* eslint-disable import/no-named-as-default-member */
 import ReactTabs, { Tab, Tabs, TabList, TabPanel } from '../main';
 import TabComponent from '../components/Tab';
 import TabListComponent from '../components/TabList';

src/components/Tab.js

@@ -1,5 +1,4 @@
 import React, { PropTypes } from 'react';
-import { findDOMNode } from 'react-dom';
 import cx from 'classnames';
 
 module.exports = React.createClass({
@@ -8,6 +7,7 @@ module.exports = React.createClass({
   propTypes: {
     className: PropTypes.string,
     id: PropTypes.string,
+    tabRef: PropTypes.func,
     focus: PropTypes.bool,
     selected: PropTypes.bool,
     disabled: PropTypes.bool,
@@ -42,7 +42,7 @@ module.exports = React.createClass({
 
   checkFocus() {
     if (this.props.selected && this.props.focus) {
-      findDOMNode(this).focus();
+      this.node.focus();
     }
   },
 
@@ -71,6 +71,7 @@ module.exports = React.createClass({
             [disabledTabClassName]: disabled,
           }
         )}
+        ref={(node) => { this.node = node; this.props.tabRef(node); }}
         role="tab"
         id={id}
         aria-selected={selected ? 'true' : 'false'}

src/components/TabList.js

@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
 import cx from 'classnames';
 
 function renderChildren(props) {
-  return React.Children.map(props.children, (child) =>
+  return React.Children.map(props.children, child =>
     React.cloneElement(child, {
       activeTabClassName: props.activeTabClassName,
       disabledTabClassName: props.disabledTabClassName,

src/components/Tabs.js

@@ -1,5 +1,4 @@
 import React, { PropTypes, cloneElement } from 'react';
-import { findDOMNode } from 'react-dom';
 import cx from 'classnames';
 import jss from 'js-stylesheet';
 import uuid from '../helpers/uuid';
@@ -22,9 +21,9 @@ module.exports = React.createClass({
 
   propTypes: {
     className: PropTypes.string,
-    selectedIndex: PropTypes.number,
+    selectedIndex: PropTypes.number, // eslint-disable-line react/no-unused-prop-types
     onSelect: PropTypes.func,
-    focus: PropTypes.bool,
+    focus: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
     children: childrenPropType,
     forceRenderTabPanel: PropTypes.bool,
   },
@@ -59,7 +58,7 @@ module.exports = React.createClass({
 
   componentDidMount() {
     if (useDefaultStyles) {
-      jss(require('../helpers/styles.js')); // eslint-disable-line global-require
+      jss(require('../helpers/styles')); // eslint-disable-line global-require
     }
   },
 
@@ -98,16 +97,14 @@ module.exports = React.createClass({
 
     // Look for non-disabled tab from index to the last tab on the right
     for (let i = index + 1; i < count; i++) {
-      const tab = this.getTab(i);
-      if (!isTabDisabled(findDOMNode(tab))) {
+      if (!isTabDisabled(this.getTab(i))) {
         return i;
       }
     }
 
     // If no tab found, continue searching from first on left to index
     for (let i = 0; i < index; i++) {
-      const tab = this.getTab(i);
-      if (!isTabDisabled(findDOMNode(tab))) {
+      if (!isTabDisabled(this.getTab(i))) {
         return i;
       }
     }
@@ -121,17 +118,15 @@ module.exports = React.createClass({
 
     // Look for non-disabled tab from index to first tab on the left
     while (i--) {
-      const tab = this.getTab(i);
-      if (!isTabDisabled(findDOMNode(tab))) {
+      if (!isTabDisabled(this.getTab(i))) {
         return i;
       }
     }
 
     // If no tab found, continue searching from last tab on right to index
     i = this.getTabsCount();
     while (i-- > index) {
-      const tab = this.getTab(i);
-      if (!isTabDisabled(findDOMNode(tab))) {
+      if (!isTabDisabled(this.getTab(i))) {
         return i;
       }
     }
@@ -150,16 +145,8 @@ module.exports = React.createClass({
     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}`];
+    return this.tabNodes[`tabs-${index}`];
   },
 
   getChildren() {
@@ -193,15 +180,14 @@ module.exports = React.createClass({
       if (count++ === 0) {
         // TODO try setting the uuid in the "constructor" for `Tab`/`TabPanel`
         result = cloneElement(child, {
-          ref: 'tablist',
           children: React.Children.map(child.props.children, (tab) => {
             // null happens when conditionally rendering TabPanel/Tab
             // see https://github.com/rackt/react-tabs/issues/37
             if (tab === null) {
               return null;
             }
 
-            const ref = `tabs-${index}`;
+            const tabRef = (node) => { this.tabNodes[`tabs-${index}`] = node; };
             const id = tabIds[index];
             const panelId = panelIds[index];
             const selected = state.selectedIndex === index;
@@ -210,7 +196,7 @@ module.exports = React.createClass({
             index++;
 
             return cloneElement(tab, {
-              ref,
+              tabRef,
               id,
               panelId,
               selected,
@@ -224,15 +210,13 @@ module.exports = React.createClass({
       }
       // Clone TabPanel components to have refs
       else {
-        const ref = `panels-${index}`;
         const id = panelIds[index];
         const tabId = tabIds[index];
         const selected = state.selectedIndex === index;
 
         index++;
 
         result = cloneElement(child, {
-          ref,
           id,
           tabId,
           selected,
@@ -243,6 +227,8 @@ module.exports = React.createClass({
     });
   },
 
+  tabNodes: [],
+
   handleKeyDown(e) {
     if (this.isTabFromContainer(e.target)) {
       let index = this.state.selectedIndex;
@@ -323,9 +309,8 @@ module.exports = React.createClass({
 
     // Check if the first occurrence of a Tabs container is `this` one.
     let nodeAncestor = node.parentElement;
-    const tabsNode = findDOMNode(this);
     do {
-      if (nodeAncestor === tabsNode) return true;
+      if (nodeAncestor === this.node) return true;
       else if (nodeAncestor.getAttribute('data-tabs')) break;
 
       nodeAncestor = nodeAncestor.parentElement;
@@ -375,6 +360,7 @@ module.exports = React.createClass({
         )}
         onClick={this.handleClick}
         onKeyDown={this.handleKeyDown}
+        ref={(node) => { this.node = node; }}
         data-tabs
       >
         {this.getChildren()}

src/components/__tests__/Tab-test.js

@@ -1,4 +1,4 @@
-/* global jest, describe, it, expect */
+/* eslint-env jest */
 import React from 'react';
 import { shallow } from 'enzyme';
 import Tab from '../Tab';

src/components/__tests__/TabList-test.js

@@ -1,4 +1,4 @@
-/* global jest, describe, it, expect */
+/* eslint-env jest */
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import Tab from '../Tab';