Update react-components with support for React 16.3.0

Summary:
As part of upgrading to React 16 in webapp, we need to update these components.
Specifically, changing `React.PropTypes` use cases to require `prop-types` library,
and utilizing `createReactClass` instead of `React.createClass`.

Test Plan: - Run `make test`, `make all`

Reviewers: emily, john, scottgrant

Reviewed By: scottgrant

Subscribers: tom

Differential Revision: https://phabricator.khanacademy.org/D45539

Author: mpolyak

js/blur-input.jsx

@@ -1,4 +1,6 @@
 const React = require("react");
+const createReactClass = require("create-react-class");
+const PropTypes = require("prop-types");
 
 /* You know when you want to propagate input to a parent...
  * but then that parent does something with the input...
@@ -12,12 +14,12 @@ const React = require("react");
  * Enough melodrama. Its an input that only sends changes
  * to its parent on blur.
  */
-const BlurInput = React.createClass({
+const BlurInput = createReactClass({
     propTypes: {
-        className: React.PropTypes.string,
-        style: React.PropTypes.any,
-        value: React.PropTypes.string.isRequired,
-        onChange: React.PropTypes.func.isRequired,
+        className: PropTypes.string,
+        style: PropTypes.any,
+        value: PropTypes.string.isRequired,
+        onChange: PropTypes.func.isRequired,
     },
     getInitialState: function() {
         return {value: this.props.value};

js/button-group.jsx

@@ -19,19 +19,21 @@
 
 const React = require('react');
 const ReactDOM = require("react-dom");
+const createReactClass = require("create-react-class");
+const PropTypes = require("prop-types");
 const styles = require('./styles.js');
 const css = require("aphrodite").css;
 
-const ButtonGroup = React.createClass({
+const ButtonGroup = createReactClass({
     propTypes: {
-        value: React.PropTypes.any,
-        buttons: React.PropTypes.arrayOf(React.PropTypes.shape({
-            value: React.PropTypes.any.isRequired,
-            content: React.PropTypes.node,
-            title: React.PropTypes.string,
+        value: PropTypes.any,
+        buttons: PropTypes.arrayOf(PropTypes.shape({
+            value: PropTypes.any.isRequired,
+            content: PropTypes.node,
+            title: PropTypes.string,
         })).isRequired,
-        onChange: React.PropTypes.func.isRequired,
-        allowEmpty: React.PropTypes.bool,
+        onChange: PropTypes.func.isRequired,
+        allowEmpty: PropTypes.bool,
     },
 
     getDefaultProps: function() {

js/drag-target.jsx

@@ -23,15 +23,17 @@
 // * only respond to certain types of drags (only images for instance)!
 
 const React = require('react');
+const createReactClass = require('create-react-class');
+const PropTypes = require('prop-types');
 
-const DragTarget = React.createClass({
+const DragTarget = createReactClass({
     propTypes: {
         // All props not listed here are forwarded to the root element without
         // modification.
-        onDrop: React.PropTypes.func.isRequired,
-        component: React.PropTypes.any,  // component type
-        shouldDragHighlight: React.PropTypes.func,
-        style: React.PropTypes.any,
+        onDrop: PropTypes.func.isRequired,
+        component: PropTypes.any,  // component type
+        shouldDragHighlight: PropTypes.func,
+        style: PropTypes.any,
     },
     getDefaultProps: function() {
         return {

js/info-tip.jsx

@@ -1,5 +1,7 @@
 const {StyleSheet, css} = require("aphrodite");
 const React = require('react');
+const createReactClass = require('create-react-class');
+const PropTypes = require('prop-types');
 
 const colors = {
     grayLight: '#aaa',
@@ -89,9 +91,9 @@ const questionMark = 'data:image/png;base64,' +
     'gx99kue5GRp/gIOZuZGvNpTNwjD8oliANU+qqqKu6/TQBdymN57AHjzBT+B6Jx79BRgA' +
     'vc49kQA4yxgAAAAASUVORK5CYII=';
 
-const InfoTip = React.createClass({
+const InfoTip = createReactClass({
     propTypes: {
-        children: React.PropTypes.node,
+        children: PropTypes.node,
     },
 
     getInitialState: function() {

js/modal.jsx

@@ -21,6 +21,8 @@
 
 const aphrodite = require("aphrodite");
 const React = require("react");
+const createReactClass = require("create-react-class");
+const PropTypes = require("prop-types");
 
 const css = aphrodite.css;
 const StyleSheet = aphrodite.StyleSheet;
@@ -50,24 +52,24 @@ const styles = StyleSheet.create({
     },
 });
 
-const Modal = React.createClass({
+const Modal = createReactClass({
     propTypes: {
-        children: React.PropTypes.node,
+        children: PropTypes.node,
 
-        className: React.PropTypes.string,
+        className: PropTypes.string,
 
         // Close the modal when esc is pressed? Defaults to true.
-        keyboard: React.PropTypes.bool,
+        keyboard: PropTypes.bool,
 
-        onClose: React.PropTypes.func,
+        onClose: PropTypes.func,
 
         // TODO(joel) reimplement
         // Bootstrap modal's backdrop argument: Includes a modal-backdrop
         // element. Alternatively, specify static for a backdrop which doesn't
         // close the modal on click. Defaults to true.
-        backdrop: React.PropTypes.oneOfType([
-            React.PropTypes.bool,
-            React.PropTypes.string,
+        backdrop: PropTypes.oneOfType([
+            PropTypes.bool,
+            PropTypes.string,
         ]),
     },
 

js/multi-button-group.jsx

@@ -18,19 +18,21 @@
 
 const React = require('react');
 const ReactDOM = require("react-dom");
+const createReactClass = require("create-react-class");
+const PropTypes = require("prop-types");
 const styles = require('./styles.js');
 const css = require("aphrodite").css;
 
-const MultiButtonGroup = React.createClass({
+const MultiButtonGroup = createReactClass({
     propTypes: {
-        values: React.PropTypes.arrayOf(React.PropTypes.any),
-        buttons: React.PropTypes.arrayOf(React.PropTypes.shape({
-            value: React.PropTypes.any.isRequired,
-            content: React.PropTypes.node,
-            title: React.PropTypes.string,
+        values: PropTypes.arrayOf(PropTypes.any),
+        buttons: PropTypes.arrayOf(PropTypes.shape({
+            value: PropTypes.any.isRequired,
+            content: PropTypes.node,
+            title: PropTypes.string,
         })).isRequired,
-        onChange: React.PropTypes.func.isRequired,
-        allowEmpty: React.PropTypes.bool,
+        onChange: PropTypes.func.isRequired,
+        allowEmpty: PropTypes.bool,
     },
 
     getDefaultProps: function() {

js/sortable.jsx

@@ -1,10 +1,12 @@
 const React = require('react');
 const ReactDOM = require("react-dom");
+const createReactClass = require("create-react-class");
+const PropTypes = require("prop-types");
 
-const PT = React.PropTypes;
+const PT = PropTypes;
 
 // Takes an array of components to sort
-const SortableArea = React.createClass({
+const SortableArea = createReactClass({
     propTypes: {
         className: PT.string,
         components: PT.arrayOf(PT.node).isRequired,
@@ -125,7 +127,7 @@ const SortableArea = React.createClass({
 });
 
 // An individual sortable item
-const SortableItem = React.createClass({
+const SortableItem = createReactClass({
     propTypes: {
         area: PT.shape({
             onDragEnter: PT.func.isRequired,

js/tex.jsx

@@ -8,6 +8,8 @@
 const PureRenderMixin = require("react-addons-pure-render-mixin");
 const React = require("react");
 const ReactDOM = require("react-dom");
+const createReactClass = require("create-react-class");
+const PropTypes = require("prop-types");
 
 const katexA11y = require("./katex-a11y.js");
 
@@ -84,13 +86,13 @@ const srOnly = {
     width: "1px",
 };
 
-const TeX = React.createClass({
+const TeX = createReactClass({
     propTypes: {
-        children: React.PropTypes.node,
-        katexOptions: React.PropTypes.any,
-        onClick: React.PropTypes.func,
-        onRender: React.PropTypes.func,
-        style: React.PropTypes.any,
+        children: PropTypes.node,
+        katexOptions: PropTypes.any,
+        onClick: PropTypes.func,
+        onRender: PropTypes.func,
+        style: PropTypes.any,
     },
 
     mixins: [PureRenderMixin],

js/timeago.jsx

@@ -13,14 +13,16 @@
  */
 
 const React = require("react");
+const createReactClass = require("create-react-class");
+const PropTypes = require("prop-types");
 const SetIntervalMixin = require("./set-interval-mixin.jsx");
 const moment = require("moment");
 
 // TODO(joel) i18n
-const TimeAgo = React.createClass({
+const TimeAgo = createReactClass({
     propTypes: {
-        refreshMillis: React.PropTypes.number,
-        time: React.PropTypes.any.isRequired,
+        refreshMillis: PropTypes.number,
+        time: PropTypes.any.isRequired,
     },
     mixins: [SetIntervalMixin],
     componentDidMount: function() {

js/timeout-transition-group.jsx

@@ -16,7 +16,9 @@
 
 const React = require('react');
 const ReactDOM = require('react-dom');
-const ReactTransitionGroup = require('react-addons-transition-group');
+const createReactClass = require("create-react-class");
+const PropTypes = require("prop-types");
+const TransitionGroup = require('react-transition-group').TransitionGroup;
 
 const TICK = 17;
 
@@ -116,14 +118,14 @@ function hasClass(element, className) {
     }
 }
 
-const TimeoutTransitionGroupChild = React.createClass({
+const TimeoutTransitionGroupChild = createReactClass({
     propTypes: {
-        children: React.PropTypes.node,
-        enter: React.PropTypes.bool,
-        enterTimeout: React.PropTypes.number.isRequired,
-        name: React.PropTypes.string.isRequired,
-        leave: React.PropTypes.bool,
-        leaveTimeout: React.PropTypes.number.isRequired,
+        children: PropTypes.node,
+        enter: PropTypes.bool,
+        enterTimeout: PropTypes.number.isRequired,
+        name: PropTypes.string.isRequired,
+        leave: PropTypes.bool,
+        leaveTimeout: PropTypes.number.isRequired,
     },
 
     componentWillMount: function() {
@@ -210,13 +212,13 @@ const TimeoutTransitionGroupChild = React.createClass({
     },
 });
 
-const TimeoutTransitionGroup = React.createClass({
+const TimeoutTransitionGroup = createReactClass({
     propTypes: {
-        enterTimeout: React.PropTypes.number.isRequired,
-        leaveTimeout: React.PropTypes.number.isRequired,
-        transitionName: React.PropTypes.string.isRequired,
-        transitionEnter: React.PropTypes.bool,
-        transitionLeave: React.PropTypes.bool,
+        enterTimeout: PropTypes.number.isRequired,
+        leaveTimeout: PropTypes.number.isRequired,
+        transitionName: PropTypes.string.isRequired,
+        transitionEnter: PropTypes.bool,
+        transitionLeave: PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -242,10 +244,7 @@ const TimeoutTransitionGroup = React.createClass({
 
     render: function() {
         return (
-            <ReactTransitionGroup
-                transitionName={this.props.transitionName}
-                transitionEnter={this.props.transitionEnter}
-                transitionLeave={this.props.transitionLeave}
+            <TransitionGroup
                 childFactory={this._wrapChild}
             />
         );