Merge pull request #1 from 605data/fix/focused-range-show-date-on-calendar

Fix/focused range show date on calendar

Author: dtromblee

src/components/Calendar/index.js

@@ -122,7 +122,10 @@ class Calendar extends PureComponent {
       date: 'date',
     };
     const targetProp = propMapper[this.props.displayMode];
-    if (this.props[targetProp] !== prevProps[targetProp]) {
+    if (
+      this.props[targetProp] !== prevProps[targetProp] ||
+      this.props.focusedRange != prevProps.focusedRange
+    ) {
       this.updateShownDate(this.props);
     }
 

src/utils.js

@@ -27,7 +27,12 @@ export function calcFocusDate(currentFocusedDate, props) {
   }
   targetInterval.start = startOfMonth(targetInterval.start || new Date());
   targetInterval.end = endOfMonth(targetInterval.end || targetInterval.start);
-  const targetDate = targetInterval.start || targetInterval.end || shownDate || new Date();
+  const targetDate =
+    (focusedRange[1]
+      ? targetInterval.end || targetInterval.start
+      : targetInterval.start || targetInterval.end) ||
+    shownDate ||
+    new Date();
 
   // initial focus
   if (!currentFocusedDate) return shownDate || targetDate;

src/utils.test.js

@@ -0,0 +1,35 @@
+import { endOfMonth, startOfMonth } from 'date-fns';
+import { calcFocusDate } from './utils';
+
+describe('calcFocusDate', () => {
+  const ranges = [
+    {
+      startDate: new Date(2021, 0, 10),
+      endDate: new Date(2022, 10, 20),
+    },
+  ];
+
+  describe('when focusedRange[1] equals 0', () => {
+    test('should return startDate', () => {
+      expect(
+        calcFocusDate(new Date(), {
+          ranges,
+          focusedRange: [0, 0],
+          displayMode: 'dateRange',
+        })
+      ).toEqual(startOfMonth(ranges[0].startDate));
+    });
+  });
+
+  describe('when focusedRange[1] equals 1', () => {
+    test('should return endDate', () => {
+      expect(
+        calcFocusDate(new Date(), {
+          ranges,
+          focusedRange: [0, 1],
+          displayMode: 'dateRange',
+        })
+      ).toEqual(endOfMonth(ranges[0].endDate));
+    });
+  });
+});