react-calendar - npm Package Compare versions

Comparing version 2.5.0 to 2.6.0

build/Calendar.js

@@ -355,2 +355,3 @@ 'use strict';
             onClick: (0, _utils.mergeFunctions)(clickAction, this.props.onClickDay),
+            onClickWeekNumber: this.props.onClickWeekNumber,
             showNeighboringMonth: this.props.showNeighboringMonth,
@@ -460,2 +461,3 @@ showWeekNumbers: this.props.showWeekNumbers
   onClickMonth: _propTypes2.default.func,
+  onClickWeekNumber: _propTypes2.default.func,
   onClickYear: _propTypes2.default.func,
@@ -462,0 +464,0 @@ prev2Label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),

build/CenturyView/Decade.js

@@ -50,3 +50,3 @@ 'use strict';
       'time',
-      null,
+      { dateTime: decade + 'T00:00:00.000' },
       (0, _dates.getDecadeLabel)(decade)
@@ -67,5 +67,5 @@ ),
   tileClassName: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes3.isClassName]),
-  tileContent: _propTypes2.default.func
+  tileContent: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.node])
 };
 
 exports.default = Decade;

build/Flex.js

@@ -19,2 +19,4 @@ 'use strict';
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 var toPercent = function toPercent(num) {
@@ -27,14 +29,19 @@ return Math.floor(100 * num) / 100 + '%';
       className = _ref.className,
+      direction = _ref.direction,
       count = _ref.count,
       offset = _ref.offset,
-      wrap = _ref.wrap;
+      style = _ref.style,
+      wrap = _ref.wrap,
+      otherProps = _objectWithoutProperties(_ref, ['children', 'className', 'direction', 'count', 'offset', 'style', 'wrap']);
+
   return _react2.default.createElement(
     'div',
-    {
+    _extends({
       className: className,
-      style: {
+      style: _extends({
         display: 'flex',
+        flexDirection: direction,
         flexWrap: wrap ? 'wrap' : 'no-wrap'
-      }
-    },
+      }, style)
+    }, otherProps),
     _react2.default.Children.map(children, function (child, index) {
@@ -62,3 +69,5 @@ return _react2.default.createElement(
   count: _propTypes2.default.number.isRequired,
+  direction: _propTypes2.default.string,
   offset: _propTypes2.default.number,
+  style: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number])),
   wrap: _propTypes2.default.bool
@@ -65,0 +74,0 @@ };

build/MonthView.js

@@ -85,3 +85,5 @@ 'use strict';
       var calendarType = this.calendarType;
-      var activeStartDate = this.props.activeStartDate;
+      var _props = this.props,
+          activeStartDate = _props.activeStartDate,
+          onClickWeekNumber = _props.onClickWeekNumber;
 
@@ -91,3 +93,4 @@
         activeStartDate: activeStartDate,
-        calendarType: calendarType
+        calendarType: calendarType,
+        onClickWeekNumber: onClickWeekNumber
       });
