From 2bf93151414497e12e7239d1e26218d925901be6 Mon Sep 17 00:00:00 2001
From: Andrew Zey <andrew@andrewzey.com>
Date: Mon, 17 Apr 2017 11:22:15 -0700
Subject: [PATCH 1/2] Replace React.createClass with create-react-class package

---
 example/code-snippets/i18n.jsx                   |  3 ++-
 example/code-snippets/main.jsx                   |  3 ++-
 example/components/code-snippet.jsx              |  3 ++-
 example/components/features.jsx                  |  3 ++-
 example/components/footer.jsx                    |  5 +++--
 example/components/github-ribbon.jsx             |  3 ++-
 example/components/header.jsx                    |  3 ++-
 example/components/install.jsx                   |  3 ++-
 example/components/quick-selection/index.jsx     |  3 ++-
 example/components/quick-selection/selection.jsx |  3 ++-
 example/index.jsx                                | 11 ++++++-----
 package.json                                     |  2 ++
 src/DateRangePicker.jsx                          |  3 ++-
 src/Legend.jsx                                   |  3 ++-
 src/PaginationArrow.jsx                          |  3 ++-
 src/calendar/CalendarDate.jsx                    |  3 ++-
 src/calendar/CalendarDatePeriod.jsx              |  3 ++-
 src/calendar/CalendarHighlight.jsx               |  3 ++-
 src/calendar/CalendarMonth.jsx                   |  3 ++-
 src/calendar/CalendarSelection.jsx               |  3 ++-
 20 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/example/code-snippets/i18n.jsx b/example/code-snippets/i18n.jsx
index 2f81a9d9..b3c9ae44 100644
--- a/example/code-snippets/i18n.jsx
+++ b/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,
diff --git a/example/code-snippets/main.jsx b/example/code-snippets/main.jsx
index 82233854..c0db3f97 100644
--- a/example/code-snippets/main.jsx
+++ b/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,
diff --git a/example/components/code-snippet.jsx b/example/components/code-snippet.jsx
index c11b17aa..044dde78 100644
--- a/example/components/code-snippet.jsx
+++ b/example/components/code-snippet.jsx
@@ -1,8 +1,9 @@
 /* global hljs */
 import React from 'react';
+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,
diff --git a/example/components/features.jsx b/example/components/features.jsx
index 6f8f8ed0..92b6b09f 100644
--- 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
index 6b75e333..8953ee6e 100644
--- 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
index 81621160..acb0788e 100644
--- a/example/components/github-ribbon.jsx
+++ b/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',
diff --git a/example/components/header.jsx b/example/components/header.jsx
index cb4b5f76..805f57d3 100644
--- a/example/components/header.jsx
+++ b/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">
diff --git a/example/components/install.jsx b/example/components/install.jsx
index 8615579d..2903fa7b 100644
--- a/example/components/install.jsx
+++ b/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">
diff --git a/example/components/quick-selection/index.jsx b/example/components/quick-selection/index.jsx
index a3035656..520a272a 100644
--- a/example/components/quick-selection/index.jsx
+++ b/example/components/quick-selection/index.jsx
@@ -1,8 +1,9 @@
 import React from 'react';
+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,
diff --git a/example/components/quick-selection/selection.jsx b/example/components/quick-selection/selection.jsx
index 54018d36..cb725b84 100644
--- a/example/components/quick-selection/selection.jsx
+++ b/example/components/quick-selection/selection.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
+import createClass from 'create-react-class';
 
