Upgrade to 0.14.x syntax

davidchin · davidchin · commit 820ff466e434 · 2015-11-29T07:41:47.000+11:00
diff --git a/.eslintrc b/.eslintrc
@@ -11,6 +11,8 @@ rules:
   semi:
     - 2
     - always
+  react/no-did-update-set-state:
+    - 0
   react/sort-comp:
     - 2
     - order
diff --git a/example/index.html b/example/index.html
@@ -9,7 +9,8 @@
 <body>
   <div id="app"></div>
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
+  <script src="https://fb.me/react-0.14.3.js"></script>
+  <script src="https://fb.me/react-dom-0.14.3.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.js"></script>
   <script src="./build/example.js"></script>
 </body>
diff --git a/example/js/example.js b/example/js/example.js
@@ -1,7 +1,7 @@
-import React from 'react';
+import ReactDOM from 'react-dom';
 import App from 'App';
 
-React.render(
+ReactDOM.render(
   <App />,
   document.getElementById('app')
 );
diff --git a/karma.conf.js b/karma.conf.js
@@ -6,6 +6,7 @@ module.exports = function(config) {
 
     files: [
       'node_modules/react/dist/react.js',
+      'node_modules/react-dom/dist/react-dom.js',
       'node_modules/lodash/index.js',
       'node_modules/babelify/polyfill.js',
       'src/**/*.js',
diff --git a/package.json b/package.json
@@ -27,15 +27,15 @@
     "browserify": "^11.0.0",
     "browserify-shim": "^3.8.10",
     "del": "^1.2.0",
-    "eslint": "^1.0.0",
-    "eslint-config-airbnb": "0.0.7",
-    "eslint-plugin-react": "^3.1.0",
+    "eslint": "^1.10.2",
+    "eslint-config-airbnb": "^1.0.2",
+    "eslint-plugin-react": "^3.10.0",
     "gulp": "^3.9.0",
     "gulp-babel": "^5.2.1",
     "gulp-bump": "^1.0.0",
     "gulp-concat": "^2.6.0",
     "gulp-connect": "^2.2.0",
-    "gulp-eslint": "^0.15.0",
+    "gulp-eslint": "^1.1.1",
     "gulp-git": "^1.4.0",
     "gulp-minify-css": "^1.2.0",
     "gulp-postcss": "^6.0.0",
@@ -55,22 +55,25 @@
     "karma-phantomjs2-launcher": "^0.3.2",
     "lodash": "^3.10.0",
     "phantomjs": "^1.9.17",
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0",
     "run-sequence": "^1.1.4",
     "semver": "^5.0.3",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
     "watchify": "^3.3.0"
   },
   "peerDependencies": {
-    "react": "^0.13.3"
+    "react": "^0.14.0"
   },
   "browserify": {
     "transform": [
       "browserify-shim"
     ]
   },
   "browserify-shim": {
-    "react": "global:React"
+    "react": "global:React",
+    "react-dom": "global:ReactDOM"
   },
   "scripts": {
     "build": "gulp build",
diff --git a/src/InputRange/Slider.js b/src/InputRange/Slider.js
@@ -8,9 +8,6 @@ class Slider extends React.Component {
     // Initial state
     this.state = {};
 
-    // Enable touch
-    React.initializeTouchEvents(true);
-
     // Auto-bind
     autobind([
       'handleClick',
@@ -35,8 +32,8 @@ class Slider extends React.Component {
 
   // Getters / Setters
   get document() {
-    const element = React.findDOMNode(this);
-    const document = element.ownerDocument;
+    const { slider } = this.refs;
+    const document = slider.ownerDocument;
 
     return document;
   }
@@ -111,7 +108,10 @@ class Slider extends React.Component {
     const style = this.state.style || {};
 
     return (
-      <span className={ classNames.sliderContainer } style={ style }>
+      <span
+        className={ classNames.sliderContainer }
+        ref="slider"
+        style={ style }>
         <span className={ classNames.labelValue }>
           <span className={ classNames.labelContainer }>
             { this.props.value }
diff --git a/src/InputRange/Track.js b/src/InputRange/Track.js
@@ -8,9 +8,6 @@ class Track extends React.Component {
     // Initial state
     this.state = {};
 
-    // Enable touch
-    React.initializeTouchEvents(true);
-
     // Auto-bind
     autobind([
       'handleMouseDown',
@@ -29,7 +26,7 @@ class Track extends React.Component {
 
   // Getters / Setters
   get clientRect() {
-    const track = React.findDOMNode(this);
+    const { track } = this.refs;
     const clientRect = track.getClientRects()[0];
 
     return clientRect;
@@ -75,9 +72,10 @@ class Track extends React.Component {
 
     return (
       <div
+        className={ classNames.trackContainer }
         onMouseDown={ this.handleMouseDown }
         onTouchStart={ this.handleTouchStart }
-        className={ classNames.trackContainer }>
+        ref="track">
         <div
           style={ activeTrackStyle }
           className={ classNames.trackActive }>
diff --git a/src/InputRange/propTypes.js b/src/InputRange/propTypes.js
@@ -1,4 +1,4 @@
-import { objectOf } from './util';
+import { isNumber, objectOf } from './util';
 
 function numberPredicate(value) {
   return typeof value === 'number';
@@ -19,8 +19,8 @@ export function maxMinValuePropType(props) {
     return new Error('`value` or `defaultValue` must be a number');
   }
 
-  if (!value &&
-      !defaultValue &&
+  if (!isNumber(value) &&
+      !isNumber(defaultValue) &&
       !objectOf(values, numberPredicate) &&
       !objectOf(defaultValues, numberPredicate)) {
     return new Error('`values` or `defaultValues` must be an object of numbers');
diff --git a/tasks/run.js b/tasks/run.js
@@ -1,7 +1,10 @@
 import gulp from 'gulp';
+import runSequence from 'run-sequence';
 
-gulp.task('run', [
-  'build',
-  'watch',
-  'connect',
-]);
+gulp.task('run', (callback) => {
+  runSequence(
+    'build',
+    ['watch', 'connect'],
+    callback
+  );
+});
diff --git a/tasks/watch.js b/tasks/watch.js
@@ -10,10 +10,10 @@ gulp.task('watch', [
 ]);
 
 gulp.task('watch:script', () => {
-  compileScript(true, config.watch.script.example);
   compileScript(true, config.watch.script.build, () => {
     gulp.start('lint:script');
   });
+  compileScript(true, config.watch.script.example);
 });
 
 gulp.task('watch:style', () => {
diff --git a/test/InputRange.spec.js b/test/InputRange.spec.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import InputRange from 'InputRange';
 import _ from 'lodash';
-import { removeComponent, renderComponent } from './TestUtil';
+import { renderComponent } from './TestUtil';
 
 let inputRange;
 
@@ -17,10 +17,6 @@ describe('InputRange', () => {
     inputRange = renderComponent(<InputRange maxValue={20} minValue={0} values={values} />);
   });
 
-  afterEach(() => {
-    removeComponent(inputRange);
-  });
-
   describe('initialize', () => {
     it('should set default class names for its sub-components and itself', () => {
       expect(inputRange.props.classNames).toEqual({
@@ -151,7 +147,6 @@ describe('InputRange', () => {
     describe('if `onChange` callback is provided', () => {
       describe('if it is an initial change', () => {
         beforeEach(() => {
-          removeComponent(inputRange);
           inputRange = renderComponent(<InputRange maxValue={20} minValue={0} values={values} onChange={onChange} />);
           nextState = Object.assign({}, inputRange.state, { didChange: false });
         });
@@ -167,7 +162,6 @@ describe('InputRange', () => {
       describe('if it is not an initial change', () => {
         describe('if multiple values is provided', () => {
           beforeEach(() => {
-            removeComponent(inputRange);
             inputRange = renderComponent(<InputRange maxValue={20} minValue={0} values={values} onChange={onChange} />);
             nextState = Object.assign({}, inputRange.state, { didChange: true });
           });
@@ -186,7 +180,6 @@ describe('InputRange', () => {
           beforeEach(() => {
             value = 1;
 
-            removeComponent(inputRange);
             inputRange = renderComponent(<InputRange maxValue={20} minValue={0} value={value} onChange={onChange} />);
             nextState = Object.assign({}, inputRange.state, { didChange: true });
           });
@@ -572,7 +565,8 @@ describe('InputRange', () => {
     });
 
     it('should not set the position of a slider if disabled', () => {
-      inputRange.props.disabled = true;
+      inputRange = renderComponent(<InputRange disabled={true} defaultValue={0}/>);
+      spyOn(inputRange, 'setPosition');
       inputRange.handleSliderMouseMove(slider, event);
 
       expect(inputRange.setPosition).not.toHaveBeenCalled();
@@ -600,7 +594,8 @@ describe('InputRange', () => {
       });
 
       it('should not decrement value if disabled', () => {
-        inputRange.props.disabled = true;
+        inputRange = renderComponent(<InputRange disabled={true} defaultValue={10}/>);
+        spyOn(inputRange, 'decrementValue');
         inputRange.handleSliderKeyDown(slider, event);
 
         expect(inputRange.decrementValue).not.toHaveBeenCalled();
@@ -624,7 +619,8 @@ describe('InputRange', () => {
       });
 
       it('should not increment value if disabled', () => {
-        inputRange.props.disabled = true;
+        inputRange = renderComponent(<InputRange disabled={true} defaultValue={10}/>);
+        spyOn(inputRange, 'incrementValue');
         inputRange.handleSliderKeyDown(slider, event);
 
         expect(inputRange.incrementValue).not.toHaveBeenCalled();
@@ -653,7 +649,8 @@ describe('InputRange', () => {
     });
 
     it('should not set a new position if disabled', () => {
-      inputRange.props.disabled = true;
+      inputRange = renderComponent(<InputRange disabled={true} defaultValue={10}/>);
+      spyOn(inputRange, 'setPosition');
       inputRange.handleTrackMouseDown(track, position);
 
       expect(inputRange.setPosition).not.toHaveBeenCalled();
diff --git a/test/TestUtil.js b/test/TestUtil.js
@@ -1,25 +1,20 @@
-import React from 'react';
-
-function removeComponent(component) {
-  const domNode = React.findDOMNode(component);
-
-  if (!domNode) {
-    return;
-  }
-
-  React.unmountComponentAtNode(domNode);
-}
+import ReactDOM from 'react-dom';
 
 function renderComponent(jsx) {
-  const domNode = document.createElement('div');
-
-  document.body.appendChild(domNode);
+  let container = document.getElementById('container');
+
+  if (container) {
+    ReactDOM.unmountComponentAtNode(container);
+  } else {
+    container = document.createElement('div');
+    container.id = 'container';
+    document.body.appendChild(container);
+  }
 
-  return React.render(jsx, domNode);
+  return ReactDOM.render(jsx, container);
 }
 
 const TestUtil = {
-  removeComponent,
   renderComponent,
 };
 
