X2-7602 reworked range datepicker (#280)

* reworked range datepicker * added selected days var * resolve feedback * fix lint * fix lint * resolve feedback * fix lint * fix lint * resolve feedback * remove unnesessary props * resolve feedback * fix Navbar * resolve feedback * resolve feedback * resolve feedback * resolve feedabck * update ui kit * update ui kit * fix lint
xola · Nov 8, 2023 · 3a8448d · 3a8448d
1 parent 5a0e0cc
commit 3a8448d
Show file tree

Hide file tree

Showing 3 changed files with 324 additions and 67 deletions.
diff --git a/src/components/DatePicker/DatePicker.jsx b/src/components/DatePicker/DatePicker.jsx
@@ -9,8 +9,10 @@ import { isArray, isFunction } from "lodash";
 import { Tooltip } from "../..";
 import { Day } from "./Day";
 import { MonthYearSelector } from "./MonthYearSelector";
-import { NavbarElement } from "./NavbarElement";
 import { RelativeDateRange } from "./RelativeDateRange";
+import RangeDatePicker from "./RangeDatePicker";
+import { UpcomingDatePicker } from "./UpcomingDatePicker";
+import { NavbarElement } from "./NavbarElement";
 
 const variants = {
     single: "single",
@@ -40,6 +42,8 @@ export const DatePicker = ({
 }) => {
     const initialValue = variant === variants.single ? value : value.from;
     const [currentMonth, setCurrentMonth] = useState(initialValue);
+    const [startMonth, setStartMonth] = useState(value?.from);
+    const [endMonth, setEndMonth] = useState(value?.to);
     const [rangeName, setRangeName] = useState("");
     const isRangeVariant = variant === variants.range;
 
@@ -87,8 +91,21 @@ export const DatePicker = ({
         }
     };
 
+    const isDisabled = (date) => {
+        if (isArray(disabledDays)) {
+            return disabledDays.some((_date) => dayjs(_date).isSame(date, "day"));
+        }
+
+        if (isFunction(disabledDays)) {
+            return disabledDays(date);
+        }
+
+        return disabledDays(date);
+    };
+
     const handleRelativeRangeChanged = (rangeName, range) => {
         setCurrentMonth(range.from);
+        setStartMonth(range.from);
         onChange(range, modifiers, null);
     };
 
@@ -97,25 +114,27 @@ export const DatePicker = ({
         onMonthChange?.(m);
     };
 
-    const captionElement = shouldShowYearPicker
-        ? ({ date }) => <MonthYearSelector date={date} currentMonth={currentMonth} onChange={handleMonthChange} />
-        : undefined;
+    const handleStartMonthChange = (m) => {
+        setStartMonth(m);
+        onMonthChange?.(m);
+    };
 
-    const isDisabled = (date) => {
-        if (isArray(disabledDays)) {
-            return disabledDays.some((_date) => dayjs(_date).isSame(date, "day"));
-        }
+    const handleEndMonthChange = (m) => {
+        setEndMonth(m);
+        onMonthChange?.(m);
+    };
 
-        if (isFunction(disabledDays)) {
-            return disabledDays(date);
-        }
+    const CaptionElement = shouldShowYearPicker
+        ? ({ date }) => <MonthYearSelector date={date} currentMonth={currentMonth} onChange={handleMonthChange} />
+        : undefined;
 
-        return disabledDays(date);
-    };
+    // Comparing `from` and `to` dates hides a weird CSS style when you select the same date twice in a date range.
+    const isDateRangeStyle = isRangeVariant && value.from?.getTime() !== value.to?.getTime();
 
     const renderDay = (date) => {
         const tooltipContent = getTooltip?.(date);
         const disabled = isDisabled(date);
+
         return tooltipContent ? (
             <Tooltip placement="top" content={tooltipContent}>
                 <Day
@@ -148,66 +167,59 @@ export const DatePicker = ({
         <>
             <div className="flex">
                 {upcomingDates ? (
-                    <div className="rounded-l-lg border-r border-gray pt-8">
-                        <p className="mb-2 px-6 text-lg font-bold">Upcoming</p>
-                        {upcomingDates?.length > 0 ? (
-                            <div className="mt-5">
-                                {upcomingDates?.map((date) => {
-                                    const isSameDay = dayjs(date).isSame(dayjs(value), "day");
-                                    const key = dayjs(date).format();
-                                    return (
-                                        <div
-                                            key={key}
-                                            value
-                                            className={clsx(
-                                                "mx-6 mt-3 flex min-w-40 cursor-pointer items-center justify-center",
-                                                "rounded border border-gray py-3 hover:border-blue hover:bg-blue hover:text-white",
-                                                { "border-blue bg-blue text-white": isSameDay },
-                                            )}
-                                            onClick={(event) => {
-                                                handleDayClick(date, {}, event);
-                                                handleMonthChange(date);
-                                            }}
-                                        >
-                                            {dayjs(date).format("ddd DD MMMM")}
-                                        </div>
-                                    );
-                                })}
-                            </div>
-                        ) : (
-                            <div className="mx-6 mt-7 max-w-40 items-center justify-center rounded bg-yellow-lighter p-3">
-                                There is no future availability for this product.
-                            </div>
-                        )}
-                    </div>
+                    <UpcomingDatePicker
+                        upcomingDates={upcomingDates}
+                        value={value}
+                        onChange={handleDayClick}
+                        onMonthChange={handleMonthChange}
+                    />
                 ) : null}
 
-                <DayPicker
-                    className={clsx(
-                        "ui-date-picker rounded-lg pt-3",
-                        useDateRangeStyle ? "date-range-picker" : null,
-                        getDayContent ? "has-custom-content" : null,
-                        modifiers.waitlist ? "has-custom-content" : null,
-                    )}
-                    todayButton={variant === "single" ? "Today" : undefined}
-                    selectedDays={selectedDays}
-                    month={currentMonth}
-                    modifiers={{ ...modifiers, ...rangeModifier }}
-                    numberOfMonths={isRangeVariant ? 2 : 1}
-                    disabledDays={disabledDays}
-                    captionElement={captionElement}
-                    renderDay={renderDay}
-                    navbarElement={NavbarElement}
-                    onDayClick={handleDayClick}
-                    onMonthChange={handleMonthChange}
-                    onTodayButtonClick={handleTodayClick}
-                    {...rest}
-                />
+                {isRangeVariant ? (
+                    <RangeDatePicker
+                        isDateRangeStyle={useDateRangeStyle}
+                        shouldShowYearPicker={shouldShowYearPicker}
+                        startMonth={startMonth}
+                        endMonth={endMonth}
+                        modifiers={{ ...modifiers, ...rangeModifier }}
+                        getTooltip={getTooltip}
+                        disabledDays={disabledDays}
+                        getDayContent={getDayContent}
+                        value={value}
+                        handleDayClick={handleDayClick}
+                        handleStartMonthChange={handleStartMonthChange}
+                        handleEndMonthChange={handleEndMonthChange}
+                        handleTodayClick={handleTodayClick}
+                        selectedDays={selectedDays}
+                        {...rest}
+                    />
+                ) : (
+                    <DayPicker
+                        className={clsx(
+                            "ui-date-picker rounded-lg pt-3",
+                            useDateRangeStyle ? "date-range-picker" : null,
+                            getDayContent ? "has-custom-content" : null,
+                            modifiers.waitlist ? "has-custom-content" : null,
+                        )}
+                        todayButton="Today"
+                        selectedDays={selectedDays}
+                        month={currentMonth}
+                        modifiers={{ ...modifiers, ...rangeModifier }}
+                        disabledDays={disabledDays}
+                        captionElement={CaptionElement}
+                        renderDay={renderDay}
+                        navbarElement={NavbarElement}
+                        onDayClick={handleDayClick}
+                        onMonthChange={handleMonthChange}
+                        onTodayButtonClick={handleTodayClick}
+                        {...rest}
+                    />
+                )}
             </div>
 
             {components.Footer ? <components.Footer /> : null}
 
-            {useDateRangeStyle && shouldShowRelativeRanges && (
+            {isDateRangeStyle && shouldShowRelativeRanges && (
                 <div className="ml-auto w-6/12 pl-5 pr-10 pb-5">
                     <RelativeDateRange
                         value={rangeName}
@@ -229,6 +241,8 @@ DatePicker.propTypes = {
     onMonthChange: PropTypes.func,
     disabledDays: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func]),
     shouldShowYearPicker: PropTypes.bool,
+    isDateRangeStyle: PropTypes.bool,
+    isRangeVariant: PropTypes.bool,
     getDayContent: PropTypes.func,
     modifiers: PropTypes.object,
     ranges: PropTypes.arrayOf(PropTypes.oneOf(["day", "week", "month", "quarter", "year"])),