Expose DayOfWeekShape propType

Author: daltones

constants.js

@@ -15,4 +15,5 @@ module.exports = {
 
   DAY_SIZE: 39,
   BLOCKED_MODIFIER: 'blocked',
+  WEEKDAYS: [0, 1, 2, 3, 4, 5, 6],
 };

src/components/CalendarMonth.jsx

@@ -18,6 +18,7 @@ import isSameDay from '../utils/isSameDay';
 import toISODateString from '../utils/toISODateString';
 
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
+import DayOfWeekShape from '../shapes/DayOfWeekShape';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -38,7 +39,7 @@ const propTypes = forbidExtraProps({
   onDayMouseLeave: PropTypes.func,
   renderMonth: PropTypes.func,
   renderDay: PropTypes.func,
-  firstDayOfWeek: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+  firstDayOfWeek: DayOfWeekShape,
 
   focusedDate: momentPropTypes.momentObj, // indicates focusable day
   isFocused: PropTypes.bool, // indicates whether or not to move focus to focusable day
@@ -78,7 +79,7 @@ export default class CalendarMonth extends React.Component {
       weeks: getCalendarMonthWeeks(
         props.month,
         props.enableOutsideDays,
-        props.firstDayOfWeek === null ? moment.localeData().firstDayOfWeek() : props.firstDayOfWeek,
+        props.firstDayOfWeek == null ? moment.localeData().firstDayOfWeek() : props.firstDayOfWeek,
       ),
     };
   }
@@ -92,7 +93,7 @@ export default class CalendarMonth extends React.Component {
         weeks: getCalendarMonthWeeks(
           month,
           enableOutsideDays,
-          firstDayOfWeek === null ? moment.localeData().firstDayOfWeek() : firstDayOfWeek,
+          firstDayOfWeek == null ? moment.localeData().firstDayOfWeek() : firstDayOfWeek,
         ),
       });
     }

src/components/CalendarMonthGrid.jsx

@@ -19,6 +19,7 @@ import toISOMonthString from '../utils/toISOMonthString';
 import isAfterDay from '../utils/isAfterDay';
 
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
+import DayOfWeekShape from '../shapes/DayOfWeekShape';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -45,7 +46,7 @@ const propTypes = forbidExtraProps({
   daySize: nonNegativeInteger,
   focusedDate: momentPropTypes.momentObj, // indicates focusable day
   isFocused: PropTypes.bool, // indicates whether or not to move focus to focusable day
-  firstDayOfWeek: range(0, 7),
+  firstDayOfWeek: DayOfWeekShape,
 
   // i18n
   monthFormat: PropTypes.string,

src/components/DayPicker.jsx

@@ -26,6 +26,7 @@ import getActiveElement from '../utils/getActiveElement';
 import isDayVisible from '../utils/isDayVisible';
 
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
+import DayOfWeekShape from '../shapes/DayOfWeekShape';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -48,7 +49,7 @@ const propTypes = forbidExtraProps({
   onOutsideClick: PropTypes.func,
   hidden: PropTypes.bool,
   initialVisibleMonth: PropTypes.func,
-  firstDayOfWeek: range(0, 7),
+  firstDayOfWeek: DayOfWeekShape,
   renderCalendarInfo: PropTypes.func,
   hideKeyboardShortcutsPanel: PropTypes.bool,
   daySize: nonNegativeInteger,
@@ -685,7 +686,7 @@ export default class DayPicker extends React.Component {
     }
 
     let { firstDayOfWeek } = this.props;
-    if (firstDayOfWeek === null) {
+    if (firstDayOfWeek == null) {
       firstDayOfWeek = moment.localeData().firstDayOfWeek();
     }
 

src/components/DayPickerRangeController.jsx

@@ -23,6 +23,7 @@ import toISOMonthString from '../utils/toISOMonthString';
 
 import FocusedInputShape from '../shapes/FocusedInputShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
+import DayOfWeekShape from '../shapes/DayOfWeekShape';
 
 import {
   START_DATE,
@@ -67,7 +68,7 @@ const propTypes = forbidExtraProps({
   onOutsideClick: PropTypes.func,
   renderDay: PropTypes.func,
   renderCalendarInfo: PropTypes.func,
-  firstDayOfWeek: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+  firstDayOfWeek: DayOfWeekShape,
 
   // accessibility
   onBlur: PropTypes.func,

src/shapes/DateRangePickerShape.js

@@ -1,13 +1,14 @@
 import PropTypes from 'prop-types';
 import momentPropTypes from 'react-moment-proptypes';
-import { nonNegativeInteger, range } from 'airbnb-prop-types';
+import { nonNegativeInteger } from 'airbnb-prop-types';
 
 import { DateRangePickerPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 
 import FocusedInputShape from '../shapes/FocusedInputShape';
 import OrientationShape from '../shapes/OrientationShape';
 import anchorDirectionShape from '../shapes/AnchorDirectionShape';
+import DayOfWeekShape from '../shapes/DayOfWeekShape';
 
 export default {
   // required props for a functional interactive DateRangePicker
@@ -44,7 +45,7 @@ export default {
   withFullScreenPortal: PropTypes.bool,
   daySize: nonNegativeInteger,
   isRTL: PropTypes.bool,
-  firstDayOfWeek: range(0, 7),
+  firstDayOfWeek: DayOfWeekShape,
   initialVisibleMonth: PropTypes.func,
   numberOfMonths: PropTypes.number,
   keepOpenOnDateSelect: PropTypes.bool,

src/shapes/DayOfWeekShape.js

@@ -0,0 +1,5 @@
+import { PropTypes } from 'react';
+
+import { WEEKDAYS } from '../../constants';
+
+export default PropTypes.oneOf(WEEKDAYS);

src/shapes/SingleDatePickerShape.js

@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
 import momentPropTypes from 'react-moment-proptypes';
-import { nonNegativeInteger, range } from 'airbnb-prop-types';
+import { nonNegativeInteger } from 'airbnb-prop-types';
 
 import { SingleDatePickerPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 
 import OrientationShape from '../shapes/OrientationShape';
 import anchorDirectionShape from '../shapes/AnchorDirectionShape';
+import DayOfWeekShape from '../shapes/DayOfWeekShape';
 
 export default {
   // required props for a functional interactive SingleDatePicker
@@ -36,7 +37,7 @@ export default {
   withPortal: PropTypes.bool,
   withFullScreenPortal: PropTypes.bool,
   initialVisibleMonth: PropTypes.func,
-  firstDayOfWeek: range(0,7),
+  firstDayOfWeek: DayOfWeekShape,
   numberOfMonths: PropTypes.number,
   keepOpenOnDateSelect: PropTypes.bool,
   reopenPickerOnClearDate: PropTypes.bool,

src/utils/getCalendarMonthWeeks.js

@@ -1,6 +1,6 @@
 import moment from 'moment';
 
-const WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
+import { WEEKDAYS } from '../../constants';
 
 export default function getCalendarMonthWeeks(
   month,