Fix React 15.5.0 Warnings

example/code-snippets/i18n.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import createClass from 'create-react-class';
 
 import DateRangePicker from 'react-daterange-picker';
 import moment from 'moment';
@@ -18,7 +19,7 @@ require('moment/locale/de');
  */
 moment.locale('en');
 
-const DatePicker = React.createClass({
+const DatePicker = createClass({
   getInitialState() {
     return {
       value: null,

example/code-snippets/main.jsx

@@ -1,4 +1,5 @@
 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,

example/components/code-snippet.jsx

@@ -1,13 +1,15 @@
 /* global hljs */
 import React from 'react';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 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() {

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">

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">

example/components/github-ribbon.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
+import createClass from 'create-react-class';
 
-const GithubRibbon = React.createClass({
+const GithubRibbon = createClass({
   render() {
     const style = {
       position: 'absolute',

example/components/header.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import createClass from 'create-react-class';
 
 
-const Header = React.createClass({
+const Header = createClass({
   render() {
     return (
       <header className="header">

example/components/install.jsx

@@ -1,9 +1,10 @@
 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">

example/components/quick-selection/index.jsx

@@ -1,12 +1,14 @@
 import React from 'react';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 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) {

example/components/quick-selection/selection.jsx

@@ -1,12 +1,14 @@
 import React from 'react';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 
-const Selection = React.createClass({
+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() {

example/index.jsx

@@ -1,6 +1,8 @@
 /* eslint-disable react/no-multi-comp */
 
 import React from 'react';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 import moment from 'moment';
 import {} from 'moment-range';
 var fs = require('fs');
@@ -25,9 +27,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 +63,7 @@ const DatePickerRange = React.createClass({
 });
 
 
-const DatePickerSingle = React.createClass({
+const DatePickerSingle = createClass({
   getInitialState() {
     return {
       value: "",
@@ -89,7 +91,7 @@ const DatePickerSingle = React.createClass({
   },
 });
 
-const DatePickerSingleWithSetDateButtons = React.createClass({
+const DatePickerSingleWithSetDateButtons = createClass({
   getInitialState() {
     return {
       value: null,
@@ -128,7 +130,7 @@ const DatePickerSingleWithSetDateButtons = React.createClass({
   },
 });
 
-const DatePickerRangeWithSetRangeButtons = React.createClass({
+const DatePickerRangeWithSetRangeButtons = createClass({
   getInitialState() {
     return {
       value: null,
@@ -178,7 +180,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',

package.json

@@ -59,9 +59,11 @@
   "dependencies": {
     "calendar": "^0.1.0",
     "classnames": "^2.1.1",
+    "create-react-class": "^15.5.2",
     "immutable": "^3.7.2",
     "moment": "^2.14.1",
     "moment-range": "^2.0.3",
+    "prop-types": "^15.5.8",
     "react-addons-pure-render-mixin": "^0.14.0 || 15.x.x"
   },
   "devDependencies": {

src/DateRangePicker.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 import moment from 'moment';
 import {} from 'moment-range';
 import Immutable from 'immutable';
@@ -24,37 +26,37 @@ const absoluteMaximum = moment(new Date(8640000000000000 / 2)).startOf('day');
 
 function noop() {}
 
-const DateRangePicker = React.createClass({
+const DateRangePicker = createClass({
   mixins: [BemMixin, PureRenderMixin],
 
   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,
   },
 

src/Legend.jsx

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

src/PaginationArrow.jsx

@@ -1,17 +1,19 @@
 import React from 'react';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 
 import BemMixin from './utils/BemMixin';
 
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 
-const PaginationArrow = React.createClass({
+const PaginationArrow = createClass({
   mixins: [BemMixin, PureRenderMixin],
 
   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() {

src/calendar/CalendarDate.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 
 import Immutable from 'immutable';
 
@@ -12,33 +14,33 @@ import CalendarHighlight from './CalendarHighlight';
 import CalendarSelection from './CalendarSelection';
 
 
-const CalendarDate = React.createClass({
+const CalendarDate = createClass({
   mixins: [BemMixin, PureRenderMixin],
 
   propTypes: {
     date: CustomPropTypes.moment,
 
-    firstOfMonth: React.PropTypes.object.isRequired,
+    firstOfMonth: PropTypes.object.isRequired,
 
-    isSelectedDate: React.PropTypes.bool,
-    isSelectedRangeStart: React.PropTypes.bool,
-    isSelectedRangeEnd: React.PropTypes.bool,
-    isInSelectedRange: React.PropTypes.bool,
+    isSelectedDate: PropTypes.bool,
+    isSelectedRangeStart: PropTypes.bool,
+    isSelectedRangeEnd: PropTypes.bool,
+    isInSelectedRange: PropTypes.bool,
 
-    isHighlightedDate: React.PropTypes.bool,
-    isHighlightedRangeStart: React.PropTypes.bool,
-    isHighlightedRangeEnd: React.PropTypes.bool,
-    isInHighlightedRange: React.PropTypes.bool,
+    isHighlightedDate: PropTypes.bool,
+    isHighlightedRangeStart: PropTypes.bool,
+    isHighlightedRangeEnd: PropTypes.bool,
+    isInHighlightedRange: PropTypes.bool,
 
-    highlightedDate: React.PropTypes.object,
-    dateStates: React.PropTypes.instanceOf(Immutable.List),
-    isDisabled: React.PropTypes.bool,
-    isToday: React.PropTypes.bool,
+    highlightedDate: PropTypes.object,
+    dateStates: PropTypes.instanceOf(Immutable.List),
+    isDisabled: PropTypes.bool,
+    isToday: PropTypes.bool,
 
-    dateRangesForDate: React.PropTypes.func,
-    onHighlightDate: React.PropTypes.func,
-    onUnHighlightDate: React.PropTypes.func,
-    onSelectDate: React.PropTypes.func,
+    dateRangesForDate: PropTypes.func,
+    onHighlightDate: PropTypes.func,
+    onUnHighlightDate: PropTypes.func,
+    onSelectDate: PropTypes.func,
   },
 
   getInitialState() {