react-calendar - npm Package Compare versions

Comparing version 2.12.0 to 2.13.0

dist/Calendar.css

@@ -21,3 +21,3 @@ .react-calendar {
 }
-.react-calendar button:not([disabled]):hover {
+.react-calendar button:enabled:hover {
   cursor: pointer;
@@ -33,4 +33,4 @@ }
 }
-.react-calendar__navigation button:not([disabled]):hover,
-.react-calendar__navigation button:not([disabled]):focus {
+.react-calendar__navigation button:enabled:hover,
+.react-calendar__navigation button:enabled:focus {
   background-color: #e6e6e6;
@@ -77,7 +77,7 @@ }
 }
-button.react-calendar__tile[disabled] {
+button.react-calendar__tile:disabled {
   background-color: #f0f0f0;
 }
-button.react-calendar__tile:not([disabled]):hover,
-button.react-calendar__tile:not([disabled]):focus {
+button.react-calendar__tile:enabled:hover,
+button.react-calendar__tile:enabled:focus {
   background-color: #e6e6e6;
@@ -88,4 +88,4 @@ }
 }
-button.react-calendar__tile--hasActive:not([disabled]):hover,
-button.react-calendar__tile--hasActive:not([disabled]):focus {
+button.react-calendar__tile--hasActive:enabled:hover,
+button.react-calendar__tile--hasActive:enabled:focus {
   background: #a9d4ff;
@@ -97,4 +97,4 @@ }
 }
-button.react-calendar__tile--active:not([disabled]):hover,
-button.react-calendar__tile--active:not([disabled]):focus {
+button.react-calendar__tile--active:enabled:hover,
+button.react-calendar__tile--active:enabled:focus {
   background: #1087ff;
@@ -101,0 +101,0 @@ }

dist/Calendar.js

@@ -45,4 +45,2 @@ 'use strict';
 
-var _locales = require('./shared/locales');
-
 var _propTypes3 = require('./shared/propTypes');
@@ -281,19 +279,8 @@
   }, {
-    key: 'componentWillMount',
-    value: function componentWillMount() {
-      (0, _locales.setLocale)(this.props.locale);
-    }
-  }, {
     key: 'componentWillReceiveProps',
     value: function componentWillReceiveProps(nextProps) {
-      var nextLocale = nextProps.locale,
-          nextValue = nextProps.value;
-      var locale = this.props.locale;
+      var nextValue = nextProps.value;
       var value = this.state.value;
 
 
-      if (nextLocale !== locale) {
-        (0, _locales.setLocale)(nextLocale);
-      }
-
       var nextState = {};
@@ -351,2 +338,3 @@
           calendarType = _props.calendarType,
+          locale = _props.locale,
           maxDate = _props.maxDate,
@@ -356,3 +344,4 @@ minDate = _props.minDate,
           tileClassName = _props.tileClassName,
-          tileContent = _props.tileContent;
+          tileContent = _props.tileContent,
+          tileDisabled = _props.tileDisabled;
       var _state = this.state,
@@ -370,2 +359,3 @@ activeStartDate = _state.activeStartDate,
         hover: hover,
+        locale: locale,
         maxDate: maxDate,
@@ -376,2 +366,3 @@ minDate: minDate,
         tileContent: tileContent || renderChildren, // For backwards compatibility
+        tileDisabled: tileDisabled,
         value: value,
@@ -425,2 +416,3 @@ valueType: valueType
         formatMonthYear: this.props.formatMonthYear,
+        locale: this.props.locale,
         maxDate: this.props.maxDate,
@@ -539,4 +531,5 @@ minDate: this.props.minDate,
   tileContent: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.node]),
+  tileDisabled: _propTypes2.default.func,
   value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes3.isValue]),
   view: _propTypes2.default.oneOf(allViews)
 };

dist/Calendar.less

