react-calendar - npm Package Compare versions

Comparing version 2.11.2 to 2.12.0

dist/Calendar.js

@@ -307,2 +307,4 @@ 'use strict';
         this.updateValues(nextProps);
+      } else {
+        nextState.activeStartDate = this.getActiveStartDate(nextProps);
       }
@@ -309,0 +311,0 @@

dist/Calendar/Navigation.js

@@ -31,4 +31,4 @@ 'use strict';
 
-var Navigation = function (_PureComponent) {
-  _inherits(Navigation, _PureComponent);
+var Navigation = function (_Component) {
+  _inherits(Navigation, _Component);
 
@@ -78,2 +78,7 @@ function Navigation() {
   _createClass(Navigation, [{
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps) {
+      return nextProps.activeStartDate !== this.props.activeStartDate || nextProps.view !== this.props.view;
+    }
+  }, {
     key: 'render',
@@ -234,3 +239,3 @@ value: function render() {
   return Navigation;
-}(_react.PureComponent);
+}(_react.Component);
 
@@ -237,0 +242,0 @@ exports.default = Navigation;

dist/CenturyView/Decade.js

@@ -17,5 +17,5 @@ 'use strict';
 
-var _mergeClassNames = require('merge-class-names');
+var _Tile = require('../Tile');
 
-var _mergeClassNames2 = _interopRequireDefault(_mergeClassNames);
+var _Tile2 = _interopRequireDefault(_Tile);
 
@@ -30,2 +30,4 @@ var _dates = require('../shared/dates');
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 var className = 'react-calendar__century-view__decades__decade';
@@ -35,34 +37,15 @@
   var classes = _ref.classes,
-      date = _ref.date,
-      decade = _ref.decade,
-      maxDate = _ref.maxDate,
-      minDate = _ref.minDate,
-      onClick = _ref.onClick,
-      onMouseOver = _ref.onMouseOver,
-      style = _ref.style,
-      tileClassName = _ref.tileClassName,
-      tileContent = _ref.tileContent;
+      point = _ref.point,
+      otherProps = _objectWithoutProperties(_ref, ['classes', 'point']);
+
   return _react2.default.createElement(
-    'button',
-    {
-      className: _mergeClassNames2.default.apply(undefined, [className].concat(_toConsumableArray(classes), [tileClassName instanceof Function ? tileClassName({ date: date, view: 'century' }) : tileClassName])),
-      disabled: minDate && (0, _dates.getBeginOfDecade)(minDate) > date || maxDate && (0, _dates.getEndOfDecade)(maxDate) < date,
-      onClick: onClick && function () {
-        return onClick(date);
-      },
-      onMouseOver: onMouseOver && function () {
-        return onMouseOver(date);
-      },
-      onFocus: onMouseOver && function () {
-        return onMouseOver(date);
-      },
-      style: style,
-      type: 'button'
-    },
-    _react2.default.createElement(
-      'time',
-      { dateTime: decade + 'T00:00:00.000' },
-      (0, _dates.getDecadeLabel)(decade)
-    ),
-    typeof tileContent === 'function' ? tileContent({ date: date, view: 'century' }) : tileContent
+    _Tile2.default,
+    _extends({}, otherProps, {
+      classes: [].concat(_toConsumableArray(classes), [className]),
+      dateTime: point + 'T00:00:00.000',
+      maxDateTransform: _dates.getEndOfDecade,
+      minDateTransform: _dates.getBeginOfDecade,
+      view: 'century'
+    }),
+    (0, _dates.getDecadeLabel)(point)
   );
@@ -72,5 +55,5 @@ };
 Decade.propTypes = _extends({
-  decade: _propTypes2.default.number.isRequired
+  point: _propTypes2.default.number.isRequired
 }, _propTypes3.tileProps);
 
 exports.default = Decade;

dist/CenturyView/Decades.js

@@ -15,5 +15,5 @@ 'use strict';
 
-var _Flex = require('../Flex');
+var _TileGroup = require('../TileGroup');
 
-var _Flex2 = _interopRequireDefault(_Flex);
+var _TileGroup2 = _interopRequireDefault(_TileGroup);
 
@@ -26,4 +26,2 @@ var _Decade = require('./Decade');
 
-var _utils = require('../shared/utils');
-
 var _propTypes = require('../shared/propTypes');
@@ -53,35 +51,15 @@
     value: function render() {
-      var end = this.end,
-          start = this.start;
-
       var _props = this.props,
           activeStartDate = _props.activeStartDate,
-          hover = _props.hover,
-          value = _props.value,
-          valueType = _props.valueType,
-          decadeProps = _objectWithoutProperties(_props, ['activeStartDate', 'hover', 'value', 'valueType']);
+          otherProps = _objectWithoutProperties(_props, ['activeStartDate']);
 
-      var decades = [];
-      for (var decade = start; decade <= end; decade += 10) {
-        var date = (0, _dates.getBeginOfDecade)(decade);
-
-        decades.push(_react2.default.createElement(_Decade2.default, _extends({
-          classes: (0, _utils.getTileClasses)({
-            value: value, valueType: valueType, date: date, dateType: 'decade', hover: hover
-          }),
-          date: date,
-          decade: decade,
-          key: decade
-        }, decadeProps)));
-      }
-
-      return _react2.default.createElement(
-        _Flex2.default,
-        {
-          className: 'react-calendar__century-view__decades',
-          count: 3,
-          wrap: true
-        },
-        decades
-      );
+      return _react2.default.createElement(_TileGroup2.default, _extends({}, otherProps, {
+        className: 'react-calendar__century-view__decades',
+        dateTransform: _dates.getBeginOfDecade,
+        dateType: 'decade',
+        end: this.end,
+        start: this.start,
+        step: 10,
+        tile: _Decade2.default
+      }));
     }
@@ -88,0 +66,0 @@ }, {

dist/DecadeView/Year.js

@@ -17,5 +17,5 @@ 'use strict';
 
-var _mergeClassNames = require('merge-class-names');
+var _Tile = require('../Tile');
 
-var _mergeClassNames2 = _interopRequireDefault(_mergeClassNames);
+var _Tile2 = _interopRequireDefault(_Tile);
 
@@ -30,2 +30,4 @@ var _dates = require('../shared/dates');
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 var className = 'react-calendar__decade-view__years__year';
@@ -35,34 +37,15 @@
   var classes = _ref.classes,
-      date = _ref.date,
-      maxDate = _ref.maxDate,
-      minDate = _ref.minDate,
-      onClick = _ref.onClick,
-      onMouseOver = _ref.onMouseOver,
-      style = _ref.style,
-      tileClassName = _ref.tileClassName,
-      tileContent = _ref.tileContent,
-      year = _ref.year;
+      point = _ref.point,
+      otherProps = _objectWithoutProperties(_ref, ['classes', 'point']);
+
   return _react2.default.createElement(
-    'button',
-    {
-      className: _mergeClassNames2.default.apply(undefined, [className].concat(_toConsumableArray(classes), [tileClassName instanceof Function ? tileClassName({ date: date, view: 'decade' }) : tileClassName])),
-      disabled: minDate && (0, _dates.getBeginOfYear)(minDate) > date || maxDate && (0, _dates.getEndOfYear)(maxDate) < date,
-      onClick: onClick && function () {
-        return onClick(date);
-      },
-      onMouseOver: onMouseOver && function () {
-        return onMouseOver(date);
-      },
-      onFocus: onMouseOver && function () {
-        return onMouseOver(date);
-      },
-      style: style,
-      type: 'button'
-    },
-    _react2.default.createElement(
-      'time',
-      { dateTime: year + 'T00:00:00.000' },
-      year
-    ),
-    typeof tileContent === 'function' ? tileContent({ date: date, view: 'decade' }) : tileContent
+    _Tile2.default,
+    _extends({}, otherProps, {
+      classes: [].concat(_toConsumableArray(classes), [className]),
+      dateTime: point + 'T00:00:00.000',
+      maxDateTransform: _dates.getEndOfYear,
+      minDateTransform: _dates.getBeginOfYear,
+      view: 'decade'
+    }),
+    point
   );
@@ -72,5 +55,5 @@ };
 Year.propTypes = _extends({
-  year: _propTypes2.default.number.isRequired
+  point: _propTypes2.default.number.isRequired
 }, _propTypes3.tileProps);
 
 exports.default = Year;

dist/DecadeView/Years.js

@@ -15,5 +15,5 @@ 'use strict';
 
-var _Flex = require('../Flex');
+var _TileGroup = require('../TileGroup');
 
-var _Flex2 = _interopRequireDefault(_Flex);
+var _TileGroup2 = _interopRequireDefault(_TileGroup);
 
@@ -26,4 +26,2 @@ var _Year = require('./Year');
 
-var _utils = require('../shared/utils');
-
 var _propTypes = require('../shared/propTypes');
@@ -53,35 +51,16 @@
     value: function render() {
-      var end = this.end,
-          start = this.start;
-
       var _props = this.props,
           activeStartDate = _props.activeStartDate,
-          hover = _props.hover,
-          value = _props.value,
-          valueType = _props.valueType,
-          yearProps = _objectWithoutProperties(_props, ['activeStartDate', 'hover', 'value', 'valueType']);
+          otherProps = _objectWithoutProperties(_props, ['activeStartDate']);
 
-      var years = [];
-      for (var year = start; year <= end; year += 1) {
-        var date = new Date(year, 0, 1);
-
-        years.push(_react2.default.createElement(_Year2.default, _extends({
-          classes: (0, _utils.getTileClasses)({
-            value: value, valueType: valueType, date: date, dateType: 'year', hover: hover
-          }),
-          date: date,
-          key: year,
-          year: year
-        }, yearProps)));
-      }
-
-      return _react2.default.createElement(
-        _Flex2.default,
-        {
-          className: 'react-calendar__decade-view__years',
-          count: 3,
-          wrap: true
+      return _react2.default.createElement(_TileGroup2.default, _extends({}, otherProps, {
+        className: 'react-calendar__decade-view__years',
+        dateTransform: function dateTransform(year) {
+          return new Date(year, 0, 1);
         },
-        years
-      );
+        dateType: 'year',
+        end: this.end,
+        start: this.start,
+        tile: _Year2.default
+      }));
     }
@@ -88,0 +67,0 @@ }, {

dist/MonthView.js

@@ -96,3 +96,4 @@ 'use strict';
           calendarType = _props3.calendarType,
-          childProps = _objectWithoutProperties(_props3, ['calendarType']);
+          showWeekNumbers = _props3.showWeekNumbers,
+          childProps = _objectWithoutProperties(_props3, ['calendarType', 'showWeekNumbers']);
 
@@ -99,0 +100,0 @@ return _react2.default.createElement(_Days2.default, _extends({

dist/MonthView/Day.js

@@ -17,5 +17,5 @@ 'use strict';
 
-var _mergeClassNames = require('merge-class-names');
+var _Tile = require('../Tile');
 
-var _mergeClassNames2 = _interopRequireDefault(_mergeClassNames);
+var _Tile2 = _interopRequireDefault(_Tile);
 
@@ -30,2 +30,4 @@ var _dates = require('../shared/dates');
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 var className = 'react-calendar__month-view__days__day';
@@ -37,33 +39,15 @@
       date = _ref.date,
-      maxDate = _ref.maxDate,
-      minDate = _ref.minDate,
-      onClick = _ref.onClick,
-      onMouseOver = _ref.onMouseOver,
-      style = _ref.style,
-      tileClassName = _ref.tileClassName,
-      tileContent = _ref.tileContent;
+      otherProps = _objectWithoutProperties(_ref, ['classes', 'currentMonthIndex', 'date']);
+
   return _react2.default.createElement(
-    'button',
-    {
-      className: _mergeClassNames2.default.apply(undefined, [className].concat(_toConsumableArray(classes), [(0, _dates.isWeekend)(date) && className + '--weekend', date.getMonth() !== currentMonthIndex && className + '--neighboringMonth', tileClassName instanceof Function ? tileClassName({ date: date, view: 'month' }) : tileClassName])),
-      disabled: minDate && (0, _dates.getBeginOfDay)(minDate) > date || maxDate && (0, _dates.getEndOfDay)(maxDate) < date,
-      key: date,
-      onClick: onClick && function () {
-        return onClick(date);
-      },
-      onMouseOver: onMouseOver && function () {
-        return onMouseOver(date);
-      },
-      onFocus: onMouseOver && function () {
-        return onMouseOver(date);
-      },
-      style: style,
-      type: 'button'
-    },
-    _react2.default.createElement(
-      'time',
-      { dateTime: (0, _dates.getISOLocalDate)(date) + 'T00:00:00.000' },
-      (0, _dates.getDay)(date)
-    ),
-    typeof tileContent === 'function' ? tileContent({ date: date, view: 'month' }) : tileContent
+    _Tile2.default,
+    _extends({}, otherProps, {
+      classes: [].concat(_toConsumableArray(classes), [className, (0, _dates.isWeekend)(date) ? className + '--weekend' : null, date.getMonth() !== currentMonthIndex ? className + '--neighboringMonth' : null]),
+      date: date,
+      dateTime: (0, _dates.getISOLocalDate)(date) + 'T00:00:00.000',
+      maxDateTransform: _dates.getEndOfDay,
+      minDateTransform: _dates.getBeginOfDay,
+      view: 'month'
+    }),
+    (0, _dates.getDay)(date)
   );
@@ -70,0 +54,0 @@ };

dist/MonthView/Days.js

@@ -19,5 +19,5 @@ 'use strict';
 
-var _Flex = require('../Flex');
+var _TileGroup = require('../TileGroup');
 
-var _Flex2 = _interopRequireDefault(_Flex);
+var _TileGroup2 = _interopRequireDefault(_TileGroup);
 
@@ -32,4 +32,2 @@ var _Day = require('./Day');
 
-var _utils = require('../shared/utils');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -57,38 +55,26 @@
     value: function render() {
-      var start = this.start,
-          end = this.end,
-          year = this.year,
-          monthIndex = this.monthIndex;
+      var _this2 = this;
 
+      var monthIndex = this.monthIndex;
+
       var _props = this.props,
           activeStartDate = _props.activeStartDate,
-          hover = _props.hover,
-          value = _props.value,
-          valueType = _props.valueType,
-          dayProps = _objectWithoutProperties(_props, ['activeStartDate', 'hover', 'value', 'valueType']);
+          calendarType = _props.calendarType,
+          showNeighboringMonth = _props.showNeighboringMonth,
+          otherProps = _objectWithoutProperties(_props, ['activeStartDate', 'calendarType', 'showNeighboringMonth']);
 
-      var days = [];
-      for (var day = start; day <= end; day += 1) {
-        var date = new Date(year, monthIndex, day);
-
-        days.push(_react2.default.createElement(_Day2.default, _extends({
-          classes: (0, _utils.getTileClasses)({
-            value: value, valueType: valueType, date: date, dateType: 'day', hover: hover
-          }),
-          currentMonthIndex: monthIndex,
-          date: date,
-          key: day
-        }, dayProps)));
-      }
-
-      return _react2.default.createElement(
-        _Flex2.default,
-        {
-          className: 'react-calendar__month-view__days',
-          count: 7,
-          offset: this.offset,
-          wrap: true
+      return _react2.default.createElement(_TileGroup2.default, _extends({}, otherProps, {
+        className: 'react-calendar__month-view__days',
+        count: 7,
+        dateTransform: function dateTransform(day) {
+          return new Date(_this2.year, monthIndex, day);
         },
-        days
-      );
+        dateType: 'day',
+        end: this.end,
+        offset: this.offset,
+        start: this.start,
+        tile: _Day2.default
+        // Tile props
+        , currentMonthIndex: monthIndex
+      }));
     }
@@ -95,0 +81,0 @@ }, {

dist/MonthView/Weekdays.js

@@ -35,4 +35,4 @@ 'use strict';
 
-var Weekdays = function (_PureComponent) {
-  _inherits(Weekdays, _PureComponent);
+var Weekdays = function (_Component) {
+  _inherits(Weekdays, _Component);
 
@@ -46,2 +46,7 @@ function Weekdays() {
   _createClass(Weekdays, [{
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps) {
+      return nextProps.calendarType !== this.props.calendarType;
+    }
+  }, {
     key: 'render',
@@ -109,3 +114,3 @@ value: function render() {
   return Weekdays;
-}(_react.PureComponent);
+}(_react.Component);
 
@@ -112,0 +117,0 @@ exports.default = Weekdays;

dist/MonthView/WeekNumbers.js

@@ -17,2 +17,6 @@ 'use strict';
 
+var _WeekNumber = require('./WeekNumber');
+
+var _WeekNumber2 = _interopRequireDefault(_WeekNumber);
+
 var _Flex = require('../Flex');
@@ -61,31 +65,8 @@
         weekNumbers.map(function (weekNumber, weekIndex) {
-          return onClickWeekNumber ? _react2.default.createElement(
-            'button',
-            {
-              className: 'react-calendar__tile',
-              key: weekNumber,
-              onClick: function onClick() {
-                return onClickWeekNumber(weekNumber, dates[weekIndex]);
-              },
-              style: { flexGrow: 1 },
-              type: 'button'
-            },
-            _react2.default.createElement(
-              'span',
-              null,
-              weekNumber
-            )
-          ) : _react2.default.createElement(
-            'div',
-            {
-              className: 'react-calendar__tile',
-              key: weekNumber,
-              style: { flexGrow: 1 }
-            },
-            _react2.default.createElement(
-              'span',
-              null,
-              weekNumber
-            )
-          );
+          return _react2.default.createElement(_WeekNumber2.default, {
+            date: dates[weekIndex],
+            key: weekNumber,
+            onClickWeekNumber: onClickWeekNumber,
+            weekNumber: weekNumber
+          });
         })
@@ -92,0 +73,0 @@ );

dist/shared/propTypes.js

@@ -26,3 +26,3 @@ 'use strict';
     if (!(minDate instanceof Date)) {
-      return new Error('Warning: Failed prop type: Invalid prop `' + propName + '` of type `' + (typeof minDate === 'undefined' ? 'undefined' : _typeof(minDate)) + '` supplied to `' + componentName + '`, expected instance of `Date`.');
+      return new Error('Invalid prop `' + propName + '` of type `' + (typeof minDate === 'undefined' ? 'undefined' : _typeof(minDate)) + '` supplied to `' + componentName + '`, expected instance of `Date`.');
     }
@@ -34,3 +34,3 @@
     if (maxDate && minDate > maxDate) {
-      return new Error('Warning: Failed prop type: Invalid prop `' + propName + '` of type `' + (typeof minDate === 'undefined' ? 'undefined' : _typeof(minDate)) + '` supplied to `' + componentName + '`, minDate cannot be larger than maxDate.');
+      return new Error('Invalid prop `' + propName + '` of type `' + (typeof minDate === 'undefined' ? 'undefined' : _typeof(minDate)) + '` supplied to `' + componentName + '`, minDate cannot be larger than maxDate.');
     }
@@ -48,3 +48,3 @@ }
     if (!(maxDate instanceof Date)) {
-      return new Error('Warning: Failed prop type: Invalid prop `' + propName + '` of type `' + (typeof maxDate === 'undefined' ? 'undefined' : _typeof(maxDate)) + '` supplied to `' + componentName + '`, expected instance of `Date`.');
+      return new Error('Invalid prop `' + propName + '` of type `' + (typeof maxDate === 'undefined' ? 'undefined' : _typeof(maxDate)) + '` supplied to `' + componentName + '`, expected instance of `Date`.');
     }
@@ -56,3 +56,3 @@
     if (minDate && maxDate < minDate) {
-      return new Error('Warning: Failed prop type: Invalid prop `' + propName + '` of type `' + (typeof maxDate === 'undefined' ? 'undefined' : _typeof(maxDate)) + '` supplied to `' + componentName + '`, maxDate cannot be smaller than minDate.');
+      return new Error('Invalid prop `' + propName + '` of type `' + (typeof maxDate === 'undefined' ? 'undefined' : _typeof(maxDate)) + '` supplied to `' + componentName + '`, maxDate cannot be smaller than minDate.');
     }
@@ -79,3 +79,3 @@ }
   if (allowedViews.indexOf(view) === -1) {
-    return new Error('Warning: Failed prop type: Invalid prop `' + propName + '` of value `' + view + '` supplied to `' + componentName + '`, expected one of [' + ['a', 'b', 'c', 'd', 'e'].map(function (a) {
+    return new Error('Invalid prop `' + propName + '` of value `' + view + '` supplied to `' + componentName + '`, expected one of [' + ['a', 'b', 'c', 'd', 'e'].map(function (a) {
       return '"' + a + '"';
@@ -92,3 +92,3 @@ }).join(', ') + '].');
   if (!view) {
-    return new Error('Warning: Failed prop type: The prop `' + propName + '` is marked as required in `' + componentName + '`, but its value is `' + view + '`.');
+    return new Error('The prop `' + propName + '` is marked as required in `' + componentName + '`, but its value is `' + view + '`.');
   }
@@ -95,0 +95,0 @@ return isView(props, propName, componentName);

dist/YearView/Month.js

@@ -17,5 +17,5 @@ 'use strict';
 
-var _mergeClassNames = require('merge-class-names');
+var _Tile = require('../Tile');
 
-var _mergeClassNames2 = _interopRequireDefault(_mergeClassNames);
+var _Tile2 = _interopRequireDefault(_Tile);
 
@@ -32,2 +32,4 @@ var _dates = require('../shared/dates');
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 var className = 'react-calendar__year-view__months__month';
@@ -39,32 +41,15 @@
       formatMonth = _ref.formatMonth,
-      maxDate = _ref.maxDate,
-      minDate = _ref.minDate,
-      onClick = _ref.onClick,
-      onMouseOver = _ref.onMouseOver,
-      style = _ref.style,
-      tileClassName = _ref.tileClassName,
-      tileContent = _ref.tileContent;
+      otherProps = _objectWithoutProperties(_ref, ['classes', 'date', 'formatMonth']);
+
   return _react2.default.createElement(
-    'button',
-    {
-      className: _mergeClassNames2.default.apply(undefined, [className].concat(_toConsumableArray(classes), [tileClassName instanceof Function ? tileClassName({ date: date, view: 'year' }) : tileClassName])),
-      disabled: minDate && (0, _dates.getBeginOfMonth)(minDate) > date || maxDate && (0, _dates.getEndOfMonth)(maxDate) < date,
-      onClick: onClick && function () {
-        return onClick(date);
-      },
-      onMouseOver: onMouseOver && function () {
-        return onMouseOver(date);
-      },
-      onFocus: onMouseOver && function () {
-        return onMouseOver(date);
-      },
-      style: style,
-      type: 'button'
-    },
-    _react2.default.createElement(
-      'time',
-      { dateTime: (0, _dates.getISOLocalMonth)(date) + 'T00:00:00.000' },
-      formatMonth(date)
-    ),
-    typeof tileContent === 'function' ? tileContent({ date: date, view: 'year' }) : tileContent
+    _Tile2.default,
+    _extends({}, otherProps, {
+      classes: [].concat(_toConsumableArray(classes), [className]),
+      date: date,
+      dateTime: (0, _dates.getISOLocalMonth)(date) + 'T00:00:00.000',
+      maxDateTransform: _dates.getEndOfMonth,
+      minDateTransform: _dates.getBeginOfMonth,
+      view: 'year'
+    }),
+    formatMonth(date)
   );
@@ -71,0 +56,0 @@ };

dist/YearView/Months.js

@@ -15,5 +15,5 @@ 'use strict';
 
-var _Flex = require('../Flex');
+var _TileGroup = require('../TileGroup');
 
-var _Flex2 = _interopRequireDefault(_Flex);
+var _TileGroup2 = _interopRequireDefault(_TileGroup);
 
@@ -26,4 +26,2 @@ var _Month = require('./Month');
 
-var _utils = require('../shared/utils');
-
 var _propTypes = require('../shared/propTypes');
@@ -61,35 +59,18 @@
     value: function render() {
-      var end = this.end,
-          start = this.start,
-          year = this.year;
+      var _this2 = this;
 
       var _props = this.props,
           activeStartDate = _props.activeStartDate,
-          hover = _props.hover,
-          value = _props.value,
-          valueType = _props.valueType,
-          monthProps = _objectWithoutProperties(_props, ['activeStartDate', 'hover', 'value', 'valueType']);
+          otherProps = _objectWithoutProperties(_props, ['activeStartDate']);
 
-      var months = [];
-      for (var monthIndex = start; monthIndex <= end; monthIndex += 1) {
-        var date = new Date(year, monthIndex, 1);
-
-        months.push(_react2.default.createElement(_Month2.default, _extends({
-          classes: (0, _utils.getTileClasses)({
-            value: value, valueType: valueType, date: date, dateType: 'month', hover: hover
-          }),
-          date: date,
-          key: monthIndex
-        }, monthProps)));
-      }
-
-      return _react2.default.createElement(
-        _Flex2.default,
-        {
-          className: 'react-calendar__year-view__months',
-          count: 3,
-          wrap: true
+      return _react2.default.createElement(_TileGroup2.default, _extends({}, otherProps, {
+        className: 'react-calendar__year-view__months',
+        dateTransform: function dateTransform(monthIndex) {
+          return new Date(_this2.year, monthIndex, 1);
         },
-        months
-      );
+        dateType: 'month',
+        end: this.end,
+        start: this.start,
+        tile: _Month2.default
+      }));
     }
@@ -96,0 +77,0 @@ }, {

package.json

 {
   "name": "react-calendar",
-  "version": "2.11.2",
+  "version": "2.12.0",
   "description": "A component for picking dates or date periods for your React application.",
@@ -53,3 +53,3 @@ "main": "dist/entry.js",
     "merge-class-names": "^1.1.1",
-    "prop-types": ">=15.5",
+    "prop-types": "^15.6.0",
     "react": ">=15.5",
@@ -70,3 +70,3 @@ "react-dom": ">=15.5"
     "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^4.15.0",
+    "eslint": "^4.16.0",
     "eslint-config-airbnb": "^16.1.0",
@@ -76,5 +76,5 @@ "eslint-plugin-class-property": "^1.1.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.5.1",
-    "jest": "^22.0.6",
-    "jest-cli": "^22.0.6",
+    "eslint-plugin-react": "^7.6.0",
+    "jest": "^22.1.4",
+    "jest-cli": "^22.1.4",
     "less": "^2.7.3",
@@ -81,0 +81,0 @@ "react-test-renderer": "^16.2.0"

src/Calendar.jsx

@@ -165,2 +165,4 @@ import React, { Component } from 'react';
       this.updateValues(nextProps);
+    } else {
+      nextState.activeStartDate = this.getActiveStartDate(nextProps);
     }
@@ -167,0 +169,0 @@

src/Calendar/Navigation.jsx

@@ -1,2 +0,2 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -18,3 +18,10 @@
 
-export default class Navigation extends PureComponent {
+export default class Navigation extends Component {
+  shouldComponentUpdate(nextProps) {
+    return (
+      nextProps.activeStartDate !== this.props.activeStartDate ||
+      nextProps.view !== this.props.view
+    );
+  }
+
   get drillUpAvailable() {
@@ -21,0 +28,0 @@ const { view, views } = this.props;

src/CenturyView/__tests__/Decade.jsx

@@ -11,3 +11,3 @@ import React from 'react';
   date: new Date(2011, 0, 1),
-  decade: 2011,
+  point: 2011,
 };
@@ -14,0 +14,0 @@

src/CenturyView/Decade.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
-import mergeClassNames from 'merge-class-names';
 
+import Tile from '../Tile';
+
 import { getBeginOfDecade, getEndOfDecade, getDecadeLabel } from '../shared/dates';
@@ -10,39 +11,17 @@ import { tileProps } from '../shared/propTypes';
 
-const Decade = ({
-  classes,
-  date,
-  decade,
-  maxDate,
-  minDate,
-  onClick,
-  onMouseOver,
-  style,
-  tileClassName,
-  tileContent,
-}) => (
-  <button
-    className={mergeClassNames(
-      className,
-      ...classes,
-      tileClassName instanceof Function ? tileClassName({ date, view: 'century' }) : tileClassName,
-    )}
-    disabled={
-      (minDate && getBeginOfDecade(minDate) > date) ||
-      (maxDate && getEndOfDecade(maxDate) < date)
-    }
-    onClick={onClick && (() => onClick(date))}
-    onMouseOver={onMouseOver && (() => onMouseOver(date))}
-    onFocus={onMouseOver && (() => onMouseOver(date))}
-    style={style}
-    type="button"
+const Decade = ({ classes, point, ...otherProps }) => (
+  <Tile
+    {...otherProps}
+    classes={[...classes, className]}
+    dateTime={`${point}T00:00:00.000`}
+    maxDateTransform={getEndOfDecade}
+    minDateTransform={getBeginOfDecade}
+    view="century"
   >
-    <time dateTime={`${decade}T00:00:00.000`}>
-      {getDecadeLabel(decade)}
-    </time>
-    {typeof tileContent === 'function' ? tileContent({ date, view: 'century' }) : tileContent}
-  </button>
+    {getDecadeLabel(point)}
+  </Tile>
 );
 
 Decade.propTypes = {
-  decade: PropTypes.number.isRequired,
+  point: PropTypes.number.isRequired,
   ...tileProps,
@@ -49,0 +28,0 @@ };

src/CenturyView/Decades.jsx

 import React, { PureComponent } from 'react';
 
-import Flex from '../Flex';
+import TileGroup from '../TileGroup';
 import Decade from './Decade';
@@ -10,3 +10,2 @@
 } from '../shared/dates';
-import { getTileClasses } from '../shared/utils';
 import { tileGroupProps } from '../shared/propTypes';
@@ -25,37 +24,18 @@
   render() {
-    const { end, start } = this;
-
     const {
       activeStartDate,
-      hover,
-      value,
-      valueType,
-      ...decadeProps
+      ...otherProps
     } = this.props;
 
-    const decades = [];
-    for (let decade = start; decade <= end; decade += 10) {
-      const date = getBeginOfDecade(decade);
-
-      decades.push(
-        <Decade
-          classes={getTileClasses({
-            value, valueType, date, dateType: 'decade', hover,
-          })}
-          date={date}
-          decade={decade}
-          key={decade}
-          {...decadeProps}
-        />,
-      );
-    }
-
     return (
-      <Flex
+      <TileGroup
+        {...otherProps}
         className="react-calendar__century-view__decades"
-        count={3}
-        wrap
-      >
-        {decades}
-      </Flex>
+        dateTransform={getBeginOfDecade}
+        dateType="decade"
+        end={this.end}
+        start={this.start}
+        step={10}
+        tile={Decade}
+      />
     );
@@ -62,0 +42,0 @@ }

src/DecadeView/__tests__/Year.jsx

@@ -11,3 +11,3 @@ import React from 'react';
   date: new Date(2018, 0, 1),
-  year: 2018,
+  point: 2018,
 };
@@ -14,0 +14,0 @@

src/DecadeView/Year.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
-import mergeClassNames from 'merge-class-names';
 
-import {
-  getBeginOfYear,
-  getEndOfYear,
-} from '../shared/dates';
+import Tile from '../Tile';
+
+import { getBeginOfYear, getEndOfYear } from '../shared/dates';
 import { tileProps } from '../shared/propTypes';
@@ -13,39 +11,17 @@
 
-const Year = ({
-  classes,
-  date,
-  maxDate,
-  minDate,
-  onClick,
-  onMouseOver,
-  style,
-  tileClassName,
-  tileContent,
-  year,
-}) => (
-  <button
-    className={mergeClassNames(
-      className,
-      ...classes,
-      tileClassName instanceof Function ? tileClassName({ date, view: 'decade' }) : tileClassName,
-    )}
-    disabled={
-      (minDate && getBeginOfYear(minDate) > date) ||
-      (maxDate && getEndOfYear(maxDate) < date)
-    }
-    onClick={onClick && (() => onClick(date))}
-    onMouseOver={onMouseOver && (() => onMouseOver(date))}
-    onFocus={onMouseOver && (() => onMouseOver(date))}
-    style={style}
-    type="button"
+const Year = ({ classes, point, ...otherProps }) => (
+  <Tile
+    {...otherProps}
+    classes={[...classes, className]}
+    dateTime={`${point}T00:00:00.000`}
+    maxDateTransform={getEndOfYear}
+    minDateTransform={getBeginOfYear}
+    view="decade"
   >
-    <time dateTime={`${year}T00:00:00.000`}>
-      {year}
-    </time>
-    {typeof tileContent === 'function' ? tileContent({ date, view: 'decade' }) : tileContent}
-  </button>
+    {point}
+  </Tile>
 );
 
 Year.propTypes = {
-  year: PropTypes.number.isRequired,
+  point: PropTypes.number.isRequired,
   ...tileProps,
@@ -52,0 +28,0 @@ };

src/DecadeView/Years.jsx

 import React, { PureComponent } from 'react';
 
-import Flex from '../Flex';
+import TileGroup from '../TileGroup';
 import Year from './Year';
 
 import { getBeginOfDecadeYear } from '../shared/dates';
-import { getTileClasses } from '../shared/utils';
 import { tileGroupProps } from '../shared/propTypes';
@@ -21,37 +20,17 @@
   render() {
-    const { end, start } = this;
-
     const {
       activeStartDate,
-      hover,
-      value,
-      valueType,
-      ...yearProps
+      ...otherProps
     } = this.props;
 
-    const years = [];
-    for (let year = start; year <= end; year += 1) {
-      const date = new Date(year, 0, 1);
-
-      years.push(
-        <Year
-          classes={getTileClasses({
-            value, valueType, date, dateType: 'year', hover,
-          })}
-          date={date}
-          key={year}
-          year={year}
-          {...yearProps}
-        />,
-      );
-    }
-
     return (
-      <Flex
+      <TileGroup
+        {...otherProps}
         className="react-calendar__decade-view__years"
-        count={3}
-        wrap
-      >
-        {years}
-      </Flex>
+        dateTransform={year => new Date(year, 0, 1)}
+        dateType="year"
+        end={this.end}
+        start={this.start}
+        tile={Year}
+      />
     );
@@ -58,0 +37,0 @@ }

src/MonthView.jsx

@@ -60,3 +60,3 @@ import React, { PureComponent } from 'react';
   renderDays() {
-    const { calendarType, ...childProps } = this.props;
+    const { calendarType, showWeekNumbers, ...childProps } = this.props;
 
@@ -63,0 +63,0 @@ return (

src/MonthView/__tests__/WeekNumbers.jsx

 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 
@@ -10,3 +10,3 @@ import WeekNumbers from '../WeekNumbers';
   it('renders proper weekNumbers for a year that starts in week 1 (ISO 8601)', () => {
-    const component = shallow(
+    const component = mount(
       <WeekNumbers
@@ -18,10 +18,10 @@ activeStartDate={new Date(2018, 0, 1)}
 
-    const children = component.children();
+    const weekNumbers = component.find('WeekNumber');
 
-    expect(children).toHaveLength(5);
-    expect(children.first().text()).toBe('1');
+    expect(weekNumbers).toHaveLength(5);
+    expect(weekNumbers.first().text()).toBe('1');
   });
 
   it('renders proper weekNumbers for a year that starts on week 52 (ISO 8601)', () => {
-    const component = shallow(
+    const component = mount(
       <WeekNumbers
@@ -33,10 +33,10 @@ activeStartDate={new Date(2017, 0, 1)}
 
-    const children = component.children();
+    const weekNumbers = component.find('WeekNumber');
 
-    expect(children).toHaveLength(6);
-    expect(children.first().text()).toBe('52');
+    expect(weekNumbers).toHaveLength(6);
+    expect(weekNumbers.first().text()).toBe('52');
   });
 
   it('renders proper weekNumbers for a year that starts on week 53 (ISO 8601)', () => {
-    const component = shallow(
+    const component = mount(
       <WeekNumbers
@@ -48,10 +48,10 @@ activeStartDate={new Date(2016, 0, 1)}
 
-    const children = component.children();
+    const weekNumbers = component.find('WeekNumber');
 
-    expect(children).toHaveLength(5);
-    expect(children.first().text()).toBe('53');
+    expect(weekNumbers).toHaveLength(5);
+    expect(weekNumbers.first().text()).toBe('53');
   });
 
   it('renders proper weekNumbers for a year that starts in week 1 (US)', () => {
-    const component = shallow(
+    const component = mount(
       <WeekNumbers
@@ -63,10 +63,10 @@ activeStartDate={new Date(2017, 0, 1)}
 
-    const children = component.children();
+    const weekNumbers = component.find('WeekNumber');
 
-    expect(children).toHaveLength(5);
-    expect(children.first().text()).toBe('1');
+    expect(weekNumbers).toHaveLength(5);
+    expect(weekNumbers.first().text()).toBe('1');
   });
 
   it('renders static divs as children when not given onClickWeekNumber', () => {
-    const component = shallow(
+    const component = mount(
       <WeekNumbers
@@ -84,3 +84,3 @@ activeStartDate={new Date(2017, 0, 1)}
   it('renders buttons as children when given onClickWeekNumber', () => {
-    const component = shallow(
+    const component = mount(
       <WeekNumbers
@@ -100,3 +100,3 @@ activeStartDate={new Date(2017, 0, 1)}
     const onClickWeekNumber = jest.fn();
-    const component = shallow(
+    const component = mount(
       <WeekNumbers
@@ -117,3 +117,3 @@ activeStartDate={new Date(2017, 0, 1)}
     const onClickWeekNumber = jest.fn();
-    const component = shallow(
+    const component = mount(
       <WeekNumbers
@@ -120,0 +120,0 @@ activeStartDate={new Date(2017, 0, 1)}

src/MonthView/Day.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
-import mergeClassNames from 'merge-class-names';
 
+import Tile from '../Tile';
+
 import {
@@ -20,34 +21,20 @@ getBeginOfDay,
   date,
-  maxDate,
-  minDate,
-  onClick,
-  onMouseOver,
-  style,
-  tileClassName,
-  tileContent,
+  ...otherProps
 }) => (
-  <button
-    className={mergeClassNames(
+  <Tile
+    {...otherProps}
+    classes={[
+      ...classes,
       className,
-      ...classes,
-      isWeekend(date) && `${className}--weekend`,
-      date.getMonth() !== currentMonthIndex && `${className}--neighboringMonth`,
-      tileClassName instanceof Function ? tileClassName({ date, view: 'month' }) : tileClassName,
-    )}
-    disabled={
-      (minDate && getBeginOfDay(minDate) > date) ||
-      (maxDate && getEndOfDay(maxDate) < date)
-    }
-    key={date}
-    onClick={onClick && (() => onClick(date))}
-    onMouseOver={onMouseOver && (() => onMouseOver(date))}
-    onFocus={onMouseOver && (() => onMouseOver(date))}
-    style={style}
-    type="button"
+      isWeekend(date) ? `${className}--weekend` : null,
+      date.getMonth() !== currentMonthIndex ? `${className}--neighboringMonth` : null,
+    ]}
+    date={date}
+    dateTime={`${getISOLocalDate(date)}T00:00:00.000`}
+    maxDateTransform={getEndOfDay}
+    minDateTransform={getBeginOfDay}
+    view="month"
   >
-    <time dateTime={`${getISOLocalDate(date)}T00:00:00.000`}>
-      {getDay(date)}
-    </time>
-    {typeof tileContent === 'function' ? tileContent({ date, view: 'month' }) : tileContent}
-  </button>
+    {getDay(date)}
+  </Tile>
 );
@@ -54,0 +41,0 @@

src/MonthView/Days.jsx

 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
-import Flex from '../Flex';
+import TileGroup from '../TileGroup';
 import Day from './Day';
@@ -14,3 +14,2 @@
 import { isCalendarType, tileGroupProps } from '../shared/propTypes';
-import { getTileClasses } from '../shared/utils';
 
@@ -68,40 +67,25 @@ export default class Days extends PureComponent {
   render() {
-    const {
-      start, end, year, monthIndex,
-    } = this;
+    const { monthIndex } = this;
 
     const {
       activeStartDate,
-      hover,
-      value,
-      valueType,
-      ...dayProps
+      calendarType,
+      showNeighboringMonth,
+      ...otherProps
     } = this.props;
 
-    const days = [];
-    for (let day = start; day <= end; day += 1) {
-      const date = new Date(year, monthIndex, day);
-
-      days.push(
-        <Day
-          classes={getTileClasses({
-            value, valueType, date, dateType: 'day', hover,
-          })}
-          currentMonthIndex={monthIndex}
-          date={date}
-          key={day}
-          {...dayProps}
-        />,
-      );
-    }
-
     return (
-      <Flex
+      <TileGroup
+        {...otherProps}
         className="react-calendar__month-view__days"
         count={7}
+        dateTransform={day => new Date(this.year, monthIndex, day)}
+        dateType="day"
+        end={this.end}
         offset={this.offset}
-        wrap
-      >
-        {days}
-      </Flex>
+        start={this.start}
+        tile={Day}
+        // Tile props
+        currentMonthIndex={monthIndex}
+      />
     );
@@ -108,0 +92,0 @@ }

src/MonthView/Weekdays.jsx

@@ -1,2 +0,2 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -15,3 +15,7 @@
 
-export default class Weekdays extends PureComponent {
+export default class Weekdays extends Component {
+  shouldComponentUpdate(nextProps) {
+    return nextProps.calendarType !== this.props.calendarType;
+  }
+
   get beginOfMonth() {
@@ -18,0 +22,0 @@ const { month } = this.props;

src/MonthView/WeekNumbers.jsx

 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
+import WeekNumber from './WeekNumber';
 import Flex from '../Flex';
@@ -82,19 +83,8 @@
           weekNumbers.map((weekNumber, weekIndex) => (
-            onClickWeekNumber ?
-              <button
-                className="react-calendar__tile"
-                key={weekNumber}
-                onClick={() => onClickWeekNumber(weekNumber, dates[weekIndex])}
-                style={{ flexGrow: 1 }}
-                type="button"
-              >
-                <span>{weekNumber}</span>
-              </button> :
-              <div
-                className="react-calendar__tile"
-                key={weekNumber}
-                style={{ flexGrow: 1 }}
-              >
-                <span>{weekNumber}</span>
-              </div>
+            <WeekNumber
+              date={dates[weekIndex]}
+              key={weekNumber}
+              onClickWeekNumber={onClickWeekNumber}
+              weekNumber={weekNumber}
+            />
           ))
@@ -101,0 +91,0 @@ }

src/shared/propTypes.js

@@ -13,3 +13,3 @@ import PropTypes from 'prop-types';
     if (!(minDate instanceof Date)) {
-      return new Error(`Warning: Failed prop type: Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`);
+      return new Error(`Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`);
     }
@@ -20,3 +20,3 @@
     if (maxDate && minDate > maxDate) {
-      return new Error(`Warning: Failed prop type: Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, minDate cannot be larger than maxDate.`);
+      return new Error(`Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, minDate cannot be larger than maxDate.`);
     }
@@ -34,3 +34,3 @@ }
     if (!(maxDate instanceof Date)) {
-      return new Error(`Warning: Failed prop type: Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`);
+      return new Error(`Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`);
     }
@@ -41,3 +41,3 @@
     if (minDate && maxDate < minDate) {
-      return new Error(`Warning: Failed prop type: Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, maxDate cannot be smaller than minDate.`);
+      return new Error(`Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, maxDate cannot be smaller than minDate.`);
     }
@@ -69,3 +69,3 @@ }
   if (allowedViews.indexOf(view) === -1) {
-    return new Error(`Warning: Failed prop type: Invalid prop \`${propName}\` of value \`${view}\` supplied to \`${componentName}\`, expected one of [${['a', 'b', 'c', 'd', 'e'].map(a => `"${a}"`).join(', ')}].`);
+    return new Error(`Invalid prop \`${propName}\` of value \`${view}\` supplied to \`${componentName}\`, expected one of [${['a', 'b', 'c', 'd', 'e'].map(a => `"${a}"`).join(', ')}].`);
   }
@@ -80,3 +80,3 @@
   if (!view) {
-    return new Error(`Warning: Failed prop type: The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is \`${view}\`.`);
+    return new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is \`${view}\`.`);
   }
@@ -83,0 +83,0 @@ return isView(props, propName, componentName);

src/YearView/Month.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
-import mergeClassNames from 'merge-class-names';
 
+import Tile from '../Tile';
+
 import {
@@ -19,31 +20,15 @@ getBeginOfMonth,
   formatMonth,
-  maxDate,
-  minDate,
-  onClick,
-  onMouseOver,
-  style,
-  tileClassName,
-  tileContent,
+  ...otherProps
 }) => (
-  <button
-    className={mergeClassNames(
-      className,
-      ...classes,
-      tileClassName instanceof Function ? tileClassName({ date, view: 'year' }) : tileClassName,
-    )}
-    disabled={
-      (minDate && getBeginOfMonth(minDate) > date) ||
-      (maxDate && getEndOfMonth(maxDate) < date)
-    }
-    onClick={onClick && (() => onClick(date))}
-    onMouseOver={onMouseOver && (() => onMouseOver(date))}
-    onFocus={onMouseOver && (() => onMouseOver(date))}
-    style={style}
-    type="button"
+  <Tile
+    {...otherProps}
+    classes={[...classes, className]}
+    date={date}
+    dateTime={`${getISOLocalMonth(date)}T00:00:00.000`}
+    maxDateTransform={getEndOfMonth}
+    minDateTransform={getBeginOfMonth}
+    view="year"
   >
-    <time dateTime={`${getISOLocalMonth(date)}T00:00:00.000`}>
-      {formatMonth(date)}
-    </time>
-    {typeof tileContent === 'function' ? tileContent({ date, view: 'year' }) : tileContent}
-  </button>
+    {formatMonth(date)}
+  </Tile>
 );
@@ -50,0 +35,0 @@

src/YearView/Months.jsx

 import React, { PureComponent } from 'react';
 
-import Flex from '../Flex';
+import TileGroup from '../TileGroup';
 import Month from './Month';
 
 import { getYear } from '../shared/dates';
-import { getTileClasses } from '../shared/utils';
 import { tileGroupProps } from '../shared/propTypes';
@@ -21,36 +20,17 @@
   render() {
-    const { end, start, year } = this;
-
     const {
       activeStartDate,
-      hover,
-      value,
-      valueType,
-      ...monthProps
+      ...otherProps
     } = this.props;
 
-    const months = [];
-    for (let monthIndex = start; monthIndex <= end; monthIndex += 1) {
-      const date = new Date(year, monthIndex, 1);
-
-      months.push(
-        <Month
-          classes={getTileClasses({
-            value, valueType, date, dateType: 'month', hover,
-          })}
-          date={date}
-          key={monthIndex}
-          {...monthProps}
-        />,
-      );
-    }
-
     return (
-      <Flex
+      <TileGroup
+        {...otherProps}
         className="react-calendar__year-view__months"
-        count={3}
-        wrap
-      >
-        {months}
-      </Flex>
+        dateTransform={monthIndex => new Date(this.year, monthIndex, 1)}
+        dateType="month"
+        end={this.end}
+        start={this.start}
+        tile={Month}
+      />
     );
@@ -57,0 +37,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

318540

increased by0.45%

Number of package files

78

increased by8.33%

Lines of code

7985

increased by0.25%

Dependency changes

• Updatedprop-types@^15.6.0