-const Selection = React.createClass({
+const Selection = createClass({
   propTypes: {
     className: React.PropTypes.string.isRequired,
     date: React.PropTypes.object.isRequired,
diff --git a/example/index.jsx b/example/index.jsx
index 15671e48..169f2ccc 100644
--- a/example/index.jsx
+++ b/example/index.jsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 
 import React from 'react';
+import createClass from 'create-react-class';
 import moment from 'moment';
 import {} from 'moment-range';
 var fs = require('fs');
@@ -25,7 +26,7 @@ function processCodeSnippet(src) {
   return lines.join('\n');
 }
 
-const DatePickerRange = React.createClass({
+const DatePickerRange = createClass({
   propTypes: {
     value: React.PropTypes.object,
   },
@@ -61,7 +62,7 @@ const DatePickerRange = React.createClass({
 });
 
 
-const DatePickerSingle = React.createClass({
+const DatePickerSingle = createClass({
   getInitialState() {
     return {
       value: "",
@@ -89,7 +90,7 @@ const DatePickerSingle = React.createClass({
   },
 });
 
-const DatePickerSingleWithSetDateButtons = React.createClass({
+const DatePickerSingleWithSetDateButtons = createClass({
   getInitialState() {
     return {
       value: null,
@@ -128,7 +129,7 @@ const DatePickerSingleWithSetDateButtons = React.createClass({
   },
 });
 
-const DatePickerRangeWithSetRangeButtons = React.createClass({
+const DatePickerRangeWithSetRangeButtons = createClass({
   getInitialState() {
     return {
       value: null,
@@ -178,7 +179,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
index a57d6e2f..b2938a50 100644
--- a/package.json
+++ b/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": {
diff --git a/src/DateRangePicker.jsx b/src/DateRangePicker.jsx
index 2df54ebe..e6d51c64 100644
--- a/src/DateRangePicker.jsx
+++ b/src/DateRangePicker.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import createClass from 'create-react-class';
 import moment from 'moment';
 import {} from 'moment-range';
 import Immutable from 'immutable';
@@ -24,7 +25,7 @@ const absoluteMaximum = moment(new Date(8640000000000000 / 2)).startOf('day');
 
 function noop() {}
 
-const DateRangePicker = React.createClass({
+const DateRangePicker = createClass({
   mixins: [BemMixin, PureRenderMixin],
 
   propTypes: {
diff --git a/src/Legend.jsx b/src/Legend.jsx
index 3bdcc7ec..0e63353b 100644
--- a/src/Legend.jsx
+++ b/src/Legend.jsx
@@ -1,11 +1,12 @@
 import React from 'react';
+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],
 
   propTypes: {
diff --git a/src/PaginationArrow.jsx b/src/PaginationArrow.jsx
index bfc684de..88eb549d 100644
--- a/src/PaginationArrow.jsx
+++ b/src/PaginationArrow.jsx
@@ -1,11 +1,12 @@
 import React from 'react';
+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],
 
   propTypes: {
diff --git a/src/calendar/CalendarDate.jsx b/src/calendar/CalendarDate.jsx
index a2526387..b685a192 100644
--- a/src/calendar/CalendarDate.jsx
+++ b/src/calendar/CalendarDate.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import createClass from 'create-react-class';
 
 import Immutable from 'immutable';
 
@@ -12,7 +13,7 @@ import CalendarHighlight from './CalendarHighlight';
 import CalendarSelection from './CalendarSelection';
 
 
-const CalendarDate = React.createClass({
+const CalendarDate = createClass({
   mixins: [BemMixin, PureRenderMixin],
 
   propTypes: {
diff --git a/src/calendar/CalendarDatePeriod.jsx b/src/calendar/CalendarDatePeriod.jsx
index c36c38f3..ac40b9b7 100644
--- a/src/calendar/CalendarDatePeriod.jsx
+++ b/src/calendar/CalendarDatePeriod.jsx
@@ -1,10 +1,11 @@
 import React from 'react';
+import createClass from 'create-react-class';
 
 import BemMixin from '../utils/BemMixin';
 import PureRenderMixin from '../utils/PureRenderMixin';
 
 
-const CalendarDatePeriod = React.createClass({
+const CalendarDatePeriod = createClass({
   mixins: [BemMixin, PureRenderMixin],
 
   propTypes: {
diff --git a/src/calendar/CalendarHighlight.jsx b/src/calendar/CalendarHighlight.jsx
index 58f00e84..ba01b3b8 100644
--- a/src/calendar/CalendarHighlight.jsx
+++ b/src/calendar/CalendarHighlight.jsx
@@ -1,10 +1,11 @@
 import React from 'react';
+import createClass from 'create-react-class';
 
 import BemMixin from '../utils/BemMixin';
 import PureRenderMixin from '../utils/PureRenderMixin';
 
 
-const CalendarHighlight = React.createClass({
+const CalendarHighlight = createClass({
   mixins: [BemMixin, PureRenderMixin],
 
   propTypes: {
diff --git a/src/calendar/CalendarMonth.jsx b/src/calendar/CalendarMonth.jsx
index 0892287f..05ce8334 100644
--- a/src/calendar/CalendarMonth.jsx
+++ b/src/calendar/CalendarMonth.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import createClass from 'create-react-class';
 import moment from 'moment';
 import 'moment-range';
 import calendar from 'calendar';
@@ -9,7 +10,7 @@ import CustomPropTypes from '../utils/CustomPropTypes';
 import isMomentRange from '../utils/isMomentRange';
 import PureRenderMixin from '../utils/PureRenderMixin';
 
-const CalendarMonth = React.createClass({
+const CalendarMonth = createClass({
   mixins: [BemMixin, PureRenderMixin],
 
   propTypes: {
diff --git a/src/calendar/CalendarSelection.jsx b/src/calendar/CalendarSelection.jsx
index b94dee63..7c01562b 100644
--- a/src/calendar/CalendarSelection.jsx
+++ b/src/calendar/CalendarSelection.jsx
@@ -1,10 +1,11 @@
 import React from 'react';
+import createClass from 'create-react-class';
 
 import BemMixin from '../utils/BemMixin';
 import PureRenderMixin from '../utils/PureRenderMixin';
 
 
-const CalendarSelection = React.createClass({
+const CalendarSelection = createClass({
   mixins: [BemMixin, PureRenderMixin],
 
   propTypes: {

From 6f1833d4c6970feb8d03b3a679fc4a563eda7932 Mon Sep 17 00:00:00 2001
From: Andrew Zey <andrew@andrewzey.com>
Date: Mon, 17 Apr 2017 11:23:59 -0700
Subject: [PATCH 2/2] Replace React.PropTypes with prop-types package

---
 example/components/code-snippet.jsx           |  9 +--
 example/components/quick-selection/index.jsx  |  7 ++-
 .../components/quick-selection/selection.jsx  | 11 ++--
 example/index.jsx                             |  3 +-
 src/DateRangePicker.jsx                       | 55 ++++++++++---------
 src/Legend.jsx                                |  5 +-
 src/PaginationArrow.jsx                       |  7 ++-
 src/calendar/CalendarDate.jsx                 | 35 ++++++------
 src/calendar/CalendarDatePeriod.jsx           |  5 +-
 src/calendar/CalendarHighlight.jsx            |  3 +-
 src/calendar/CalendarMonth.jsx                | 19 ++++---
 src/calendar/CalendarSelection.jsx            |  5 +-
 src/utils/BemMixin.js                         | 13 +++--
 src/utils/tests/BemMixin.spec.js              |  5 +-
 14 files changed, 98 insertions(+), 84 deletions(-)

diff --git a/example/components/code-snippet.jsx b/example/components/code-snippet.jsx
index 044dde78..9f5d5a30 100644
--- a/example/components/code-snippet.jsx
+++ b/example/components/code-snippet.jsx
@@ -1,14 +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 = 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/quick-selection/index.jsx b/example/components/quick-selection/index.jsx
index 520a272a..70e5521f 100644
--- a/example/components/quick-selection/index.jsx
+++ b/example/components/quick-selection/index.jsx
@@ -1,13 +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 = 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
index cb725b84..55fdb790 100644
--- a/example/components/quick-selection/selection.jsx
+++ b/example/components/quick-selection/selection.jsx
@@ -1,13 +1,14 @@
 import React from 'react';
 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
index 169f2ccc..370f2ac9 100644
--- a/example/index.jsx
+++ b/example/index.jsx
@@ -2,6 +2,7 @@
 
 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');
@@ -28,7 +29,7 @@ function processCodeSnippet(src) {
 
 const DatePickerRange = createClass({
   propTypes: {
-    value: React.PropTypes.object,
+    value: PropTypes.object,
   },
 
   getInitialState() {
diff --git a/src/DateRangePicker.jsx b/src/DateRangePicker.jsx
index e6d51c64..5090f5bb 100644
--- a/src/DateRangePicker.jsx
+++ b/src/DateRangePicker.jsx
@@ -1,5 +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';
@@ -29,33 +30,33 @@ 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,
   },
 
diff --git a/src/Legend.jsx b/src/Legend.jsx
index 0e63353b..c1185ef0 100644
--- a/src/Legend.jsx
+++ b/src/Legend.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 
 import BemMixin from './utils/BemMixin';
 
@@ -10,8 +11,8 @@ 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() {
diff --git a/src/PaginationArrow.jsx b/src/PaginationArrow.jsx
index 88eb549d..25aab542 100644
--- a/src/PaginationArrow.jsx
+++ b/src/PaginationArrow.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 
 import BemMixin from './utils/BemMixin';
 
@@ -10,9 +11,9 @@ 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() {
diff --git a/src/calendar/CalendarDate.jsx b/src/calendar/CalendarDate.jsx
index b685a192..e6e6b428 100644
--- a/src/calendar/CalendarDate.jsx
+++ b/src/calendar/CalendarDate.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 
 import Immutable from 'immutable';
 
@@ -19,27 +20,27 @@ const CalendarDate = createClass({
   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() {
diff --git a/src/calendar/CalendarDatePeriod.jsx b/src/calendar/CalendarDatePeriod.jsx
index ac40b9b7..1713393d 100644
--- a/src/calendar/CalendarDatePeriod.jsx
+++ b/src/calendar/CalendarDatePeriod.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 
 import BemMixin from '../utils/BemMixin';
 import PureRenderMixin from '../utils/PureRenderMixin';
@@ -9,8 +10,8 @@ const CalendarDatePeriod = createClass({
   mixins: [BemMixin, PureRenderMixin],
 
   propTypes: {
-    color: React.PropTypes.string,
-    period: React.PropTypes.string,
+    color: PropTypes.string,
+    period: PropTypes.string,
   },
 
   render() {
diff --git a/src/calendar/CalendarHighlight.jsx b/src/calendar/CalendarHighlight.jsx
index ba01b3b8..7865dbf8 100644
--- a/src/calendar/CalendarHighlight.jsx
+++ b/src/calendar/CalendarHighlight.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 
 import BemMixin from '../utils/BemMixin';
 import PureRenderMixin from '../utils/PureRenderMixin';
@@ -9,7 +10,7 @@ const CalendarHighlight = createClass({
   mixins: [BemMixin, PureRenderMixin],
 
   propTypes: {
-    modifier: React.PropTypes.string,
+    modifier: PropTypes.string,
   },
 
   render() {
diff --git a/src/calendar/CalendarMonth.jsx b/src/calendar/CalendarMonth.jsx
index 05ce8334..aa2fdb0b 100644
--- a/src/calendar/CalendarMonth.jsx
+++ b/src/calendar/CalendarMonth.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 import moment from 'moment';
 import 'moment-range';
 import calendar from 'calendar';
@@ -14,18 +15,18 @@ const CalendarMonth = createClass({
   mixins: [BemMixin, PureRenderMixin],
 
   propTypes: {
-    dateComponent: React.PropTypes.func,
-    disableNavigation: React.PropTypes.bool,
+    dateComponent: PropTypes.func,
+    disableNavigation: PropTypes.bool,
     enabledRange: CustomPropTypes.momentRange,
     firstOfMonth: CustomPropTypes.moment,
-    firstOfWeek: React.PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
-    hideSelection: React.PropTypes.bool,
-    highlightedDate: React.PropTypes.object,
-    highlightedRange: React.PropTypes.object,
-    onMonthChange: React.PropTypes.func,
-    onYearChange: React.PropTypes.func,
+    firstOfWeek: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+    hideSelection: PropTypes.bool,
+    highlightedDate: PropTypes.object,
+    highlightedRange: PropTypes.object,
+    onMonthChange: PropTypes.func,
+    onYearChange: PropTypes.func,
     value: CustomPropTypes.momentOrMomentRange,
-    locale: React.PropTypes.string,
+    locale: PropTypes.string,
   },
 
   setLocale(locale) {
diff --git a/src/calendar/CalendarSelection.jsx b/src/calendar/CalendarSelection.jsx
index 7c01562b..93fb1d9b 100644
--- a/src/calendar/CalendarSelection.jsx
+++ b/src/calendar/CalendarSelection.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 
 import BemMixin from '../utils/BemMixin';
 import PureRenderMixin from '../utils/PureRenderMixin';
@@ -9,8 +10,8 @@ const CalendarSelection = createClass({
   mixins: [BemMixin, PureRenderMixin],
 
   propTypes: {
-    modifier: React.PropTypes.string,
-    pending: React.PropTypes.bool.isRequired,
+    modifier: PropTypes.string,
+    pending: PropTypes.bool.isRequired,
   },
 
   render() {
diff --git a/src/utils/BemMixin.js b/src/utils/BemMixin.js
index 3d3efc59..977736e1 100644
--- a/src/utils/BemMixin.js
+++ b/src/utils/BemMixin.js
@@ -1,21 +1,22 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import bemCx from './bemCx';
 
 
 const BemMixin = {
   propTypes: {
-    bemNamespace: React.PropTypes.string,
-    bemBlock: React.PropTypes.string,
+    bemNamespace: PropTypes.string,
+    bemBlock: PropTypes.string,
   },
 
   contextTypes: {
-    bemNamespace: React.PropTypes.string,
-    bemBlock: React.PropTypes.string,
+    bemNamespace: PropTypes.string,
+    bemBlock: PropTypes.string,
   },
 
   childContextTypes: {
-    bemNamespace: React.PropTypes.string,
-    bemBlock: React.PropTypes.string,
+    bemNamespace: PropTypes.string,
+    bemBlock: PropTypes.string,
   },
 
   getChildContext() {
diff --git a/src/utils/tests/BemMixin.spec.js b/src/utils/tests/BemMixin.spec.js
index 4ff5d441..404b2174 100644
--- a/src/utils/tests/BemMixin.spec.js
+++ b/src/utils/tests/BemMixin.spec.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import BemMixin from '../BemMixin';
 
@@ -6,8 +7,8 @@ describe('BemMixin', function () {
 
   beforeEach(function () {
     this.types = {
-      bemNamespace: React.PropTypes.string,
-      bemBlock: React.PropTypes.string,
+      bemNamespace: PropTypes.string,
+      bemBlock: PropTypes.string,
     };
     BemMixin.props = {};
     BemMixin.context = {};