fix: range not selected when missing the from value (#1876)

gpbl · Aug 16, 2023 · 748dca4 · 748dca4
1 parent b291218
commit 748dca4
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 35 deletions.
diff --git a/src/contexts/Modifiers/utils/isDateInRange.ts b/src/contexts/Modifiers/utils/isDateInRange.ts
@@ -5,21 +5,21 @@ import { DateRange } from 'types/Matchers';
 /** Return `true` whether `date` is inside `range`. */
 export function isDateInRange(date: Date, range: DateRange): boolean {
   let { from, to } = range;
-  if (!from) {
-    return false;
+  if (from && to) {
+    const isRangeInverted = differenceInCalendarDays(to, from) < 0;
+    if (isRangeInverted) {
+      [from, to] = [to, from];
+    }
+    const isInRange =
+      differenceInCalendarDays(date, from) >= 0 &&
+      differenceInCalendarDays(to, date) >= 0;
+    return isInRange;
   }
-  if (!to && isSameDay(from, date)) {
-    return true;
+  if (to) {
+    return isSameDay(to, date);
   }
-  if (!to) {
-    return false;
+  if (from) {
+    return isSameDay(from, date);
   }
-  const isRangeInverted = differenceInCalendarDays(to, from) < 0;
-  if (isRangeInverted) {
-    [from, to] = [to, from];
-  }
-  const isInRange =
-    differenceInCalendarDays(date, from) >= 0 &&
-    differenceInCalendarDays(to, date) >= 0;
-  return isInRange;
+  return false;
 }
diff --git a/src/contexts/SelectRange/SelectRangeContext.test.ts b/src/contexts/SelectRange/SelectRangeContext.test.ts
@@ -91,6 +91,26 @@ describe('when only the "from" day is selected', () => {
   });
 });
 
+describe('when only the "to" day is selected', () => {
+  const selected = { from: undefined, to };
+  const dayPickerProps: DayPickerRangeProps = {
+    ...initialProps,
+    selected
+  };
+  test('should return the "range_start" modifiers with the "to" day', () => {
+    const result = renderHook(dayPickerProps);
+    expect(result.current.modifiers.range_start).toEqual([to]);
+  });
+  test('should return the "range_end" modifiers with the "to" day', () => {
+    const result = renderHook(dayPickerProps);
+    expect(result.current.modifiers.range_end).toEqual([to]);
+  });
+  test('should not return any "range_middle" modifiers', () => {
+    const result = renderHook(dayPickerProps);
+    expect(result.current.modifiers.range_middle).toEqual([]);
+  });
+});
+
 describe('when a complete range of days is selected', () => {
   const selected = { from, to };
   const dayPickerProps: DayPickerRangeProps = {

diff --git a/src/contexts/SelectRange/SelectRangeContext.tsx b/src/contexts/SelectRange/SelectRangeContext.tsx
@@ -119,6 +119,9 @@ export function SelectRangeProviderInternal({
         ];
       }
     }
+  } else if (selectedTo) {
+    modifiers.range_start = [selectedTo];
+    modifiers.range_end = [selectedTo];
   }
 
   if (min) {
@@ -134,6 +137,12 @@ export function SelectRangeProviderInternal({
         before: addDays(selectedFrom, min - 1)
       });
     }
+    if (!selectedFrom && selectedTo) {
+      modifiers.disabled.push({
+        after: subDays(selectedTo, min - 1),
+        before: addDays(selectedTo, min - 1)
+      });
+    }
   }
   if (max) {
     if (selectedFrom && !selectedTo) {
@@ -155,6 +164,14 @@ export function SelectRangeProviderInternal({
         after: addDays(selectedTo, offset)
       });
     }
+    if (!selectedFrom && selectedTo) {
+      modifiers.disabled.push({
+        before: addDays(selectedTo, -max + 1)
+      });
+      modifiers.disabled.push({
+        after: addDays(selectedTo, max - 1)
+      });
+    }
   }
 
   return (

diff --git a/src/contexts/SelectRange/utils/addToRange.ts b/src/contexts/SelectRange/utils/addToRange.ts
@@ -13,29 +13,32 @@ export function addToRange(
   range?: DateRange
 ): DateRange | undefined {
   const { from, to } = range || {};
-  if (!from) {
-    return { from: day, to: undefined };
-  }
-  if (!to && isSameDay(from, day)) {
-    return { from: from, to: day };
-  }
-  if (!to && isBefore(day, from)) {
-    return { from: day, to: from };
-  }
-  if (!to) {
+  if (from && to) {
+    if (isSameDay(to, day) && isSameDay(from, day)) {
+      return undefined;
+    }
+    if (isSameDay(to, day)) {
+      return { from: to, to: undefined };
+    }
+    if (isSameDay(from, day)) {
+      return undefined;
+    }
+    if (isAfter(from, day)) {
+      return { from: day, to };
+    }
     return { from, to: day };
   }
-  if (isSameDay(to, day) && isSameDay(from, day)) {
-    return undefined;
-  }
-  if (isSameDay(to, day)) {
-    return { from: to, to: undefined };
-  }
-  if (isSameDay(from, day)) {
-    return undefined;
-  }
-  if (isAfter(from, day)) {
+  if (to) {
+    if (isAfter(day, to)) {
+      return { from: to, to: day };
+    }
     return { from: day, to };
   }
-  return { from, to: day };
+  if (from) {
+    if (isBefore(day, from)) {
+      return { from: day, to: from };
+    }
+    return { from, to: day };
+  }
+  return { from: day, to: undefined };
 }