Merge pull request #988 from airbnb/maja-add-firstDay-and-lastDay-OfW…

…eek-modifiers Add modifiers for `firstDayOfWeek` and `lastDayOfWeek`
react-dates · Jan 29, 2018 · 7dfe618 · 7dfe618
2 parents d966001 + 36a8998
commit 7dfe618
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 0 deletions.
diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
@@ -129,6 +129,8 @@ class CalendarDay extends React.Component {
           styles.CalendarDay__default,
           isOutsideDay && styles.CalendarDay__outside,
           modifiers.has('today') && styles.CalendarDay__today,
+          modifiers.has('first-day-of-week') && styles.CalendarDay__firstDayOfWeek,
+          modifiers.has('last-day-of-week') && styles.CalendarDay__lastDayOfWeek,
           modifiers.has('hovered-offset') && styles.CalendarDay__hovered_offset,
           modifiers.has('highlighted-calendar') && styles.CalendarDay__highlighted_calendar,
           modifiers.has('blocked-minimum-nights') && styles.CalendarDay__blocked_minimum_nights,
@@ -331,4 +333,6 @@ export default withStyles(({ reactDates: { color, font } }) => ({
   CalendarDay__selected_start: {},
   CalendarDay__selected_end: {},
   CalendarDay__today: {},
+  CalendarDay__firstDayOfWeek: {},
+  CalendarDay__lastDayOfWeek: {},
 }))(CalendarDay);
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
@@ -56,6 +56,8 @@ const propTypes = forbidExtraProps({
   defaultStyles: DayStyleShape,
   outsideStyles: DayStyleShape,
   todayStyles: DayStyleShape,
+  firstDayOfWeekStyles: DayStyleShape,
+  lastDayOfWeekStyles: DayStyleShape,
   highlightedCalendarStyles: DayStyleShape,
   blockedMinNightsStyles: DayStyleShape,
   blockedCalendarStyles: DayStyleShape,
@@ -183,6 +185,8 @@ const defaultProps = {
   selectedStartStyles: {},
   selectedEndStyles: {},
   afterHoveredStartStyles: {},
+  firstDayOfWeekStyles: {},
+  lastDayOfWeekStyles: {},
 
   // internationalization
   phrases: CalendarDayPhrases,
@@ -259,6 +263,8 @@ class CustomizableCalendarDay extends React.Component {
       defaultStyles: defaultStylesWithHover,
       outsideStyles: outsideStylesWithHover,
       todayStyles: todayStylesWithHover,
+      firstDayOfWeekStyles: firstDayOfWeekStylesWithHover,
+      lastDayOfWeekStyles: lastDayOfWeekStylesWithHover,
       highlightedCalendarStyles: highlightedCalendarStylesWithHover,
       blockedMinNightsStyles: blockedMinNightsStylesWithHover,
       blockedCalendarStyles: blockedCalendarStylesWithHover,
@@ -288,6 +294,8 @@ class CustomizableCalendarDay extends React.Component {
     const defaultStyles = getStyles(defaultStylesWithHover, isHovered);
     const outsideStyles = getStyles(outsideStylesWithHover, isHovered);
     const todayStyles = getStyles(todayStylesWithHover, isHovered);
+    const firstDayOfWeekStyles = getStyles(firstDayOfWeekStylesWithHover, isHovered);
+    const lastDayOfWeekStyles = getStyles(lastDayOfWeekStylesWithHover, isHovered);
     const highlightedCalendarStyles = getStyles(highlightedCalendarStylesWithHover, isHovered);
     const blockedMinNightsStyles = getStyles(blockedMinNightsStylesWithHover, isHovered);
     const blockedCalendarStyles = getStyles(blockedCalendarStylesWithHover, isHovered);
@@ -309,6 +317,8 @@ class CustomizableCalendarDay extends React.Component {
           defaultStyles,
           isOutsideDay && outsideStyles,
           modifiers.has('today') && todayStyles,
+          modifiers.has('first-day-of-week') && firstDayOfWeekStyles,
+          modifiers.has('last-day-of-week') && lastDayOfWeekStyles,
           modifiers.has('highlighted-calendar') && highlightedCalendarStyles,
           modifiers.has('blocked-minimum-nights') && blockedMinNightsStyles,
           modifiers.has('blocked-calendar') && blockedCalendarStyles,

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
@@ -178,6 +178,8 @@ export default class DayPickerRangeController extends React.Component {
       'hovered-span': day => this.isInHoveredSpan(day),
       'hovered-offset': day => this.isInHoveredSpan(day),
       'after-hovered-start': day => this.isDayAfterHoveredStartDate(day),
+      'first-day-of-week': day => this.isFirstDayOfWeek(day),
+      'last-day-of-week': day => this.isLastDayOfWeek(day),
     };
 
     const { currentMonth, visibleDays } = this.getStateForNewMonth(props);
@@ -942,6 +944,16 @@ export default class DayPickerRangeController extends React.Component {
     return isSameDay(day, this.today);
   }
 
+  isFirstDayOfWeek(day) {
+    const { firstDayOfWeek } = this.props;
+    return day.day() === (firstDayOfWeek || moment.localeData().firstDayOfWeek());
+  }
+
+  isLastDayOfWeek(day) {
+    const { firstDayOfWeek } = this.props;
+    return day.day() === ((firstDayOfWeek || moment.localeData().firstDayOfWeek()) + 6) % 7;
+  }
+
   render() {
     const {
       numberOfMonths,

diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
@@ -148,6 +148,8 @@ export default class DayPickerSingleDateController extends React.Component {
       valid: day => !this.isBlocked(day),
       hovered: day => this.isHovered(day),
       selected: day => this.isSelected(day),
+      'first-day-of-week': day => this.isFirstDayOfWeek(day),
+      'last-day-of-week': day => this.isLastDayOfWeek(day),
     };
 
     const { currentMonth, visibleDays } = this.getStateForNewMonth(props);
@@ -571,6 +573,16 @@ export default class DayPickerSingleDateController extends React.Component {
     return isSameDay(day, this.today);
   }
 
+  isFirstDayOfWeek(day) {
+    const { firstDayOfWeek } = this.props;
+    return day.day() === (firstDayOfWeek || moment.localeData().firstDayOfWeek());
+  }
+
+  isLastDayOfWeek(day) {
+    const { firstDayOfWeek } = this.props;
+    return day.day() === ((firstDayOfWeek || moment.localeData().firstDayOfWeek()) + 6) % 7;
+  }
+
   render() {
     const {
       numberOfMonths,

diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
@@ -3124,5 +3124,41 @@ describe('DayPickerRangeController', () => {
         expect(wrapper.instance().isToday(moment(today).subtract(1, 'months'))).to.equal(false);
       });
     });
+
+    describe('#isFirstDayOfWeek', () => {
+      it('returns true if first day of this week', () => {
+        const wrapper = shallow(<DayPickerRangeController />);
+        expect(wrapper.instance().isFirstDayOfWeek(moment().startOf('week'))).to.equal(true);
+      });
+
+      it('returns true if same day as firstDayOfWeek prop', () => {
+        const firstDayOfWeek = 3;
+        const wrapper = shallow(<DayPickerRangeController firstDayOfWeek={firstDayOfWeek} />);
+        expect(wrapper.instance().isFirstDayOfWeek(moment().startOf('week').day(firstDayOfWeek))).to.equal(true);
+      });
+
+      it('returns false if not the first day of the week', () => {
+        const wrapper = shallow(<DayPickerRangeController />);
+        expect(wrapper.instance().isFirstDayOfWeek(moment().endOf('week'))).to.equal(false);
+      });
+    });
+
+    describe('#isLastDayOfWeek', () => {
+      it('returns true if last day of week', () => {
+        const wrapper = shallow(<DayPickerRangeController />);
+        expect(wrapper.instance().isLastDayOfWeek(moment().endOf('week'))).to.equal(true);
+      });
+
+      it('returns true if 6 days after firstDayOfWeek prop', () => {
+        const firstDayOfWeek = 3;
+        const wrapper = shallow(<DayPickerRangeController firstDayOfWeek={firstDayOfWeek} />);
+        expect(wrapper.instance().isLastDayOfWeek(moment().day(firstDayOfWeek).add(6, 'days'))).to.equal(true);
+      });
+
+      it('returns false if not last of week', () => {
+        const wrapper = shallow(<DayPickerRangeController />);
+        expect(wrapper.instance().isLastDayOfWeek(moment().startOf('week').add(1, 'day'))).to.equal(false);
+      });
+    });
   });
 });
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
@@ -1344,6 +1344,42 @@ describe('DayPickerSingleDateController', () => {
         expect(wrapper.instance().isToday(moment(today).subtract(1, 'months'))).to.equal(false);
       });
     });
+
+    describe('#isFirstDayOfWeek', () => {
+      it('returns true if first day of this week', () => {
+        const wrapper = shallow(<DayPickerSingleDateController />);
+        expect(wrapper.instance().isFirstDayOfWeek(moment().startOf('week'))).to.equal(true);
+      });
+
+      it('returns true if same day as firstDayOfWeek prop', () => {
+        const firstDayOfWeek = 3;
+        const wrapper = shallow(<DayPickerSingleDateController firstDayOfWeek={firstDayOfWeek} />);
+        expect(wrapper.instance().isFirstDayOfWeek(moment().startOf('week').day(firstDayOfWeek))).to.equal(true);
+      });
+
+      it('returns false if not the first day of the week', () => {
+        const wrapper = shallow(<DayPickerSingleDateController />);
+        expect(wrapper.instance().isFirstDayOfWeek(moment().endOf('week'))).to.equal(false);
+      });
+    });
+
+    describe('#isLastDayOfWeek', () => {
+      it('returns true if last day of week', () => {
+        const wrapper = shallow(<DayPickerSingleDateController />);
+        expect(wrapper.instance().isLastDayOfWeek(moment().endOf('week'))).to.equal(true);
+      });
+
+      it('returns true if 6 days after firstDayOfWeek prop', () => {
+        const firstDayOfWeek = 3;
+        const wrapper = shallow(<DayPickerSingleDateController firstDayOfWeek={firstDayOfWeek} />);
+        expect(wrapper.instance().isLastDayOfWeek(moment().day(firstDayOfWeek).add(6, 'days'))).to.equal(true);
+      });
+
+      it('returns false if not last of week', () => {
+        const wrapper = shallow(<DayPickerSingleDateController />);
+        expect(wrapper.instance().isLastDayOfWeek(moment().startOf('week').add(1, 'day'))).to.equal(false);
+      });
+    });
   });
 
   describe('initialVisibleMonth', () => {