@@ -19,3 +19,3 @@ .react-calendar {
 
-    &:not([disabled]) {
+    &:enabled {
       &:hover {
@@ -35,3 +35,3 @@ cursor: pointer;
 
-      &:not([disabled]) {
+      &:enabled {
         &:hover, &:focus {
@@ -99,7 +99,7 @@ background-color: rgb(230, 230, 230);
 
-    button&[disabled] {
+    button&:disabled {
       background-color: rgb(240, 240, 240);
     }
 
-    button&:not([disabled]) {
+    button&:enabled {
       &:hover, &:focus {
@@ -114,3 +114,3 @@ background-color: rgb(230, 230, 230);
 
-      button&:not([disabled]) {
+      button&:enabled {
         &:hover, &:focus {
@@ -127,3 +127,3 @@ background: lighten(@bgcolor, 10%);
 
-      button&:not([disabled]) {
+      button&:enabled {
         &:hover, &:focus {
@@ -130,0 +130,0 @@ background: lighten(@bgcolor, 10%);

dist/Calendar/Navigation.js

@@ -218,2 +218,3 @@ 'use strict';
           formatMonthYear = _props7.formatMonthYear,
+          locale = _props7.locale,
           view = _props7.view;
@@ -230,3 +231,3 @@
         case 'month':
-          return formatMonthYear(date);
+          return formatMonthYear(date, locale);
         default:
@@ -256,2 +257,3 @@ throw new Error('Invalid view: ' + view + '.');
   formatMonthYear: _propTypes2.default.func,
+  locale: _propTypes2.default.string,
   maxDate: _propTypes2.default.instanceOf(Date),
@@ -258,0 +260,0 @@ minDate: _propTypes2.default.instanceOf(Date),

dist/MonthView.js

@@ -31,4 +31,2 @@ 'use strict';
 
-var _locales = require('./shared/locales');
-
 var _propTypes3 = require('./shared/propTypes');
@@ -58,12 +56,7 @@
     value: function renderWeekdays() {
-      var calendarType = this.calendarType;
-      var _props = this.props,
-          activeStartDate = _props.activeStartDate,
-          formatShortWeekday = _props.formatShortWeekday;
-
-
       return _react2.default.createElement(_Weekdays2.default, {
-        calendarType: calendarType,
-        month: activeStartDate,
-        formatShortWeekday: formatShortWeekday
+        calendarType: this.calendarType,
+        locale: this.props.locale,
+        month: this.props.activeStartDate,
+        formatShortWeekday: this.props.formatShortWeekday
       });
@@ -81,12 +74,6 @@ }
 
-      var calendarType = this.calendarType;
-      var _props2 = this.props,
-          activeStartDate = _props2.activeStartDate,
-          onClickWeekNumber = _props2.onClickWeekNumber;
-
-
       return _react2.default.createElement(_WeekNumbers2.default, {
-        activeStartDate: activeStartDate,
-        calendarType: calendarType,
-        onClickWeekNumber: onClickWeekNumber
+        activeStartDate: this.props.activeStartDate,
+        calendarType: this.calendarType,
+        onClickWeekNumber: this.props.onClickWeekNumber
       });
@@ -97,6 +84,6 @@ }
     value: function renderDays() {
-      var _props3 = this.props,
-          calendarType = _props3.calendarType,
-          showWeekNumbers = _props3.showWeekNumbers,
-          childProps = _objectWithoutProperties(_props3, ['calendarType', 'showWeekNumbers']);
+      var _props = this.props,
+          calendarType = _props.calendarType,
+          showWeekNumbers = _props.showWeekNumbers,
+          childProps = _objectWithoutProperties(_props, ['calendarType', 'showWeekNumbers']);
 
@@ -136,3 +123,5 @@ return _react2.default.createElement(_Days2.default, _extends({
     get: function get() {
-      var calendarType = this.props.calendarType;
+      var _props2 = this.props,
+          calendarType = _props2.calendarType,
+          locale = _props2.locale;
 
@@ -144,3 +133,3 @@
 
-      switch ((0, _locales.getLocale)()) {
+      switch (locale) {
         case 'en-US':
@@ -164,2 +153,3 @@ return 'US';
   formatShortWeekday: _propTypes2.default.func,
+  locale: _propTypes2.default.string,
   maxDate: _propTypes3.isMaxDate,
@@ -166,0 +156,0 @@ minDate: _propTypes3.isMinDate,

dist/MonthView/Weekdays.js

@@ -47,3 +47,3 @@ 'use strict';
     value: function shouldComponentUpdate(nextProps) {
-      return nextProps.calendarType !== this.props.calendarType;
+      return nextProps.calendarType !== this.props.calendarType || nextProps.locale !== this.props.locale;
     }
@@ -53,8 +53,9 @@ }, {
     value: function render() {
+      var _props = this.props,
+          calendarType = _props.calendarType,
+          formatShortWeekday = _props.formatShortWeekday,
+          locale = _props.locale;
       var beginOfMonth = this.beginOfMonth,
           year = this.year,
           monthIndex = this.monthIndex;
-      var _props = this.props,
-          calendarType = _props.calendarType,
-          formatShortWeekday = _props.formatShortWeekday;
 
@@ -74,3 +75,3 @@
           },
-          formatShortWeekday(weekdayDate).replace('.', '')
+          formatShortWeekday(weekdayDate, locale).replace('.', '')
         ));
@@ -120,11 +121,12 @@ }
 
+Weekdays.defaultProps = {
+  formatShortWeekday: _dateFormatter.formatShortWeekday
+};
+
 Weekdays.propTypes = {
   calendarType: _propTypes3.isCalendarType.isRequired,
   formatShortWeekday: _propTypes2.default.func,
+  locale: _propTypes2.default.string,
   month: _propTypes2.default.oneOfType([_propTypes2.default.string, // Only strings that are parseable to integer
   _propTypes2.default.number, _propTypes2.default.instanceOf(Date)]).isRequired
-};
-
-Weekdays.defaultProps = {
-  formatShortWeekday: _dateFormatter.formatShortWeekday
 };

dist/shared/dateFormatter.js

@@ -16,16 +16,20 @@ 'use strict';
  */
-var getFormatter = function getFormatter(options) {
-  var locales = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (0, _locales.getLocale)();
+var getFormatter = function getFormatter(options, locale) {
+  if (!locale) {
+    // Default parameter is not enough as it does not protect us from null values
+    // eslint-disable-next-line no-param-reassign
+    locale = (0, _locales.getDefaultLocale)();
+  }
 
   var stringifiedOptions = JSON.stringify(options);
 
-  if (!formatterCache[locales]) {
-    formatterCache[locales] = {};
+  if (!formatterCache[locale]) {
+    formatterCache[locale] = {};
   }
 
-  if (!formatterCache[locales][stringifiedOptions]) {
-    formatterCache[locales][stringifiedOptions] = new Intl.DateTimeFormat(locales, options).format;
+  if (!formatterCache[locale][stringifiedOptions]) {
+    formatterCache[locale][stringifiedOptions] = new Intl.DateTimeFormat(locale, options).format;
   }
 
-  return formatterCache[locales][stringifiedOptions];
+  return formatterCache[locale][stringifiedOptions];
 };
@@ -47,16 +51,16 @@
 
-var formatDate = exports.formatDate = function formatDate(date) {
-  return getFormatter({ day: 'numeric', month: 'numeric', year: 'numeric' })(toSafeHour(date));
+var formatDate = exports.formatDate = function formatDate(date, locale) {
+  return getFormatter({ day: 'numeric', month: 'numeric', year: 'numeric' }, locale)(toSafeHour(date));
 };
 
-var formatMonthYear = exports.formatMonthYear = function formatMonthYear(date) {
-  return getFormatter({ month: 'long', year: 'numeric' })(toSafeHour(date));
+var formatMonthYear = exports.formatMonthYear = function formatMonthYear(date, locale) {
+  return getFormatter({ month: 'long', year: 'numeric' }, locale)(toSafeHour(date));
 };
 
-var formatMonth = exports.formatMonth = function formatMonth(date) {
-  return getFormatter({ month: 'long' })(toSafeHour(date));
+var formatMonth = exports.formatMonth = function formatMonth(date, locale) {
+  return getFormatter({ month: 'long' }, locale)(toSafeHour(date));
 };
 
-var formatShortWeekday = exports.formatShortWeekday = function formatShortWeekday(date) {
-  return getFormatter({ weekday: 'short' })(toSafeHour(date));
+var formatShortWeekday = exports.formatShortWeekday = function formatShortWeekday(date, locale) {
+  return getFormatter({ weekday: 'short' }, locale)(toSafeHour(date));
 };

dist/shared/locales.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.setLocale = exports.getLocale = exports.getDefaultLocale = exports.getDefaultLocales = undefined;
+exports.getDefaultLocale = exports.getDefaultLocales = undefined;
 
@@ -17,4 +17,2 @@ var _lodash = require('lodash.once');
 
-var userLocale = null;
-
 var getDefaultLocales = exports.getDefaultLocales = (0, _lodash2.default)(function () {
@@ -38,10 +36,2 @@ var languageList = [];
   return getDefaultLocales()[0];
-});
-
-var getLocale = exports.getLocale = function getLocale() {
-  return userLocale || getDefaultLocale();
-};
-
-var setLocale = exports.setLocale = function setLocale(locale) {
-  userLocale = locale;
-};
+});

dist/shared/propTypes.js

@@ -114,3 +114,4 @@ 'use strict';
   tileClassName: _propTypes2.default.oneOfType([_propTypes2.default.func, isClassName]),
-  tileContent: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.node])
+  tileContent: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.node]),
+  tileDisabled: _propTypes2.default.func
 };

dist/Tile.js

@@ -39,2 +39,3 @@ 'use strict';
       tileContent = _ref.tileContent,
+      tileDisabled = _ref.tileDisabled,
       view = _ref.view;
@@ -45,3 +46,3 @@ return _react2.default.createElement(
       className: (0, _mergeClassNames2.default)(classes, tileClassName instanceof Function ? tileClassName({ date: date, view: view }) : tileClassName),
-      disabled: minDate && minDateTransform(minDate) > date || maxDate && maxDateTransform(maxDate) < date,
+      disabled: minDate && minDateTransform(minDate) > date || maxDate && maxDateTransform(maxDate) < date || tileDisabled && tileDisabled({ date: date, view: view }),
       onClick: onClick && function () {
@@ -48,0 +49,0 @@ return onClick(date);

dist/YearView.js

@@ -65,2 +65,3 @@ 'use strict';
   formatMonth: _propTypes2.default.func,
+  locale: _propTypes2.default.string,
   maxDate: _propTypes3.isMaxDate,
@@ -67,0 +68,0 @@ minDate: _propTypes3.isMinDate,

dist/YearView/Month.js

@@ -39,3 +39,4 @@ 'use strict';
       formatMonth = _ref.formatMonth,
-      otherProps = _objectWithoutProperties(_ref, ['classes', 'date', 'formatMonth']);
+      locale = _ref.locale,
+      otherProps = _objectWithoutProperties(_ref, ['classes', 'date', 'formatMonth', 'locale']);
 
@@ -52,10 +53,6 @@ return _react2.default.createElement(
     }),
-    formatMonth(date)
+    formatMonth(date, locale)
   );
 };
 
-Month.propTypes = _extends({}, _propTypes3.tileProps, {
-  formatMonth: _propTypes2.default.func
-});
-
 Month.defaultProps = {
@@ -65,2 +62,7 @@ formatMonth: _dateFormatter.formatMonth
 
+Month.propTypes = _extends({}, _propTypes3.tileProps, {
+  formatMonth: _propTypes2.default.func,
+  locale: _propTypes2.default.string
+});
+
 exports.default = Month;

dist/YearView/Months.js

@@ -15,2 +15,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _TileGroup = require('../TileGroup');
@@ -26,3 +30,3 @@
 
-var _propTypes = require('../shared/propTypes');
+var _propTypes3 = require('../shared/propTypes');
 
@@ -91,2 +95,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-Months.propTypes = _extends({}, _propTypes.tileGroupProps);
+Months.propTypes = _extends({}, _propTypes3.tileGroupProps, {
+  locale: _propTypes2.default.string
+});

index.d.ts

@@ -42,2 +42,3 @@ declare module "react-calendar" {
     tileContent?: JSX.Element | ((props: CalendarTileProperties) => JSX.Element | null);
+    tileDisabled?: (props: CalendarTileProperties) => boolean;
     value?: Date | Date[];
@@ -72,4 +73,5 @@ view?: Detail;
     tileContent?: JSX.Element | ((props: CalendarTileProperties) => JSX.Element | null);
+    tileDisabled?: (props: CalendarTileProperties) => boolean;
     value?: Date | Date[];
   }
 }

package.json

 {
   "name": "react-calendar",
-  "version": "2.12.0",
-  "description": "A component for picking dates or date periods for your React application.",
+  "version": "2.13.0",
+  "description": "Ultimate calendar for your React app.",
   "main": "dist/entry.js",
@@ -45,2 +45,5 @@ "types": "./index.d.ts",
     {
+      "name": "Justin Davis"
+    },
+    {
       "name": "Kevin Kipp",
@@ -47,0 +50,0 @@ "email": "[e-mail]"

README.md

@@ -6,4 +6,14 @@ ![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
 # React-Calendar
-Ultimate date picker for your React application.
 
+<div align="center">
+  <img width="436" heigth="398" src="https://wojtekmaj.home.pl/projekty/react-calendar/react-calendar.jpg">
+</div>
+
+Ultimate calendar for your React app.
+
+* Pick days, months, years, or even decades
+* Supports range selection
+* Supports virtually any language
+* No moment.js needed
+
 ## tl;dr
@@ -118,2 +128,3 @@ * Install by executing `npm install react-calendar` or `yarn add react-calendar`.
 |tileContent|Allows to render custom content within a given calendar item (day on month view, month on year view and so on).|<ul><li>String: `"Sample"`</li><li>React element: `<TileContent />`</li><li>Function: `({ date, view }) => view === 'month' && date.getDay() === 0 ? <p>It's Sunday!</p> : null`</li></ul>|
+|tileDisabled|Pass a function to determine if a certain day should be displayed as disabled.|<ul><li>Function: `({date, view }) => date.getDay() === 0`</li></ul>|
 |value|Defines the value of the calendar.|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`|
@@ -120,0 +131,0 @@ |view|Determines which calendar view shall be opened initially. Does not disable navigation. Can be "month", "year", "decade" or "century". Defaults to the most detailed view allowed.|`"year"`|

src/Calendar.css

@@ -21,3 +21,3 @@ .react-calendar {
 }
-.react-calendar button:not([disabled]):hover {
+.react-calendar button:enabled:hover {
   cursor: pointer;
@@ -33,4 +33,4 @@ }
 }
-.react-calendar__navigation button:not([disabled]):hover,
-.react-calendar__navigation button:not([disabled]):focus {
+.react-calendar__navigation button:enabled:hover,
+.react-calendar__navigation button:enabled:focus {
   background-color: #e6e6e6;
@@ -77,7 +77,7 @@ }
 }
-button.react-calendar__tile[disabled] {
+button.react-calendar__tile:disabled {
   background-color: #f0f0f0;
 }
-button.react-calendar__tile:not([disabled]):hover,
-button.react-calendar__tile:not([disabled]):focus {
+button.react-calendar__tile:enabled:hover,
+button.react-calendar__tile:enabled:focus {
   background-color: #e6e6e6;
@@ -88,4 +88,4 @@ }
 }
-button.react-calendar__tile--hasActive:not([disabled]):hover,
-button.react-calendar__tile--hasActive:not([disabled]):focus {
+button.react-calendar__tile--hasActive:enabled:hover,
+button.react-calendar__tile--hasActive:enabled:focus {
   background: #a9d4ff;
@@ -97,4 +97,4 @@ }
 }
-button.react-calendar__tile--active:not([disabled]):hover,
-button.react-calendar__tile--active:not([disabled]):focus {
+button.react-calendar__tile--active:enabled:hover,
+button.react-calendar__tile--active:enabled:focus {
   background: #1087ff;
@@ -101,0 +101,0 @@ }

src/Calendar.jsx

@@ -12,3 +12,2 @@ import React, { Component } from 'react';
 import { getBegin, getEnd, getValueRange } from './shared/dates';
-import { setLocale } from './shared/locales';
 import { isCalendarType, isClassName, isMaxDate, isMinDate, isValue } from './shared/propTypes';
@@ -136,15 +135,6 @@ import { between, callIfDefined, mergeFunctions } from './shared/utils';
 
-  componentWillMount() {
-    setLocale(this.props.locale);
-  }
-
   componentWillReceiveProps(nextProps) {
-    const { locale: nextLocale, value: nextValue } = nextProps;
-    const { locale } = this.props;
+    const { value: nextValue } = nextProps;
     const { value } = this.state;
 
-    if (nextLocale !== locale) {
-      setLocale(nextLocale);
-    }
-
     const nextState = {};
@@ -300,2 +290,3 @@
       calendarType,
+      locale,
       maxDate,
@@ -306,2 +297,3 @@ minDate,
       tileContent,
+      tileDisabled,
     } = this.props;
@@ -316,2 +308,3 @@ const {
       hover,
+      locale,
       maxDate,
@@ -322,2 +315,3 @@ minDate,
       tileContent: tileContent || renderChildren, // For backwards compatibility
+      tileDisabled,
       value,
@@ -382,2 +376,3 @@ valueType,
         formatMonthYear={this.props.formatMonthYear}
+        locale={this.props.locale}
         maxDate={this.props.maxDate}
@@ -467,2 +462,3 @@ minDate={this.props.minDate}
   ]),
+  tileDisabled: PropTypes.func,
   value: PropTypes.oneOfType([
@@ -469,0 +465,0 @@ PropTypes.string,

src/Calendar.less

@@ -19,3 +19,3 @@ .react-calendar {
 
-    &:not([disabled]) {
+    &:enabled {
       &:hover {
@@ -35,3 +35,3 @@ cursor: pointer;
 
-      &:not([disabled]) {
+      &:enabled {
         &:hover, &:focus {
@@ -99,7 +99,7 @@ background-color: rgb(230, 230, 230);
 
-    button&[disabled] {
+    button&:disabled {
       background-color: rgb(240, 240, 240);
     }
 
-    button&:not([disabled]) {
+    button&:enabled {
       &:hover, &:focus {
@@ -114,3 +114,3 @@ background-color: rgb(230, 230, 230);
 
-      button&:not([disabled]) {
+      button&:enabled {
         &:hover, &:focus {
@@ -127,3 +127,3 @@ background: lighten(@bgcolor, 10%);
 
-      button&:not([disabled]) {
+      button&:enabled {
         &:hover, &:focus {
@@ -130,0 +130,0 @@ background: lighten(@bgcolor, 10%);

src/Calendar/Navigation.jsx

@@ -84,3 +84,5 @@ import React, { Component } from 'react';
   get label() {
-    const { activeStartDate: date, formatMonthYear, view } = this.props;
+    const {
+      activeStartDate: date, formatMonthYear, locale, view,
+    } = this.props;
 
@@ -95,3 +97,3 @@ switch (view) {
       case 'month':
-        return formatMonthYear(date);
+        return formatMonthYear(date, locale);
       default:
@@ -177,2 +179,3 @@ throw new Error(`Invalid view: ${view}.`);
   formatMonthYear: PropTypes.func,
+  locale: PropTypes.string,
   maxDate: PropTypes.instanceOf(Date),
@@ -179,0 +182,0 @@ minDate: PropTypes.instanceOf(Date),

src/MonthView.jsx

@@ -8,3 +8,2 @@ import React, { PureComponent } from 'react';
 
-import { getLocale } from './shared/locales';
 import { isCalendarType, isMaxDate, isMinDate, isValue } from './shared/propTypes';
@@ -14,3 +13,3 @@
   get calendarType() {
-    const { calendarType } = this.props;
+    const { calendarType, locale } = this.props;
 
@@ -21,3 +20,3 @@ if (calendarType) {
 
-    switch (getLocale()) {
+    switch (locale) {
       case 'en-US':
@@ -31,10 +30,8 @@ return 'US';
   renderWeekdays() {
-    const { calendarType } = this;
-    const { activeStartDate, formatShortWeekday } = this.props;
-
     return (
       <Weekdays
-        calendarType={calendarType}
-        month={activeStartDate}
-        formatShortWeekday={formatShortWeekday}
+        calendarType={this.calendarType}
+        locale={this.props.locale}
+        month={this.props.activeStartDate}
+        formatShortWeekday={this.props.formatShortWeekday}
       />
@@ -51,10 +48,7 @@ );
 
-    const { calendarType } = this;
-    const { activeStartDate, onClickWeekNumber } = this.props;
-
     return (
       <WeekNumbers
-        activeStartDate={activeStartDate}
-        calendarType={calendarType}
-        onClickWeekNumber={onClickWeekNumber}
+        activeStartDate={this.props.activeStartDate}
+        calendarType={this.calendarType}
+        onClickWeekNumber={this.props.onClickWeekNumber}
       />
@@ -103,2 +97,3 @@ );
   formatShortWeekday: PropTypes.func,
+  locale: PropTypes.string,
   maxDate: isMaxDate,
@@ -105,0 +100,0 @@ minDate: isMinDate,

src/MonthView/Weekdays.jsx

@@ -17,3 +17,6 @@ import React, { Component } from 'react';
   shouldComponentUpdate(nextProps) {
-    return nextProps.calendarType !== this.props.calendarType;
+    return (
+      nextProps.calendarType !== this.props.calendarType ||
+      nextProps.locale !== this.props.locale
+    );
   }
@@ -40,4 +43,4 @@
   render() {
+    const { calendarType, formatShortWeekday, locale } = this.props;
     const { beginOfMonth, year, monthIndex } = this;
-    const { calendarType, formatShortWeekday } = this.props;
 
@@ -56,3 +59,3 @@ const weekdays = [];
         >
-          {formatShortWeekday(weekdayDate).replace('.', '')}
+          {formatShortWeekday(weekdayDate, locale).replace('.', '')}
         </div>,
@@ -73,5 +76,10 @@ );
 
+Weekdays.defaultProps = {
+  formatShortWeekday: defaultFormatShortWeekday,
+};
+
 Weekdays.propTypes = {
   calendarType: isCalendarType.isRequired,
   formatShortWeekday: PropTypes.func,
+  locale: PropTypes.string,
   month: PropTypes.oneOfType([
@@ -83,5 +91,1 @@ PropTypes.string, // Only strings that are parseable to integer
 };
-
-Weekdays.defaultProps = {
-  formatShortWeekday: defaultFormatShortWeekday,
-};

src/shared/__tests__/dateFormatter.js

@@ -12,3 +12,3 @@ import {
 
-    const formattedDate = formatDate(date);
+    const formattedDate = formatDate(date, 'en-US');
 
@@ -23,3 +23,3 @@ expect(formattedDate).toBe('2/1/2017');
 
-    const formattedDate = formatMonthYear(date);
+    const formattedDate = formatMonthYear(date, 'en-US');
 
@@ -34,3 +34,3 @@ expect(formattedDate).toBe('February 2017');
 
-    const formattedDate = formatMonth(date);
+    const formattedDate = formatMonth(date, 'en-US');
 
@@ -45,3 +45,3 @@ expect(formattedDate).toBe('February');
 
-    const formattedDate = formatShortWeekday(date);
+    const formattedDate = formatShortWeekday(date, 'en-US');
 
@@ -48,0 +48,0 @@ expect(formattedDate).toBe('Wed');

src/shared/__tests__/locales.js

 import {
   getDefaultLocales,
   getDefaultLocale,
-  getLocale,
-  setLocale,
 } from '../locales';
@@ -24,18 +22,1 @@
 
-describe('getLocale', () => {
-  it('returns default locale on initial run', () => {
-    const locale = getLocale();
-
-    expect(locale).toBe('en-US');
-  });
-});
-
-describe('setLocale', () => {
-  it('saves a given locale so that getLocale can read it', () => {
-    setLocale('pl-PL');
-
-    const locale = getLocale();
-
-    expect(locale).toBe('pl-PL');
-  });
-});

src/shared/dateFormatter.js

@@ -1,2 +0,2 @@
-import { getLocale } from './locales';
+import { getDefaultLocale } from './locales';
 
@@ -9,14 +9,20 @@ const formatterCache = {};
  */
-const getFormatter = (options, locales = getLocale()) => {
+const getFormatter = (options, locale) => {
+  if (!locale) {
+    // Default parameter is not enough as it does not protect us from null values
+    // eslint-disable-next-line no-param-reassign
+    locale = getDefaultLocale();
+  }
+
   const stringifiedOptions = JSON.stringify(options);
 
-  if (!formatterCache[locales]) {
-    formatterCache[locales] = {};
+  if (!formatterCache[locale]) {
+    formatterCache[locale] = {};
   }
 
-  if (!formatterCache[locales][stringifiedOptions]) {
-    formatterCache[locales][stringifiedOptions] = new Intl.DateTimeFormat(locales, options).format;
+  if (!formatterCache[locale][stringifiedOptions]) {
+    formatterCache[locale][stringifiedOptions] = new Intl.DateTimeFormat(locale, options).format;
   }
 
-  return formatterCache[locales][stringifiedOptions];
+  return formatterCache[locale][stringifiedOptions];
 };
@@ -38,16 +44,20 @@
 
-export const formatDate = date => getFormatter(
+export const formatDate = (date, locale) => getFormatter(
   { day: 'numeric', month: 'numeric', year: 'numeric' },
+  locale,
 )(toSafeHour(date));
 
-export const formatMonthYear = date => getFormatter(
+export const formatMonthYear = (date, locale) => getFormatter(
   { month: 'long', year: 'numeric' },
+  locale,
 )(toSafeHour(date));
 
-export const formatMonth = date => getFormatter(
+export const formatMonth = (date, locale) => getFormatter(
   { month: 'long' },
+  locale,
 )(toSafeHour(date));
 
-export const formatShortWeekday = date => getFormatter(
+export const formatShortWeekday = (date, locale) => getFormatter(
   { weekday: 'short' },
+  locale,
 )(toSafeHour(date));

src/shared/locales.js

 import once from 'lodash.once';
 
-let userLocale = null;
-
 export const getDefaultLocales = once(() => {
@@ -23,6 +21,1 @@ const languageList = [];
 
-export const getLocale = () => userLocale || getDefaultLocale();
-
-export const setLocale = (locale) => {
-  userLocale = locale;
-};

src/shared/propTypes.js

@@ -118,2 +118,3 @@ import PropTypes from 'prop-types';
   ]),
+  tileDisabled: PropTypes.func,
 };

src/Tile.jsx

@@ -21,2 +21,3 @@ import React from 'react';
   tileContent,
+  tileDisabled,
   view,
@@ -31,3 +32,4 @@ }) => (
       (minDate && minDateTransform(minDate) > date) ||
-      (maxDate && maxDateTransform(maxDate) < date)
+      (maxDate && maxDateTransform(maxDate) < date) ||
+      (tileDisabled && tileDisabled({ date, view }))
     }
@@ -34,0 +36,0 @@ onClick={onClick && (() => onClick(date))}

src/YearView.jsx

@@ -27,2 +27,3 @@ import React, { PureComponent } from 'react';
   formatMonth: PropTypes.func,
+  locale: PropTypes.string,
   maxDate: isMaxDate,
@@ -29,0 +30,0 @@ minDate: isMinDate,

src/YearView/Month.jsx

@@ -20,2 +20,3 @@ import React from 'react';
   formatMonth,
+  locale,
   ...otherProps
@@ -32,15 +33,16 @@ }) => (
   >
-    {formatMonth(date)}
+    {formatMonth(date, locale)}
   </Tile>
 );
 
+Month.defaultProps = {
+  formatMonth: defaultFormatMonth,
+};
+
 Month.propTypes = {
   ...tileProps,
   formatMonth: PropTypes.func,
+  locale: PropTypes.string,
 };
 
-Month.defaultProps = {
-  formatMonth: defaultFormatMonth,
-};
-
 export default Month;

src/YearView/Months.jsx

 import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
 
@@ -41,2 +42,3 @@ import TileGroup from '../TileGroup';
   ...tileGroupProps,
+  locale: PropTypes.string,
 };

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

318903

0.11%

Lines of code

7986

0.01%

Number of lines in readme file

165

7.14%

No dependency changes