Merge pull request #7 from Gusto/upgrade-react

Fix to work with React 15.0

Author: rylanc

package.json

@@ -26,7 +26,8 @@
     "masked-input"
   ],
   "peerDependencies": {
-    "react": ">=0.13.0"
+    "react": "^0.14 || ^15.0.0-rc || ^15.0",
+    "react-dom": "^0.14 || ^15.0.0-rc || ^15.0"
   },
   "devDependencies": {
     "babel-cli": "^6.5.1",
@@ -46,7 +47,9 @@
     "karma-mocha": "^0.2.2",
     "karma-mocha-reporter": "^2.0.0",
     "mocha": "^2.4.5",
-    "react": "^0.13.3",
+    "react": "^15.0.1",
+    "react-addons-test-utils": "^15.0.1",
+    "react-dom": "^15.0.1",
     "sinon": "^1.17.1",
     "sinon-chai": "^2.8.0",
     "uglify-js": "^2.6.2",

spec/MaskedField_spec.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import TestUtils from 'react/lib/ReactTestUtils';
+import ReactDOM from 'react-dom';
+import TestUtils from 'react-addons-test-utils';
 import LinkedStateMixin from 'react/lib/LinkedStateMixin';
 import MaskedField from '../src/MaskedField';
 import * as EventUtils from './EventUtils';
@@ -20,8 +21,8 @@ describe('MaskedField', function() {
   // - undo?
 
   function getFieldValue() {
-    const inputComponent = TestUtils.findRenderedDOMComponentWithTag(getField(), 'input');
-    return React.findDOMNode(inputComponent).value;
+    const input = TestUtils.findRenderedDOMComponentWithTag(getField(), 'input');
+    return input.value;
   }
 
   function cursorPosShouldEql(pos) {
@@ -819,7 +820,7 @@ describe('MaskedField', function() {
   });
 
   afterEach(function() {
-    React.unmountComponentAtNode(container);
+    ReactDOM.unmountComponentAtNode(container);
   });
 
   context("when the component isn't controlled", function() {
@@ -832,8 +833,8 @@ describe('MaskedField', function() {
       if (props.value && !props.onChange) {
         props.readOnly = true;
       }
-      component = React.render(<MaskedField {...props} />, container);
-      domNode = React.findDOMNode(component);
+      component = ReactDOM.render(<MaskedField {...props} />, container);
+      domNode = ReactDOM.findDOMNode(component);
     });
 
     afterEach(function() {
@@ -910,8 +911,8 @@ describe('MaskedField', function() {
     });
 
     beforeEach(function() {
-      component = React.render(<ControlledWrapper {...props} />, container);
-      domNode = React.findDOMNode(component);
+      component = ReactDOM.render(<ControlledWrapper {...props} />, container);
+      domNode = ReactDOM.findDOMNode(component);
     });
 
     setupTests(function() {
@@ -984,11 +985,11 @@ describe('MaskedField', function() {
     });
 
     beforeEach(function() {
-      component = React.render(
+      component = ReactDOM.render(
         <LinkWrapper mask='99/99/9999' value={value} />,
         container
       );
-      domNode = React.findDOMNode(component);
+      domNode = ReactDOM.findDOMNode(component);
       return simulateFocus();
     });
 
@@ -1032,12 +1033,14 @@ describe('MaskedField', function() {
   });
 
   context('when the parent component contains multiple inputs', function() {
+    let inputNode;
+    let fieldComponent;
     const Parent = React.createClass({
       render() {
         return (
           <div>
-            <input onChange={this._onChange} ref='input' />
-            <MaskedField mask='99-99-9999' ref='field' />
+            <input onChange={this._onChange} ref={c => (inputNode = c)} />
+            <MaskedField mask='99-99-9999' ref={c => (fieldComponent = c)} />
           </div>
         );
       },
@@ -1047,21 +1050,21 @@ describe('MaskedField', function() {
     });
 
     beforeEach(function() {
-      component = React.render(
+      component = ReactDOM.render(
         <Parent />,
         container
       );
-      return EventUtils.simulateFocus(React.findDOMNode(component.refs.input));
+      return EventUtils.simulateFocus(inputNode);
     });
 
     context('when the masked field does not have focus', function() {
       let fieldNode;
 
       describe('typing into a sibling input', function() {
         beforeEach(function() {
-          fieldNode = React.findDOMNode(component.refs.field);
+          fieldNode = ReactDOM.findDOMNode(fieldComponent);
           sinon.spy(fieldNode, 'setSelectionRange');
-          EventUtils.simulateChange(React.findDOMNode(component.refs.input), 'hello');
+          EventUtils.simulateChange(inputNode, 'hello');
         });
 
         afterEach(function() {

src/MaskedField.js

@@ -76,20 +76,19 @@ const MaskedField = React.createClass({
       }
     }
 
-    return <input {...this.props} {...props} type='text' />;
+    return <input ref={c => (this._input = c)} {...this.props} {...props} type='text' />;
   },
   _getSelection() {
     if (this._isMounted) {
-      return getSelection(React.findDOMNode(this));
+      return getSelection(this._input);
     } else {
       const cursorPos = (this._getPropsValue() || '').length;
       return {start: cursorPos, end: cursorPos};
     }
   },
   _setSelection(start, end = start) {
-    const domNode = React.findDOMNode(this);
-    if (domNode === document.activeElement) {
-      setSelection(domNode, start, end);
+    if (this._input === document.activeElement) {
+      setSelection(this._input, start, end);
     }
   },
   _getPropsValue() {