Update everything to React 15.1

Author: taion

.eslintrc

@@ -9,8 +9,7 @@
   },
   "parser": "babel-eslint",
   "plugins": [
-    "react",
-    "babel"
+    "react"
   ],
   "rules": {
     "constructor-super": 2,
@@ -22,7 +21,6 @@
     "no-underscore-dangle": 0,
     "no-unused-vars": [2, { "vars": "all", "args": "none" }],
     "no-var": 2,
-    "babel/object-shorthand": 2,
     "quotes": [2, "single", "avoid-escape"],
     "react/display-name": 0,
     "react/jsx-boolean-value": [2, "never"],

examples/App.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { findDOMNode } from 'react-dom';
+import ReactDOM, { findDOMNode } from 'react-dom';
 import Button from 'react-bootstrap/lib/Button';
-import Editor from '@jquense/component-playground';
+import Playground from '@monastic.panic/component-playground';
 
 import PropTable from './PropTable';
 
@@ -27,7 +27,7 @@ import './styles.less';
 import injectCss from './injectCss';
 
 let scope = {
-  React, findDOMNode, Button, injectCss, ...ReactOverlays, getOffset
+  React, ReactDOM, findDOMNode, Button, injectCss, ...ReactOverlays, getOffset
 };
 
 const Anchor = React.createClass({
@@ -52,14 +52,17 @@ const ExampleEditor = React.createClass({
   },
   render() {
     return (
-      <Editor
+      <Playground
         className='overlay-example'
         lineNumbers={false}
         lang="js"
         theme="neo"
         scope={scope}
         codeText={this.props.codeText}
         collapsableCode
+        babelConfig={{
+          presets: ['es2015-loose', 'react', 'stage-0']
+        }}
       />
     );
   }
@@ -159,4 +162,4 @@ const Example = React.createClass({
   }
 });
 
-React.render(<Example/>, document.getElementById('app-container'));
+ReactDOM.render(<Example/>, document.getElementById('app-container'));

examples/PropTable.js

@@ -1,4 +1,4 @@
-import merge from 'lodash/object/merge';
+import merge from 'lodash/merge';
 import React from 'react';
 
 import Label from 'react-bootstrap/lib/Label';

examples/server.js

@@ -4,9 +4,9 @@ let config = require('../webpack/examples.config');
 
 new WebpackDevServer(webpack(config), {
 
+  contentBase: 'examples',
   publicPath: '/static/',
   hot: true,
-  historyApiFallback: true,
   quiet: false,
   progress: true,
   stats: {

package.json

@@ -7,8 +7,7 @@
   "license": "MIT",
   "main": "lib/index.js",
   "files": [
-    "lib/",
-    "CHANGELOG.md"
+    "lib"
   ],
   "keywords": [
     "react-overlays",
@@ -28,71 +27,71 @@
     "build:examples": "npm run clean:examples && babel-node ./webpack/run-webpack --config docs.config.js",
     "examples": "npm run clean:examples && babel-node ./examples/server.js",
     "lint": "eslint src test",
-    "test": "npm run lint && karma start --single-run",
+    "test": "npm run lint && npm run testonly",
+    "testonly": "karma start --single-run",
     "tdd": "karma start",
-    "coverage": "COVERAGE=true karma start --single-run",
+    "coverage": "COVERAGE=true npm run testonly",
     "release": "release"
   },
   "peerDependencies": {
     "react": ">=0.14.0",
     "react-dom": ">=0.14.0"
   },
   "devDependencies": {
-    "@jquense/component-playground": "jquense/component-playground",
-    "babel": "5.6.14",
-    "babel-core": "^5.8.34",
-    "babel-eslint": "^4.1.6",
-    "babel-loader": "^5.3.0",
+    "@monastic.panic/component-playground": "jquense/component-playground",
+    "babel": "^5.8.38",
+    "babel-core": "^5.8.38",
+    "babel-eslint": "^6.1.0",
+    "babel-loader": "^5.4.0",
     "babel-plugin-object-assign": "^1.2.1",
-    "chai": "^3.2.0",
-    "component-metadata-loader": "^2.0.0",
-    "css-loader": "^0.15.6",
-    "es5-shim": "^4.1.7",
-    "eslint": "^1.10.1",
-    "eslint-plugin-babel": "^3.0.0",
-    "eslint-plugin-mocha": "^1.1.0",
-    "eslint-plugin-react": "^3.1.0",
-    "isparta-loader": "^0.2.0",
-    "jquery": "^2.1.4",
-    "karma": "^0.13.3",
-    "karma-chrome-launcher": "^0.2.0",
-    "karma-cli": "^0.1.0",
-    "karma-coverage": "^0.4.2",
-    "karma-coveralls": "^1.1.0",
-    "karma-mocha": "^0.2.0",
-    "karma-mocha-reporter": "^1.0.4",
-    "karma-sinon-chai": "^1.0.0",
-    "karma-sourcemap-loader": "^0.3.5",
+    "chai": "^3.5.0",
+    "component-metadata-loader": "^2.0.3",
+    "css-loader": "^0.23.1",
+    "es5-shim": "^4.5.9",
+    "eslint": "^3.0.1",
+    "eslint-plugin-mocha": "^4.0.0",
+    "eslint-plugin-react": "^5.2.2",
+    "isparta-loader": "^1.0.0",
+    "jquery": "^3.1.0",
+    "karma": "^1.1.1",
+    "karma-chrome-launcher": "^1.0.1",
+    "karma-cli": "^1.0.1",
+    "karma-coverage": "^1.1.0",
+    "karma-coveralls": "^1.1.2",
+    "karma-mocha": "^1.1.1",
+    "karma-mocha-reporter": "^2.0.4",
+    "karma-sinon-chai": "^1.2.2",
+    "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.7.0",
-    "less": "^2.5.1",
-    "less-loader": "^2.2.0",
-    "lodash": "^3.10.0",
-    "lolex": "^1.4.0",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
+    "lodash": "^4.13.1",
+    "lolex": "^1.5.0",
     "marked": "^0.3.5",
-    "mocha": "^2.2.5",
-    "node-libs-browser": "^0.5.2",
+    "mocha": "^2.5.3",
+    "node-libs-browser": "^1.0.0",
     "raw-loader": "^0.5.1",
-    "react": "^0.14.0",
-    "react-addons-test-utils": "^0.14.0",
-    "react-bootstrap": "^0.27.3",
-    "react-component-metadata": "^1.2.2",
-    "react-dom": "^0.14.0",
-    "react-hot-loader": "^1.2.7",
-    "release-script": "^0.2.1",
-    "rimraf": "^2.4.2",
-    "simulant": "^0.1.5",
-    "sinon": "^1.15.4",
+    "react": "~15.1.0",
+    "react-addons-test-utils": "~15.1.0",
+    "react-bootstrap": "^0.29.5",
+    "react-component-metadata": "^2.1.1",
+    "react-dom": "~15.1.0",
+    "react-hot-loader": "^1.3.0",
+    "release-script": "^1.0.2",
+    "rimraf": "^2.5.3",
+    "simulant": "^0.2.2",
+    "sinon": "^1.17.4",
     "sinon-chai": "^2.8.0",
-    "style-loader": "^0.12.3",
-    "teaspoon": "^6.1.1",
-    "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.12.0",
-    "yargs": "^3.14.0"
+    "style-loader": "^0.13.1",
+    "teaspoon": "^6.4.1",
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.14.1",
+    "yargs": "^4.7.1"
   },
   "dependencies": {
-    "classnames": "^2.1.3",
-    "dom-helpers": "^2.3.0",
-    "react-prop-types": "^0.2.1",
-    "warning": "^2.1.0"
+    "classnames": "^2.2.5",
+    "dom-helpers": "^2.4.0",
+    "react-prop-types": "^0.3.2",
+    "warning": "^3.0.0"
   }
 }

src/AutoAffix.js

@@ -116,10 +116,11 @@ class AutoAffix extends React.Component {
   }
 
   render() {
-    const {container, autoWidth, viewportOffsetTop, children, ...props} =
-      this.props;
+    const {autoWidth, viewportOffsetTop, children, ...props} = this.props;
     const {offsetTop, offsetBottom, width} = this.state;
 
+    delete props.container;
+
     const effectiveOffsetTop = Math.max(offsetTop, viewportOffsetTop || 0);
 
     let {affixStyle, bottomStyle} = this.props;

src/Modal.js

@@ -199,26 +199,30 @@ const Modal = React.createClass({
   },
 
   render() {
-    let {
+    const {
+      show,
+      container,
       children,
       transition: Transition,
       backdrop,
       dialogTransitionTimeout,
-      ...props } = this.props;
-
-    let { onExit, onExiting, onEnter, onEntering, onEntered } = props;
-
-    let show = !!props.show;
-    let dialog = React.Children.only(this.props.children);
+      className,
+      style,
+      onExit,
+      onExiting,
+      onEnter,
+      onEntering,
+      onEntered,
+    } = this.props;
 
+    let dialog = React.Children.only(children);
 
     const mountModal = show || (Transition && !this.state.exited);
-
     if (!mountModal) {
       return null;
     }
 
-    let { role, tabIndex } = dialog.props;
+    const { role, tabIndex } = dialog.props;
 
     if (role === undefined || tabIndex === undefined) {
       dialog = cloneElement(dialog, {
@@ -249,13 +253,13 @@ const Modal = React.createClass({
     return (
       <Portal
         ref={this.setMountNode}
-        container={props.container}
+        container={container}
       >
         <div
           ref={'modal'}
-          role={props.role || 'dialog'}
-          style={props.style}
-          className={props.className}
+          role={role || 'dialog'}
+          style={style}
+          className={className}
         >
           { backdrop && this.renderBackdrop() }
           { dialog }

test/AffixSpec.js

@@ -30,8 +30,6 @@ describe('<Affix>', () => {
   }
 
   class Content extends React.Component {
-    static renderCount;
-
     render() {
       ++Content.renderCount;
       return <div {...this.props}>Content</div>;

test/PositionSpec.js

@@ -1,4 +1,4 @@
-import pick from 'lodash/object/pick';
+import pick from 'lodash/pick';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactTestUtils from 'react-addons-test-utils';

webpack/example-loader.js

@@ -6,7 +6,7 @@ function exampleLoader(source){
 
   source = source
     .replace(/import.+$/gm, '') //remove imports
-    .replace(/export default (\w+)/g, (_, name) => `React.render(<${name}/>, mountNode)`)
+    .replace(/export default (\w+)/g, (_, name) => `ReactDOM.render(<${name}/>, mountNode)`)
     .trim(); //transform export
 
   return source;