Merge pull request #180 from josephMG/master

Fix React 15 Warnings
onefinestay · Jan 19, 2018 · d5ab59d · d5ab59d
2 parents b2fa6ac + 8357207
commit d5ab59d
Show file tree

Hide file tree

Showing 22 changed files with 161 additions and 117 deletions.
diff --git a/example/code-snippets/i18n.jsx b/example/code-snippets/i18n.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import createClass from 'create-react-class';
 import DateRangePicker from 'react-daterange-picker';
 import moment from 'moment';
 
@@ -18,7 +18,7 @@ require('moment/locale/de');
  */
 moment.locale('en');
 
-const DatePicker = React.createClass({
+const DatePicker = createClass({
   getInitialState() {
     return {
       value: null,

diff --git a/example/code-snippets/main.jsx b/example/code-snippets/main.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import createClass from 'create-react-class';
 import DateRangePicker from 'react-daterange-picker';
 import moment from 'moment-range';
 
@@ -36,7 +37,7 @@ const dateRanges = [
   },
 ];
 
-const DatePicker = React.createClass({
+const DatePicker = createClass({
   getInitialState() {
     return {
       value: null,

diff --git a/example/components/code-snippet.jsx b/example/components/code-snippet.jsx
@@ -1,13 +1,16 @@
 /* global hljs */
 import React from 'react';
+
+import PropTypes from 'prop-types';
+import createClass from 'create-react-class';
 import cx from 'classnames';
 
-const CodeSnippet = React.createClass({
+const CodeSnippet = createClass({
   propTypes: {
-    children: React.PropTypes.node.isRequired,
-    language: React.PropTypes.string.isRequired,
-    toggle: React.PropTypes.bool,
-    visible: React.PropTypes.bool,
+    children: PropTypes.node.isRequired,
+    language: PropTypes.string.isRequired,
+    toggle: PropTypes.bool,
+    visible: PropTypes.bool,
   },
 
   getDefaultProps() {

diff --git a/example/components/features.jsx b/example/components/features.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
+import createClass from 'create-react-class';
 
-const Features = React.createClass({
+const Features = createClass({
   render() {
     return (
       <div className="features">

diff --git a/example/components/footer.jsx b/example/components/footer.jsx
@@ -1,9 +1,10 @@
 /* eslint-disable react/no-multi-comp */
 
 import React from 'react';
+import createClass from 'create-react-class';
 
 
-const OFSCredit = React.createClass({
+const OFSCredit = createClass({
   render() {
     return (
       <div className="ofs-credit">
@@ -17,7 +18,7 @@ const OFSCredit = React.createClass({
 });
 
 
-const Footer = React.createClass({
+const Footer = createClass({
   render() {
     return (
       <footer className="footer">

diff --git a/example/components/github-ribbon.jsx b/example/components/github-ribbon.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
+import createClass from 'create-react-class';
 
-const GithubRibbon = React.createClass({
+
+const GithubRibbon = createClass({
   render() {
     const style = {
       position: 'absolute',

diff --git a/example/components/header.jsx b/example/components/header.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
+import createClass from 'create-react-class';
 
-
-const Header = React.createClass({
+const Header = createClass({
   render() {
     return (
       <header className="header">

diff --git a/example/components/install.jsx b/example/components/install.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
-
+import createClass from 'create-react-class';
 import CodeSnippet from './code-snippet';
 
 
-const Install = React.createClass({
+const Install = createClass({
   render() {
     return (
       <div className="install">

diff --git a/example/components/quick-selection/index.jsx b/example/components/quick-selection/index.jsx
@@ -1,12 +1,15 @@
 import React from 'react';
+
+import PropTypes from 'prop-types';
+import createClass from 'create-react-class';
 import _ from 'underscore';
 import Selection from './selection';
 
-const QuickSelection = React.createClass({
+const QuickSelection = createClass({
   propTypes: {
-    dates: React.PropTypes.object.isRequired,
-    value: React.PropTypes.object,
-    onSelect: React.PropTypes.func.isRequired,
+    dates: PropTypes.object.isRequired,
+    value: PropTypes.object,
+    onSelect: PropTypes.func.isRequired,
   },
 
   isCurrentlySelected(date) {

diff --git a/example/components/quick-selection/selection.jsx b/example/components/quick-selection/selection.jsx
@@ -1,12 +1,15 @@
 import React from 'react';
 
-const Selection = React.createClass({
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
+
+const Selection = createClass({
   propTypes: {
-    className: React.PropTypes.string.isRequired,
-    date: React.PropTypes.object.isRequired,
-    disabled: React.PropTypes.bool.isRequired,
-    label: React.PropTypes.string.isRequired,
-    onSelect: React.PropTypes.func.isRequired,
+    className: PropTypes.string.isRequired,
+    date: PropTypes.object.isRequired,
+    disabled: PropTypes.bool.isRequired,
+    label: PropTypes.string.isRequired,
+    onSelect: PropTypes.func.isRequired,
   },
 
   getDefaultProps() {

diff --git a/example/index.jsx b/example/index.jsx
@@ -1,6 +1,9 @@
 /* eslint-disable react/no-multi-comp */
 
 import React from 'react';
+
+import PropTypes from 'prop-types';
+import createClass from 'create-react-class';
 import moment from 'moment';
 import {} from 'moment-range';
 var fs = require('fs');
@@ -25,9 +28,9 @@ function processCodeSnippet(src) {
   return lines.join('\n');
 }
 
-const DatePickerRange = React.createClass({
+const DatePickerRange = createClass({
   propTypes: {
-    value: React.PropTypes.object,
+    value: PropTypes.object,
   },
 
   getInitialState() {
@@ -61,7 +64,7 @@ const DatePickerRange = React.createClass({
 });
 
 
-const DatePickerSingle = React.createClass({
+const DatePickerSingle = createClass({
   getInitialState() {
     return {
       value: "",
@@ -89,7 +92,7 @@ const DatePickerSingle = React.createClass({
   },
 });
 
-const DatePickerSingleWithSetDateButtons = React.createClass({
+const DatePickerSingleWithSetDateButtons = createClass({
   getInitialState() {
     return {
       value: null,
@@ -120,15 +123,15 @@ const DatePickerSingleWithSetDateButtons = React.createClass({
         <QuickSelection dates={dateRanges} value={this.state.value} onSelect={this.setDate} />
         <div>
           <input type="text"
-            value={this.state.value ? this.state.value.format('LL') : null}
+            value={this.state.value ? this.state.value.format('LL') : ''}
             readOnly={true} />
         </div>
       </div>
     );
   },
 });
 
-const DatePickerRangeWithSetRangeButtons = React.createClass({
+const DatePickerRangeWithSetRangeButtons = createClass({
   getInitialState() {
     return {
       value: null,
@@ -162,11 +165,11 @@ const DatePickerRangeWithSetRangeButtons = React.createClass({
         <RangePicker {...this.props} onSelect={this.handleSelect} value={this.state.value} />
         <div>
           <input type="text"
-            value={this.state.value ? this.state.value.start.format('LL') : null}
+            value={this.state.value ? this.state.value.start.format('LL') : ''}
             readOnly={true}
             placeholder="Start date"/>
           <input type="text"
-            value={this.state.value ? this.state.value.end.format('LL') : null}
+            value={this.state.value ? this.state.value.end.format('LL') : ''}
             readOnly={true}
             placeholder="End date" />
         </div>
@@ -178,7 +181,7 @@ const DatePickerRangeWithSetRangeButtons = React.createClass({
 var mainCodeSnippet = fs.readFileSync(__dirname + '/code-snippets/main.jsx', 'utf8');
 var i18nCodeSnippet = fs.readFileSync(__dirname + '/code-snippets/i18n.jsx', 'utf8');
 
-const Index = React.createClass({
+const Index = createClass({
   getInitialState() {
     return {
       locale: 'en',

diff --git a/package.json b/package.json
@@ -59,9 +59,11 @@
   "dependencies": {
     "calendar": "^0.1.0",
     "classnames": "^2.1.1",
+    "create-react-class": "^15.6.0",
     "immutable": "^3.7.2",
     "moment": "^2.14.1",
     "moment-range": "^2.0.3",
+    "prop-types": "^15.5.10",
     "react-addons-pure-render-mixin": "^0.14.0 || 15.x.x"
   },
   "devDependencies": {

diff --git a/src/DateRangePicker.jsx b/src/DateRangePicker.jsx
@@ -1,4 +1,7 @@
 import React from 'react';
+
+import PropTypes from 'prop-types';
+import createClass from 'create-react-class';
 import moment from 'moment';
 import {} from 'moment-range';
 import Immutable from 'immutable';
@@ -24,37 +27,38 @@ const absoluteMaximum = moment(new Date(8640000000000000 / 2)).startOf('day');
 
 function noop() {}
 
-const DateRangePicker = React.createClass({
+const DateRangePicker = createClass({
   mixins: [BemMixin, PureRenderMixin],
+  displayName: "DateRangePicker",
 
   propTypes: {
-    bemBlock: React.PropTypes.string,
-    bemNamespace: React.PropTypes.string,
-    className: React.PropTypes.string,
-    dateStates: React.PropTypes.array, // an array of date ranges and their states
-    defaultState: React.PropTypes.string,
-    disableNavigation: React.PropTypes.bool,
-    firstOfWeek: React.PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
-    helpMessage: React.PropTypes.string,
-    initialDate: React.PropTypes.instanceOf(Date),
-    initialFromValue: React.PropTypes.bool,
-    initialMonth: React.PropTypes.number, // Overrides values derived from initialDate/initialRange
-    initialRange: React.PropTypes.object,
-    initialYear: React.PropTypes.number, // Overrides values derived from initialDate/initialRange
-    locale: React.PropTypes.string,
-    maximumDate: React.PropTypes.instanceOf(Date),
-    minimumDate: React.PropTypes.instanceOf(Date),
-    numberOfCalendars: React.PropTypes.number,
-    onHighlightDate: React.PropTypes.func, // triggered when a date is highlighted (hovered)
-    onHighlightRange: React.PropTypes.func, // triggered when a range is highlighted (hovered)
-    onSelect: React.PropTypes.func, // triggered when a date or range is selectec
-    onSelectStart: React.PropTypes.func, // triggered when the first date in a range is selected
-    paginationArrowComponent: React.PropTypes.func,
-    selectedLabel: React.PropTypes.string,
-    selectionType: React.PropTypes.oneOf(['single', 'range']),
-    singleDateRange: React.PropTypes.bool,
-    showLegend: React.PropTypes.bool,
-    stateDefinitions: React.PropTypes.object,
+    bemBlock: PropTypes.string,
+    bemNamespace: PropTypes.string,
+    className: PropTypes.string,
+    dateStates: PropTypes.array, // an array of date ranges and their states
+    defaultState: PropTypes.string,
+    disableNavigation: PropTypes.bool,
+    firstOfWeek: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+    helpMessage: PropTypes.string,
+    initialDate: PropTypes.instanceOf(Date),
+    initialFromValue: PropTypes.bool,
+    initialMonth: PropTypes.number, // Overrides values derived from initialDate/initialRange
+    initialRange: PropTypes.object,
+    initialYear: PropTypes.number, // Overrides values derived from initialDate/initialRange
+    locale: PropTypes.string,
+    maximumDate: PropTypes.instanceOf(Date),
+    minimumDate: PropTypes.instanceOf(Date),
+    numberOfCalendars: PropTypes.number,
+    onHighlightDate: PropTypes.func, // triggered when a date is highlighted (hovered)
+    onHighlightRange: PropTypes.func, // triggered when a range is highlighted (hovered)
+    onSelect: PropTypes.func, // triggered when a date or range is selectec
+    onSelectStart: PropTypes.func, // triggered when the first date in a range is selected
+    paginationArrowComponent: PropTypes.func,
+    selectedLabel: PropTypes.string,
+    selectionType: PropTypes.oneOf(['single', 'range']),
+    singleDateRange: PropTypes.bool,
+    showLegend: PropTypes.bool,
+    stateDefinitions: PropTypes.object,
     value: CustomPropTypes.momentOrMomentRange,
   },
 

diff --git a/src/Legend.jsx b/src/Legend.jsx
@@ -1,16 +1,19 @@
 import React from 'react';
 
+import PropTypes from 'prop-types';
+import createClass from 'create-react-class';
 import BemMixin from './utils/BemMixin';
 
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 
-const Legend = React.createClass({
+const Legend = createClass({
   mixins: [BemMixin, PureRenderMixin],
+  displayName: "Legend",
 
   propTypes: {
-    selectedLabel: React.PropTypes.string.isRequired,
-    stateDefinitions: React.PropTypes.object.isRequired,
+    selectedLabel: PropTypes.string.isRequired,
+    stateDefinitions: PropTypes.object.isRequired,
   },
 
   render() {

diff --git a/src/PaginationArrow.jsx b/src/PaginationArrow.jsx
@@ -1,17 +1,20 @@
 import React from 'react';
 
+import PropTypes from 'prop-types';
+import createClass from 'create-react-class';
 import BemMixin from './utils/BemMixin';
 
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 
-const PaginationArrow = React.createClass({
+const PaginationArrow = createClass({
   mixins: [BemMixin, PureRenderMixin],
+  displayName: "PaginationArrow",
 
   propTypes: {
-    disabled: React.PropTypes.bool,
-    onTrigger: React.PropTypes.func,
-    direction: React.PropTypes.oneOf(['next', 'previous']),
+    disabled: PropTypes.bool,
+    onTrigger: PropTypes.func,
+    direction: PropTypes.oneOf(['next', 'previous']),
   },
 
   getDefaultProps() {