Merge pull request #41 from dozoisch/react_15_5

Changed updated for react 15.5

Author: dozoisch

package.json

@@ -34,8 +34,8 @@
   },
   "homepage": "https://github.com/dozoisch/react-google-recaptcha",
   "peerDependencies": {
-    "react": ">=0.14",
-    "react-async-script": ">= 0.6.0"
+    "react": ">=0.15.5",
+    "react-async-script": ">= 0.9.0"
   },
   "devDependencies": {
     "babel-cli": "^6.0.0",
@@ -65,11 +65,13 @@
     "mocha": "~2.3.3",
     "mt-changelog": "^0.6.2",
     "phantomjs": "^1.9.18",
-    "react": "^15.4.2",
-    "react-addons-test-utils": "^15.4.2",
-    "react-async-script": "^0.6.0",
-    "react-dom": "^15.4.2",
+    "react": "^15.5.0",
+    "react-async-script": "^0.9.0",
+    "react-dom": "^15.5.0",
     "release-script": "^0.5.3",
     "webpack": "~1.14.0"
+  },
+  "dependencies": {
+    "prop-types": ">=15.5.0"
   }
 }

src/recaptcha.js

@@ -1,65 +1,43 @@
-import React, { PropTypes } from "react";
+import React from "react";
+import PropTypes from "prop-types";
 
-const ReCAPTCHA = React.createClass({
-  displayName: "reCAPTCHA",
-  propTypes: {
-    sitekey: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-    grecaptcha: PropTypes.object,
-    theme: PropTypes.oneOf(["dark", "light"]),
-    type: PropTypes.oneOf(["image", "audio"]),
-    tabindex: PropTypes.number,
-    onExpired: PropTypes.func,
-    size: PropTypes.oneOf(["compact", "normal", "invisible"]),
-    stoken: PropTypes.string,
-    badge: PropTypes.oneOf(["bottomright", "bottomleft ", "inline"]),
-  },
+export default class ReCAPTCHA extends React.Component {
+  constructor() {
+    super();
+    this.state = {};
+  }
 
-  getInitialState () {
-    return {};
-  },
-
-  getDefaultProps () {
-    return {
-      theme: "light",
-      type: "image",
-      tabindex: 0,
-      size: "normal",
-      badge: "bottomright",
-    };
-  },
-
-  getValue () {
+  getValue() {
     if (this.props.grecaptcha && this.state.widgetId !== undefined) {
       return this.props.grecaptcha.getResponse(this.state.widgetId);
     }
     return null;
-  },
+  }
 
-  execute () {
+  execute() {
     const { grecaptcha } = this.props;
     const { widgetId } = this.state;
 
     if (grecaptcha && widgetId !== undefined) {
       return grecaptcha.execute(widgetId);
     }
-  },
+  }
 
-  reset () {
+  reset() {
     if (this.props.grecaptcha && this.state.widgetId !== undefined) {
       this.props.grecaptcha.reset(this.state.widgetId);
     }
-  },
+  }
 
-  handleExpired () {
+  handleExpired() {
     if (this.props.onExpired) {
       this.props.onExpired();
     } else if (this.props.onChange) {
       this.props.onChange(null);
     }
-  },
+  }
 
-  explicitRender (cb) {
+  explicitRender(cb) {
     if (this.props.grecaptcha && this.state.widgetId === undefined) {
       const id = this.props.grecaptcha.render(this.refs.captcha, {
         sitekey: this.props.sitekey,
@@ -76,25 +54,44 @@ const ReCAPTCHA = React.createClass({
         widgetId: id,
       }, cb);
     }
-  },
+  }
 
-  componentDidMount () {
+  componentDidMount() {
     this.explicitRender();
-  },
+  }
 
-  componentDidUpdate () {
+  componentDidUpdate() {
     this.explicitRender();
-  },
+  }
 
-  render () {
+  render() {
     // consume properties owned by the reCATPCHA, pass the rest to the div so the user can style it.
     /* eslint-disable no-unused-vars */
     const { sitekey, onChange, theme, type, tabindex, onExpired, size, stoken, grecaptcha, badge, ...childProps } = this.props;
     /* eslint-enable no-unused-vars */
     return (
       <div {...childProps} ref="captcha" />
     );
-  },
-});
+  }
+}
 
-export default ReCAPTCHA;
+ReCAPTCHA.displayName = "ReCAPTCHA";
+ReCAPTCHA.propTypes = {
+  sitekey: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  grecaptcha: PropTypes.object,
+  theme: PropTypes.oneOf(["dark", "light"]),
+  type: PropTypes.oneOf(["image", "audio"]),
+  tabindex: PropTypes.number,
+  onExpired: PropTypes.func,
+  size: PropTypes.oneOf(["compact", "normal", "invisible"]),
+  stoken: PropTypes.string,
+  badge: PropTypes.oneOf(["bottomright", "bottomleft ", "inline"]),
+};
+ReCAPTCHA.defaultProps = {
+  theme: "light",
+  type: "image",
+  tabindex: 0,
+  size: "normal",
+  badge: "bottomright",
+};

test/recaptcha-spec.js

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import ReactTestUtils from "react-addons-test-utils";
+import ReactTestUtils from "react-dom/test-utils";
 import ReCAPTCHA from "../src/recaptcha"; // eslint-disable-line no-unused-vars
 
 describe("ReCAPTCHA", () => {

test/recaptcha-wrapper-spec.js

@@ -1,5 +1,5 @@
 import React from "react";
-import ReactTestUtils from "react-addons-test-utils";
+import ReactTestUtils from "react-dom/test-utils";
 import ReCAPTCHA from "../src/recaptcha-wrapper"; // eslint-disable-line no-unused-vars
 
 const VALUE = "some value";
@@ -21,6 +21,9 @@ describe("ReCAPTCHAWrapper", () => {
   beforeEach(() => {
     window.grecaptcha = grecaptchaMock;
   });
+  it("should be wrapped properly", () => {
+    assert.equal(ReCAPTCHA.displayName, "AsyncScriptLoader(ReCAPTCHA)");
+  });
   it("should proxy functions", () => {
     const instance = ReactTestUtils.renderIntoDocument(
       <ReCAPTCHA sitekey="xxx" />,