Fix bugs with dates out of range and optimize Month

packages/react-toolbox-core/src/components/DatePicker/Day.tsx

@@ -49,15 +49,12 @@ export default function dayFactory({ DayNode, passthrough }: DayFactoryArgs): Da
     };
 
     public shouldComponentUpdate(nextProps) {
-      if (nextProps.isDayBlocked !== this.props.isDayBlocked) {
-        return true;
-      }
-
-      if (nextProps.isDayDisabled !== this.props.isDayDisabled) {
-        return true;
-      }
-
-      if (nextProps.day.getTime() !== this.props.day.getTime()) {
+      if (
+        nextProps.isDayBlocked !== this.props.isDayBlocked ||
+        nextProps.isDayDisabled !== this.props.isDayDisabled ||
+        nextProps.day.getTime() !== this.props.day.getTime() ||
+        nextProps.viewDate.getTime() !== this.props.viewDate.getTime()
+      ) {
         return true;
       }
 

packages/react-toolbox-core/src/components/DatePicker/Month.tsx

@@ -5,6 +5,7 @@ import getPassThrough, { PassTroughFunction } from '../../utils/getPassThrough';
 import getFullDayOfWeek from '../../locale/getFullDayOfWeek';
 import getFullMonth from '../../locale/getFullMonth';
 import getMonthMatrix from './getMonthMatrix';
+import getMonthAffected from './getMonthAffected';
 import { PickerDate, DateChecker } from './types';
 import { Day } from './Day';
 
@@ -89,6 +90,31 @@ export default function monthFactory({
 }: MonthFactoryArgs): Month {
   const passProps = getPassThrough(passthrough);
   return class Month extends Component<MonthProps, void> {
+    public shouldComponentUpdate(nextProps) {
+      if (
+        this.props.viewDate.getTime() !== nextProps.viewDate.getTime() ||
+        this.props.isDayBlocked !== nextProps.isDayBlocked ||
+        this.props.isDayDisabled !== nextProps.isDayDisabled ||
+        this.props.onDayClick !== nextProps.onDayClick ||
+        this.props.onDayMouseEnter !== nextProps.onDayMouseEnter ||
+        this.props.onDayMouseLeave !== nextProps.onDayMouseLeave ||
+        this.props.sundayFirstDayOfWeek !== nextProps.sundayFirstDayOfWeek
+      ) {
+        return true;
+      }
+
+      if (
+        getMonthAffected(this.props.viewDate, this.props.selected) ||
+        getMonthAffected(nextProps.viewDate, nextProps.selected) ||
+        getMonthAffected(this.props.viewDate, this.props.highlighted) ||
+        getMonthAffected(nextProps.viewDate, nextProps.highlighted)
+      ) {
+        return true;
+      }
+
+      return false;
+    }
+
     private getMonthMatrix = memoize(getMonthMatrix);
 
     private renderDays = () => {

packages/react-toolbox-core/src/components/DatePicker/getMonthAffected.ts

@@ -0,0 +1,31 @@
+import { isSameMonth, isWithinRange } from 'date-fns';
+import { PickerDate, DateChecker } from './types';
+
+export default function getMonthAffected(date: Date, selected: PickerDate): boolean {
+  if (!selected) {
+    return false;
+  }
+
+  if (selected instanceof Date && isSameMonth(date, selected)) {
+    return true;
+  }
+
+  if (!(selected instanceof Date)) {
+    const { from, to } = selected;
+
+    if (from && isSameMonth(date, from)) {
+      return true;
+    }
+
+    if (to && isSameMonth(date, to)) {
+      return true;
+    }
+
+    if (from && to && isWithinRange(date, from, to)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+

packages/react-toolbox-core/src/components/DatePicker/getSelectionMatch.ts

@@ -38,14 +38,27 @@ export default function getSelectionMatch(
     const isOutOfRange = from && to && !isSameMonth(day, viewDate);
     const dayToCompare = isOutOfRange ? getDayToCompare(day, viewDate) : day;
 
-    if (from && isSameDay(dayToCompare, from) && !isOutOfRange) {
+    // Check if it is selected
+    if (from && isSameDay(day, from) && !isOutOfRange) {
       return { inRange: false, selected: true, source: 'from' };
     }
 
-    if (to && isSameDay(dayToCompare, to) && !isOutOfRange) {
+    if (to && isSameDay(day, to) && !isOutOfRange) {
       return { inRange: false, selected: true, source: 'to' };
     }
 
+    // Check when it is a day out of range
+    if (isOutOfRange) {
+      if (isBefore(day, viewDate)) {
+        if (from && isSameDay(dayToCompare, from)) {
+          return { inRange: false, selected: false, source: null };
+        }
+      } else if (to && isSameDay(dayToCompare, to)) {
+        return { inRange: false, selected: false, source: null };
+      }
+    }
+
+    // Check when it is within range
     if (from && to && isWithinRange(dayToCompare, from, to)) {
       return { inRange: true, selected: false, source: null };
     }