Revert "X2-6907 Setting default as no date for DatePickerPopover" (#288)

xola · Nov 28, 2023 · 0450c39 · 0450c39
1 parent ccd99a7
commit 0450c39
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 43 deletions.
diff --git a/src/components/DatePicker/DatePicker.jsx b/src/components/DatePicker/DatePicker.jsx
@@ -40,27 +40,16 @@ export const DatePicker = ({
     timezoneName = null, // seller timezone (e.g. "America/Los_Angeles") to return correct today date
     ...rest
 }) => {
-    const initialValue = value ? (variant === variants.single ? value : value.from) : null;
-    const [currentMonth, setCurrentMonth] = useState(initialValue ?? dayjs().toDate());
-    const [startMonth, setStartMonth] = useState(() => {
-        if (!value || !value.from) {
-            return new Date();
-        }
-
-        return value.from;
-    });
-    const [endMonth, setEndMonth] = useState(() => {
-        if (!value || !value.to || !value.from) {
-            return dayjs(new Date()).add(1, "month").toDate();
-        }
-
-        return dayjs(value.to).isSame(dayjs(value.from), "month")
-            ? dayjs(value.from).add(1, "month").toDate()
-            : value.to;
-    });
+    const initialValue = variant === variants.single ? value : value?.from;
+    const [currentMonth, setCurrentMonth] = useState(initialValue);
+    const [startMonth, setStartMonth] = useState(value?.from);
+    const [endMonth, setEndMonth] = useState(
+        dayjs(value?.to).isSame(dayjs(value?.from), "month")
+            ? dayjs(value?.from).add(1, "month").toDate()
+            : value?.to ?? dayjs(value?.from).add(1, "month").toDate(),
+    );
     const [rangeName, setRangeName] = useState("");
     const isRangeVariant = variant === variants.range;
-    const isValidValue = value && value.from && value.to;
 
     // Sync internal month state with outside.
     useEffect(() => {
@@ -126,11 +115,11 @@ export const DatePicker = ({
 
         setRangeName("");
         if (isRangeVariant) {
-            if (isValidValue) {
+            if (value?.from && value.to) {
                 // This allows us to easily select another date range,
                 // if both dates are selected.
                 onChange({ from: day, to: null }, options, event);
-            } else if (value && (value.from || value.to) && (value.from || value.to).getTime() === day.getTime()) {
+            } else if ((value?.from || value.to).getTime() === day.getTime()) {
                 const from = dayjs(day).startOf("day").toDate();
                 const to = dayjs(day).endOf("day").toDate();
 
@@ -143,10 +132,9 @@ export const DatePicker = ({
         }
     };
 
-    const CaptionElement =
-        shouldShowYearPicker && currentMonth
-            ? ({ date }) => <MonthYearSelector date={date} currentMonth={currentMonth} onChange={handleMonthChange} />
-            : undefined;
+    const CaptionElement = shouldShowYearPicker
+        ? ({ date }) => <MonthYearSelector date={date} currentMonth={currentMonth} onChange={handleMonthChange} />
+        : undefined;
 
     const renderDay = (date) => {
         const tooltipContent = getTooltip?.(date);
@@ -173,9 +161,10 @@ export const DatePicker = ({
         );
     };
 
-    const rangeModifier = isRangeVariant && isValidValue ? { start: value.from, end: value.to } : null;
+    const rangeModifier = isRangeVariant ? { start: value?.from, end: value.to } : null;
+
     // Comparing `from` and `to` dates hides a weird CSS style when you select the same date twice in a date range.
-    const useDateRangeStyle = isRangeVariant && isValidValue && value.from?.getTime() !== value.to?.getTime();
+    const useDateRangeStyle = isRangeVariant && value?.from?.getTime() !== value.to?.getTime();
     // Return the same value if it is already dayjs object or has range variant otherwise format it to dayJs object
     const selectedDays = value && (dayjs.isDayjs(value) || isRangeVariant ? value : dayjs(value).toDate());
 
@@ -236,7 +225,7 @@ export const DatePicker = ({
             {components.Footer ? <components.Footer /> : null}
 
             {useDateRangeStyle && shouldShowRelativeRanges && (
-                <div className="ml-auto w-6/12 pb-5 pl-5 pr-10">
+                <div className="ml-auto w-6/12 pl-5 pr-10 pb-5">
                     <RelativeDateRange
                         value={rangeName}
                         ranges={ranges}

diff --git a/src/components/DatePicker/RangeDatePicker.jsx b/src/components/DatePicker/RangeDatePicker.jsx
@@ -28,17 +28,13 @@ const RangeDatePicker = ({
 }) => {
     const isStartDateIsTheSameMonth = dayjs(value?.from).isSame(dayjs(value?.to), "month");
 
-    const CaptionStartElement =
-        shouldShowYearPicker && startMonth
-            ? ({ date }) => (
-                  <MonthYearSelector date={date} currentMonth={startMonth} onChange={handleStartMonthChange} />
-              )
-            : undefined;
-
-    const CaptionEndElement =
-        shouldShowYearPicker && endMonth
-            ? ({ date }) => <MonthYearSelector date={date} currentMonth={endMonth} onChange={handleEndMonthChange} />
-            : undefined;
+    const CaptionStartElement = shouldShowYearPicker
+        ? ({ date }) => <MonthYearSelector date={date} currentMonth={startMonth} onChange={handleStartMonthChange} />
+        : undefined;
+
+    const CaptionEndElement = shouldShowYearPicker
+        ? ({ date }) => <MonthYearSelector date={date} currentMonth={endMonth} onChange={handleEndMonthChange} />
+        : undefined;
 
     const isDisabledStartDays = (date) => {
         if (isFunction(disabledDays)) {
@@ -137,7 +133,7 @@ const RangeDatePicker = ({
                 disabledDays={isDisabledStartDays}
                 navbarElement={NavbarElement}
                 captionElement={CaptionStartElement}
-                selectedDays={[selectedDays?.from, selectedDays]}
+                selectedDays={selectedDays}
                 renderDay={renderStartDay}
                 getTooltip={getTooltip}
                 onDayClick={(day, options, event) => handleDayClick(day, options, event, true)}

diff --git a/src/stories/DataDisplay/DateRangePicker.stories.js b/src/stories/DataDisplay/DateRangePicker.stories.js
@@ -63,9 +63,11 @@ export const RelativeDateRanges = () => {
 export const DateRangeWithInput = ({ shouldShowRelativeRanges, ranges }) => {
     const defaultValue = { from: today, to: dayjs(today).add(7, "days").toDate() };
     const [value, setValue] = useState(defaultValue);
+    const [displayValue, setDisplayValue] = useState(defaultValue);
 
-    const handleChange = (newValue) => {
+    const handleChange = (newValue, displayValue) => {
         setValue(newValue);
+        setDisplayValue(displayValue ?? newValue);
     };
 
     return (
@@ -79,9 +81,9 @@ export const DateRangeWithInput = ({ shouldShowRelativeRanges, ranges }) => {
                 onChange={handleChange}
             >
                 <div className="w-75 cursor-pointer bg-gray-lighter p-3">
-                    {value.from ? dayjs(value.from).format("LL") : "Pending"}
+                    {dayjs(displayValue.from).format("LL")}
                     &nbsp;to&nbsp;
-                    {value.to ? dayjs(value.to).format("LL") : "Pending"}
+                    {displayValue.to ? dayjs(displayValue.to).format("LL") : "Pending"}
                 </div>
             </DatePickerPopover>
         </div>