Convert createReactClass components to ES6 classes (Comcast#1094)

* Convert React.class components to ES6 class components

* Add missing prop types

* Convert canvas to class component

* Remove peer dependency on create-react-class package

* Conver DateRangeEditor to ES6 class component

* Remove create-react-class peer dependency

* Fix deleted text

* Update migration guide

Author: amanmahajan7

config/webpack.common.config.js

@@ -35,12 +35,6 @@ const config = {
       commonjs2: 'react-dom',
       amd: 'react-dom'
     },
-    'create-react-class': {
-      root: 'createReactClass',
-      commonjs: 'create-react-class',
-      commonjs2: 'create-react-class',
-      amd: 'create-react-class'
-    },
     'react/addons': 'React',
     moment: 'moment'
   },

migrations/v2-v3.md

@@ -2,10 +2,10 @@
 
 ### Differences
 ### 2.0.0
- - Bundles `create-react-class` package with `react-data-grid`; 
+ - Bundles `create-react-class` package with `react-data-grid`;
 
 ### 3.0.0
- - Does not bundle `create-react-class` package with `react-data-grid`. It is specified as a peer dependency now;
+ - <del>Does not bundle `create-react-class` package with `react-data-grid`. It is specified as a peer dependency now [1065](https://github.com/adazzle/react-data-grid/pull/1065);</del> ReactDataGrid is not longer dependent on `create-react-class` as all the components have been migrated to ES6 Classes ([#1078](https://github.com/adazzle/react-data-grid/pull/1078) and [#1094](https://github.com/adazzle/react-data-grid/pull/1094))
 
 ### Steps for a sucessfull migration
- - Install create-react-class package (```npm install create-react-class```)
+ - <del>Install create-react-class package (```npm install create-react-class```)</del> This is no longer required

package.json

@@ -23,7 +23,6 @@
     "react-component"
   ],
   "peerDependencies": {
-    "create-react-class": "^15.6.2",
     "react": "^15.6.2",
     "react-dom": "^15.6.2"
   },
@@ -56,7 +55,6 @@
     "babel-preset-es2015-loose": "^7.0.0",
     "babel-preset-react": "^6.3.13",
     "copy-dir": "^0.3.0",
-    "create-react-class": "^15.6.2",
     "css-loader": "^0.26.0",
     "del": "^1.2.1",
     "enzyme": "2.8.0",

packages/react-data-grid-addons/src/editors/DateRangeEditor.js

@@ -1,64 +1,42 @@
 const React = require('react');
 import PropTypes from 'prop-types';
-const createReactClass = require('create-react-class');
-const ReactDOM = require('react-dom');
 const Moment = require('moment');
 const DateRangeFilter = require('./widgets/DateRangeFilter');
 type DateRangeValue = { startDate: Date; endDate: Date};
 
-const DateRangeEditor = createReactClass({
-  displayName: 'DateRangeEditor',
+class DateRangeEditor extends React.Component {
+  static displayName = 'DateRangeEditor';
 
-  propTypes: {
+  static propTypes = {
     format: PropTypes.string,
     ranges: PropTypes.arrayOf(PropTypes.string),
     value: PropTypes.shape({
       startDate: PropTypes.Date.isRequired,
       endDate: PropTypes.Date.isRequired
     }).isRequired
-  },
+  };
 
-  getDefaultProps(): {format: string; ranges: Array<Date>} {
-    return {
-      format: 'YYYY-MM-DD',
-      ranges: []
-    };
-  },
+  static defaultProps = {
+    format: 'YYYY-MM-DD',
+    ranges: []
+  };
 
-  rangeSeparatorChar: ' - ',
+  rangeSeparatorChar = ' - ';
 
-  overrides: {
-    checkFocus: function() {
-      this.setTextInputFocus();
-    },
-    getInputNode(): HTMLElement {
-      return ReactDOM.findDOMNode(this.refs.datepicker);
-    },
-    getValue(): DateRangeValue {
-      let dateToParse = this.getInputNode().value;
-      let dateRanges = dateToParse.split(this.rangeSeparatorChar);
-      if (dateRanges.length !== 2) {
-        throw new Error('DateRangeEditor.getValue error : ' + dateToParse + ' is not in the correct format');
-      }
-
-      return {startDate: dateRanges[0].trim(), endDate: dateRanges[1].trim()};
-    }
-  },
-
-  isDateValid(date: Date): boolean {
+  isDateValid = (date: Date): boolean => {
     return new Moment(date, this.props.format, true).isValid();
-  },
+  };
 
-  validate(value: DateRangeValue): boolean {
+  validate = (value: DateRangeValue): boolean => {
     return this.isDateValid(value.startDate)
     && this.isDateValid(value.endDate)
     && (new Moment(value.startDate, this.props.format).isBefore(value.endDate)
     || new Moment(value.startDate, this.props.format).isSame(value.endDate));
-  },
+  };
 
-  handleDateFilterApply(startDate: string, endDate: string) {
+  handleDateFilterApply = (startDate: string, endDate: string) => {
     this.commit({value: {startDate: startDate, endDate: endDate}});
-  },
+  };
 
   render(): ?ReactElement {
     return (
@@ -67,6 +45,6 @@ const DateRangeEditor = createReactClass({
       </div>
     );
   }
-});
+}
 
 module.exports = DateRangeEditor;

packages/react-data-grid-examples/src/documentation.html

@@ -23,7 +23,6 @@
 	<!-- JavaScript srcs are placed at the end of the document so the pages load faster -->
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
-	<script src="https://unpkg.com/[email protected]/create-react-class.min.js"></script>
 
 	<!-- Custom styles for our template -->
 	<link rel="stylesheet" href="assets/css/bootstrap.min.css">

packages/react-data-grid-examples/src/examples.html

@@ -45,7 +45,6 @@
 <script src="scriptDelegator.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
-<script src="https://unpkg.com/[email protected]/create-react-class.min.js"></script>
 <script type="text/javascript">
   delegateScript('shared.js');
   delegateScript('examples.js');

packages/react-data-grid-examples/src/index.html

@@ -17,7 +17,6 @@
 	<link rel="stylesheet" href="assets/css/main.css"></link>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
-	<script src="https://unpkg.com/[email protected]/create-react-class.min.js"></script>
 	<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.0.1/faker.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.3/immutable.min.js"/></script>