@@ -98,6 +101,6 @@ }
     value: function renderDays() {
-      var _props = this.props,
-          setView = _props.setView,
-          calendarType = _props.calendarType,
-          childProps = _objectWithoutProperties(_props, ['setView', 'calendarType']);
+      var _props2 = this.props,
+          setView = _props2.setView,
+          calendarType = _props2.calendarType,
+          childProps = _objectWithoutProperties(_props2, ['setView', 'calendarType']);
 
@@ -165,2 +168,3 @@ return _react2.default.createElement(_Days2.default, _extends({
   onChange: _propTypes2.default.func,
+  onClickWeekNumber: _propTypes2.default.func,
   setActiveRange: _propTypes2.default.func,
@@ -167,0 +171,0 @@ setView: _propTypes2.default.func,

build/MonthView/WeekNumbers.js

@@ -17,2 +17,6 @@ 'use strict';
 
+var _Flex = require('../Flex');
+
+var _Flex2 = _interopRequireDefault(_Flex);
+
 var _dates = require('../shared/dates');
@@ -42,26 +46,39 @@
     value: function render() {
-      var year = this.year,
-          monthIndex = this.monthIndex,
-          day = this.day;
-      var calendarType = this.props.calendarType;
+      var dates = this.dates,
+          numberOfWeeks = this.numberOfWeeks,
+          weekNumbers = this.weekNumbers;
+      var onClickWeekNumber = this.props.onClickWeekNumber;
 
 
-      var weekNumbers = [];
-      for (var index = 0; index < this.numberOfWeeks; index += 1) {
-        var date = new Date(year, monthIndex, day + index * 7);
-        weekNumbers.push((0, _dates.getWeekNumber)(date, calendarType));
-      }
-
       return _react2.default.createElement(
-        'div',
+        _Flex2.default,
         {
           className: 'react-calendar__month-view__weekNumbers',
+          count: numberOfWeeks,
+          direction: 'column',
           style: { flexBasis: 'calc(100% * (1 / 8)', flexShrink: 0 }
         },
-        weekNumbers.map(function (weekNumber) {
-          return _react2.default.createElement(
+        weekNumbers.map(function (weekNumber, weekIndex) {
+          return onClickWeekNumber ? _react2.default.createElement(
+            'button',
+            {
+              className: 'react-calendar__tile',
+              key: weekNumber,
+              onClick: function onClick() {
+                return onClickWeekNumber(weekNumber, dates[weekIndex]);
+              },
+              style: { flexGrow: 1 },
+              type: 'button'
+            },
+            _react2.default.createElement(
+              'span',
+              null,
+              weekNumber
+            )
+          ) : _react2.default.createElement(
             'div',
             {
               className: 'react-calendar__tile',
-              key: weekNumber
+              key: weekNumber,
+              style: { flexGrow: 1 }
             },
@@ -78,2 +95,11 @@ _react2.default.createElement(
   }, {
+    key: 'startWeekday',
+    get: function get() {
+      var _props = this.props,
+          activeStartDate = _props.activeStartDate,
+          calendarType = _props.calendarType;
+
+      return (0, _dates.getDayOfWeek)(activeStartDate, calendarType);
+    }
+  }, {
     key: 'numberOfDays',
@@ -86,9 +112,6 @@ get: function get() {
   }, {
-    key: 'startWeekday',
+    key: 'numberOfWeeks',
     get: function get() {
-      var _props = this.props,
-          activeStartDate = _props.activeStartDate,
-          calendarType = _props.calendarType;
-
-      return (0, _dates.getDayOfWeek)(activeStartDate, calendarType);
+      var days = this.numberOfDays - (7 - this.startWeekday);
+      return 1 + Math.ceil(days / 7);
     }
@@ -117,7 +140,27 @@ }, {
   }, {
-    key: 'numberOfWeeks',
+    key: 'dates',
     get: function get() {
-      var days = this.numberOfDays - (7 - this.startWeekday);
-      return 1 + Math.ceil(days / 7);
+      var year = this.year,
+          monthIndex = this.monthIndex,
+          numberOfWeeks = this.numberOfWeeks,
+          day = this.day;
+      var calendarType = this.props.calendarType;
+
+
+      var dates = [];
+      for (var index = 0; index < numberOfWeeks; index += 1) {
+        dates.push((0, _dates.getBeginOfWeek)(new Date(year, monthIndex, day + index * 7), calendarType));
+      }
+      return dates;
     }
+  }, {
+    key: 'weekNumbers',
+    get: function get() {
+      var dates = this.dates;
+      var calendarType = this.props.calendarType;
+
+      return dates.map(function (date) {
+        return (0, _dates.getWeekNumber)(date, calendarType);
+      });
+    }
   }]);
@@ -133,3 +176,4 @@
   activeStartDate: _propTypes2.default.instanceOf(Date).isRequired,
-  calendarType: _propTypes3.isCalendarType.isRequired
+  calendarType: _propTypes3.isCalendarType.isRequired,
+  onClickWeekNumber: _propTypes2.default.func
 };

build/shared/dateFormatter.js

@@ -42,3 +42,4 @@ 'use strict';
 var toSafeHour = function toSafeHour(date) {
-  return new Date(date.setHours(12));
+  var safeDate = new Date(date);
+  return new Date(safeDate.setHours(12));
 };
@@ -45,0 +46,0 @@

build/shared/dates.js

@@ -229,8 +229,13 @@ 'use strict';
 
+var getDifferentMonth = function getDifferentMonth(date, offset) {
+  var year = getYear(date);
+  var previousMonthIndex = getMonthIndex(date) + offset;
+  return new Date(year, previousMonthIndex, 1);
+};
+
 var getBeginOfPreviousMonth = exports.getBeginOfPreviousMonth = function getBeginOfPreviousMonth(date) {
   var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
 
-  var year = getYear(date);
-  var previousMonthIndex = getMonthIndex(date) - offset;
-  return getBeginOfMonth(new Date(year, previousMonthIndex, 1));
+  var previousMonth = getDifferentMonth(date, -offset);
+  return getBeginOfMonth(previousMonth);
 };
@@ -241,5 +246,4 @@
 
-  var year = getYear(date);
-  var previousMonthIndex = getMonthIndex(date) - offset;
-  return getEndOfMonth(new Date(year, previousMonthIndex, 1));
+  var previousMonth = getDifferentMonth(date, -offset);
+  return getEndOfMonth(previousMonth);
 };
@@ -250,5 +254,4 @@
 
-  var year = getYear(date);
-  var nextMonthIndex = getMonthIndex(date) + offset;
-  return getBeginOfMonth(new Date(year, nextMonthIndex, 1));
+  var nextMonth = getDifferentMonth(date, offset);
+  return getBeginOfMonth(nextMonth);
 };
@@ -468,2 +471,10 @@
 
+var toYearLabel = function toYearLabel(_ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+      start = _ref2[0],
+      end = _ref2[1];
+
+  return getYear(start) + ' \u2013 ' + getYear(end);
+};
+
 /**
@@ -476,10 +487,3 @@ * Returns a string labelling a century of a given date.
 var getCenturyLabel = exports.getCenturyLabel = function getCenturyLabel(date) {
-  var _getCenturyRange = getCenturyRange(date),
-      _getCenturyRange2 = _slicedToArray(_getCenturyRange, 2),
-      start = _getCenturyRange2[0],
-      end = _getCenturyRange2[1];
-
-  var startLabel = getYear(start);
-  var endLabel = getYear(end);
-  return startLabel + ' \u2013 ' + endLabel;
+  return toYearLabel(getCenturyRange(date));
 };
@@ -494,10 +498,3 @@
 var getDecadeLabel = exports.getDecadeLabel = function getDecadeLabel(date) {
-  var _getDecadeRange = getDecadeRange(date),
-      _getDecadeRange2 = _slicedToArray(_getDecadeRange, 2),
-      start = _getDecadeRange2[0],
-      end = _getDecadeRange2[1];
-
-  var startLabel = getYear(start);
-  var endLabel = getYear(end);
-  return startLabel + ' \u2013 ' + endLabel;
+  return toYearLabel(getDecadeRange(date));
 };
@@ -504,0 +501,0 @@

build/shared/propTypes.js

@@ -23,12 +23,13 @@ 'use strict';
   var minDate = props[propName];
-  var maxDate = props.maxDate;
 
-
   if (minDate) {
     if (!(minDate instanceof Date)) {
-      return new Error('Warning: Failed prop type: Invalid prop `' + propName + '` of type `' + (typeof maxDate === 'undefined' ? 'undefined' : _typeof(maxDate)) + '` supplied to `' + componentName + '`, expected instance of `Date`.');
+      return new Error('Warning: Failed prop type: Invalid prop `' + propName + '` of type `' + (typeof minDate === 'undefined' ? 'undefined' : _typeof(minDate)) + '` supplied to `' + componentName + '`, expected instance of `Date`.');
     }
 
+    var maxDate = props.maxDate;
+
+
     if (maxDate && minDate > maxDate) {
-      return new Error('Warning: Failed prop type: Invalid prop `' + propName + '` of type `' + (typeof maxDate === 'undefined' ? 'undefined' : _typeof(maxDate)) + '` supplied to `' + componentName + '`, minDate cannot be larger than maxDate.');
+      return new Error('Warning: Failed prop type: Invalid prop `' + propName + '` of type `' + (typeof minDate === 'undefined' ? 'undefined' : _typeof(minDate)) + '` supplied to `' + componentName + '`, minDate cannot be larger than maxDate.');
     }
@@ -43,5 +44,3 @@ }
   var maxDate = props[propName];
-  var minDate = props.minDate;
 
-
   if (maxDate) {
@@ -52,2 +51,5 @@ if (!(maxDate instanceof Date)) {
 
+    var minDate = props.minDate;
+
+
     if (minDate && maxDate < minDate) {
@@ -54,0 +56,0 @@ return new Error('Warning: Failed prop type: Invalid prop `' + propName + '` of type `' + (typeof maxDate === 'undefined' ? 'undefined' : _typeof(maxDate)) + '` supplied to `' + componentName + '`, maxDate cannot be smaller than minDate.');

index.d.ts

@@ -24,2 +24,3 @@ /// <reference types="react" />
     onClickMonth?: DateCallback;
+    onClickWeekNumber?: DateCallback;
     onClickYear?: DateCallback;
@@ -26,0 +27,0 @@ prev2Label?: string | React.ReactElement<any>;

package.json

 {
   "name": "react-calendar",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "A component for picking dates or date periods for your React application.",
@@ -5,0 +5,0 @@ "main": "build/entry.js",

README.md

@@ -100,2 +100,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
 |onClickMonth|Function called when the user clicks a month.|`(value) => alert('Clicked month: ', value)`|
+|onClickWeekNumber|Function called when the user clicks a week number.|`(weekNumber, date) => alert('Clicked week: ', weekNumber, 'that starts on: ', date)`|
 |onClickYear|Function called when the user clicks a year.|`(value) => alert('Clicked year: ', value)`|
@@ -102,0 +103,0 @@ |prevLabel|Defines the content of the "previous" button on the navigation pane. Defaults to "‹".|<ul><li>String: `"‹"`</li><li>React element: `<PreviousIcon />`</li></ul>|

src/__tests__/Calendar.jsx

@@ -6,2 +6,6 @@ import React from 'react';
 import Calendar from '../Calendar';
+import {
+  getBeginOfMonth,
+  getISOLocalDate,
+} from '../shared/dates';
 
@@ -12,2 +16,4 @@ configure({ adapter: new Adapter() });
 
+const midnightTimestamp = 'T00:00:00.000';
+
 describe('Calendar', () => {
@@ -147,2 +153,48 @@ it('renders navigation', () => {
 
+  it('displays a view with a given value when value is given', () => {
+    const value = new Date(2017, 0, 1);
+    const component = mount(
+      <Calendar
+        showNeighboringMonth={false}
+        value={value}
+      />
+    );
+
+    const monthView = component.find('.react-calendar__month-view');
+    const firstDayTile = monthView.find('.react-calendar__tile').first();
+    const firstDayTileTimeISO = firstDayTile.find('time').props().dateTime;
+
+    expect(firstDayTileTimeISO).toBe(getISOLocalDate(value) + midnightTimestamp);
+  });
+
+  it('displays a view with activeStartDate when no value is given and activeStartDate is given', () => {
+    const activeStartDate = new Date(2017, 0, 1);
+    const component = mount(
+      <Calendar
+        activeStartDate={activeStartDate}
+        showNeighboringMonth={false}
+      />
+    );
+
+    const monthView = component.find('.react-calendar__month-view');
+    const firstDayTile = monthView.find('.react-calendar__tile').first();
+    const firstDayTileTimeISO = firstDayTile.find('time').props().dateTime;
+
+    expect(firstDayTileTimeISO).toBe(getISOLocalDate(activeStartDate) + midnightTimestamp);
+  });
+
+  it('displays a view with today\'s date when no value and no activeStartDate is given', () => {
+    const today = new Date();
+    const beginOfCurrentMonth = getBeginOfMonth(today);
+    const component = mount(
+      <Calendar showNeighboringMonth={false} />
+    );
+
+    const monthView = component.find('.react-calendar__month-view');
+    const firstDayTile = monthView.find('.react-calendar__tile').first();
+    const firstDayTileTimeISO = firstDayTile.find('time').props().dateTime;
+
+    expect(firstDayTileTimeISO).toBe(getISOLocalDate(beginOfCurrentMonth) + midnightTimestamp);
+  });
+
   it('drills up when allowed', () => {
@@ -149,0 +201,0 @@ const component = mount(

src/Calendar.jsx

@@ -293,2 +293,3 @@ import React, { Component } from 'react';
             onClick={mergeFunctions(clickAction, this.props.onClickDay)}
+            onClickWeekNumber={this.props.onClickWeekNumber}
             showNeighboringMonth={this.props.showNeighboringMonth}
@@ -363,2 +364,3 @@ showWeekNumbers={this.props.showWeekNumbers}
   onClickMonth: PropTypes.func,
+  onClickWeekNumber: PropTypes.func,
   onClickYear: PropTypes.func,
@@ -365,0 +367,0 @@ prev2Label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

src/CenturyView/Decade.jsx

@@ -37,3 +37,3 @@ import React from 'react';
   >
-    <time>
+    <time dateTime={`${decade}T00:00:00.000`}>
       {getDecadeLabel(decade)}
@@ -57,5 +57,8 @@ </time>
   ]),
-  tileContent: PropTypes.func,
+  tileContent: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node,
+  ]),
 };
 
 export default Decade;

src/Flex.jsx

@@ -7,10 +7,19 @@ import React from 'react';
 const Flex = ({
-  children, className, count, offset, wrap,
+  children,
+  className,
+  direction,
+  count,
+  offset,
+  style,
+  wrap,
+  ...otherProps
 }) => (
   <div
     className={className}
-    style={{
+    style={Object.assign({
       display: 'flex',
+      flexDirection: direction,
       flexWrap: wrap ? 'wrap' : 'no-wrap',
-    }}
+    }, style)}
+    {...otherProps}
   >
@@ -40,3 +49,8 @@ {React.Children.map(children, (child, index) => (
   count: PropTypes.number.isRequired,
+  direction: PropTypes.string,
   offset: PropTypes.number,
+  style: PropTypes.objectOf(PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ])),
   wrap: PropTypes.bool,
@@ -43,0 +57,0 @@ };

src/MonthView.jsx

@@ -53,3 +53,3 @@ import React, { Component } from 'react';
     const { calendarType } = this;
-    const { activeStartDate } = this.props;
+    const { activeStartDate, onClickWeekNumber } = this.props;
 
@@ -60,2 +60,3 @@ return (
         calendarType={calendarType}
+        onClickWeekNumber={onClickWeekNumber}
       />
@@ -106,2 +107,3 @@ );
   onChange: PropTypes.func,
+  onClickWeekNumber: PropTypes.func,
   setActiveRange: PropTypes.func,
@@ -108,0 +110,0 @@ setView: PropTypes.func,

src/MonthView/__tests__/WeekNumbers.jsx

@@ -67,2 +67,61 @@ import React from 'react';
   });
+
+  it('renders static divs as children when not given onClickWeekNumber', () => {
+    const component = shallow(
+      <WeekNumbers
+        activeStartDate={new Date(2017, 0, 1)}
+        calendarType="ISO 8601"
+      />
+    );
+
+    const children = component.find('div.react-calendar__tile');
+
+    expect(children.length).toBe(6);
+  });
+
+  it('renders buttons as children when given onClickWeekNumber', () => {
+    const component = shallow(
+      <WeekNumbers
+        activeStartDate={new Date(2017, 0, 1)}
+        calendarType="ISO 8601"
+        onClickWeekNumber={jest.fn()}
+      />
+    );
+
+    const children = component.find('button.react-calendar__tile');
+
+    expect(children.length).toBe(6);
+  });
+
+  it('calls onClickWeekNumber function with proper arguments when clicked a week number (ISO 8601)', () => {
+    const onClickWeekNumber = jest.fn();
+    const component = shallow(
+      <WeekNumbers
+        activeStartDate={new Date(2017, 0, 1)}
+        calendarType="ISO 8601"
+        onClickWeekNumber={onClickWeekNumber}
+      />
+    );
+
+    const children = component.find('button.react-calendar__tile');
+
+    children.first().simulate('click');
+    expect(onClickWeekNumber).toHaveBeenCalledWith(52, new Date(2016, 11, 26));
+  });
+
+  it('calls onClickWeekNumber function with proper arguments when clicked a week number (US)', () => {
+    const onClickWeekNumber = jest.fn();
+    const component = shallow(
+      <WeekNumbers
+        activeStartDate={new Date(2017, 0, 1)}
+        calendarType="US"
+        onClickWeekNumber={onClickWeekNumber}
+      />
+    );
+
+    const children = component.find('button.react-calendar__tile');
+
+    children.first().simulate('click');
+    expect(onClickWeekNumber).toHaveBeenCalledWith(1, new Date(2017, 0, 1));
+  });
 });

src/MonthView/Days.jsx

@@ -71,9 +71,3 @@ import React, { Component } from 'react';
     const {
-      maxDate,
-      minDate,
-      onClick,
-      tileClassName,
-      tileContent,
-      value,
-      valueType,
+      maxDate, minDate, onClick, tileClassName, tileContent, value, valueType,
     } = this.props;
@@ -80,0 +74,0 @@

src/MonthView/WeekNumbers.jsx

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
+import Flex from '../Flex';
+
 import {
+  getBeginOfWeek,
   getDay,
@@ -15,2 +18,7 @@ getDayOfWeek,
 export default class WeekNumbers extends Component {
+  get startWeekday() {
+    const { activeStartDate, calendarType } = this.props;
+    return getDayOfWeek(activeStartDate, calendarType);
+  }
+
   get numberOfDays() {
@@ -21,5 +29,5 @@ const { activeStartDate } = this.props;
 
-  get startWeekday() {
-    const { activeStartDate, calendarType } = this.props;
-    return getDayOfWeek(activeStartDate, calendarType);
+  get numberOfWeeks() {
+    const days = this.numberOfDays - (7 - this.startWeekday);
+    return 1 + Math.ceil(days / 7);
   }
@@ -42,33 +50,56 @@
 
-  get numberOfWeeks() {
-    const days = this.numberOfDays - (7 - this.startWeekday);
-    return 1 + Math.ceil(days / 7);
+  get dates() {
+    const {
+      year, monthIndex, numberOfWeeks, day,
+    } = this;
+    const { calendarType } = this.props;
+
+    const dates = [];
+    for (let index = 0; index < numberOfWeeks; index += 1) {
+      dates.push(
+        getBeginOfWeek(new Date(year, monthIndex, day + (index * 7)), calendarType),
+      );
+    }
+    return dates;
   }
 
-  render() {
-    const { year, monthIndex, day } = this;
+  get weekNumbers() {
+    const { dates } = this;
     const { calendarType } = this.props;
+    return dates.map(date => getWeekNumber(date, calendarType));
+  }
 
-    const weekNumbers = [];
-    for (let index = 0; index < this.numberOfWeeks; index += 1) {
-      const date = new Date(year, monthIndex, day + (index * 7));
-      weekNumbers.push(getWeekNumber(date, calendarType));
-    }
+  render() {
+    const { dates, numberOfWeeks, weekNumbers } = this;
+    const { onClickWeekNumber } = this.props;
 
     return (
-      <div
+      <Flex
         className="react-calendar__month-view__weekNumbers"
+        count={numberOfWeeks}
+        direction="column"
         style={{ flexBasis: 'calc(100% * (1 / 8)', flexShrink: 0 }}
       >
         {
-          weekNumbers.map(weekNumber => (
-            <div
-              className="react-calendar__tile"
-              key={weekNumber}
-            >
-              <span>{weekNumber}</span>
-            </div>
+          weekNumbers.map((weekNumber, weekIndex) => (
+            onClickWeekNumber ?
+              <button
+                className="react-calendar__tile"
+                key={weekNumber}
+                onClick={() => onClickWeekNumber(weekNumber, dates[weekIndex])}
+                style={{ flexGrow: 1 }}
+                type="button"
+              >
+                <span>{weekNumber}</span>
+              </button> :
+              <div
+                className="react-calendar__tile"
+                key={weekNumber}
+                style={{ flexGrow: 1 }}
+              >
+                <span>{weekNumber}</span>
+              </div>
           ))
         }
-      </div>
+      </Flex>
     );
@@ -81,2 +112,3 @@ }
   calendarType: isCalendarType.isRequired,
+  onClickWeekNumber: PropTypes.func,
 };

src/shared/dateFormatter.js

@@ -32,3 +32,6 @@ import { getLocale } from './locales';
  */
-const toSafeHour = date => new Date(date.setHours(12));
+const toSafeHour = (date) => {
+  const safeDate = new Date(date);
+  return new Date(safeDate.setHours(12));
+};
 
@@ -35,0 +38,0 @@ export const formatDate = date => getFormatter(

src/shared/dates.js

@@ -203,18 +203,21 @@ /* Simple getters - getting a property of a given point in time */
 
-export const getBeginOfPreviousMonth = (date, offset = 1) => {
+const getDifferentMonth = (date, offset) => {
   const year = getYear(date);
-  const previousMonthIndex = getMonthIndex(date) - offset;
-  return getBeginOfMonth(new Date(year, previousMonthIndex, 1));
+  const previousMonthIndex = getMonthIndex(date) + offset;
+  return new Date(year, previousMonthIndex, 1);
 };
 
+export const getBeginOfPreviousMonth = (date, offset = 1) => {
+  const previousMonth = getDifferentMonth(date, -offset);
+  return getBeginOfMonth(previousMonth);
+};
+
 export const getEndOfPreviousMonth = (date, offset = 1) => {
-  const year = getYear(date);
-  const previousMonthIndex = getMonthIndex(date) - offset;
-  return getEndOfMonth(new Date(year, previousMonthIndex, 1));
+  const previousMonth = getDifferentMonth(date, -offset);
+  return getEndOfMonth(previousMonth);
 };
 
 export const getBeginOfNextMonth = (date, offset = 1) => {
-  const year = getYear(date);
-  const nextMonthIndex = getMonthIndex(date) + offset;
-  return getBeginOfMonth(new Date(year, nextMonthIndex, 1));
+  const nextMonth = getDifferentMonth(date, offset);
+  return getBeginOfMonth(nextMonth);
 };
@@ -433,2 +436,4 @@
 
+const toYearLabel = ([start, end]) => `${getYear(start)} – ${getYear(end)}`;
+
 /**
@@ -440,8 +445,3 @@ * Returns a string labelling a century of a given date.
  */
-export const getCenturyLabel = (date) => {
-  const [start, end] = getCenturyRange(date);
-  const startLabel = getYear(start);
-  const endLabel = getYear(end);
-  return `${startLabel} – ${endLabel}`;
-};
+export const getCenturyLabel = date => toYearLabel(getCenturyRange(date));
 
@@ -454,8 +454,3 @@ /**
  */
-export const getDecadeLabel = (date) => {
-  const [start, end] = getDecadeRange(date);
-  const startLabel = getYear(start);
-  const endLabel = getYear(end);
-  return `${startLabel} – ${endLabel}`;
-};
+export const getDecadeLabel = date => toYearLabel(getDecadeRange(date));
 
@@ -462,0 +457,0 @@ /**

src/shared/propTypes.js

@@ -10,11 +10,12 @@ import PropTypes from 'prop-types';
   const minDate = props[propName];
-  const { maxDate } = props;
 
   if (minDate) {
     if (!(minDate instanceof Date)) {
-      return new Error(`Warning: Failed prop type: Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`);
+      return new Error(`Warning: Failed prop type: Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`);
     }
 
+    const { maxDate } = props;
+
     if (maxDate && minDate > maxDate) {
-      return new Error(`Warning: Failed prop type: Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, minDate cannot be larger than maxDate.`);
+      return new Error(`Warning: Failed prop type: Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, minDate cannot be larger than maxDate.`);
     }
@@ -29,3 +30,2 @@ }
   const maxDate = props[propName];
-  const { minDate } = props;
 
@@ -37,2 +37,4 @@ if (maxDate) {
 
+    const { minDate } = props;
+
     if (minDate && maxDate < minDate) {
@@ -39,0 +41,0 @@ return new Error(`Warning: Failed prop type: Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, maxDate cannot be smaller than minDate.`);

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

283855

increased by8.77%

Number of package files

68

increased by6.25%

Lines of code

7026

increased by9.17%

Number of lines in readme file

147

increased by0.68%

No dependency changes