Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Nov 28, 2023
+30 −43
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 17 additions & 28 deletions src/components/DatePicker/DatePicker.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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();

Expand All @@ -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);
Expand All @@ -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());

Expand Down Expand Up @@ -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}
Expand Down
20 changes: 8 additions & 12 deletions src/components/DatePicker/RangeDatePicker.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand Down Expand Up @@ -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)}
Expand Down
8 changes: 5 additions & 3 deletions src/stories/DataDisplay/DateRangePicker.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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>
Expand Down
Loading