Skip to content

Commit 06efeb7

Browse files
hoorayimhelpinghoorayimhelping
committed
show times scrolling list
1 parent 99cbd09 commit 06efeb7

File tree

3 files changed

+263
-145
lines changed

3 files changed

+263
-145
lines changed

‎src/components/DatePicker/DateTimePicker.stories.tsx‎

Lines changed: 137 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Args, Meta, StoryObj } from "@storybook/react-vite";
22
import { DateTimePicker } from "./DateTimePicker";
3-
import { getPredefinedTimePeriodsForDateTimePicker } from "./utils";
3+
import { DateRangeListItem, getPredefinedTimePeriodsForDateTimePicker } from "./utils";
4+
import dayjs from "dayjs";
45

56
const meta: Meta<typeof DateTimePicker> = {
67
component: DateTimePicker,
@@ -20,7 +21,7 @@ type Story = StoryObj<typeof meta>;
2021

2122
export const Default: Story = {
2223
args: {
23-
predefinedDatesList: [],
24+
predefinedTimesList: [],
2425
},
2526
render: (args: Args) => {
2627
const endDate = args.endDate ? new Date(args.endDate) : undefined;
@@ -42,14 +43,11 @@ export const Default: Story = {
4243
},
4344
};
4445

45-
export const DateRangeWithMaxRange: Story = {
46-
args: {
47-
maxRangeLength: 15,
48-
predefinedDatesList: [],
49-
},
46+
export const PredefinedTimesDefault: Story = {
5047
render: (args: Args) => {
5148
const endDate = args.endDate ? new Date(args.endDate) : undefined;
5249
const startDate = args.startDate ? new Date(args.startDate) : undefined;
50+
const predefinedTimesList = getPredefinedTimePeriodsForDateTimePicker();
5351

5452
return (
5553
<DateTimePicker
@@ -61,24 +59,111 @@ export const DateRangeWithMaxRange: Story = {
6159
maxRangeLength={args.maxRangeLength}
6260
onSelectDateRange={args.onSelectDateRange}
6361
placeholder={args.placeholder}
62+
predefinedTimesList={predefinedTimesList}
6463
startDate={startDate}
6564
/>
6665
);
6766
},
6867
};
6968

70-
export const DateRangeFutureStartDatesDisabled: Story = {
71-
args: {
72-
futureStartDatesDisabled: true,
73-
predefinedDatesList: [],
74-
},
75-
};
76-
77-
export const PredefinedDatesLastSixMonths: Story = {
69+
export const PredefinedDatesScrollable: Story = {
7870
render: (args: Args) => {
7971
const endDate = args.endDate ? new Date(args.endDate) : undefined;
8072
const startDate = args.startDate ? new Date(args.startDate) : undefined;
81-
const predefinedDatesList = getPredefinedTimePeriodsForDateTimePicker();
73+
const now = dayjs();
74+
const predefinedTimesList: Array<DateRangeListItem> = [
75+
{
76+
dateRange: {
77+
startDate: now.subtract(15, "minute").toDate(),
78+
endDate: now.toDate(),
79+
},
80+
label: "Past 15 minutes",
81+
},
82+
{
83+
dateRange: {
84+
startDate: now.subtract(30, "minute").toDate(),
85+
endDate: now.toDate(),
86+
},
87+
label: "Past 30 minutes",
88+
},
89+
{
90+
dateRange: {
91+
startDate: now.subtract(1, "hour").toDate(),
92+
endDate: now.toDate(),
93+
},
94+
label: "Past hour",
95+
},
96+
{
97+
dateRange: {
98+
startDate: now.subtract(2, "hour").toDate(),
99+
endDate: now.toDate(),
100+
},
101+
label: "Past 2 hours",
102+
},
103+
{
104+
dateRange: {
105+
startDate: now.subtract(6, "hour").toDate(),
106+
endDate: now.toDate(),
107+
},
108+
label: "Past 6 hours",
109+
},
110+
{
111+
dateRange: {
112+
startDate: now.subtract(12, "hour").toDate(),
113+
endDate: now.toDate(),
114+
},
115+
label: "Past 12 hours",
116+
},
117+
{
118+
dateRange: {
119+
startDate: now.subtract(1, "day").toDate(),
120+
endDate: now.toDate(),
121+
},
122+
label: "Past day",
123+
},
124+
{
125+
dateRange: {
126+
startDate: now.subtract(1, "week").toDate(),
127+
endDate: now.toDate(),
128+
},
129+
label: "Past week",
130+
},
131+
{
132+
dateRange: {
133+
startDate: now.subtract(2, "week").toDate(),
134+
endDate: now.toDate(),
135+
},
136+
label: "Past 2 weeks",
137+
},
138+
{
139+
dateRange: {
140+
startDate: now.subtract(1, "month").toDate(),
141+
endDate: now.toDate(),
142+
},
143+
label: "Past month",
144+
},
145+
{
146+
dateRange: {
147+
startDate: now.subtract(3, "month").toDate(),
148+
endDate: now.toDate(),
149+
},
150+
label: "Past 3 months",
151+
},
152+
{
153+
dateRange: {
154+
startDate: now.subtract(6, "month").toDate(),
155+
endDate: now.toDate(),
156+
},
157+
label: "Past 6 months",
158+
},
159+
{
160+
dateRange: {
161+
startDate: now.subtract(1, "year").toDate(),
162+
endDate: now.toDate(),
163+
},
164+
label: "Past year",
165+
}
166+
];
82167

83168
return (
84169
<DateTimePicker
@@ -90,18 +175,21 @@ export const PredefinedDatesLastSixMonths: Story = {
90175
maxRangeLength={args.maxRangeLength}
91176
onSelectDateRange={args.onSelectDateRange}
92177
placeholder={args.placeholder}
93-
predefinedDatesList={predefinedDatesList}
178+
predefinedTimesList={predefinedTimesList}
94179
startDate={startDate}
95180
/>
96181
);
97182
},
98183
};
99184

100-
export const PredefinedDatesNextSixMonths: Story = {
185+
export const DateTimeWithMaxRange: Story = {
186+
args: {
187+
maxRangeLength: 15,
188+
predefinedTimesList: [],
189+
},
101190
render: (args: Args) => {
102191
const endDate = args.endDate ? new Date(args.endDate) : undefined;
103192
const startDate = args.startDate ? new Date(args.startDate) : undefined;
104-
const predefinedDatesList = getPredefinedTimePeriodsForDateTimePicker();
105193

106194
return (
107195
<DateTimePicker
@@ -113,70 +201,43 @@ export const PredefinedDatesNextSixMonths: Story = {
113201
maxRangeLength={args.maxRangeLength}
114202
onSelectDateRange={args.onSelectDateRange}
115203
placeholder={args.placeholder}
116-
predefinedDatesList={predefinedDatesList}
117204
startDate={startDate}
118205
/>
119206
);
120207
},
121208
};
122209

123-
export const PredefinedDatesArbitraryDates: Story = {
124-
render: (args: Args) => {
125-
const endDate = args.endDate ? new Date(args.endDate) : undefined;
126-
const startDate = args.startDate ? new Date(args.startDate) : undefined;
127-
const predefinedDatesList = [
128-
{ startDate: new Date("04/14/2025"), endDate: new Date("05/14/2025") },
129-
{ startDate: new Date("05/14/2025"), endDate: new Date("06/14/2025") },
130-
{ startDate: new Date("06/14/2025"), endDate: new Date("07/14/2025") },
131-
];
132-
133-
return (
134-
<DateTimePicker
135-
key="default"
136-
endDate={endDate}
137-
disabled={args.disabled}
138-
futureDatesDisabled={args.futureDatesDisabled}
139-
futureStartDatesDisabled={args.futureStartDatesDisabled}
140-
maxRangeLength={args.maxRangeLength}
141-
onSelectDateRange={args.onSelectDateRange}
142-
placeholder={args.placeholder}
143-
predefinedDatesList={predefinedDatesList}
144-
startDate={startDate}
145-
/>
146-
);
210+
export const DateTimeFutureStartDatesDisabled: Story = {
211+
args: {
212+
futureStartDatesDisabled: true,
213+
predefinedTimesList: [],
147214
},
148215
};
149216

150-
export const PredefinedDatesScrollable: Story = {
151-
render: (args: Args) => {
152-
const endDate = args.endDate ? new Date(args.endDate) : undefined;
153-
const startDate = args.startDate ? new Date(args.startDate) : undefined;
154-
const predefinedDatesList = [
155-
{ startDate: new Date("09/14/2024"), endDate: new Date("10/14/2024") },
156-
{ startDate: new Date("10/14/2024"), endDate: new Date("11/14/2024") },
157-
{ startDate: new Date("11/14/2024"), endDate: new Date("12/14/2024") },
158-
{ startDate: new Date("12/14/2024"), endDate: new Date("01/14/2025") },
159-
{ startDate: new Date("01/14/2025"), endDate: new Date("02/14/2025") },
160-
{ startDate: new Date("02/14/2025"), endDate: new Date("03/14/2025") },
161-
{ startDate: new Date("03/14/2025"), endDate: new Date("04/14/2025") },
162-
{ startDate: new Date("04/14/2025"), endDate: new Date("05/14/2025") },
163-
{ startDate: new Date("05/14/2025"), endDate: new Date("06/14/2025") },
164-
{ startDate: new Date("06/14/2025"), endDate: new Date("07/14/2025") },
165-
];
166217

167-
return (
168-
<DateTimePicker
169-
key="default"
170-
endDate={endDate}
171-
disabled={args.disabled}
172-
futureDatesDisabled={args.futureDatesDisabled}
173-
futureStartDatesDisabled={args.futureStartDatesDisabled}
174-
maxRangeLength={args.maxRangeLength}
175-
onSelectDateRange={args.onSelectDateRange}
176-
placeholder={args.placeholder}
177-
predefinedDatesList={predefinedDatesList}
178-
startDate={startDate}
179-
/>
180-
);
181-
},
182-
};
218+
// export const PredefinedDatesArbitraryDates: Story = {
219+
// render: (args: Args) => {
220+
// const endDate = args.endDate ? new Date(args.endDate) : undefined;
221+
// const startDate = args.startDate ? new Date(args.startDate) : undefined;
222+
// const predefinedTimesList = [
223+
// { startDate: new Date("04/14/2025"), endDate: new Date("05/14/2025") },
224+
// { startDate: new Date("05/14/2025"), endDate: new Date("06/14/2025") },
225+
// { startDate: new Date("06/14/2025"), endDate: new Date("07/14/2025") },
226+
// ];
227+
228+
// return (
229+
// <DateTimePicker
230+
// key="default"
231+
// endDate={endDate}
232+
// disabled={args.disabled}
233+
// futureDatesDisabled={args.futureDatesDisabled}
234+
// futureStartDatesDisabled={args.futureStartDatesDisabled}
235+
// maxRangeLength={args.maxRangeLength}
236+
// onSelectDateRange={args.onSelectDateRange}
237+
// placeholder={args.placeholder}
238+
// predefinedTimesList={predefinedTimesList}
239+
// startDate={startDate}
240+
// />
241+
// );
242+
// },
243+
// };

0 commit comments

Comments
 (0)