react-calendar - npm Package Compare versions

Comparing version 3.0.0-beta.5 to 3.0.0-beta.6

dist/esm/Calendar.js

@@ -21,4 +21,12 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
@@ -140,8 +148,4 @@
 
-var getActiveStartDate = function getActiveStartDate(props) {
-  var activeStartDate = props.activeStartDate,
-      defaultActiveStartDate = props.defaultActiveStartDate,
-      defaultValue = props.defaultValue,
-      defaultView = props.defaultView,
-      maxDate = props.maxDate,
+function getActiveStartDate(props) {
+  var maxDate = props.maxDate,
       maxDetail = props.maxDetail,
@@ -152,5 +156,5 @@ minDate = props.minDate,
       view = props.view;
-  var rangeType = getView(view || defaultView, minDetail, maxDetail);
-  var valueFrom = activeStartDate || defaultActiveStartDate || getDetailValueFrom({
-    value: value || defaultValue,
+  var rangeType = getView(view, minDetail, maxDetail);
+  var valueFrom = getDetailValueFrom({
+    value: value,
     minDate: minDate,
@@ -161,4 +165,30 @@ maxDate: maxDate,
   return getBegin(rangeType, valueFrom);
-};
+}
 
+function getInitialActiveStartDate(props) {
+  var activeStartDate = props.activeStartDate,
+      defaultActiveStartDate = props.defaultActiveStartDate,
+      defaultValue = props.defaultValue,
+      defaultView = props.defaultView,
+      maxDetail = props.maxDetail,
+      minDetail = props.minDetail,
+      value = props.value,
+      view = props.view,
+      otherProps = _objectWithoutProperties(props, ["activeStartDate", "defaultActiveStartDate", "defaultValue", "defaultView", "maxDetail", "minDetail", "value", "view"]);
+
+  var rangeType = getView(view, minDetail, maxDetail);
+  var valueFrom = activeStartDate || defaultActiveStartDate;
+
+  if (valueFrom) {
+    return getBegin(rangeType, valueFrom);
+  }
+
+  return getActiveStartDate(_objectSpread({
+    maxDetail: maxDetail,
+    minDetail: minDetail,
+    value: value || defaultValue,
+    view: view || defaultView
+  }, otherProps));
+}
+
 var isSingleValue = function isSingleValue(value) {
@@ -188,5 +218,5 @@ return value && [].concat(value).length === 1;
       /* eslint-disable react/destructuring-assignment */
-      activeStartDate: getActiveStartDate(_this.props),
-      view: _this.props.defaultView,
-      value: _this.props.defaultValue
+      activeStartDate: _this.props.defaultActiveStartDate,
+      value: _this.props.defaultValue,
+      view: _this.props.defaultView
       /* eslint-enable react/destructuring-assignment */
@@ -196,33 +226,29 @@
 
-    _defineProperty(_assertThisInitialized(_this), "setActiveStartDate", function (activeStartDate) {
-      var onActiveStartDateChange = _this.props.onActiveStartDateChange;
-
-      _this.setState({
-        activeStartDate: activeStartDate
-      }, function () {
-        var _assertThisInitialize = _assertThisInitialized(_this),
-            view = _assertThisInitialize.view;
-
-        callIfDefined(onActiveStartDateChange, {
-          activeStartDate: activeStartDate,
-          view: view
-        });
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "setActiveStartDateAndView", function (activeStartDate, view, callback) {
+    _defineProperty(_assertThisInitialized(_this), "setStateAndCallCallbacks", function (nextState, callback) {
       var _this$props = _this.props,
           onActiveStartDateChange = _this$props.onActiveStartDateChange,
-          onViewChange = _this$props.onViewChange;
+          onChange = _this$props.onChange,
+          onViewChange = _this$props.onViewChange,
+          selectRange = _this$props.selectRange;
 
-      _this.setState({
-        activeStartDate: activeStartDate,
-        view: view
-      }, function () {
+      _this.setState(nextState, function () {
         var args = {
-          activeStartDate: activeStartDate,
-          view: view
+          activeStartDate: nextState.activeStartDate || _this.activeStartDate,
+          view: nextState.view || _this.view
         };
-        callIfDefined(onActiveStartDateChange, args);
-        callIfDefined(onViewChange, args);
+
+        if ('activeStartDate' in nextState) {
+          callIfDefined(onActiveStartDateChange, args);
+        }
+
+        if ('view' in nextState) {
+          callIfDefined(onViewChange, args);
+        }
+
+        if ('value' in nextState) {
+          if (!selectRange || !isSingleValue(nextState.value)) {
+            callIfDefined(onChange, nextState.value);
+          }
+        }
+
         callIfDefined(callback, args);
@@ -232,2 +258,8 @@ });
 
+    _defineProperty(_assertThisInitialized(_this), "setActiveStartDate", function (activeStartDate) {
+      _this.setStateAndCallCallbacks({
+        activeStartDate: activeStartDate
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "drillDown", function (nextActiveStartDate, event) {
@@ -240,5 +272,5 @@ if (!_this.drillDownAvailable) {
 
-      var _assertThisInitialize2 = _assertThisInitialized(_this),
-          view = _assertThisInitialize2.view,
-          views = _assertThisInitialize2.views;
+      var _assertThisInitialize = _assertThisInitialized(_this),
+          view = _assertThisInitialize.view,
+          views = _assertThisInitialize.views;
 
@@ -248,3 +280,6 @@ var onDrillDown = _this.props.onDrillDown;
 
-      _this.setActiveStartDateAndView(nextActiveStartDate, nextView, onDrillDown);
+      _this.setStateAndCallCallbacks({
+        activeStartDate: nextActiveStartDate,
+        view: nextView
+      }, onDrillDown);
     });
@@ -257,6 +292,6 @@
 
-      var _assertThisInitialize3 = _assertThisInitialized(_this),
-          activeStartDate = _assertThisInitialize3.activeStartDate,
-          view = _assertThisInitialize3.view,
-          views = _assertThisInitialize3.views;
+      var _assertThisInitialize2 = _assertThisInitialized(_this),
+          activeStartDate = _assertThisInitialize2.activeStartDate,
+          view = _assertThisInitialize2.view,
+          views = _assertThisInitialize2.views;
 
@@ -267,9 +302,10 @@ var onDrillUp = _this.props.onDrillUp;
 
-      _this.setActiveStartDateAndView(nextActiveStartDate, nextView, onDrillUp);
+      _this.setStateAndCallCallbacks({
+        activeStartDate: nextActiveStartDate,
+        view: nextView
+      }, onDrillUp);
     });
 
     _defineProperty(_assertThisInitialized(_this), "onChange", function (value, event) {
-      var _this$props2 = _this.props,
-          onChange = _this$props2.onChange,
-          selectRange = _this$props2.selectRange;
+      var selectRange = _this.props.selectRange;
 
@@ -279,9 +315,8 @@ _this.onClickTile(value, event);
       var nextValue;
-      var callback;
 
       if (selectRange) {
         // Range selection turned on
-        var _assertThisInitialize4 = _assertThisInitialized(_this),
-            previousValue = _assertThisInitialize4.value,
-            valueType = _assertThisInitialize4.valueType;
+        var _assertThisInitialize3 = _assertThisInitialized(_this),
+            previousValue = _assertThisInitialize3.value,
+            valueType = _assertThisInitialize3.valueType;
 
@@ -295,6 +330,2 @@ if (!isSingleValue(previousValue)) {
           nextValue = getValueRange(valueType, previousValue, value);
-
-          callback = function callback() {
-            return callIfDefined(onChange, nextValue);
-          };
         }
@@ -304,22 +335,23 @@ } else {
         nextValue = _this.getProcessedValue(value);
-
-        callback = function callback() {
-          return callIfDefined(onChange, nextValue);
-        };
       }
 
-      _this.setState({
+      var nextActiveStartDate = getActiveStartDate(_objectSpread({}, _this.props, {
         value: nextValue
-      }, callback);
+      }));
+
+      _this.setStateAndCallCallbacks({
+        activeStartDate: nextActiveStartDate,
+        value: nextValue
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "onClickTile", function (value, event) {
-      var _assertThisInitialize5 = _assertThisInitialized(_this),
-          view = _assertThisInitialize5.view;
+      var _assertThisInitialize4 = _assertThisInitialized(_this),
+          view = _assertThisInitialize4.view;
 
-      var _this$props3 = _this.props,
-          onClickDay = _this$props3.onClickDay,
-          onClickDecade = _this$props3.onClickDecade,
-          onClickMonth = _this$props3.onClickMonth,
-          onClickYear = _this$props3.onClickYear;
+      var _this$props2 = _this.props,
+          onClickDay = _this$props2.onClickDay,
+          onClickDecade = _this$props2.onClickDecade,
+          onClickMonth = _this$props2.onClickMonth,
+          onClickYear = _this$props2.onClickYear;
 
@@ -376,7 +408,7 @@ var callback = function () {
     value: function getProcessedValue(value) {
-      var _this$props4 = this.props,
-          minDate = _this$props4.minDate,
-          maxDate = _this$props4.maxDate,
-          maxDetail = _this$props4.maxDetail,
-          returnValue = _this$props4.returnValue;
+      var _this$props3 = this.props,
+          minDate = _this$props3.minDate,
+          maxDate = _this$props3.maxDate,
+          maxDetail = _this$props3.maxDetail,
+          returnValue = _this$props3.returnValue;
 
@@ -406,6 +438,2 @@ var processFunction = function () {
     }
-    /**
-     * Called when the user uses navigation buttons.
-     */
-
   }, {
@@ -419,11 +447,11 @@ key: "renderContent",
           view = this.view;
-      var _this$props5 = this.props,
-          calendarType = _this$props5.calendarType,
-          locale = _this$props5.locale,
-          maxDate = _this$props5.maxDate,
-          minDate = _this$props5.minDate,
-          selectRange = _this$props5.selectRange,
-          tileClassName = _this$props5.tileClassName,
-          tileContent = _this$props5.tileContent,
-          tileDisabled = _this$props5.tileDisabled;
+      var _this$props4 = this.props,
+          calendarType = _this$props4.calendarType,
+          locale = _this$props4.locale,
+          maxDate = _this$props4.maxDate,
+          minDate = _this$props4.minDate,
+          selectRange = _this$props4.selectRange,
+          tileClassName = _this$props4.tileClassName,
+          tileContent = _this$props4.tileContent,
+          tileDisabled = _this$props4.tileDisabled;
       var hover = this.hover;
@@ -466,5 +494,5 @@ var activeStartDate = next ? getBeginNext(view, currentActiveStartDate) : currentActiveStartDate;
           {
-            var _this$props6 = this.props,
-                formatMonth = _this$props6.formatMonth,
-                formatMonthYear = _this$props6.formatMonthYear;
+            var _this$props5 = this.props,
+                formatMonth = _this$props5.formatMonth,
+                formatMonthYear = _this$props5.formatMonthYear;
             return React.createElement(YearView, _extends({
@@ -478,10 +506,10 @@ formatMonth: formatMonth,
           {
-            var _this$props7 = this.props,
-                formatLongDate = _this$props7.formatLongDate,
-                formatShortWeekday = _this$props7.formatShortWeekday,
-                onClickWeekNumber = _this$props7.onClickWeekNumber,
-                showDoubleView = _this$props7.showDoubleView,
-                showFixedNumberOfWeeks = _this$props7.showFixedNumberOfWeeks,
-                showNeighboringMonth = _this$props7.showNeighboringMonth,
-                showWeekNumbers = _this$props7.showWeekNumbers;
+            var _this$props6 = this.props,
+                formatLongDate = _this$props6.formatLongDate,
+                formatShortWeekday = _this$props6.formatShortWeekday,
+                onClickWeekNumber = _this$props6.onClickWeekNumber,
+                showDoubleView = _this$props6.showDoubleView,
+                showFixedNumberOfWeeks = _this$props6.showFixedNumberOfWeeks,
+                showNeighboringMonth = _this$props6.showNeighboringMonth,
+                showWeekNumbers = _this$props6.showWeekNumbers;
             var onMouseLeave = this.onMouseLeave;
@@ -516,19 +544,19 @@ return React.createElement(MonthView, _extends({
           views = this.views;
-      var _this$props8 = this.props,
-          formatMonthYear = _this$props8.formatMonthYear,
-          formatYear = _this$props8.formatYear,
-          locale = _this$props8.locale,
-          maxDate = _this$props8.maxDate,
-          minDate = _this$props8.minDate,
-          navigationAriaLabel = _this$props8.navigationAriaLabel,
-          navigationLabel = _this$props8.navigationLabel,
-          next2AriaLabel = _this$props8.next2AriaLabel,
-          next2Label = _this$props8.next2Label,
-          nextAriaLabel = _this$props8.nextAriaLabel,
-          nextLabel = _this$props8.nextLabel,
-          prev2AriaLabel = _this$props8.prev2AriaLabel,
-          prev2Label = _this$props8.prev2Label,
-          prevAriaLabel = _this$props8.prevAriaLabel,
-          prevLabel = _this$props8.prevLabel,
-          showDoubleView = _this$props8.showDoubleView;
+      var _this$props7 = this.props,
+          formatMonthYear = _this$props7.formatMonthYear,
+          formatYear = _this$props7.formatYear,
+          locale = _this$props7.locale,
+          maxDate = _this$props7.maxDate,
+          minDate = _this$props7.minDate,
+          navigationAriaLabel = _this$props7.navigationAriaLabel,
+          navigationLabel = _this$props7.navigationLabel,
+          next2AriaLabel = _this$props7.next2AriaLabel,
+          next2Label = _this$props7.next2Label,
+          nextAriaLabel = _this$props7.nextAriaLabel,
+          nextLabel = _this$props7.nextLabel,
+          prev2AriaLabel = _this$props7.prev2AriaLabel,
+          prev2Label = _this$props7.prev2Label,
+          prevAriaLabel = _this$props7.prevAriaLabel,
+          prevLabel = _this$props7.prevLabel,
+          showDoubleView = _this$props7.showDoubleView;
       return React.createElement(Navigation, {
@@ -561,6 +589,6 @@ activeStartDate: activeStartDate,
     value: function render() {
-      var _this$props9 = this.props,
-          className = _this$props9.className,
-          selectRange = _this$props9.selectRange,
-          showDoubleView = _this$props9.showDoubleView;
+      var _this$props8 = this.props,
+          className = _this$props8.className,
+          selectRange = _this$props8.selectRange,
+          showDoubleView = _this$props8.showDoubleView;
       var onMouseLeave = this.onMouseLeave,
@@ -582,3 +610,3 @@ value = this.value;
       var activeStartDateState = this.state.activeStartDate;
-      return activeStartDateProps || activeStartDateState;
+      return activeStartDateProps || activeStartDateState || getInitialActiveStartDate(this.props);
     }
@@ -588,5 +616,5 @@ }, {
     get: function get() {
-      var _this$props10 = this.props,
-          selectRange = _this$props10.selectRange,
-          valueProps = _this$props10.value;
+      var _this$props9 = this.props,
+          selectRange = _this$props9.selectRange,
+          valueProps = _this$props9.value;
       var valueState = this.state.value; // In the middle of range selection, use value from state
@@ -598,3 +626,3 @@
 
-      return valueProps || valueState;
+      return valueProps !== undefined ? valueProps : valueState;
     }
@@ -610,6 +638,6 @@ }, {
     get: function get() {
-      var _this$props11 = this.props,
-          minDetail = _this$props11.minDetail,
-          maxDetail = _this$props11.maxDetail,
-          viewProps = _this$props11.view;
+      var _this$props10 = this.props,
+          minDetail = _this$props10.minDetail,
+          maxDetail = _this$props10.maxDetail,
+          viewProps = _this$props10.view;
       var viewState = this.state.view;
@@ -621,5 +649,5 @@ return getView(viewProps || viewState, minDetail, maxDetail);
     get: function get() {
-      var _this$props12 = this.props,
-          minDetail = _this$props12.minDetail,
-          maxDetail = _this$props12.maxDetail;
+      var _this$props11 = this.props,
+          minDetail = _this$props11.minDetail,
+          maxDetail = _this$props11.maxDetail;
       return getLimitedViews(minDetail, maxDetail);
@@ -626,0 +654,0 @@ }

dist/esm/Calendar/Navigation.js

 import React from 'react';
 import PropTypes from 'prop-types';
+import { getUserLocale } from 'get-user-locale';
 import { getCenturyLabel, getDecadeLabel, getBeginNext, getBeginNext2, getBeginPrevious, getBeginPrevious2, getEndPrevious, getEndPrevious2 } from '../shared/dates';
@@ -106,4 +107,5 @@ import { formatMonthYear as defaultFormatMonthYear, formatYear as defaultFormatYear } from '../shared/dateFormatter';
       date: date,
-      view: view,
-      label: label
+      label: label,
+      locale: locale || getUserLocale(),
+      view: view
     }) : label;
@@ -110,0 +112,0 @@ }

dist/esm/MonthView.js

@@ -13,3 +13,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { CALENDAR_TYPES, CALENDAR_TYPE_LOCALES } from './shared/const';
-import { isCalendarType, isMaxDate, isMinDate, isValue } from './shared/propTypes';
+import { isCalendarType } from './shared/propTypes';
 
@@ -84,13 +84,6 @@ function getCalendarTypeFromLocale(locale) {
   locale: PropTypes.string,
-  maxDate: isMaxDate,
-  minDate: isMinDate,
-  onChange: PropTypes.func,
   onClickWeekNumber: PropTypes.func,
   onMouseLeave: PropTypes.func,
-  setActiveRange: PropTypes.func,
   showFixedNumberOfWeeks: PropTypes.bool,
-  showNeighboringMonth: PropTypes.bool,
-  showWeekNumbers: PropTypes.bool,
-  value: isValue,
-  valueType: PropTypes.string
+  showWeekNumbers: PropTypes.bool
 };

dist/esm/MonthView/Days.js

@@ -55,3 +55,5 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
     if (showNeighboringMonth) {
-      var activeEndDate = new Date(year, monthIndex, daysInMonth);
+      var activeEndDate = new Date();
+      activeEndDate.setFullYear(year, monthIndex, daysInMonth);
+      activeEndDate.setHours(0, 0, 0, 0);
       var daysUntilEndOfTheWeek = 7 - getDayOfWeek(activeEndDate, calendarType) - 1;
@@ -69,3 +71,6 @@ return daysInMonth + daysUntilEndOfTheWeek;
     dateTransform: function dateTransform(day) {
-      return new Date(year, monthIndex, day);
+      var date = new Date();
+      date.setFullYear(year, monthIndex, day);
+      date.setHours(0, 0, 0, 0);
+      return date;
     },
@@ -72,0 +77,0 @@ dateType: "day",

dist/umd/Calendar.js

@@ -54,4 +54,12 @@ "use strict";
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
@@ -162,8 +170,4 @@
 
-var getActiveStartDate = function getActiveStartDate(props) {
-  var activeStartDate = props.activeStartDate,
-      defaultActiveStartDate = props.defaultActiveStartDate,
-      defaultValue = props.defaultValue,
-      defaultView = props.defaultView,
-      maxDate = props.maxDate,
+function getActiveStartDate(props) {
+  var maxDate = props.maxDate,
       maxDetail = props.maxDetail,
@@ -174,5 +178,5 @@ minDate = props.minDate,
       view = props.view;
-  var rangeType = getView(view || defaultView, minDetail, maxDetail);
-  var valueFrom = activeStartDate || defaultActiveStartDate || getDetailValueFrom({
-    value: value || defaultValue,
+  var rangeType = getView(view, minDetail, maxDetail);
+  var valueFrom = getDetailValueFrom({
+    value: value,
     minDate: minDate,
@@ -183,4 +187,30 @@ maxDate: maxDate,
   return (0, _dates.getBegin)(rangeType, valueFrom);
-};
+}
 
+function getInitialActiveStartDate(props) {
+  var activeStartDate = props.activeStartDate,
+      defaultActiveStartDate = props.defaultActiveStartDate,
+      defaultValue = props.defaultValue,
+      defaultView = props.defaultView,
+      maxDetail = props.maxDetail,
+      minDetail = props.minDetail,
+      value = props.value,
+      view = props.view,
+      otherProps = _objectWithoutProperties(props, ["activeStartDate", "defaultActiveStartDate", "defaultValue", "defaultView", "maxDetail", "minDetail", "value", "view"]);
+
+  var rangeType = getView(view, minDetail, maxDetail);
+  var valueFrom = activeStartDate || defaultActiveStartDate;
+
+  if (valueFrom) {
+    return (0, _dates.getBegin)(rangeType, valueFrom);
+  }
+
+  return getActiveStartDate(_objectSpread({
+    maxDetail: maxDetail,
+    minDetail: minDetail,
+    value: value || defaultValue,
+    view: view || defaultView
+  }, otherProps));
+}
+
 var isSingleValue = function isSingleValue(value) {
@@ -210,5 +240,5 @@ return value && [].concat(value).length === 1;
       /* eslint-disable react/destructuring-assignment */
-      activeStartDate: getActiveStartDate(_this.props),
-      view: _this.props.defaultView,
-      value: _this.props.defaultValue
+      activeStartDate: _this.props.defaultActiveStartDate,
+      value: _this.props.defaultValue,
+      view: _this.props.defaultView
       /* eslint-enable react/destructuring-assignment */
@@ -218,33 +248,29 @@
 
-    _defineProperty(_assertThisInitialized(_this), "setActiveStartDate", function (activeStartDate) {
-      var onActiveStartDateChange = _this.props.onActiveStartDateChange;
-
-      _this.setState({
-        activeStartDate: activeStartDate
-      }, function () {
-        var _assertThisInitialize = _assertThisInitialized(_this),
-            view = _assertThisInitialize.view;
-
-        (0, _utils.callIfDefined)(onActiveStartDateChange, {
-          activeStartDate: activeStartDate,
-          view: view
-        });
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "setActiveStartDateAndView", function (activeStartDate, view, callback) {
+    _defineProperty(_assertThisInitialized(_this), "setStateAndCallCallbacks", function (nextState, callback) {
       var _this$props = _this.props,
           onActiveStartDateChange = _this$props.onActiveStartDateChange,
-          onViewChange = _this$props.onViewChange;
+          onChange = _this$props.onChange,
+          onViewChange = _this$props.onViewChange,
+          selectRange = _this$props.selectRange;
 
-      _this.setState({
-        activeStartDate: activeStartDate,
-        view: view
-      }, function () {
+      _this.setState(nextState, function () {
         var args = {
-          activeStartDate: activeStartDate,
-          view: view
+          activeStartDate: nextState.activeStartDate || _this.activeStartDate,
+          view: nextState.view || _this.view
         };
-        (0, _utils.callIfDefined)(onActiveStartDateChange, args);
-        (0, _utils.callIfDefined)(onViewChange, args);
+
+        if ('activeStartDate' in nextState) {
+          (0, _utils.callIfDefined)(onActiveStartDateChange, args);
+        }
+
+        if ('view' in nextState) {
+          (0, _utils.callIfDefined)(onViewChange, args);
+        }
+
+        if ('value' in nextState) {
+          if (!selectRange || !isSingleValue(nextState.value)) {
+            (0, _utils.callIfDefined)(onChange, nextState.value);
+          }
+        }
+
         (0, _utils.callIfDefined)(callback, args);
@@ -254,2 +280,8 @@ });
 
+    _defineProperty(_assertThisInitialized(_this), "setActiveStartDate", function (activeStartDate) {
+      _this.setStateAndCallCallbacks({
+        activeStartDate: activeStartDate
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "drillDown", function (nextActiveStartDate, event) {
@@ -262,5 +294,5 @@ if (!_this.drillDownAvailable) {
 
-      var _assertThisInitialize2 = _assertThisInitialized(_this),
-          view = _assertThisInitialize2.view,
-          views = _assertThisInitialize2.views;
+      var _assertThisInitialize = _assertThisInitialized(_this),
+          view = _assertThisInitialize.view,
+          views = _assertThisInitialize.views;
 
@@ -270,3 +302,6 @@ var onDrillDown = _this.props.onDrillDown;
 
-      _this.setActiveStartDateAndView(nextActiveStartDate, nextView, onDrillDown);
+      _this.setStateAndCallCallbacks({
+        activeStartDate: nextActiveStartDate,
+        view: nextView
+      }, onDrillDown);
     });
@@ -279,6 +314,6 @@
 
-      var _assertThisInitialize3 = _assertThisInitialized(_this),
-          activeStartDate = _assertThisInitialize3.activeStartDate,
-          view = _assertThisInitialize3.view,
-          views = _assertThisInitialize3.views;
+      var _assertThisInitialize2 = _assertThisInitialized(_this),
+          activeStartDate = _assertThisInitialize2.activeStartDate,
+          view = _assertThisInitialize2.view,
+          views = _assertThisInitialize2.views;
 
@@ -289,9 +324,10 @@ var onDrillUp = _this.props.onDrillUp;
 
-      _this.setActiveStartDateAndView(nextActiveStartDate, nextView, onDrillUp);
+      _this.setStateAndCallCallbacks({
+        activeStartDate: nextActiveStartDate,
+        view: nextView
+      }, onDrillUp);
     });
 
     _defineProperty(_assertThisInitialized(_this), "onChange", function (value, event) {
-      var _this$props2 = _this.props,
-          onChange = _this$props2.onChange,
-          selectRange = _this$props2.selectRange;
+      var selectRange = _this.props.selectRange;
 
@@ -301,9 +337,8 @@ _this.onClickTile(value, event);
       var nextValue;
-      var callback;
 
       if (selectRange) {
         // Range selection turned on
-        var _assertThisInitialize4 = _assertThisInitialized(_this),
-            previousValue = _assertThisInitialize4.value,
-            valueType = _assertThisInitialize4.valueType;
+        var _assertThisInitialize3 = _assertThisInitialized(_this),
+            previousValue = _assertThisInitialize3.value,
+            valueType = _assertThisInitialize3.valueType;
 
@@ -317,6 +352,2 @@ if (!isSingleValue(previousValue)) {
           nextValue = (0, _dates.getValueRange)(valueType, previousValue, value);
-
-          callback = function callback() {
-            return (0, _utils.callIfDefined)(onChange, nextValue);
-          };
         }
@@ -326,22 +357,23 @@ } else {
         nextValue = _this.getProcessedValue(value);
-
-        callback = function callback() {
-          return (0, _utils.callIfDefined)(onChange, nextValue);
-        };
       }
 
-      _this.setState({
+      var nextActiveStartDate = getActiveStartDate(_objectSpread({}, _this.props, {
         value: nextValue
-      }, callback);
+      }));
+
+      _this.setStateAndCallCallbacks({
+        activeStartDate: nextActiveStartDate,
+        value: nextValue
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "onClickTile", function (value, event) {
-      var _assertThisInitialize5 = _assertThisInitialized(_this),
-          view = _assertThisInitialize5.view;
+      var _assertThisInitialize4 = _assertThisInitialized(_this),
+          view = _assertThisInitialize4.view;
 
-      var _this$props3 = _this.props,
-          onClickDay = _this$props3.onClickDay,
-          onClickDecade = _this$props3.onClickDecade,
-          onClickMonth = _this$props3.onClickMonth,
-          onClickYear = _this$props3.onClickYear;
+      var _this$props2 = _this.props,
+          onClickDay = _this$props2.onClickDay,
+          onClickDecade = _this$props2.onClickDecade,
+          onClickMonth = _this$props2.onClickMonth,
+          onClickYear = _this$props2.onClickYear;
 
@@ -398,7 +430,7 @@ var callback = function () {
     value: function getProcessedValue(value) {
-      var _this$props4 = this.props,
-          minDate = _this$props4.minDate,
-          maxDate = _this$props4.maxDate,
-          maxDetail = _this$props4.maxDetail,
-          returnValue = _this$props4.returnValue;
+      var _this$props3 = this.props,
+          minDate = _this$props3.minDate,
+          maxDate = _this$props3.maxDate,
+          maxDetail = _this$props3.maxDetail,
+          returnValue = _this$props3.returnValue;
 
@@ -428,6 +460,2 @@ var processFunction = function () {
     }
-    /**
-     * Called when the user uses navigation buttons.
-     */
-
   }, {
@@ -441,11 +469,11 @@ key: "renderContent",
           view = this.view;
-      var _this$props5 = this.props,
-          calendarType = _this$props5.calendarType,
-          locale = _this$props5.locale,
-          maxDate = _this$props5.maxDate,
-          minDate = _this$props5.minDate,
-          selectRange = _this$props5.selectRange,
-          tileClassName = _this$props5.tileClassName,
-          tileContent = _this$props5.tileContent,
-          tileDisabled = _this$props5.tileDisabled;
+      var _this$props4 = this.props,
+          calendarType = _this$props4.calendarType,
+          locale = _this$props4.locale,
+          maxDate = _this$props4.maxDate,
+          minDate = _this$props4.minDate,
+          selectRange = _this$props4.selectRange,
+          tileClassName = _this$props4.tileClassName,
+          tileContent = _this$props4.tileContent,
+          tileDisabled = _this$props4.tileDisabled;
       var hover = this.hover;
@@ -488,5 +516,5 @@ var activeStartDate = next ? (0, _dates.getBeginNext)(view, currentActiveStartDate) : currentActiveStartDate;
           {
-            var _this$props6 = this.props,
-                formatMonth = _this$props6.formatMonth,
-                formatMonthYear = _this$props6.formatMonthYear;
+            var _this$props5 = this.props,
+                formatMonth = _this$props5.formatMonth,
+                formatMonthYear = _this$props5.formatMonthYear;
             return _react["default"].createElement(_YearView["default"], _extends({
@@ -500,10 +528,10 @@ formatMonth: formatMonth,
           {
-            var _this$props7 = this.props,
-                formatLongDate = _this$props7.formatLongDate,
-                formatShortWeekday = _this$props7.formatShortWeekday,
-                onClickWeekNumber = _this$props7.onClickWeekNumber,
-                showDoubleView = _this$props7.showDoubleView,
-                showFixedNumberOfWeeks = _this$props7.showFixedNumberOfWeeks,
-                showNeighboringMonth = _this$props7.showNeighboringMonth,
-                showWeekNumbers = _this$props7.showWeekNumbers;
+            var _this$props6 = this.props,
+                formatLongDate = _this$props6.formatLongDate,
+                formatShortWeekday = _this$props6.formatShortWeekday,
+                onClickWeekNumber = _this$props6.onClickWeekNumber,
+                showDoubleView = _this$props6.showDoubleView,
+                showFixedNumberOfWeeks = _this$props6.showFixedNumberOfWeeks,
+                showNeighboringMonth = _this$props6.showNeighboringMonth,
+                showWeekNumbers = _this$props6.showWeekNumbers;
             var onMouseLeave = this.onMouseLeave;
@@ -538,19 +566,19 @@ return _react["default"].createElement(_MonthView["default"], _extends({
           views = this.views;
-      var _this$props8 = this.props,
-          formatMonthYear = _this$props8.formatMonthYear,
-          formatYear = _this$props8.formatYear,
-          locale = _this$props8.locale,
-          maxDate = _this$props8.maxDate,
-          minDate = _this$props8.minDate,
-          navigationAriaLabel = _this$props8.navigationAriaLabel,
-          navigationLabel = _this$props8.navigationLabel,
-          next2AriaLabel = _this$props8.next2AriaLabel,
-          next2Label = _this$props8.next2Label,
-          nextAriaLabel = _this$props8.nextAriaLabel,
-          nextLabel = _this$props8.nextLabel,
-          prev2AriaLabel = _this$props8.prev2AriaLabel,
-          prev2Label = _this$props8.prev2Label,
-          prevAriaLabel = _this$props8.prevAriaLabel,
-          prevLabel = _this$props8.prevLabel,
-          showDoubleView = _this$props8.showDoubleView;
+      var _this$props7 = this.props,
+          formatMonthYear = _this$props7.formatMonthYear,
+          formatYear = _this$props7.formatYear,
+          locale = _this$props7.locale,
+          maxDate = _this$props7.maxDate,
+          minDate = _this$props7.minDate,
+          navigationAriaLabel = _this$props7.navigationAriaLabel,
+          navigationLabel = _this$props7.navigationLabel,
+          next2AriaLabel = _this$props7.next2AriaLabel,
+          next2Label = _this$props7.next2Label,
+          nextAriaLabel = _this$props7.nextAriaLabel,
+          nextLabel = _this$props7.nextLabel,
+          prev2AriaLabel = _this$props7.prev2AriaLabel,
+          prev2Label = _this$props7.prev2Label,
+          prevAriaLabel = _this$props7.prevAriaLabel,
+          prevLabel = _this$props7.prevLabel,
+          showDoubleView = _this$props7.showDoubleView;
       return _react["default"].createElement(_Navigation["default"], {
@@ -583,6 +611,6 @@ activeStartDate: activeStartDate,
     value: function render() {
-      var _this$props9 = this.props,
-          className = _this$props9.className,
-          selectRange = _this$props9.selectRange,
-          showDoubleView = _this$props9.showDoubleView;
+      var _this$props8 = this.props,
+          className = _this$props8.className,
+          selectRange = _this$props8.selectRange,
+          showDoubleView = _this$props8.showDoubleView;
       var onMouseLeave = this.onMouseLeave,
@@ -604,3 +632,3 @@ value = this.value;
       var activeStartDateState = this.state.activeStartDate;
-      return activeStartDateProps || activeStartDateState;
+      return activeStartDateProps || activeStartDateState || getInitialActiveStartDate(this.props);
     }
@@ -610,5 +638,5 @@ }, {
     get: function get() {
-      var _this$props10 = this.props,
-          selectRange = _this$props10.selectRange,
-          valueProps = _this$props10.value;
+      var _this$props9 = this.props,
+          selectRange = _this$props9.selectRange,
+          valueProps = _this$props9.value;
       var valueState = this.state.value; // In the middle of range selection, use value from state
@@ -620,3 +648,3 @@
 
-      return valueProps || valueState;
+      return valueProps !== undefined ? valueProps : valueState;
     }
@@ -632,6 +660,6 @@ }, {
     get: function get() {
-      var _this$props11 = this.props,
-          minDetail = _this$props11.minDetail,
-          maxDetail = _this$props11.maxDetail,
-          viewProps = _this$props11.view;
+      var _this$props10 = this.props,
+          minDetail = _this$props10.minDetail,
+          maxDetail = _this$props10.maxDetail,
+          viewProps = _this$props10.view;
       var viewState = this.state.view;
@@ -643,5 +671,5 @@ return getView(viewProps || viewState, minDetail, maxDetail);
     get: function get() {
-      var _this$props12 = this.props,
-          minDetail = _this$props12.minDetail,
-          maxDetail = _this$props12.maxDetail;
+      var _this$props11 = this.props,
+          minDetail = _this$props11.minDetail,
+          maxDetail = _this$props11.maxDetail;
       return getLimitedViews(minDetail, maxDetail);
@@ -648,0 +676,0 @@ }

dist/umd/Calendar/Navigation.js

@@ -12,2 +12,4 @@ "use strict";
 
+var _getUserLocale = require("get-user-locale");
+
 var _dates = require("../shared/dates");
@@ -122,4 +124,5 @@
       date: date,
-      view: view,
-      label: label
+      label: label,
+      locale: locale || (0, _getUserLocale.getUserLocale)(),
+      view: view
     }) : label;
@@ -126,0 +129,0 @@ }

dist/umd/MonthView.js

@@ -99,13 +99,6 @@ "use strict";
   locale: _propTypes["default"].string,
-  maxDate: _propTypes2.isMaxDate,
-  minDate: _propTypes2.isMinDate,
-  onChange: _propTypes["default"].func,
   onClickWeekNumber: _propTypes["default"].func,
   onMouseLeave: _propTypes["default"].func,
-  setActiveRange: _propTypes["default"].func,
   showFixedNumberOfWeeks: _propTypes["default"].bool,
-  showNeighboringMonth: _propTypes["default"].bool,
-  showWeekNumbers: _propTypes["default"].bool,
-  value: _propTypes2.isValue,
-  valueType: _propTypes["default"].string
+  showWeekNumbers: _propTypes["default"].bool
 };

dist/umd/MonthView/Days.js

@@ -71,3 +71,5 @@ "use strict";
     if (showNeighboringMonth) {
-      var activeEndDate = new Date(year, monthIndex, daysInMonth);
+      var activeEndDate = new Date();
+      activeEndDate.setFullYear(year, monthIndex, daysInMonth);
+      activeEndDate.setHours(0, 0, 0, 0);
       var daysUntilEndOfTheWeek = 7 - (0, _dates.getDayOfWeek)(activeEndDate, calendarType) - 1;
@@ -85,3 +87,6 @@ return daysInMonth + daysUntilEndOfTheWeek;
     dateTransform: function dateTransform(day) {
-      return new Date(year, monthIndex, day);
+      var date = new Date();
+      date.setFullYear(year, monthIndex, day);
+      date.setHours(0, 0, 0, 0);
+      return date;
     },
@@ -88,0 +93,0 @@ dateType: "day",

package.json

 {
   "name": "react-calendar",
-  "version": "3.0.0-beta.5",
+  "version": "3.0.0-beta.6",
   "description": "Ultimate calendar for your React app.",
@@ -73,3 +73,3 @@ "main": "dist/umd/index.js",
   "dependencies": {
-    "@wojtekmaj/date-utils": "^1.0.0",
+    "@wojtekmaj/date-utils": "^1.0.2",
     "get-user-locale": "^1.2.0",
@@ -76,0 +76,0 @@ "merge-class-names": "^1.1.1",

README.md

@@ -116,3 +116,3 @@ [![npm](https://img.shields.io/npm/v/react-calendar.svg)](https://www.npmjs.com/package/react-calendar) ![downloads](https://img.shields.io/npm/dt/react-calendar.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-calendar/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-calendar.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-calendar.svg) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 |navigationAriaLabel|`aria-label` attribute of a label rendered on calendar navigation bar.|n/a|`"Go up"`|
-|navigationLabel|Content of a label rendered on calendar navigation bar.|(default label)|``({ date, view, label }) => `Current view: ${view}, date: ${date.toLocaleDateString()}` ``|
+|navigationLabel|Content of a label rendered on calendar navigation bar.|(default label)|``({ date, label, locale, view }) => `Current view: ${view}, date: ${date.toLocaleDateString(locale)}` ``|
 |nextAriaLabel|`aria-label` attribute of the "next" button on the navigation pane.|n/a|`"Next"`|
@@ -119,0 +119,0 @@ |nextLabel|Content of the "next" button on the navigation pane.|`"›"`|<ul><li>String: `"›"`</li><li>React element: `<NextIcon />`</li></ul>|

src/Calendar.jsx

@@ -104,8 +104,4 @@ import React, { Component } from 'react';
 
-const getActiveStartDate = (props) => {
+function getActiveStartDate(props) {
   const {
-    activeStartDate,
-    defaultActiveStartDate,
-    defaultValue,
-    defaultView,
     maxDate,
@@ -119,13 +115,42 @@ maxDetail,
 
-  const rangeType = getView(view || defaultView, minDetail, maxDetail);
+  const rangeType = getView(view, minDetail, maxDetail);
   const valueFrom = (
-    activeStartDate || defaultActiveStartDate
-    || getDetailValueFrom({
-      value: value || defaultValue, minDate, maxDate, maxDetail,
+    getDetailValueFrom({
+      value, minDate, maxDate, maxDetail,
     })
     || new Date()
   );
+
   return getBegin(rangeType, valueFrom);
-};
+}
 
+function getInitialActiveStartDate(props) {
+  const {
+    activeStartDate,
+    defaultActiveStartDate,
+    defaultValue,
+    defaultView,
+    maxDetail,
+    minDetail,
+    value,
+    view,
+    ...otherProps
+  } = props;
+
+  const rangeType = getView(view, minDetail, maxDetail);
+  const valueFrom = activeStartDate || defaultActiveStartDate;
+
+  if (valueFrom) {
+    return getBegin(rangeType, valueFrom);
+  }
+
+  return getActiveStartDate({
+    maxDetail,
+    minDetail,
+    value: value || defaultValue,
+    view: view || defaultView,
+    ...otherProps,
+  });
+}
+
 const isSingleValue = value => value && [].concat(value).length === 1;
@@ -136,5 +161,5 @@
     /* eslint-disable react/destructuring-assignment */
-    activeStartDate: getActiveStartDate(this.props),
+    activeStartDate: this.props.defaultActiveStartDate,
+    value: this.props.defaultValue,
     view: this.props.defaultView,
-    value: this.props.defaultValue,
     /* eslint-enable react/destructuring-assignment */
@@ -147,3 +172,3 @@ };
 
-    return activeStartDateProps || activeStartDateState;
+    return activeStartDateProps || activeStartDateState || getInitialActiveStartDate(this.props);
   }
@@ -160,3 +185,3 @@
 
-    return valueProps || valueState;
+    return valueProps !== undefined ? valueProps : valueState;
   }
@@ -228,15 +253,28 @@
 
-  /**
-   * Called when the user uses navigation buttons.
-   */
-  setActiveStartDate = (activeStartDate) => {
-    const { onActiveStartDateChange } = this.props;
+  setStateAndCallCallbacks = (nextState, callback) => {
+    const {
+      onActiveStartDateChange, onChange, onViewChange, selectRange,
+    } = this.props;
 
-    this.setState({ activeStartDate }, () => {
-      const { view } = this;
+    this.setState(nextState, () => {
+      const args = {
+        activeStartDate: nextState.activeStartDate || this.activeStartDate,
+        view: nextState.view || this.view,
+      };
 
-      callIfDefined(onActiveStartDateChange, {
-        activeStartDate,
-        view,
-      });
+      if ('activeStartDate' in nextState) {
+        callIfDefined(onActiveStartDateChange, args);
+      }
+
+      if ('view' in nextState) {
+        callIfDefined(onViewChange, args);
+      }
+
+      if ('value' in nextState) {
+        if (!selectRange || !isSingleValue(nextState.value)) {
+          callIfDefined(onChange, nextState.value);
+        }
+      }
+
+      callIfDefined(callback, args);
     });
@@ -248,14 +286,4 @@ }
    */
-  setActiveStartDateAndView = (activeStartDate, view, callback) => {
-    const { onActiveStartDateChange, onViewChange } = this.props;
-
-    this.setState({ activeStartDate, view }, () => {
-      const args = {
-        activeStartDate,
-        view,
-      };
-      callIfDefined(onActiveStartDateChange, args);
-      callIfDefined(onViewChange, args);
-      callIfDefined(callback, args);
-    });
+  setActiveStartDate = (activeStartDate) => {
+    this.setStateAndCallCallbacks({ activeStartDate });
   }
@@ -275,3 +303,6 @@
 
-    this.setActiveStartDateAndView(nextActiveStartDate, nextView, onDrillDown);
+    this.setStateAndCallCallbacks({
+      activeStartDate: nextActiveStartDate,
+      view: nextView,
+    }, onDrillDown);
   }
@@ -290,7 +321,10 @@
 
-    this.setActiveStartDateAndView(nextActiveStartDate, nextView, onDrillUp);
+    this.setStateAndCallCallbacks({
+      activeStartDate: nextActiveStartDate,
+      view: nextView,
+    }, onDrillUp);
   }
 
   onChange = (value, event) => {
-    const { onChange, selectRange } = this.props;
+    const { selectRange } = this.props;
 
@@ -300,3 +334,2 @@ this.onClickTile(value, event);
     let nextValue;
-    let callback;
     if (selectRange) {
@@ -312,3 +345,2 @@ // Range selection turned on
         nextValue = getValueRange(valueType, previousValue, value);
-        callback = () => callIfDefined(onChange, nextValue);
       }
@@ -318,6 +350,13 @@ } else {
       nextValue = this.getProcessedValue(value);
-      callback = () => callIfDefined(onChange, nextValue);
     }
 
-    this.setState({ value: nextValue }, callback);
+    const nextActiveStartDate = getActiveStartDate({
+      ...this.props,
+      value: nextValue,
+    });
+
+    this.setStateAndCallCallbacks({
+      activeStartDate: nextActiveStartDate,
+      value: nextValue,
+    });
   }
@@ -324,0 +363,0 @@

src/Calendar.spec.jsx

 import React from 'react';
-import { mount, shallow } from 'enzyme';
+import { shallow } from 'enzyme';
 import { getMonthStart } from '@wojtekmaj/date-utils';
@@ -28,2 +28,90 @@
 
+  it('uses given value when passed value using value prop', () => {
+    const component = shallow(
+      <Calendar value={new Date(2019, 0, 1)} />,
+    );
+
+    expect(component.instance().value).toEqual(new Date(2019, 0, 1));
+  });
+
+  it('uses given value when passed value using defaultValue prop', () => {
+    const component = shallow(
+      <Calendar defaultValue={new Date(2019, 0, 1)} />,
+    );
+
+    expect(component.instance().value).toEqual(new Date(2019, 0, 1));
+  });
+
+  it('renders given view when passed view using view prop', () => {
+    const component = shallow(
+      <Calendar view="century" />,
+    );
+
+    expect(component.instance().view).toBe('century');
+  });
+
+  it('renders given view when passed view using defaultView prop', () => {
+    const component = shallow(
+      <Calendar defaultView="century" />,
+    );
+
+    expect(component.instance().view).toBe('century');
+  });
+
+  it('renders given active start date when passed active start date using activeStartDate prop', () => {
+    const component = shallow(
+      <Calendar activeStartDate={new Date(2019, 0, 1)} />,
+    );
+
+    expect(component.instance().activeStartDate).toEqual(new Date(2019, 0, 1));
+  });
+
+  it('renders given active start date when passed active start date using activeStartDate prop', () => {
+    const component = shallow(
+      <Calendar defaultActiveStartDate={new Date(2019, 0, 1)} />,
+    );
+
+    expect(component.instance().activeStartDate).toEqual(new Date(2019, 0, 1));
+  });
+
+  it('changes activeStartDate when updating value via props change', () => {
+    const value = new Date(2018, 1, 15);
+    const newValue = new Date(2018, 0, 15);
+    const newActiveStartDate = new Date(2018, 0, 1);
+
+    const component = shallow(
+      <Calendar value={value} />,
+    );
+
+    component.setProps({ value: newValue });
+
+    expect(component.instance().activeStartDate).toEqual(newActiveStartDate);
+  });
+
+  it('changes activeStartDate when updating value via onChange', () => {
+    const value = new Date(2018, 1, 15);
+    const newValue = new Date(2018, 0, 15);
+    const newActiveStartDate = new Date(2018, 0, 1);
+
+    const component = shallow(
+      <Calendar value={value} />,
+    );
+
+    component.instance().onChange(newValue);
+
+    expect(component.instance().activeStartDate).toEqual(newActiveStartDate);
+  });
+
+  it('changes Calendar view given new activeStartDate value', () => {
+    const activeStartDate = new Date(2017, 0, 1);
+    const newActiveStartDate = new Date(2018, 0, 1);
+    const component = shallow(
+      <Calendar activeStartDate={activeStartDate} />,
+    );
+
+    component.setProps({ activeStartDate: newActiveStartDate });
+
+    expect(component.instance().activeStartDate).toEqual(newActiveStartDate);
+  });
+
   describe('renders views properly', () => {
@@ -51,3 +139,3 @@ it('renders MonthView by default', () => {
     it('renders YearView when given view = "year"', () => {
-      const component = mount(
+      const component = shallow(
         <Calendar view="year" />,
@@ -62,3 +150,3 @@ );
     it('renders DecadeView when given view = "decade"', () => {
-      const component = mount(
+      const component = shallow(
         <Calendar view="decade" />,
@@ -73,3 +161,3 @@ );
     it('renders CenturyView when given view = "century"', () => {
-      const component = mount(
+      const component = shallow(
         <Calendar view="century" />,
@@ -115,3 +203,2 @@ );
       component.setProps({ view: 'month' });
-      component.update();
 
@@ -178,79 +265,81 @@ const yearView = component.find('YearView');
 
-  it('displays a view with a given value when defaultValue is given', () => {
-    const defaultValue = new Date(2017, 0, 15);
-    const component = shallow(
-      <Calendar
-        defaultValue={defaultValue}
-      />,
-    );
+  describe('displays initial view properly', () => {
+    it('displays a view with a given value when defaultValue is given', () => {
+      const defaultValue = new Date(2017, 0, 15);
+      const component = shallow(
+        <Calendar
+          defaultValue={defaultValue}
+        />,
+      );
 
-    const monthView = component.find('MonthView');
+      const monthView = component.find('MonthView');
 
-    expect(monthView.prop('activeStartDate')).toEqual(new Date(2017, 0, 1));
-  });
+      expect(monthView.prop('activeStartDate')).toEqual(new Date(2017, 0, 1));
+    });
 
-  it('displays a view with a given value when value is given', () => {
-    const value = new Date(2017, 0, 15);
-    const component = shallow(
-      <Calendar
-        value={value}
-      />,
-    );
+    it('displays a view with a given value when value is given', () => {
+      const value = new Date(2017, 0, 15);
+      const component = shallow(
+        <Calendar
+          value={value}
+        />,
+      );
 
-    const monthView = component.find('MonthView');
+      const monthView = component.find('MonthView');
 
-    expect(monthView.prop('activeStartDate')).toEqual(new Date(2017, 0, 1));
-  });
+      expect(monthView.prop('activeStartDate')).toEqual(new Date(2017, 0, 1));
+    });
 
-  it('displays a view with defaultActiveStartDate when value is given and defaultActiveStartDate is given', () => {
-    const defaultActiveStartDate = new Date(2017, 0, 1);
-    const value = new Date(2018, 0, 15);
-    const component = shallow(
-      <Calendar
-        defaultActiveStartDate={defaultActiveStartDate}
-        value={value}
-      />,
-    );
+    it('displays a view with defaultActiveStartDate when value is given and defaultActiveStartDate is given', () => {
+      const defaultActiveStartDate = new Date(2017, 0, 1);
+      const value = new Date(2018, 0, 15);
+      const component = shallow(
+        <Calendar
+          defaultActiveStartDate={defaultActiveStartDate}
+          value={value}
+        />,
+      );
 
-    const monthView = component.find('MonthView');
+      const monthView = component.find('MonthView');
 
-    expect(monthView.prop('activeStartDate')).toEqual(defaultActiveStartDate);
-  });
+      expect(monthView.prop('activeStartDate')).toEqual(defaultActiveStartDate);
+    });
 
-  it('displays a view with defaultActiveStartDate when no value is given and defaultActiveStartDate is given', () => {
-    const defaultActiveStartDate = new Date(2017, 0, 1);
-    const component = shallow(
-      <Calendar
-        defaultActiveStartDate={defaultActiveStartDate}
-      />,
-    );
+    it('displays a view with defaultActiveStartDate when no value is given and defaultActiveStartDate is given', () => {
+      const defaultActiveStartDate = new Date(2017, 0, 1);
+      const component = shallow(
+        <Calendar
+          defaultActiveStartDate={defaultActiveStartDate}
+        />,
+      );
 
-    const monthView = component.find('MonthView');
+      const monthView = component.find('MonthView');
 
-    expect(monthView.prop('activeStartDate')).toEqual(defaultActiveStartDate);
-  });
+      expect(monthView.prop('activeStartDate')).toEqual(defaultActiveStartDate);
+    });
 
-  it('displays a view with activeStartDate when no value is given and activeStartDate is given', () => {
-    const activeStartDate = new Date(2017, 0, 1);
-    const component = shallow(
-      <Calendar
-        activeStartDate={activeStartDate}
-      />,
-    );
+    it('displays a view with activeStartDate when no value is given and activeStartDate is given', () => {
+      const activeStartDate = new Date(2017, 0, 1);
+      const component = shallow(
+        <Calendar
+          activeStartDate={activeStartDate}
+        />,
+      );
 
-    const monthView = component.find('MonthView');
+      const monthView = component.find('MonthView');
 
-    expect(monthView.prop('activeStartDate')).toEqual(activeStartDate);
-  });
+      expect(monthView.prop('activeStartDate')).toEqual(activeStartDate);
+    });
 
-  it('displays a view with today\'s date when no value and no activeStartDate is given', () => {
-    const today = new Date();
-    const beginOfCurrentMonth = getMonthStart(today);
-    const component = shallow(
-      <Calendar />,
-    );
+    it('displays a view with today\'s date when no value and no activeStartDate is given', () => {
+      const today = new Date();
+      const beginOfCurrentMonth = getMonthStart(today);
+      const component = shallow(
+        <Calendar />,
+      );
 
-    const monthView = component.find('MonthView');
+      const monthView = component.find('MonthView');
 
-    expect(monthView.prop('activeStartDate')).toEqual(beginOfCurrentMonth);
+      expect(monthView.prop('activeStartDate')).toEqual(beginOfCurrentMonth);
+    });
   });
@@ -260,15 +349,17 @@
     it('drills up when allowed', () => {
-      const component = mount(
-        <Calendar view="month" />,
+      const component = shallow(
+        <Calendar />,
       );
 
+      component.setState({ view: 'month' });
+
       component.instance().drillUp();
 
-      expect(component.state().view).toBe('year');
+      expect(component.instance().view).toBe('year');
     });
 
-    it('calls onDrillUp on drill up', () => {
+    it('calls onDrillUp on drill up properly given view prop', () => {
       const onDrillUp = jest.fn();
 
-      const component = mount(
+      const component = shallow(
         <Calendar
@@ -289,6 +380,26 @@ activeStartDate={new Date(2017, 6, 1)}
 
+    it('calls onDrillUp on drill up properly when not given view prop', () => {
+      const onDrillUp = jest.fn();
+
+      const component = shallow(
+        <Calendar
+          activeStartDate={new Date(2017, 6, 1)}
+          onDrillUp={onDrillUp}
+        />,
+      );
+
+      component.setState({ view: 'month' });
+
+      component.instance().drillUp();
+
+      expect(onDrillUp).toHaveBeenCalledWith({
+        activeStartDate: new Date(2017, 0, 1),
+        view: 'year',
+      });
+    });
+
     it('refuses to drill up when already on minimum allowed detail', () => {
       const onDrillUp = jest.fn();
 
-      const component = mount(
+      const component = shallow(
         <Calendar
@@ -308,15 +419,17 @@ onDrillUp={onDrillUp}
     it('drills down when allowed', () => {
-      const component = mount(
-        <Calendar view="century" />,
+      const component = shallow(
+        <Calendar />,
       );
 
+      component.setState({ view: 'century' });
+
       component.instance().drillDown(new Date(2011, 0, 1));
 
-      expect(component.state().view).toBe('decade');
+      expect(component.instance().view).toBe('decade');
     });
 
-    it('calls onDrillDown on drill down', () => {
+    it('calls onDrillDown on drill down given view prop', () => {
       const onDrillDown = jest.fn();
 
-      const component = mount(
+      const component = shallow(
         <Calendar
@@ -337,6 +450,26 @@ activeStartDate={new Date(2001, 0, 1)}
 
+    it('calls onDrillDown on drill down when not given view prop', () => {
+      const onDrillDown = jest.fn();
+
+      const component = shallow(
+        <Calendar
+          activeStartDate={new Date(2001, 0, 1)}
+          onDrillDown={onDrillDown}
+        />,
+      );
+
+      component.setState({ view: 'century' });
+
+      component.instance().drillDown(new Date(2011, 0, 1));
+
+      expect(onDrillDown).toHaveBeenCalledWith({
+        activeStartDate: new Date(2011, 0, 1),
+        view: 'decade',
+      });
+    });
+
     it('refuses to drill down when already on minimum allowed detail', () => {
       const onDrillDown = jest.fn();
 
-      const component = mount(
+      const component = shallow(
         <Calendar
@@ -354,6 +487,38 @@ onDrillDown={onDrillDown}
 
+  describe('handles active start date change properly', () => {
+    it('changes active start date when allowed', () => {
+      const component = shallow(
+        <Calendar />,
+      );
+
+      component.instance().setActiveStartDate(new Date(2019, 0, 1));
+
+      expect(component.instance().activeStartDate).toEqual(new Date(2019, 0, 1));
+    });
+
+    it('calls onActiveStartDateChange on activeStartDate change', () => {
+      const activeStartDate = new Date(2017, 0, 1);
+      const newActiveStartDate = new Date(2018, 0, 1);
+      const onActiveStartDateChange = jest.fn();
+      const component = shallow(
+        <Calendar
+          activeStartDate={activeStartDate}
+          onActiveStartDateChange={onActiveStartDateChange}
+          view="year"
+        />,
+      );
+
+      component.instance().setActiveStartDate(newActiveStartDate);
+
+      expect(onActiveStartDateChange).toHaveBeenCalledWith({
+        activeStartDate: newActiveStartDate,
+        view: 'year',
+      });
+    });
+  });
+
   describe('calls onChange properly', () => {
     it('calls onChange function returning the beginning of selected period by default', () => {
       const onChange = jest.fn();
-      const component = mount(
+      const component = shallow(
         <Calendar
@@ -372,3 +537,3 @@ onChange={onChange}
       const onChange = jest.fn();
-      const component = mount(
+      const component = shallow(
         <Calendar
@@ -388,3 +553,3 @@ onChange={onChange}
       const onChange = jest.fn();
-      const component = mount(
+      const component = shallow(
         <Calendar
@@ -404,3 +569,3 @@ onChange={onChange}
       const onChange = jest.fn();
-      const component = mount(
+      const component = shallow(
         <Calendar
@@ -420,3 +585,3 @@ onChange={onChange}
       const onChange = jest.fn();
-      const component = mount(
+      const component = shallow(
         <Calendar
@@ -439,3 +604,3 @@ onChange={onChange}
       const onChange = jest.fn();
-      const component = mount(
+      const component = shallow(
         <Calendar
@@ -456,3 +621,3 @@ minDate={new Date(2017, 0, 1, 12)}
       const onChange = jest.fn();
-      const component = mount(
+      const component = shallow(
         <Calendar
@@ -473,3 +638,3 @@ maxDate={new Date(2017, 0, 1, 12)}
       const onChange = jest.fn();
-      const component = mount(
+      const component = shallow(
         <Calendar
@@ -490,3 +655,3 @@ minDate={new Date(2017, 0, 2, 12)}
       const onChange = jest.fn();
-      const component = mount(
+      const component = shallow(
         <Calendar
@@ -505,5 +670,20 @@ maxDate={new Date(2017, 0, 1, 12)}
 
+    it('does not call onChange function returning a range when selected one piece of a range', () => {
+      const onChange = jest.fn();
+      const component = shallow(
+        <Calendar
+          onChange={onChange}
+          selectRange
+          view="month"
+        />,
+      );
+
+      component.instance().onChange(new Date(2018, 0, 1));
+
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
     it('calls onChange function returning a range when selected two pieces of a range', () => {
       const onChange = jest.fn();
-      const component = mount(
+      const component = shallow(
         <Calendar
@@ -528,3 +708,3 @@ onChange={onChange}
       const onChange = jest.fn();
-      const component = mount(
+      const component = shallow(
         <Calendar
@@ -548,36 +728,2 @@ onChange={onChange}
 
-  it('calls onActiveStartDateChange on activeStartDate change', () => {
-    const activeStartDate = new Date(2017, 0, 1);
-    const newActiveStartDate = new Date(2018, 0, 1);
-    const onActiveStartDateChange = jest.fn();
-    const component = mount(
-      <Calendar
-        activeStartDate={activeStartDate}
-        onActiveStartDateChange={onActiveStartDateChange}
-        view="year"
-      />,
-    );
-
-    component.instance().setActiveStartDate(newActiveStartDate);
-
-    expect(onActiveStartDateChange).toHaveBeenCalledWith({
-      activeStartDate: newActiveStartDate,
-      view: 'year',
-    });
-  });
-
-  it('changes Calendar view given new activeStartDate value', () => {
-    const activeStartDate = new Date(2017, 0, 1);
-    const newActiveStartDate = new Date(2018, 0, 1);
-    const component = mount(
-      <Calendar activeStartDate={activeStartDate} />,
-    );
-
-    component.setProps({ activeStartDate: newActiveStartDate });
-
-    const monthView = component.find('MonthView');
-
-    expect(monthView.prop('activeStartDate')).toEqual(newActiveStartDate);
-  });
-
   it('passes formatMonthYear to Navigation component', () => {
@@ -584,0 +730,0 @@ const formatMonthYear = () => 'Month year';

src/Calendar/Navigation.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
+import { getUserLocale } from 'get-user-locale';
 
@@ -114,3 +115,8 @@ import {
       navigationLabel
-        ? navigationLabel({ date, view, label })
+        ? navigationLabel({
+          date,
+          label,
+          locale: locale || getUserLocale(),
+          view,
+        })
         : label
@@ -117,0 +123,0 @@ );

src/Calendar/Navigation.spec.jsx

@@ -477,2 +477,3 @@ import React from 'react';
     const view = 'month';
+    const locale = 'de-DE';
 
@@ -485,2 +486,3 @@ const navigationLabel = jest.fn().mockReturnValue(label);
         activeStartDate={date}
+        locale={locale}
         navigationLabel={navigationLabel}
@@ -493,3 +495,8 @@ view={view}
 
-    expect(navigationLabel).toHaveBeenCalledWith({ date, view, label: 'January 2017' });
+    expect(navigationLabel).toHaveBeenCalledWith({
+      locale,
+      date,
+      view,
+      label: 'Januar 2017',
+    });
     expect(drillUp.text()).toBe(label);
@@ -496,0 +503,0 @@ });

src/MonthView.jsx

@@ -9,8 +9,3 @@ import React from 'react';
 import { CALENDAR_TYPES, CALENDAR_TYPE_LOCALES } from './shared/const';
-import {
-  isCalendarType,
-  isMaxDate,
-  isMinDate,
-  isValue,
-} from './shared/propTypes';
+import { isCalendarType } from './shared/propTypes';
 
@@ -111,13 +106,6 @@ function getCalendarTypeFromLocale(locale) {
   locale: PropTypes.string,
-  maxDate: isMaxDate,
-  minDate: isMinDate,
-  onChange: PropTypes.func,
   onClickWeekNumber: PropTypes.func,
   onMouseLeave: PropTypes.func,
-  setActiveRange: PropTypes.func,
   showFixedNumberOfWeeks: PropTypes.bool,
-  showNeighboringMonth: PropTypes.bool,
   showWeekNumbers: PropTypes.bool,
-  value: isValue,
-  valueType: PropTypes.string,
 };

src/MonthView/Days.jsx

@@ -55,3 +55,5 @@ import React from 'react';
     if (showNeighboringMonth) {
-      const activeEndDate = new Date(year, monthIndex, daysInMonth);
+      const activeEndDate = new Date();
+      activeEndDate.setFullYear(year, monthIndex, daysInMonth);
+      activeEndDate.setHours(0, 0, 0, 0);
       const daysUntilEndOfTheWeek = 7 - getDayOfWeek(activeEndDate, calendarType) - 1;
@@ -70,3 +72,8 @@ return daysInMonth + daysUntilEndOfTheWeek;
       currentMonthIndex={monthIndex}
-      dateTransform={day => new Date(year, monthIndex, day)}
+      dateTransform={(day) => {
+        const date = new Date();
+        date.setFullYear(year, monthIndex, day);
+        date.setHours(0, 0, 0, 0);
+        return date;
+      }}
       dateType="day"
@@ -73,0 +80,0 @@ end={end}

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

438110

increased by2.28%

Lines of code

10252

increased by1.95%

Dependency changes

• Updated@wojtekmaj/date-utils@^1.0.2