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

X2-9506 added future date range for relative date range picker #340

Merged
merged 14 commits into from
Oct 3, 2024
Merged

X2-9506 added future date range for relative date range picker #340

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
502ac38
added future date range for relative date range picker
SemenStruchev Aug 13, 2024
d2102d4
resolve feedback
SemenStruchev Aug 27, 2024
9a088ce
Merge branch 'master' into X2-9506-updated
rushi Aug 28, 2024
f99b778
Merge branch 'master' into X2-9506-updated
tanushreec Aug 29, 2024
83ef89b
Merge branch 'master' into X2-9506-updated
tanushreec Sep 18, 2024
07fdbb6
Merge branch 'xola:master' into X2-9506-updated
SemenStruchev Sep 18, 2024
67bcc2a
resolve feedback
SemenStruchev Sep 18, 2024
7861839
added prop
SemenStruchev Sep 18, 2024
3226262
resolve feedback
SemenStruchev Sep 18, 2024
177efe5
fix lint
SemenStruchev Sep 18, 2024
e9209a1
fix lint
SemenStruchev Sep 18, 2024
8107912
resolve feedback
SemenStruchev Sep 27, 2024
8857ccf
added leading options to relative date tange
SemenStruchev Sep 30, 2024
0d1d2fb
resolve feedback
SemenStruchev Oct 1, 2024
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
2 changes: 2 additions & 0 deletions src/components/DatePicker/DatePicker.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export const DatePicker = ({
modifiers = {},
ranges,
shouldShowRelativeRanges = false,
isFutureDatesAllowed = false,
components = {},
getTooltip,
upcomingDates,
Expand Down Expand Up @@ -298,6 +299,7 @@ export const DatePicker = ({
value={rangeName}
ranges={ranges}
timezoneName={timezoneName}
isFutureDatesAllowed={isFutureDatesAllowed}
onChange={handleRelativeRangeChanged}
onSubmit={onSubmitDateRange}
/>
Expand Down
147 changes: 90 additions & 57 deletions src/components/DatePicker/RelativeDateRange.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,114 +4,96 @@ import { Button, Select } from "../..";
import { now, toDate } from "../../helpers/date";

const options = {
// Day
YESTERDAY: "P1D,yesterday",
TODAY: "P1D,today",
NEXT_DAY: "P1D,next day",

// Week
LAST_WEEK: "P1W,last week",
TRAILING_WEEK: "P1W,-1 week",
THIS_WEEK: "P1W,this week",
NEXT_WEEK: "P1W,next week",

// Month
LAST_MONTH: "P1M,first day of last month",
TRAILING_MONTH: "P1M,-1 month",
THIS_MONTH: "P1M,first day of this month",
NEXT_MONTH: "P1M,next month",

// Quarter
LAST_QUARTER: "P3M,first day of last quarter",
TRAILING_QUARTER: "P3M,-3 months",
THIS_QUARTER: "P3M,first day of this quarter",
NEXT_QUARTER: "P3M,next quarter",

// Year
LAST_YEAR: "P1Y,first day of January last year",
TRAILING_YEAR: "P1Y,-1 year",
THIS_YEAR: "P1Y,first day of this year",
NEXT_YEAR: "P1Y,next year",
};

export const dateRanges = {
day: {
label: "Day",
options: [
{
value: options.YESTERDAY,
label: "Yesterday",
},
{
value: options.TODAY,
label: "Today",
},
{ value: options.YESTERDAY, label: "Yesterday" },
{ value: options.TODAY, label: "Today" },
{ value: options.NEXT_DAY, label: "Next Day" },
],
},

week: {
label: "Week",
options: [
{
value: options.LAST_WEEK,
label: "Last Week",
},
{
value: options.TRAILING_WEEK,
label: "Trailing Week",
},
{
value: options.THIS_WEEK,
label: "This Week",
},
{ value: options.LAST_WEEK, label: "Last Week" },
{ value: options.TRAILING_WEEK, label: "Trailing Week" },
{ value: options.THIS_WEEK, label: "This Week" },
{ value: options.NEXT_WEEK, label: "Next Week" },
],
},

month: {
label: "Month",
options: [
{
value: options.LAST_MONTH,
label: "Last Month",
},
{
value: options.TRAILING_MONTH,
label: "Trailing Month",
},
{
value: options.THIS_MONTH,
label: "This Month",
},
{ value: options.LAST_MONTH, label: "Last Month" },
{ value: options.TRAILING_MONTH, label: "Trailing Month" },
{ value: options.THIS_MONTH, label: "This Month" },
{ value: options.NEXT_MONTH, label: "Next Month" },
],
},

quarter: {
label: "Quarter",
options: [
{
value: options.LAST_QUARTER,
label: "Last Quarter",
},
{
value: options.TRAILING_QUARTER,
label: "Trailing Quarter",
},
{
value: options.THIS_QUARTER,
label: "This Quarter",
},
{ value: options.LAST_QUARTER, label: "Last Quarter" },
{ value: options.TRAILING_QUARTER, label: "Trailing Quarter" },
{ value: options.THIS_QUARTER, label: "This Quarter" },
{ value: options.NEXT_QUARTER, label: "Next Quarter" },
],
},

year: {
label: "Year",
options: [
{
value: options.LAST_YEAR,
label: "Last Year",
},
{
value: options.TRAILING_YEAR,
label: "Trailing Year",
},
{
value: options.THIS_YEAR,
label: "This Year",
},
{ value: options.LAST_YEAR, label: "Last Year" },
{ value: options.TRAILING_YEAR, label: "Trailing Year" },
{ value: options.THIS_YEAR, label: "This Year" },
{ value: options.NEXT_YEAR, label: "Next Year" },
],
},
};

// List of future date options
const futureDates = new Set([
options.NEXT_DAY,
options.NEXT_WEEK,
options.NEXT_MONTH,
options.NEXT_QUARTER,
options.NEXT_YEAR,
]);

const handlers = {
[options.YESTERDAY]: (timezone) => {
const yesterday = now(null, timezone).subtract(1, "day");
Expand All @@ -128,6 +110,14 @@ const handlers = {
};
},

[options.NEXT_DAY]: (timezone) => {
const nextDay = now(null, timezone).add(1, "day");
return {
from: toDate(nextDay.startOf("day")),
to: toDate(nextDay.endOf("day"), false),
};
},

[options.LAST_WEEK]: (timezone) => {
const lastWeek = now(null, timezone).subtract(7, "day");
return {
Expand All @@ -150,6 +140,14 @@ const handlers = {
};
},

[options.NEXT_WEEK]: (timezone) => {
const nextWeek = now(null, timezone).add(1, "week");
return {
from: toDate(nextWeek.startOf("week")),
to: toDate(nextWeek.endOf("week"), false),
};
},

[options.LAST_MONTH]: (timezone) => {
const lastMonth = now(null, timezone).subtract(1, "month");
return {
Expand All @@ -170,6 +168,14 @@ const handlers = {
to: toDate(now(null, timezone).endOf("month"), false),
}),

[options.NEXT_MONTH]: (timezone) => {
const nextMonth = now(null, timezone).add(1, "month");
return {
from: toDate(nextMonth.startOf("month")),
to: toDate(nextMonth.endOf("month"), false),
};
},

[options.LAST_QUARTER]: (timezone) => {
return {
from: toDate(now(null, timezone).startOf("quarter").subtract(3, "month").startOf("month")),
Expand All @@ -191,6 +197,14 @@ const handlers = {
};
},

[options.NEXT_QUARTER]: (timezone) => {
const nextQuarter = now(null, timezone).add(1, "quarter");
return {
from: toDate(nextQuarter.startOf("quarter")),
to: toDate(nextQuarter.endOf("quarter"), false),
};
},

[options.LAST_YEAR]: (timezone) => {
const lastYear = now(null, timezone).subtract(1, "year");
return {
Expand All @@ -210,6 +224,14 @@ const handlers = {
from: toDate(now(null, timezone).startOf("year")),
to: toDate(now(null, timezone).endOf("year"), false),
}),

[options.NEXT_YEAR]: (timezone) => {
const nextYear = now(null, timezone).add(1, "year");
return {
from: toDate(nextYear.startOf("year")),
to: toDate(nextYear.endOf("year"), false),
};
},
};

export const RelativeDateRange = ({
Expand All @@ -220,13 +242,23 @@ export const RelativeDateRange = ({
onChange,
onSubmit,
timezoneName,
isFutureDatesAllowed = false, // This prop used to be able to select Future Dates in RelativeDateRange,
}) => {
const handleChange = (e) => {
const rangeName = e.target.value;
const range = handlers[rangeName](timezoneName);
onChange(rangeName, range);
};

const filterFutureDates = (options) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this func. we are try moving out from component

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes please. move it out of the component.

if (!isFutureDatesAllowed) {
// Filter out options if they are in the futureDates Set
return options.filter((option) => !futureDates.has(option.value));
}

return options;
};

return (
<div className="flex space-x-2">
<Select size="medium" value={value} className="pr-8 leading-5" onChange={handleChange}>
Expand All @@ -236,7 +268,7 @@ export const RelativeDateRange = ({

return (
<optgroup key={rangeKey} label={range.label}>
{range.options.map((option) => (
{filterFutureDates(range.options).map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
Expand All @@ -258,4 +290,5 @@ RelativeDateRange.propTypes = {
showApply: PropTypes.bool,
value: PropTypes.string,
timezoneName: PropTypes.string,
isFutureDatesAllowed: PropTypes.bool,
};
Loading