X2-8716 Reports: Unable to select date that falls after selected rela…

…tive date range (#305) * Refactorings to date range * More refactoring and fixes for the logic * More refactorings * More refactoring * Even more refactoring * Linted * Cr feedback * Removed additional rule from the first calendat --------- Co-authored-by: Oleksandr Khomyakov <[email protected]>
xola · Feb 26, 2024 · d91fd3d · d91fd3d
1 parent 445316c
commit d91fd3d
Showing 1 changed file with 31 additions and 65 deletions.
diff --git a/src/components/DatePicker/RangeDatePicker.jsx b/src/components/DatePicker/RangeDatePicker.jsx
@@ -27,100 +27,66 @@ const RangeDatePicker = ({
     ...rest
 }) => {
     const isStartDateIsTheSameMonth = dayjs(value?.from).isSame(dayjs(value?.to), "month");
+    const isSingleDayDateRange = dayjs(value?.from).isSame(dayjs(value.to), "day");
 
-    const CaptionStartElement =
-        shouldShowYearPicker && startMonth
-            ? ({ date }) => (
-                  <MonthYearSelector date={date} currentMonth={startMonth} onChange={handleStartMonthChange} />
-              )
+    const createCaptionElement = (currentMonth, handleChange) =>
+        shouldShowYearPicker && currentMonth
+            ? ({ date }) => <MonthYearSelector date={date} currentMonth={currentMonth} onChange={handleChange} />
             : undefined;
 
-    const CaptionEndElement =
-        shouldShowYearPicker && endMonth
-            ? ({ date }) => <MonthYearSelector date={date} currentMonth={endMonth} onChange={handleEndMonthChange} />
-            : undefined;
+    const CaptionStartElement = createCaptionElement(startMonth, handleStartMonthChange);
+    const CaptionEndElement = createCaptionElement(endMonth, handleEndMonthChange);
 
-    const isDisabledStartDays = (date) => {
+    const isDateDisabledFromOutside = (date) => {
         if (isFunction(disabledDays)) {
-            return disabledDays(date) || dayjs(date).isAfter(value.to, "day");
+            return disabledDays(date);
         }
 
         if (isArray(disabledDays)) {
-            return (
-                disabledDays.some((_date) => dayjs(_date).isSame(date, "day")) || dayjs(date).isAfter(value.to, "day")
-            );
+            return disabledDays.some((_date) => dayjs(_date).isSame(date, "day"));
         }
 
-        return dayjs(date).isAfter(value.to, "day");
+        return false;
     };
 
-    const isDisabledEndDays = (date) => {
-        if (isStartDateIsTheSameMonth) {
-            return true;
-        }
+    const isDisabledStartDays = (date) => {
+        const isDateAfterEndDate = dayjs(date).isAfter(value?.to, "day");
 
-        if (isFunction(disabledDays)) {
-            return disabledDays(date) || dayjs(date).isBefore(value?.from, "day");
-        }
+        return isDateDisabledFromOutside(date);
+    };
 
-        if (isArray(disabledDays)) {
-            return (
-                disabledDays.some((_date) => dayjs(_date).isSame(date, "day")) ||
-                dayjs(date).isBefore(value?.from, "day")
-            );
-        }
+    const isDisabledEndDays = (date) => {
+        const isDateBeforeStartDate = dayjs(date).isBefore(value?.from, "day");
 
-        return dayjs(date).isBefore(value?.from, "day");
+        return isDateDisabledFromOutside(date) || (isDateBeforeStartDate && !isSingleDayDateRange);
     };
 
-    const renderStartDay = (date) => {
+    const renderDay = (date, isDisabledDays, currentMonth) => {
         const tooltipContent = getTooltip?.(date);
-        const disabled = isDisabledStartDays(date);
+        const disabled = isDisabledDays(date);
+
+        const DayWrapper = tooltipContent ? Tooltip : React.Fragment;
+        const dayWrapperProps = tooltipContent ? { placement: "top", content: tooltipContent } : {};
 
-        return tooltipContent ? (
-            <Tooltip placement="top" content={tooltipContent}>
+        return (
+            <DayWrapper {...dayWrapperProps}>
                 <Day
                     disabled={disabled}
                     selectedDate={value}
                     date={date}
                     getContent={getDayContent}
-                    currentMonth={startMonth}
+                    currentMonth={currentMonth}
                 />
-            </Tooltip>
-        ) : (
-            <Day
-                disabled={disabled}
-                selectedDate={value}
-                date={date}
-                getContent={getDayContent}
-                currentMonth={startMonth}
-            />
+            </DayWrapper>
         );
     };
 
-    const renderEndDay = (date) => {
-        const tooltipContent = getTooltip?.(date);
-        const disabled = isDisabledEndDays(date);
+    const renderStartDay = (date) => {
+        return renderDay(date, isDisabledStartDays, startMonth);
+    };
 
-        return tooltipContent ? (
-            <Tooltip placement="top" content={tooltipContent}>
-                <Day
-                    disabled={disabled}
-                    selectedDate={value}
-                    date={date}
-                    getContent={getDayContent}
-                    currentMonth={endMonth}
-                />
-            </Tooltip>
-        ) : (
-            <Day
-                disabled={disabled}
-                selectedDate={value}
-                date={date}
-                getContent={getDayContent}
-                currentMonth={endMonth}
-            />
-        );
+    const renderEndDay = (date) => {
+        return renderDay(date, isDisabledEndDays, endMonth);
     };
 
     return (