react-calendar - npm Package Compare versions

Comparing version 2.13.5 to 2.14.0

dist/Calendar.js

@@ -19,2 +19,6 @@ 'use strict';
 
+var _reactLifecyclesCompat = require('react-lifecycles-compat');
+
+var _reactLifecyclesCompat2 = _interopRequireDefault(_reactLifecyclesCompat);
+
 var _mergeClassNames = require('merge-class-names');
@@ -67,60 +71,96 @@
 
-var Calendar = function (_Component) {
-  _inherits(Calendar, _Component);
+/**
+ * Returns views array with disallowed values cut off.
+ */
+var getLimitedViews = function getLimitedViews(minDetail, maxDetail) {
+  return allViews.slice(allViews.indexOf(minDetail), allViews.indexOf(maxDetail) + 1);
+};
 
-  function Calendar() {
-    var _ref;
+var getView = function getView(view, minDetail, maxDetail) {
+  if (view && getLimitedViews(minDetail, maxDetail).indexOf(view) !== -1) {
+    return view;
+  }
 
-    var _temp, _this, _ret;
+  return getLimitedViews(minDetail, maxDetail).pop();
+};
 
-    _classCallCheck(this, Calendar);
+/**
+ * Determines whether a given view is allowed with currently applied settings.
+ */
+var isViewAllowed = function isViewAllowed(view, minDetail, maxDetail) {
+  var views = getLimitedViews(minDetail, maxDetail);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  return views.indexOf(view) !== -1;
+};
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call.apply(_ref, [this].concat(args))), _this), _this.getValueFrom = function (value) {
-      if (!value) {
-        return null;
-      }
+/**
+ * Returns value type that can be returned with currently applied settings.
+ */
+var getValueType = function getValueType(maxDetail) {
+  return allValueTypes[allViews.indexOf(maxDetail)];
+};
 
-      var _this$props = _this.props,
-          maxDate = _this$props.maxDate,
-          minDate = _this$props.minDate;
+var getValueFrom = function getValueFrom(value, minDate, maxDate, maxDetail) {
+  if (!value) {
+    return null;
+  }
 
-      var rawValueFrom = value instanceof Array && value.length === 2 ? value[0] : value;
-      var valueFromDate = new Date(rawValueFrom);
+  var rawValueFrom = value instanceof Array && value.length === 2 ? value[0] : value;
+  var valueFromDate = new Date(rawValueFrom);
 
-      if (isNaN(valueFromDate.getTime())) {
-        throw new Error('Invalid date: ' + value);
-      }
+  if (isNaN(valueFromDate.getTime())) {
+    throw new Error('Invalid date: ' + value);
+  }
 
-      var valueFrom = (0, _dates.getBegin)(_this.valueType, valueFromDate);
+  var valueFrom = (0, _dates.getBegin)(getValueType(maxDetail), valueFromDate);
 
-      return (0, _utils.between)(valueFrom, minDate, maxDate);
-    }, _this.getValueTo = function (value) {
-      if (!value) {
-        return null;
-      }
+  return (0, _utils.between)(valueFrom, minDate, maxDate);
+};
 
-      var _this$props2 = _this.props,
-          maxDate = _this$props2.maxDate,
-          minDate = _this$props2.minDate;
+var getValueTo = function getValueTo(value, minDate, maxDate, maxDetail) {
+  if (!value) {
+    return null;
+  }
 
-      var rawValueTo = value instanceof Array && value.length === 2 ? value[1] : value;
-      var valueToDate = new Date(rawValueTo);
+  var rawValueTo = value instanceof Array && value.length === 2 ? value[1] : value;
+  var valueToDate = new Date(rawValueTo);
 
-      if (isNaN(valueToDate.getTime())) {
-        throw new Error('Invalid date: ' + value);
-      }
+  if (isNaN(valueToDate.getTime())) {
+    throw new Error('Invalid date: ' + value);
+  }
 
-      var valueTo = (0, _dates.getEnd)(_this.valueType, valueToDate);
+  var valueTo = (0, _dates.getEnd)(getValueType(maxDetail), valueToDate);
 
-      return (0, _utils.between)(valueTo, minDate, maxDate);
-    }, _this.state = {
-      activeStartDate: _this.getActiveStartDate(),
-      hover: null,
-      view: _this.getView(),
-      value: _this.props.value
-    }, _this.setActiveStartDate = function (activeStartDate) {
+  return (0, _utils.between)(valueTo, minDate, maxDate);
+};
+
+var getValueArray = function getValueArray(value, minDate, maxDate, maxDetail) {
+  if (value instanceof Array) {
+    return value;
+  }
+
+  return [getValueFrom(value, minDate, maxDate, maxDetail), getValueTo(value, minDate, maxDate, maxDetail)];
+};
+
+var getActiveStartDate = function getActiveStartDate(props) {
+  var rangeType = getView(props.view, props.minDetail, props.maxDetail);
+  var valueFrom = getValueFrom(props.value, props.minDate, props.maxDate, props.maxDetail) || props.activeStartDate || new Date();
+  return (0, _dates.getBegin)(rangeType, valueFrom);
+};
+
+var Calendar = function (_Component) {
+  _inherits(Calendar, _Component);
+
+  function Calendar() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Calendar);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.setActiveStartDate = function (activeStartDate) {
       _this.setState({ activeStartDate: activeStartDate }, function () {
@@ -137,3 +177,3 @@ (0, _utils.callIfDefined)(_this.props.onActiveDateChange, {
 
-      var views = _this.getLimitedViews();
+      var views = getLimitedViews(_this.props.minDetail, _this.props.maxDetail);
 
@@ -157,3 +197,3 @@ _this.setState(function (prevState) {
 
-      var views = _this.getLimitedViews();
+      var views = getLimitedViews(_this.props.minDetail, _this.props.maxDetail);
 
@@ -175,5 +215,5 @@ _this.setState(function (prevState) {
     }, _this.onChange = function (value) {
-      var _this$props3 = _this.props,
-          onChange = _this$props3.onChange,
-          selectRange = _this$props3.selectRange;
+      var _this$props = _this.props,
+          onChange = _this$props.onChange,
+          selectRange = _this$props.selectRange;
 
@@ -215,49 +255,14 @@
   _createClass(Calendar, [{
-    key: 'getValueArray',
-    value: function getValueArray(value) {
-      if (value instanceof Array) {
-        return value;
-      }
+    key: 'getProcessedValue',
 
-      return [this.getValueFrom(value), this.getValueTo(value)];
-    }
-  }, {
-    key: 'getLimitedViews',
 
-
     /**
-     * Returns views array with disallowed values cut off.
-     */
-    value: function getLimitedViews() {
-      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
-      var minDetail = props.minDetail,
-          maxDetail = props.maxDetail;
-
-
-      return allViews.slice(allViews.indexOf(minDetail), allViews.indexOf(maxDetail) + 1);
-    }
-
-    /**
-     * Determines whether a given view is allowed with currently applied settings.
-     */
-
-  }, {
-    key: 'isViewAllowed',
-    value: function isViewAllowed() {
-      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
-      var view = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.state.view;
-
-      var views = this.getLimitedViews(props);
-
-      return views.indexOf(view) !== -1;
-    }
-
-    /**
      * Gets current value in a desired format.
      */
-
-  }, {
-    key: 'getProcessedValue',
     value: function getProcessedValue(value) {
-      var returnValue = this.props.returnValue;
+      var _props = this.props,
+          minDate = _props.minDate,
+          maxDate = _props.maxDate,
+          maxDetail = _props.maxDetail,
+          returnValue = _props.returnValue;
 
@@ -267,7 +272,7 @@
         case 'start':
-          return this.getValueFrom(value);
+          return getValueFrom(value, minDate, maxDate, maxDetail);
         case 'end':
-          return this.getValueTo(value);
+          return getValueTo(value, minDate, maxDate, maxDetail);
         case 'range':
-          return this.getValueArray(value);
+          return getValueArray(value, minDate, maxDate, maxDetail);
         default:
@@ -278,67 +283,13 @@ throw new Error('Invalid returnValue.');
   }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      var nextValue = nextProps.value;
-      var value = this.state.value;
-
-
-      var nextState = {};
-
-      var allowedViewChanged = nextProps.minDetail !== this.props.minDetail || nextProps.maxDetail !== this.props.maxDetail;
-
-      if (allowedViewChanged && !this.isViewAllowed(nextProps)) {
-        nextState.view = this.getView(nextProps);
-      }
-
-      if (allowedViewChanged || datesAreDifferent.apply(undefined, _toConsumableArray([nextValue, value].map(this.getValueFrom))) || datesAreDifferent.apply(undefined, _toConsumableArray([nextValue, value].map(this.getValueTo)))) {
-        nextState.value = nextValue;
-      }
-
-      nextState.activeStartDate = this.getActiveStartDate(nextProps);
-
-      if (!nextProps.selectRange && this.props.selectRange) {
-        nextState.hover = null;
-      }
-
-      this.setState(nextState);
-    }
-  }, {
-    key: 'getActiveStartDate',
-    value: function getActiveStartDate() {
-      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
-
-      var rangeType = this.getView(props);
-      var valueFrom = this.getValueFrom(props.value) || props.activeStartDate || new Date();
-      return (0, _dates.getBegin)(rangeType, valueFrom);
-    }
-  }, {
-    key: 'getView',
-    value: function getView() {
-      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
-      var view = props.view;
-
-
-      if (view && this.getLimitedViews(props).indexOf(view) !== -1) {
-        return view;
-      }
-
-      return this.getLimitedViews(props).pop();
-    }
-
-    /**
-     * Called when the user uses navigation buttons.
-     */
-
-  }, {
     key: 'renderContent',
     value: function renderContent() {
-      var _props = this.props,
-          calendarType = _props.calendarType,
-          locale = _props.locale,
-          maxDate = _props.maxDate,
-          minDate = _props.minDate,
-          renderChildren = _props.renderChildren,
-          tileClassName = _props.tileClassName,
-          tileContent = _props.tileContent,
-          tileDisabled = _props.tileDisabled;
+      var _props2 = this.props,
+          calendarType = _props2.calendarType,
+          locale = _props2.locale,
+          maxDate = _props2.maxDate,
+          minDate = _props2.minDate,
+          renderChildren = _props2.renderChildren,
+          tileClassName = _props2.tileClassName,
+          tileContent = _props2.tileContent,
+          tileDisabled = _props2.tileDisabled;
       var _state = this.state,
@@ -420,3 +371,3 @@ activeStartDate = _state.activeStartDate,
         view: this.state.view,
-        views: this.getLimitedViews()
+        views: getLimitedViews(this.props.minDetail, this.props.maxDetail)
       });
@@ -427,5 +378,5 @@ }
     value: function render() {
-      var _props2 = this.props,
-          className = _props2.className,
-          selectRange = _props2.selectRange;
+      var _props3 = this.props,
+          className = _props3.className,
+          selectRange = _props3.selectRange;
       var value = this.state.value;
@@ -450,7 +401,5 @@ var onMouseOut = this.onMouseOut;
     get: function get() {
-      var views = this.getLimitedViews();
-      var view = this.state.view;
+      var views = getLimitedViews(this.props.minDetail, this.props.maxDetail);
 
-
-      return views.indexOf(view) < views.length - 1;
+      return views.indexOf(this.state.view) < views.length - 1;
     }
@@ -460,20 +409,59 @@ }, {
     get: function get() {
-      var views = this.getLimitedViews();
-      var view = this.state.view;
+      var views = getLimitedViews(this.props.minDetail, this.props.maxDetail);
 
+      return views.indexOf(this.state.view) > 0;
+    }
+  }, {
+    key: 'valueType',
+    get: function get() {
+      return getValueType(this.props.maxDetail);
+    }
+  }], [{
+    key: 'getDerivedStateFromProps',
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      var minDate = nextProps.minDate,
+          maxDate = nextProps.maxDate,
+          minDetail = nextProps.minDetail,
+          maxDetail = nextProps.maxDetail;
 
-      return views.indexOf(view) > 0;
+
+      var nextState = {
+        activeStartDate: getActiveStartDate(nextProps)
+      };
+
+      /**
+       * If the next view is different from the current one, and the previously set view is not
+       * valid based on minDetail and maxDetail, get a new one.
+       */
+      var nextView = getView(nextProps.view, minDetail, maxDetail);
+      if (nextView !== prevState.view && !isViewAllowed(prevState.view, minDetail, maxDetail)) {
+        nextState.view = nextView;
+      }
+
+      /**
+       * If the next value is different from the current one  (with an exception of situation in
+       * which values provided are limited by minDate and maxDate so that the dates are the same),
+       * get a new one.
+       */
+      var values = [nextProps.value, prevState.value];
+      if (nextState.view || // Allowed view changed
+      datesAreDifferent.apply(undefined, _toConsumableArray(values.map(function (value) {
+        return getValueFrom(value, minDate, maxDate, maxDetail);
+      }))) || datesAreDifferent.apply(undefined, _toConsumableArray(values.map(function (value) {
+        return getValueTo(value, minDate, maxDate, maxDetail);
+      })))) {
+        nextState.value = nextProps.value;
+      }
+
+      if (!nextProps.selectRange && prevState.hover) {
+        nextState.hover = null;
+      }
+
+      return nextState;
     }
 
     /**
-     * Returns value type that can be returned with currently applied settings.
+     * Called when the user uses navigation buttons.
      */
 
-  }, {
-    key: 'valueType',
-    get: function get() {
-      var maxDetail = this.props.maxDetail;
-
-      return allValueTypes[allViews.indexOf(maxDetail)];
-    }
   }]);
@@ -532,2 +520,4 @@
   view: _propTypes2.default.oneOf(allViews)
-};
+};
+
+(0, _reactLifecyclesCompat2.default)(Calendar);

dist/shared/utils.js

@@ -84,3 +84,4 @@ 'use strict';
 
-  var classes = ['react-calendar__tile'];
+  var className = 'react-calendar__tile';
+  var classes = [className];
   if (!value) {
@@ -96,7 +97,8 @@ return classes;
   var dateRange = date instanceof Array ? date : (0, _dates.getRange)(dateType, date);
+  var now = new Date();
 
   if (isRangeWithinRange(valueRange, dateRange)) {
-    classes.push('react-calendar__tile--active');
+    classes.push(className + '--active');
   } else if (doRangesOverlap(valueRange, dateRange)) {
-    classes.push('react-calendar__tile--hasActive');
+    classes.push(className + '--hasActive');
   } else if (hover && (
@@ -107,6 +109,10 @@ // Date before value
   dateRange[0] > valueRange[1] && isRangeWithinRange([valueRange[1], hover], dateRange))) {
-    classes.push('react-calendar__tile--hover');
+    classes.push(className + '--hover');
   }
 
+  if (isValueWithinRange(now, dateRange)) {
+    classes.push(className + '--now');
+  }
+
   return classes;
 };

package.json

 {
   "name": "react-calendar",
-  "version": "2.13.5",
+  "version": "2.14.0",
   "description": "Ultimate calendar for your React app.",
@@ -9,5 +9,5 @@ "main": "dist/entry.js",
   "scripts": {
-    "build": "npm run build-js && npm run build-styles && npm run copy-styles",
+    "build": "npm run build-js && npm run copy-styles && npm run build-styles",
     "build-js": "babel src -d dist --ignore **/__tests__",
-    "build-styles": "lessc ./src/Calendar.less ./src/Calendar.css",
+    "build-styles": "lessc ./dist/Calendar.less ./dist/Calendar.css",
     "copy-styles": "node ./copy-styles.js",
@@ -57,3 +57,4 @@ "prepublishOnly": "npm run build",
     "merge-class-names": "^1.1.1",
-    "prop-types": "^15.6.0"
+    "prop-types": "^15.6.0",
+    "react-lifecycles-compat": "^1.1.0"
   },
@@ -82,5 +83,4 @@ "devDependencies": {
     "less": "^2.7.3",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-test-renderer": "^16.2.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   },
@@ -87,0 +87,0 @@ "peerDependencies": {

README.md

@@ -1,2 +0,2 @@
-![downloads](https://img.shields.io/npm/dt/react-calendar.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-calendar.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-calendar.svg
+![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
@@ -86,3 +86,3 @@ ) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 |activeStartDate|The beginning of a period that shall be displayed by default when no value is given. Defaults to today.|`new Date(2017, 0, 1)`|
-|calendarType|Defines which type of calendar should be used. Can be "US" or "ISO 8601". Defaults to "US" for "en-US" locale, "ISO 8601" to all the others.|`"ISO 8601"`|
+|calendarType|Defines which type of calendar should be used. Can be "US" or "ISO 8601". Defaults to "US" for "en-US" locale, "ISO 8601" to all the others. Changing to "US" will change the first day of the week from Monday to Sunday.|`"ISO 8601"`|
 |className|Defines class name(s) that will be added along with "react-calendar" to the main React-Calendar `<div>` element.|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
@@ -130,2 +130,3 @@ |formatMonth|Function called to override default formatting of month names. Can be used to use your own formatting function.|`(value) => formatDate(value, 'MMM')`|
 |activeStartDate|The beginning of a period that shall be displayed.|`new Date(2017, 0, 1)`|
+|hover|The date over which the user is hovering.|`new Date(2017, 0, 1)`|
 |maxDate|Defines maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although react-calendar will ensure that no later date is selected.|Date: `new Date()`|
@@ -132,0 +133,0 @@ |minDate|Defines minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although react-calendar will ensure that no earlier date is selected.|Date: `new Date()`|

src/Calendar.jsx

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import polyfill from 'react-lifecycles-compat';
 import mergeClassNames from 'merge-class-names';
@@ -24,87 +25,103 @@
 
-export default class Calendar extends Component {
-  get drillDownAvailable() {
-    const views = this.getLimitedViews();
-    const { view } = this.state;
+/**
+ * Returns views array with disallowed values cut off.
+ */
+const getLimitedViews = (minDetail, maxDetail) =>
+  allViews.slice(allViews.indexOf(minDetail), allViews.indexOf(maxDetail) + 1);
 
-    return views.indexOf(view) < views.length - 1;
+const getView = (view, minDetail, maxDetail) => {
+  if (view && getLimitedViews(minDetail, maxDetail).indexOf(view) !== -1) {
+    return view;
   }
 
-  get drillUpAvailable() {
-    const views = this.getLimitedViews();
-    const { view } = this.state;
+  return getLimitedViews(minDetail, maxDetail).pop();
+};
 
-    return views.indexOf(view) > 0;
-  }
+/**
+ * Determines whether a given view is allowed with currently applied settings.
+ */
+const isViewAllowed = (view, minDetail, maxDetail) => {
+  const views = getLimitedViews(minDetail, maxDetail);
 
-  /**
-   * Returns value type that can be returned with currently applied settings.
-   */
-  get valueType() {
-    const { maxDetail } = this.props;
-    return allValueTypes[allViews.indexOf(maxDetail)];
-  }
+  return views.indexOf(view) !== -1;
+};
 
-  getValueArray(value) {
-    if (value instanceof Array) {
-      return value;
-    }
+/**
+ * Returns value type that can be returned with currently applied settings.
+ */
+const getValueType = maxDetail =>
+  allValueTypes[allViews.indexOf(maxDetail)];
 
-    return [this.getValueFrom(value), this.getValueTo(value)];
+const getValueFrom = (value, minDate, maxDate, maxDetail) => {
+  if (!value) {
+    return null;
   }
 
-  getValueFrom = (value) => {
-    if (!value) {
-      return null;
-    }
+  const rawValueFrom = value instanceof Array && value.length === 2 ? value[0] : value;
+  const valueFromDate = new Date(rawValueFrom);
 
-    const { maxDate, minDate } = this.props;
-    const rawValueFrom = value instanceof Array && value.length === 2 ? value[0] : value;
-    const valueFromDate = new Date(rawValueFrom);
+  if (isNaN(valueFromDate.getTime())) {
+    throw new Error(`Invalid date: ${value}`);
+  }
 
-    if (isNaN(valueFromDate.getTime())) {
-      throw new Error(`Invalid date: ${value}`);
-    }
+  const valueFrom = getBegin(getValueType(maxDetail), valueFromDate);
 
-    const valueFrom = getBegin(this.valueType, valueFromDate);
+  return between(valueFrom, minDate, maxDate);
+};
 
-    return between(valueFrom, minDate, maxDate);
+const getValueTo = (value, minDate, maxDate, maxDetail) => {
+  if (!value) {
+    return null;
   }
 
-  getValueTo = (value) => {
-    if (!value) {
-      return null;
-    }
+  const rawValueTo = value instanceof Array && value.length === 2 ? value[1] : value;
+  const valueToDate = new Date(rawValueTo);
 
-    const { maxDate, minDate } = this.props;
-    const rawValueTo = value instanceof Array && value.length === 2 ? value[1] : value;
-    const valueToDate = new Date(rawValueTo);
+  if (isNaN(valueToDate.getTime())) {
+    throw new Error(`Invalid date: ${value}`);
+  }
 
-    if (isNaN(valueToDate.getTime())) {
-      throw new Error(`Invalid date: ${value}`);
-    }
+  const valueTo = getEnd(getValueType(maxDetail), valueToDate);
 
-    const valueTo = getEnd(this.valueType, valueToDate);
+  return between(valueTo, minDate, maxDate);
+};
 
-    return between(valueTo, minDate, maxDate);
+const getValueArray = (value, minDate, maxDate, maxDetail) => {
+  if (value instanceof Array) {
+    return value;
   }
 
-  /**
-   * Returns views array with disallowed values cut off.
-   */
-  getLimitedViews(props = this.props) {
-    const { minDetail, maxDetail } = props;
+  return [
+    getValueFrom(value, minDate, maxDate, maxDetail),
+    getValueTo(value, minDate, maxDate, maxDetail),
+  ];
+};
 
-    return allViews.slice(allViews.indexOf(minDetail), allViews.indexOf(maxDetail) + 1);
+const getActiveStartDate = (props) => {
+  const rangeType = getView(props.view, props.minDetail, props.maxDetail);
+  const valueFrom = (
+    getValueFrom(props.value, props.minDate, props.maxDate, props.maxDetail) ||
+    props.activeStartDate ||
+    new Date()
+  );
+  return getBegin(rangeType, valueFrom);
+};
+
+export default class Calendar extends Component {
+  get drillDownAvailable() {
+    const views = getLimitedViews(this.props.minDetail, this.props.maxDetail);
+
+    return views.indexOf(this.state.view) < views.length - 1;
   }
 
-  /**
-   * Determines whether a given view is allowed with currently applied settings.
-   */
-  isViewAllowed(props = this.props, view = this.state.view) {
-    const views = this.getLimitedViews(props);
+  get drillUpAvailable() {
+    const views = getLimitedViews(this.props.minDetail, this.props.maxDetail);
 
-    return views.indexOf(view) !== -1;
+    return views.indexOf(this.state.view) > 0;
   }
 
+  get valueType() {
+    return getValueType(this.props.maxDetail);
+  }
+
   /**
@@ -114,11 +131,13 @@ * Gets current value in a desired format.
   getProcessedValue(value) {
-    const { returnValue } = this.props;
+    const {
+      minDate, maxDate, maxDetail, returnValue,
+    } = this.props;
 
     switch (returnValue) {
       case 'start':
-        return this.getValueFrom(value);
+        return getValueFrom(value, minDate, maxDate, maxDetail);
       case 'end':
-        return this.getValueTo(value);
+        return getValueTo(value, minDate, maxDate, maxDetail);
       case 'range':
-        return this.getValueArray(value);
+        return getValueArray(value, minDate, maxDate, maxDetail);
       default:
@@ -129,61 +148,43 @@ throw new Error('Invalid returnValue.');
 
-  state = {
-    activeStartDate: this.getActiveStartDate(),
-    hover: null,
-    view: this.getView(),
-    value: this.props.value,
-  }
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const {
+      minDate, maxDate, minDetail, maxDetail,
+    } = nextProps;
 
-  componentWillReceiveProps(nextProps) {
-    const { value: nextValue } = nextProps;
-    const { value } = this.state;
+    const nextState = {
+      activeStartDate: getActiveStartDate(nextProps),
+    };
 
-    const nextState = {};
-
-    const allowedViewChanged = (
-      nextProps.minDetail !== this.props.minDetail ||
-      nextProps.maxDetail !== this.props.maxDetail
-    );
-
-    if (allowedViewChanged && !this.isViewAllowed(nextProps)) {
-      nextState.view = this.getView(nextProps);
+    /**
+     * If the next view is different from the current one, and the previously set view is not
+     * valid based on minDetail and maxDetail, get a new one.
+     */
+    const nextView = getView(nextProps.view, minDetail, maxDetail);
+    if (nextView !== prevState.view && !isViewAllowed(prevState.view, minDetail, maxDetail)) {
+      nextState.view = nextView;
     }
 
+    /**
+     * If the next value is different from the current one  (with an exception of situation in
+     * which values provided are limited by minDate and maxDate so that the dates are the same),
+     * get a new one.
+     */
+    const values = [nextProps.value, prevState.value];
     if (
-      allowedViewChanged ||
-      datesAreDifferent(...[nextValue, value].map(this.getValueFrom)) ||
-      datesAreDifferent(...[nextValue, value].map(this.getValueTo))
+      nextState.view || // Allowed view changed
+      datesAreDifferent(...values.map(value => getValueFrom(value, minDate, maxDate, maxDetail))) ||
+      datesAreDifferent(...values.map(value => getValueTo(value, minDate, maxDate, maxDetail)))
     ) {
-      nextState.value = nextValue;
+      nextState.value = nextProps.value;
     }
 
-    nextState.activeStartDate = this.getActiveStartDate(nextProps);
-
-    if (!nextProps.selectRange && this.props.selectRange) {
+    if (!nextProps.selectRange && prevState.hover) {
       nextState.hover = null;
     }
 
-    this.setState(nextState);
+    return nextState;
   }
 
-  getActiveStartDate(props = this.props) {
-    const rangeType = this.getView(props);
-    const valueFrom = (
-      this.getValueFrom(props.value) ||
-      props.activeStartDate ||
-      new Date()
-    );
-    return getBegin(rangeType, valueFrom);
-  }
+  state = {};
 
-  getView(props = this.props) {
-    const { view } = props;
-
-    if (view && this.getLimitedViews(props).indexOf(view) !== -1) {
-      return view;
-    }
-
-    return this.getLimitedViews(props).pop();
-  }
-
   /**
@@ -206,3 +207,3 @@ * Called when the user uses navigation buttons.
 
-    const views = this.getLimitedViews();
+    const views = getLimitedViews(this.props.minDetail, this.props.maxDetail);
 
@@ -228,3 +229,3 @@ this.setState((prevState) => {
 
-    const views = this.getLimitedViews();
+    const views = getLimitedViews(this.props.minDetail, this.props.maxDetail);
 
@@ -377,3 +378,3 @@ this.setState((prevState) => {
         view={this.state.view}
-        views={this.getLimitedViews()}
+        views={getLimitedViews(this.props.minDetail, this.props.maxDetail)}
       />
@@ -461,1 +462,3 @@ );
 };
+
+polyfill(Calendar);

src/shared/utils.js

@@ -58,3 +58,4 @@ import { getRange } from './dates';
 } = {}) => {
-  const classes = ['react-calendar__tile'];
+  const className = 'react-calendar__tile';
+  const classes = [className];
   if (!value) {
@@ -74,7 +75,8 @@ return classes;
   const dateRange = date instanceof Array ? date : getRange(dateType, date);
+  const now = new Date();
 
   if (isRangeWithinRange(valueRange, dateRange)) {
-    classes.push('react-calendar__tile--active');
+    classes.push(`${className}--active`);
   } else if (doRangesOverlap(valueRange, dateRange)) {
-    classes.push('react-calendar__tile--hasActive');
+    classes.push(`${className}--hasActive`);
   } else if (
@@ -94,6 +96,10 @@ hover && (
   ) {
-    classes.push('react-calendar__tile--hover');
+    classes.push(`${className}--hover`);
   }
 
+  if (isValueWithinRange(now, dateRange)) {
+    classes.push(`${className}--now`);
+  }
+
   return classes;
 };

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

Dev dependency count

23

decreased by-4.17%

Number of lines in readme file

155

increased by0.65%

Worsened metrics

Total package byte prevSize

318566

decreased by-0.3%

Dependency count

6

increased by20%

Number of package files

77

decreased by-1.28%

Lines of code

7925

decreased by-1.09%

Dependency changes

• + Addedreact-lifecycles-compat@^1.1.0

• + Addedreact-lifecycles-compat@1.1.4(transitive)