react-calendar - npm Package Compare versions

Comparing version 2.7.1 to 2.8.0

build/Calendar.js

@@ -9,4 +9,2 @@ 'use strict';
 
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -88,16 +86,9 @@
       view: _this.getView()
-    }, _this.setView = function (view) {
-      _this.setState(function (prevState) {
-        var activeRange = (0, _dates.getRange)(view, prevState.activeStartDate);
-
-        var _activeRange = _slicedToArray(activeRange, 1),
-            activeStartDate = _activeRange[0];
-
-        return {
+    }, _this.setActiveStartDate = function (activeStartDate) {
+      _this.setState({ activeStartDate: activeStartDate }, function () {
+        (0, _utils.callIfDefined)(_this.props.onActiveDateChange, {
           activeStartDate: activeStartDate,
-          view: view
-        };
+          view: _this.state.view
+        });
       });
-    }, _this.setActiveStartDate = function (activeStartDate) {
-      return _this.setState({ activeStartDate: activeStartDate });
     }, _this.drillDown = function (activeStartDate) {
@@ -111,6 +102,12 @@ if (!_this.drillDownAvailable) {
       _this.setState(function (prevState) {
+        var nextView = views[views.indexOf(prevState.view) + 1];
         return {
           activeStartDate: activeStartDate,
-          view: views[views.indexOf(prevState.view) + 1]
+          view: nextView
         };
+      }, function () {
+        (0, _utils.callIfDefined)(_this.props.onDrillDown, {
+          activeStartDate: activeStartDate,
+          view: _this.state.view
+        });
       });
@@ -125,13 +122,17 @@ }, _this.drillUp = function () {
       _this.setState(function (prevState) {
+        var nextView = views[views.indexOf(prevState.view) - 1];
+        var activeStartDate = (0, _dates.getBegin)(nextView, prevState.activeStartDate);
+
         return {
-          view: views[views.indexOf(prevState.view) - 1]
+          activeStartDate: activeStartDate,
+          view: nextView
         };
+      }, function () {
+        (0, _utils.callIfDefined)(_this.props.onDrillUp, {
+          activeStartDate: _this.state.activeStartDate,
+          view: _this.state.view
+        });
       });
     }, _this.onChange = function (value) {
-      var onChange = _this.props.onChange;
-
-      if (onChange) {
-        var processedValue = _this.getProcessedValue(value);
-        onChange(processedValue);
-      }
+      (0, _utils.callIfDefined)(_this.props.onChange, _this.getProcessedValue(value));
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -308,7 +309,2 @@ }
     /**
-     * Called when the user opens a new view.
-     */
-
-
-    /**
      * Called when the user uses navigation buttons.
@@ -320,4 +316,2 @@ */
     value: function renderContent() {
-      var setView = this.setView,
-          valueType = this.valueType;
       var _props4 = this.props,
@@ -340,7 +334,6 @@ calendarType = _props4.calendarType,
         minDate: minDate,
-        setView: setView,
         tileClassName: tileClassName,
         tileContent: tileContent || renderChildren, // For backwards compatibility
         value: this.getProcessedValue(value),
-        valueType: valueType
+        valueType: this.valueType
       };
@@ -468,2 +461,3 @@
   nextLabel: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
+  onActiveDateChange: _propTypes2.default.func,
   onChange: _propTypes2.default.func,
@@ -475,2 +469,4 @@ onClickDay: _propTypes2.default.func,
   onClickYear: _propTypes2.default.func,
+  onDrillDown: _propTypes2.default.func,
+  onDrillUp: _propTypes2.default.func,
   prev2Label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
@@ -477,0 +473,0 @@ prevLabel: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),

build/Calendar/Navigation.js

@@ -31,4 +31,4 @@ 'use strict';
 
-var Navigation = function (_Component) {
-  _inherits(Navigation, _Component);
+var Navigation = function (_PureComponent) {
+  _inherits(Navigation, _PureComponent);
 
@@ -232,3 +232,3 @@ function Navigation() {
   return Navigation;
-}(_react.Component);
+}(_react.PureComponent);
 
@@ -235,0 +235,0 @@ exports.default = Navigation;

build/CenturyView.js

@@ -33,4 +33,4 @@ 'use strict';
 
-var CenturyView = function (_Component) {
-  _inherits(CenturyView, _Component);
+var CenturyView = function (_PureComponent) {
+  _inherits(CenturyView, _PureComponent);
 
@@ -44,15 +44,5 @@ function CenturyView() {
   _createClass(CenturyView, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var setView = this.props.setView;
-
-
-      if (setView) setView('century');
-    }
-  }, {
     key: 'renderDecades',
     value: function renderDecades() {
-      var _props = this.props,
-          setView = _props.setView,
-          childProps = _objectWithoutProperties(_props, ['setView']);
+      var childProps = _objectWithoutProperties(this.props, []);
 
@@ -73,3 +63,3 @@ return _react2.default.createElement(_Decades2.default, childProps);
   return CenturyView;
-}(_react.Component);
+}(_react.PureComponent);
 
@@ -85,5 +75,4 @@ exports.default = CenturyView;
   setActiveRange: _propTypes2.default.func,
-  setView: _propTypes2.default.func,
   value: _propTypes3.isValue,
   valueType: _propTypes2.default.string
 };

build/CenturyView/Decades.js

@@ -41,4 +41,4 @@ 'use strict';
 
-var Decades = function (_Component) {
-  _inherits(Decades, _Component);
+var Decades = function (_PureComponent) {
+  _inherits(Decades, _PureComponent);
 
@@ -110,3 +110,3 @@ function Decades() {
   return Decades;
-}(_react.Component);
+}(_react.PureComponent);
 
@@ -113,0 +113,0 @@ exports.default = Decades;

build/DecadeView.js

@@ -33,4 +33,4 @@ 'use strict';
 
-var DecadeView = function (_Component) {
-  _inherits(DecadeView, _Component);
+var DecadeView = function (_PureComponent) {
+  _inherits(DecadeView, _PureComponent);
 
@@ -44,15 +44,5 @@ function DecadeView() {
   _createClass(DecadeView, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var setView = this.props.setView;
-
-
-      if (setView) setView('decade');
-    }
-  }, {
     key: 'renderYears',
     value: function renderYears() {
-      var _props = this.props,
-          setView = _props.setView,
-          childProps = _objectWithoutProperties(_props, ['setView']);
+      var childProps = _objectWithoutProperties(this.props, []);
 
@@ -73,3 +63,3 @@ return _react2.default.createElement(_Years2.default, childProps);
   return DecadeView;
-}(_react.Component);
+}(_react.PureComponent);
 
@@ -85,5 +75,4 @@ exports.default = DecadeView;
   setActiveRange: _propTypes2.default.func,
-  setView: _propTypes2.default.func,
   value: _propTypes3.isValue,
   valueType: _propTypes2.default.string
 };

build/DecadeView/Years.js

@@ -41,4 +41,4 @@ 'use strict';
 
-var Years = function (_Component) {
-  _inherits(Years, _Component);
+var Years = function (_PureComponent) {
+  _inherits(Years, _PureComponent);
 
@@ -110,3 +110,3 @@ function Years() {
   return Years;
-}(_react.Component);
+}(_react.PureComponent);
 
@@ -113,0 +113,0 @@ exports.default = Years;

build/Flex.js

@@ -22,3 +22,3 @@ 'use strict';
 var toPercent = function toPercent(num) {
-  return Math.floor(100 * num) / 100 + '%';
+  return num + '%';
 };
@@ -25,0 +25,0 @@

build/MonthView.js

@@ -45,4 +45,4 @@ 'use strict';
 
-var MonthView = function (_Component) {
-  _inherits(MonthView, _Component);
+var MonthView = function (_PureComponent) {
+  _inherits(MonthView, _PureComponent);
 
@@ -56,10 +56,2 @@ function MonthView() {
   _createClass(MonthView, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var setView = this.props.setView;
-
-
-      if (setView) setView('month');
-    }
-  }, {
     key: 'renderWeekdays',
@@ -102,5 +94,4 @@ value: function renderWeekdays() {
       var _props2 = this.props,
-          setView = _props2.setView,
           calendarType = _props2.calendarType,
-          childProps = _objectWithoutProperties(_props2, ['setView', 'calendarType']);
+          childProps = _objectWithoutProperties(_props2, ['calendarType']);
 
@@ -157,3 +148,3 @@ return _react2.default.createElement(_Days2.default, _extends({
   return MonthView;
-}(_react.Component);
+}(_react.PureComponent);
 
@@ -171,3 +162,2 @@ exports.default = MonthView;
   setActiveRange: _propTypes2.default.func,
-  setView: _propTypes2.default.func,
   showNeighboringMonth: _propTypes2.default.bool,
@@ -174,0 +164,0 @@ showWeekNumbers: _propTypes2.default.bool,

build/MonthView/Days.js

@@ -41,4 +41,4 @@ 'use strict';
 
-var Days = function (_Component) {
-  _inherits(Days, _Component);
+var Days = function (_PureComponent) {
+  _inherits(Days, _PureComponent);
 
@@ -170,3 +170,3 @@ function Days() {
   return Days;
-}(_react.Component);
+}(_react.PureComponent);
 
@@ -173,0 +173,0 @@ exports.default = Days;

build/MonthView/Weekdays.js

@@ -35,4 +35,4 @@ 'use strict';
 
-var Weekdays = function (_Component) {
-  _inherits(Weekdays, _Component);
+var Weekdays = function (_PureComponent) {
+  _inherits(Weekdays, _PureComponent);
 
@@ -106,3 +106,3 @@ function Weekdays() {
   return Weekdays;
-}(_react.Component);
+}(_react.PureComponent);
 
@@ -109,0 +109,0 @@ exports.default = Weekdays;

build/MonthView/WeekNumbers.js

@@ -33,4 +33,4 @@ 'use strict';
 
-var WeekNumbers = function (_Component) {
-  _inherits(WeekNumbers, _Component);
+var WeekNumbers = function (_PureComponent) {
+  _inherits(WeekNumbers, _PureComponent);
 
@@ -165,3 +165,3 @@ function WeekNumbers() {
   return WeekNumbers;
-}(_react.Component);
+}(_react.PureComponent);
 
@@ -168,0 +168,0 @@ exports.default = WeekNumbers;

build/shared/dates.js

@@ -290,2 +290,3 @@ 'use strict';
 
+  var beginOfWeek = getBeginOfWeek(date, calendarType);
   var year = getYear(date) + 1;
@@ -302,3 +303,3 @@ var dayInWeekOne = void 0;
 
-  return Math.floor((date - beginOfFirstWeek) / (8.64e7 * 7)) + 1;
+  return Math.round((beginOfWeek - beginOfFirstWeek) / (8.64e7 * 7)) + 1;
 };
@@ -305,0 +306,0 @@

build/shared/utils.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.getTileActivityFlags = exports.between = exports.doRangesOverlap = exports.isRangeWithinRange = exports.isValueWithinRange = exports.mergeFunctions = undefined;
+exports.getTileActivityFlags = exports.between = exports.doRangesOverlap = exports.isRangeWithinRange = exports.isValueWithinRange = exports.callIfDefined = exports.mergeFunctions = undefined;
 
@@ -35,2 +35,17 @@ var _dates = require('./dates');
 
+/**
+ * Calls a function, if it's defined, with specified arguments
+ * @param {Function} fn
+ * @param {Object} args
+ */
+var callIfDefined = exports.callIfDefined = function callIfDefined(fn) {
+  for (var _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+    args[_key3 - 1] = arguments[_key3];
+  }
+
+  if (fn && typeof fn === 'function') {
+    fn.apply(undefined, args);
+  }
+};
+
 var isValueWithinRange = exports.isValueWithinRange = function isValueWithinRange(value, range) {
@@ -37,0 +52,0 @@ return range[0] <= value && range[1] >= value;

build/YearView.js

@@ -33,4 +33,4 @@ 'use strict';
 
-var YearView = function (_Component) {
-  _inherits(YearView, _Component);
+var YearView = function (_PureComponent) {
+  _inherits(YearView, _PureComponent);
 
@@ -44,15 +44,5 @@ function YearView() {
   _createClass(YearView, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var setView = this.props.setView;
-
-
-      if (setView) setView('year');
-    }
-  }, {
     key: 'renderMonths',
     value: function renderMonths() {
-      var _props = this.props,
-          setView = _props.setView,
-          childProps = _objectWithoutProperties(_props, ['setView']);
+      var childProps = _objectWithoutProperties(this.props, []);
 
@@ -73,3 +63,3 @@ return _react2.default.createElement(_Months2.default, childProps);
   return YearView;
-}(_react.Component);
+}(_react.PureComponent);
 
@@ -85,5 +75,4 @@ exports.default = YearView;
   setActiveRange: _propTypes2.default.func,
-  setView: _propTypes2.default.func,
   value: _propTypes3.isValue,
   valueType: _propTypes2.default.string
 };

build/YearView/Months.js

@@ -41,4 +41,4 @@ 'use strict';
 
-var Months = function (_Component) {
-  _inherits(Months, _Component);
+var Months = function (_PureComponent) {
+  _inherits(Months, _PureComponent);
 
@@ -113,3 +113,3 @@ function Months() {
   return Months;
-}(_react.Component);
+}(_react.PureComponent);
 
@@ -116,0 +116,0 @@ exports.default = Months;

index.d.ts

@@ -6,2 +6,3 @@ /// <reference types="react" />
   type DateCallback = (date: Date) => void
+  type ViewCallback = (props: ViewCallbackProperties) => void
 
@@ -21,2 +22,3 @@ export default function Calendar(props: CalendarProps): JSX.Element;
     nextLabel?: string | React.ReactElement<any>;
+    onActiveDateChange?: ViewCallback;
     onChange?: DateCallback;
@@ -28,2 +30,4 @@ onClickDay?: DateCallback;
     onClickYear?: DateCallback;
+    onDrillDown?: ViewCallback;
+    onDrillUp?: ViewCallback;
     prev2Label?: string | React.ReactElement<any>;
@@ -47,2 +51,7 @@ prevLabel?: string | React.ReactElement<any>;
 
+  export interface ViewCallbackProperties {
+    activeStartDate: Date;
+    view: Detail;
+  }
+
   export function MonthView(props: DetailViewProps): JSX.Element;
@@ -49,0 +58,0 @@ export function YearView(props: DetailViewProps): JSX.Element;

package.json

 {
   "name": "react-calendar",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "description": "A component for picking dates or date periods for your React application.",
@@ -55,6 +55,6 @@ "main": "build/entry.js",
   "devDependencies": {
-    "@types/react": "^16.0.22",
+    "@types/react": "^16.0.31",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.2",
+    "babel-eslint": "^8.0.3",
     "babel-plugin-transform-class-properties": "^6.24.1",
@@ -66,13 +66,13 @@ "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
     "babel-preset-stage-2": "^6.24.1",
-    "enzyme": "^3.1.1",
-    "enzyme-adapter-react-16": "^1.0.4",
-    "eslint": "^4.10.0",
+    "enzyme": "^3.2.0",
+    "enzyme-adapter-react-16": "^1.1.0",
+    "eslint": "^4.13.1",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-plugin-class-property": "^1.0.6",
     "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.4.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.5.1",
     "jest": "^21.2.1",
     "less": "^2.7.3",
-    "react-test-renderer": "^16.1.0"
+    "react-test-renderer": "^16.2.0"
   },
@@ -79,0 +79,0 @@ "files": [

README.md

@@ -96,2 +96,3 @@ ![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
 |next2Label|Defines the content of the "next on higher level" button on the navigation pane. Defaults to "»". |<ul><li>String: `"»"`</li><li>React element: `<DoubleNextIcon />`</li></ul>|
+|onActiveDateChange|Function called when the user navigates from one view to another using previous/next button.|`({ activeStartDate, view }) => alert('Changed view to: ', activeStartDate, view)`|
 |onChange|Function called when the user clicks an item (day on month view, month on year view and so on) on the most detailed view available.|`(value) => alert('New date is: ', value)`|
@@ -103,2 +104,4 @@ |onClickDay|Function called when the user clicks a day.|`(value) => alert('Clicked day: ', value)`|
 |onClickYear|Function called when the user clicks a year.|`(value) => alert('Clicked year: ', value)`|
+|onDrillDown|Function called when the user drills down by clicking a tile.|`({ activeStartDate, view }) => alert('Drilled down to: ', activeStartDate, view)`|
+|onDrillUp|Function called when the user drills up by clicking drill up button.|`({ activeStartDate, view }) => alert('Drilled up to: ', activeStartDate, view)`|
 |prevLabel|Defines the content of the "previous" button on the navigation pane. Defaults to "‹".|<ul><li>String: `"‹"`</li><li>React element: `<PreviousIcon />`</li></ul>|
@@ -105,0 +108,0 @@ |prev2Label|Defines the content of the "previous on higher level" button on the navigation pane. Defaults to "«".|<ul><li>String: `"«"`</li><li>React element: `<DoublePreviousIcon />`</li></ul>|

src/__tests__/Calendar.jsx

@@ -204,2 +204,20 @@ import React from 'react';
 
+  it('calls onDrillUp on drill up', () => {
+    const onDrillUp = jest.fn();
+    const component = mount(
+      <Calendar
+        activeStartDate={new Date(2017, 6, 1)}
+        onDrillUp={onDrillUp}
+        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', () => {
@@ -225,2 +243,20 @@ const component = mount(
 
+  it('calls onDrillDown on drill down', () => {
+    const onDrillDown = jest.fn();
+    const component = mount(
+      <Calendar
+        activeStartDate={new Date(2001, 0, 1)}
+        onDrillDown={onDrillDown}
+        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', () => {
@@ -376,2 +412,20 @@ const component = mount(
   });
+
+  it('calls onActiveDateChange on activeStartDate change', () => {
+    const onActiveDateChange = jest.fn();
+    const component = mount(
+      <Calendar
+        activeStartDate={new Date(2017, 0, 1)}
+        onActiveDateChange={onActiveDateChange}
+        view="year"
+      />
+    );
+
+    component.instance().setActiveStartDate(new Date(2018, 0, 1));
+
+    expect(onActiveDateChange).toHaveBeenCalledWith({
+      activeStartDate: new Date(2018, 0, 1),
+      view: 'year',
+    });
+  });
 });

src/__tests__/Flex.jsx

@@ -63,5 +63,7 @@ import React from 'react';
     children.forEach(child => expect(child.props().style.display).toBe('flex'));
-    children.forEach(child => expect(child.props().style.flexBasis).toBe('33.33%'));
-    expect(children.first().props().style.marginLeft).toBe('33.33%');
+    children.forEach(child =>
+      expect(parseFloat(child.props().style.flexBasis)).toBeCloseTo(33.33)
+    );
+    expect(parseFloat(children.first().props().style.marginLeft)).toBeCloseTo(33.33);
   });
 });

src/Calendar.jsx

@@ -11,6 +11,6 @@ import React, { Component } from 'react';
 
-import { getBegin, getEnd, getRange } from './shared/dates';
+import { getBegin, getEnd } from './shared/dates';
 import { setLocale } from './shared/locales';
 import { isCalendarType, isClassName, isMaxDate, isMinDate, isValue } from './shared/propTypes';
-import { between, mergeFunctions } from './shared/utils';
+import { between, callIfDefined, mergeFunctions } from './shared/utils';
 
@@ -195,21 +195,13 @@ const allViews = ['century', 'decade', 'year', 'month'];
   /**
-   * Called when the user opens a new view.
+   * Called when the user uses navigation buttons.
    */
-  setView = (view) => {
-    this.setState((prevState) => {
-      const activeRange = getRange(view, prevState.activeStartDate);
-      const [activeStartDate] = activeRange;
-
-      return {
+  setActiveStartDate = (activeStartDate) => {
+    this.setState({ activeStartDate }, () => {
+      callIfDefined(this.props.onActiveDateChange, {
         activeStartDate,
-        view,
-      };
+        view: this.state.view,
+      });
     });
   }
 
-  /**
-   * Called when the user uses navigation buttons.
-   */
-  setActiveStartDate = activeStartDate => this.setState({ activeStartDate })
-
   drillDown = (activeStartDate) => {
@@ -222,6 +214,14 @@ if (!this.drillDownAvailable) {
 
-    this.setState(prevState => ({
-      activeStartDate,
-      view: views[views.indexOf(prevState.view) + 1],
-    }));
+    this.setState((prevState) => {
+      const nextView = views[views.indexOf(prevState.view) + 1];
+      return {
+        activeStartDate,
+        view: nextView,
+      };
+    }, () => {
+      callIfDefined(this.props.onDrillDown, {
+        activeStartDate,
+        view: this.state.view,
+      });
+    });
   }
@@ -236,17 +236,23 @@
 
-    this.setState(prevState => ({
-      view: views[views.indexOf(prevState.view) - 1],
-    }));
+    this.setState((prevState) => {
+      const nextView = views[views.indexOf(prevState.view) - 1];
+      const activeStartDate = getBegin(nextView, prevState.activeStartDate);
+
+      return {
+        activeStartDate,
+        view: nextView,
+      };
+    }, () => {
+      callIfDefined(this.props.onDrillUp, {
+        activeStartDate: this.state.activeStartDate,
+        view: this.state.view,
+      });
+    });
   }
 
   onChange = (value) => {
-    const { onChange } = this.props;
-    if (onChange) {
-      const processedValue = this.getProcessedValue(value);
-      onChange(processedValue);
-    }
+    callIfDefined(this.props.onChange, this.getProcessedValue(value));
   }
 
   renderContent() {
-    const { setView, valueType } = this;
     const {
@@ -261,7 +267,6 @@ calendarType, maxDate, minDate, renderChildren, tileClassName, tileContent, value,
       minDate,
-      setView,
       tileClassName,
       tileContent: tileContent || renderChildren, // For backwards compatibility
       value: this.getProcessedValue(value),
-      valueType,
+      valueType: this.valueType,
     };
@@ -364,2 +369,3 @@
   nextLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  onActiveDateChange: PropTypes.func,
   onChange: PropTypes.func,
@@ -371,2 +377,4 @@ onClickDay: PropTypes.func,
   onClickYear: PropTypes.func,
+  onDrillDown: PropTypes.func,
+  onDrillUp: PropTypes.func,
   prev2Label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
@@ -373,0 +381,0 @@ prevLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

src/Calendar/Navigation.jsx

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

src/CenturyView.jsx

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
@@ -8,12 +8,5 @@
 
-export default class CenturyView extends Component {
-  componentDidMount() {
-    const { setView } = this.props;
-
-    if (setView) setView('century');
-  }
-
+export default class CenturyView extends PureComponent {
   renderDecades() {
     const {
-      setView,
       ...childProps
@@ -42,5 +35,4 @@ } = this.props;
   setActiveRange: PropTypes.func,
-  setView: PropTypes.func,
   value: isValue,
   valueType: PropTypes.string,
 };

src/CenturyView/Decades.jsx

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
@@ -14,3 +14,3 @@
 
-export default class Decades extends Component {
+export default class Decades extends PureComponent {
   get start() {
@@ -17,0 +17,0 @@ const { activeStartDate } = this.props;

src/DecadeView.jsx

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
@@ -8,12 +8,5 @@
 
-export default class DecadeView extends Component {
-  componentDidMount() {
-    const { setView } = this.props;
-
-    if (setView) setView('decade');
-  }
-
+export default class DecadeView extends PureComponent {
   renderYears() {
     const {
-      setView,
       ...childProps
@@ -42,5 +35,4 @@ } = this.props;
   setActiveRange: PropTypes.func,
-  setView: PropTypes.func,
   value: isValue,
   valueType: PropTypes.string,
 };

src/DecadeView/Years.jsx

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
@@ -11,3 +11,3 @@
 
-export default class Years extends Component {
+export default class Years extends PureComponent {
   get start() {
@@ -14,0 +14,0 @@ const { activeStartDate } = this.props;

src/Flex.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
 
-const toPercent = num => `${Math.floor(100 * num) / 100}%`;
+const toPercent = num => `${num}%`;
 
@@ -6,0 +6,0 @@ const Flex = ({

src/MonthView.jsx

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
@@ -11,3 +11,3 @@
 
-export default class MonthView extends Component {
+export default class MonthView extends PureComponent {
   get calendarType() {
@@ -28,8 +28,2 @@ const { calendarType } = this.props;
 
-  componentDidMount() {
-    const { setView } = this.props;
-
-    if (setView) setView('month');
-  }
-
   renderWeekdays() {
@@ -67,3 +61,3 @@ const { calendarType } = this;
   renderDays() {
-    const { setView, calendarType, ...childProps } = this.props;
+    const { calendarType, ...childProps } = this.props;
 
@@ -110,3 +104,2 @@ return (
   setActiveRange: PropTypes.func,
-  setView: PropTypes.func,
   showNeighboringMonth: PropTypes.bool,
@@ -113,0 +106,0 @@ showWeekNumbers: PropTypes.bool,

src/MonthView/Days.jsx

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
@@ -16,3 +16,3 @@
 
-export default class Days extends Component {
+export default class Days extends PureComponent {
   get offset() {
@@ -19,0 +19,0 @@ if (this.props.showNeighboringMonth) {

src/MonthView/Weekdays.jsx

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

src/MonthView/WeekNumbers.jsx

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
@@ -17,3 +17,3 @@
 
-export default class WeekNumbers extends Component {
+export default class WeekNumbers extends PureComponent {
   get startWeekday() {
@@ -20,0 +20,0 @@ const { activeStartDate, calendarType } = this.props;

src/shared/__tests__/dates.js

@@ -534,8 +534,23 @@ import {
 
-      const dayOfWeek = getWeekNumber(date, 'ISO 8601');
+      const weekNumber = getWeekNumber(date, 'ISO 8601');
 
-      expect(dayOfWeek).toBe(1);
+      expect(weekNumber).toBe(1);
     }
   });
 
+  it('returns proper week number for a sample year starting in week 1 (ISO 8601)', () => {
+    const year = 2018;
+    const month = 0;
+    const startDate = 1;
+
+    for (let currentWeek = 1; currentWeek <= 52; currentWeek += 1) {
+      const weekOffset = (currentWeek - 1) * 7;
+      const date = new Date(year, month, startDate + weekOffset);
+
+      const weekNumber = getWeekNumber(date, 'ISO 8601');
+
+      expect(weekNumber).toBe(currentWeek);
+    }
+  });
+
   it('returns proper week number for a sample week 52 (ISO 8601)', () => {
@@ -549,5 +564,5 @@ const year = 2016;
 
-      const dayOfWeek = getWeekNumber(date, 'ISO 8601');
+      const weekNumber = getWeekNumber(date, 'ISO 8601');
 
-      expect(dayOfWeek).toBe(52);
+      expect(weekNumber).toBe(52);
     }
@@ -564,5 +579,5 @@ });
 
-      const dayOfWeek = getWeekNumber(date, 'ISO 8601');
+      const weekNumber = getWeekNumber(date, 'ISO 8601');
 
-      expect(dayOfWeek).toBe(53);
+      expect(weekNumber).toBe(53);
     }
@@ -579,8 +594,23 @@ });
 
-      const dayOfWeek = getWeekNumber(date, 'US');
+      const weekNumber = getWeekNumber(date, 'US');
 
-      expect(dayOfWeek).toBe(1);
+      expect(weekNumber).toBe(1);
     }
   });
 
+  it('returns proper week number for a sample year starting in week 1 (US)', () => {
+    const year = 2015;
+    const month = 11;
+    const startDate = 27;
+
+    for (let currentWeek = 1; currentWeek <= 53; currentWeek += 1) {
+      const weekOffset = (currentWeek - 1) * 7;
+      const date = new Date(year, month, startDate + weekOffset);
+
+      const weekNumber = getWeekNumber(date, 'US');
+
+      expect(weekNumber).toBe(currentWeek);
+    }
+  });
+
   it('returns proper week number for a sample week 1 (US)', () => {
@@ -594,5 +624,5 @@ const year = 2015;
 
-      const dayOfWeek = getWeekNumber(date, 'US');
+      const weekNumber = getWeekNumber(date, 'US');
 
-      expect(dayOfWeek).toBe(1);
+      expect(weekNumber).toBe(1);
     }
@@ -609,5 +639,5 @@ });
 
-      const dayOfWeek = getWeekNumber(date, 'US');
+      const weekNumber = getWeekNumber(date, 'US');
 
-      expect(dayOfWeek).toBe(52);
+      expect(weekNumber).toBe(52);
     }
@@ -624,5 +654,5 @@ });
 
-      const dayOfWeek = getWeekNumber(date, 'US');
+      const weekNumber = getWeekNumber(date, 'US');
 
-      expect(dayOfWeek).toBe(53);
+      expect(weekNumber).toBe(53);
     }
@@ -629,0 +659,0 @@ });

src/shared/dates.js

@@ -257,2 +257,3 @@ /* Simple getters - getting a property of a given point in time */
 export const getWeekNumber = (date, calendarType = 'ISO 8601') => {
+  const beginOfWeek = getBeginOfWeek(date, calendarType);
   let year = getYear(date) + 1;
@@ -269,3 +270,3 @@ let dayInWeekOne;
 
-  return Math.floor((date - beginOfFirstWeek) / (8.64e7 * 7)) + 1;
+  return Math.round((beginOfWeek - beginOfFirstWeek) / (8.64e7 * 7)) + 1;
 };
@@ -272,0 +273,0 @@

src/shared/utils.js

@@ -12,2 +12,13 @@ import { getRange } from './dates';
 
+/**
+ * Calls a function, if it's defined, with specified arguments
+ * @param {Function} fn
+ * @param {Object} args
+ */
+export const callIfDefined = (fn, ...args) => {
+  if (fn && typeof fn === 'function') {
+    fn(...args);
+  }
+};
+
 export const isValueWithinRange = (value, range) => (
@@ -14,0 +25,0 @@ range[0] <= value &&

src/YearView.jsx

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
@@ -8,12 +8,5 @@
 
-export default class YearView extends Component {
-  componentDidMount() {
-    const { setView } = this.props;
-
-    if (setView) setView('year');
-  }
-
+export default class YearView extends PureComponent {
   renderMonths() {
     const {
-      setView,
       ...childProps
@@ -42,5 +35,4 @@ } = this.props;
   setActiveRange: PropTypes.func,
-  setView: PropTypes.func,
   value: isValue,
   valueType: PropTypes.string,
 };

src/YearView/Months.jsx

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
@@ -11,3 +11,3 @@
 
-export default class Months extends Component {
+export default class Months extends PureComponent {
   start = 0
@@ -14,0 +14,0 @@

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

287276

increased by0.81%

Lines of code

7121

increased by0.74%

Number of lines in readme file

150

increased by2.04%

No dependency changes