Skip to content

Commit 2bd10c5

Browse files
hoorayimhelpinghoorayimhelping
committed
cleanup
1 parent 9f39fd9 commit 2bd10c5

File tree

6 files changed

+552
-143
lines changed

6 files changed

+552
-143
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@
4747
"publish:click-ui": "yarn test && yarn build && yarn npm publish",
4848
"storybook": "storybook dev -p 6006",
4949
"test": "vitest",
50-
"typecheck": "tsc --noEmit",
51-
"watch": "vitest --watch"
50+
"test:watch": "vitest --watch",
51+
"typecheck": "tsc --noEmit"
5252
},
5353
"dependencies": {
5454
"@h6s/calendar": "2.0.1",

‎src/components/DatePicker/Common.tsx‎

Lines changed: 86 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,21 @@ import { Container } from "../Container/Container";
66
import { useCalendar, UseCalendarOptions } from "@h6s/calendar";
77
import { IconButton } from "../IconButton/IconButton";
88
import { Text } from "../Typography/Text/Text";
9-
import { headerDateFormatter, selectedDateFormatter, selectedDateTimeFormatter, weekdayFormatter } from "./utils";
9+
import {
10+
headerDateFormatter,
11+
selectedDateFormatter,
12+
selectedDateTimeDateFormatter,
13+
selectedDateTimeFormatter,
14+
timeFormatter,
15+
weekdayFormatter,
16+
} from "./utils";
1017

1118
const explicitWidth = "250px";
1219

13-
const HighlightedInputWrapper = styled(InputWrapper)<{ $isActive: boolean, $width?: string }>`
20+
const HighlightedInputWrapper = styled(InputWrapper)<{
21+
$isActive: boolean;
22+
$width?: string;
23+
}>`
1424
${({ $isActive, $width, theme }) => {
1525
return `border: ${theme.click.datePicker.dateOption.stroke} solid ${
1626
$isActive
@@ -93,7 +103,7 @@ export const DateRangePickerInput = ({
93103
if (selectedEndDate) {
94104
formattedValue = (
95105
<span>
96-
{selectedDateFormatter.format(selectedStartDate)} –{" "}
106+
{selectedDateFormatter.format(selectedStartDate)} -{" "}
97107
{selectedDateFormatter.format(selectedEndDate)}
98108
</span>
99109
);
@@ -105,7 +115,7 @@ export const DateRangePickerInput = ({
105115
color="muted"
106116
component="span"
107117
>
108-
– end date
118+
- end date
109119
</Text>
110120
</span>
111121
);
@@ -135,19 +145,23 @@ export const DateRangePickerInput = ({
135145
interface DateTimePickerInputProps {
136146
isActive: boolean;
137147
disabled: boolean;
148+
endTimeIsSet: boolean;
138149
id?: string;
139150
placeholder?: string;
140151
selectedEndDate?: Date;
141152
selectedStartDate?: Date;
153+
startTimeIsSet: boolean;
142154
}
143155

144156
export const DateTimePickerInput = ({
145157
isActive,
146158
disabled,
159+
endTimeIsSet,
147160
id,
148161
placeholder,
149162
selectedEndDate,
150163
selectedStartDate,
164+
startTimeIsSet,
151165
}: DateTimePickerInputProps) => {
152166
const defaultId = useId();
153167

@@ -161,24 +175,74 @@ export const DateTimePickerInput = ({
161175
);
162176
if (selectedStartDate) {
163177
if (selectedEndDate) {
164-
formattedValue = (
165-
<span>
166-
{selectedDateTimeFormatter.format(selectedStartDate).replace("AM", "am").replace("PM", 'pm')} –{" "}
167-
{selectedDateTimeFormatter.format(selectedEndDate).replace("AM", "am").replace("PM", 'pm')}
168-
</span>
169-
);
178+
if (endTimeIsSet) {
179+
formattedValue = (
180+
<span>
181+
{selectedDateTimeFormatter
182+
.format(selectedStartDate)
183+
.replace("AM", "am")
184+
.replace("PM", "pm")}{" "}
185+
-{" "}
186+
{selectedDateTimeFormatter
187+
.format(selectedEndDate)
188+
.replace("AM", "am")
189+
.replace("PM", "pm")}
190+
</span>
191+
);
192+
} else {
193+
formattedValue = (
194+
<span>
195+
{selectedDateTimeDateFormatter.format(selectedStartDate)},{" "}
196+
{timeFormatter
197+
.format(selectedStartDate)
198+
.replace("AM", "am")
199+
.replace("PM", "pm")}{" "}
200+
- {selectedDateTimeDateFormatter.format(selectedEndDate)},{" "}
201+
<Text
202+
color="muted"
203+
component="span"
204+
>
205+
00:00
206+
</Text>
207+
</span>
208+
);
209+
}
170210
} else {
171-
formattedValue = (
172-
<span>
173-
{selectedDateTimeFormatter.format(selectedStartDate).replace("AM", "am").replace("PM", 'pm')}{" "}
174-
<Text
175-
color="muted"
176-
component="span"
177-
>
178-
– end date
179-
</Text>
180-
</span>
181-
);
211+
if (startTimeIsSet) {
212+
formattedValue = (
213+
<span>
214+
{selectedDateTimeFormatter
215+
.format(selectedStartDate)
216+
.replace("AM", "am")
217+
.replace("PM", "pm")}{" "}
218+
<Text
219+
color="muted"
220+
component="span"
221+
>
222+
- end date
223+
</Text>
224+
</span>
225+
);
226+
} else {
227+
formattedValue = (
228+
<span>
229+
{selectedDateTimeDateFormatter.format(selectedStartDate)},{" "}
230+
<Text
231+
color="muted"
232+
component="span"
233+
>
234+
00:00
235+
</Text>
236+
<Text
237+
color="muted"
238+
component="span"
239+
>
240+
{" "}
241+
- end date
242+
</Text>
243+
</span>
244+
);
245+
}
182246
}
183247
}
184248

@@ -195,7 +259,7 @@ export const DateTimePickerInput = ({
195259
<InputElement
196260
$hasStartContent
197261
as="div"
198-
data-testid="daterangepicker-input"
262+
data-testid="datetimepicker-input"
199263
>
200264
{formattedValue}
201265
</InputElement>

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

Lines changed: 77 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -73,96 +73,96 @@ export const PredefinedDatesScrollable: Story = {
7373
const now = dayjs();
7474
const predefinedTimesList: Array<DateRangeListItem> = [
7575
{
76-
dateRange: {
77-
startDate: now.subtract(15, "minute").toDate(),
78-
endDate: now.toDate(),
76+
dateRange: {
77+
startDate: now.subtract(15, "minute").toDate(),
78+
endDate: now.toDate(),
79+
},
80+
label: "Past 15 minutes",
7981
},
80-
label: "Past 15 minutes",
81-
},
82-
{
83-
dateRange: {
84-
startDate: now.subtract(30, "minute").toDate(),
85-
endDate: now.toDate(),
82+
{
83+
dateRange: {
84+
startDate: now.subtract(30, "minute").toDate(),
85+
endDate: now.toDate(),
86+
},
87+
label: "Past 30 minutes",
8688
},
87-
label: "Past 30 minutes",
88-
},
89-
{
90-
dateRange: {
91-
startDate: now.subtract(1, "hour").toDate(),
92-
endDate: now.toDate(),
89+
{
90+
dateRange: {
91+
startDate: now.subtract(1, "hour").toDate(),
92+
endDate: now.toDate(),
93+
},
94+
label: "Past hour",
9395
},
94-
label: "Past hour",
95-
},
96-
{
97-
dateRange: {
98-
startDate: now.subtract(2, "hour").toDate(),
99-
endDate: now.toDate(),
96+
{
97+
dateRange: {
98+
startDate: now.subtract(2, "hour").toDate(),
99+
endDate: now.toDate(),
100+
},
101+
label: "Past 2 hours",
100102
},
101-
label: "Past 2 hours",
102-
},
103-
{
104-
dateRange: {
105-
startDate: now.subtract(6, "hour").toDate(),
106-
endDate: now.toDate(),
103+
{
104+
dateRange: {
105+
startDate: now.subtract(6, "hour").toDate(),
106+
endDate: now.toDate(),
107+
},
108+
label: "Past 6 hours",
107109
},
108-
label: "Past 6 hours",
109-
},
110-
{
111-
dateRange: {
112-
startDate: now.subtract(12, "hour").toDate(),
113-
endDate: now.toDate(),
110+
{
111+
dateRange: {
112+
startDate: now.subtract(12, "hour").toDate(),
113+
endDate: now.toDate(),
114+
},
115+
label: "Past 12 hours",
114116
},
115-
label: "Past 12 hours",
116-
},
117-
{
118-
dateRange: {
119-
startDate: now.subtract(1, "day").toDate(),
120-
endDate: now.toDate(),
117+
{
118+
dateRange: {
119+
startDate: now.subtract(1, "day").toDate(),
120+
endDate: now.toDate(),
121+
},
122+
label: "Past day",
121123
},
122-
label: "Past day",
123-
},
124-
{
125-
dateRange: {
126-
startDate: now.subtract(1, "week").toDate(),
127-
endDate: now.toDate(),
124+
{
125+
dateRange: {
126+
startDate: now.subtract(1, "week").toDate(),
127+
endDate: now.toDate(),
128+
},
129+
label: "Past week",
128130
},
129-
label: "Past week",
130-
},
131-
{
132-
dateRange: {
133-
startDate: now.subtract(2, "week").toDate(),
134-
endDate: now.toDate(),
131+
{
132+
dateRange: {
133+
startDate: now.subtract(2, "week").toDate(),
134+
endDate: now.toDate(),
135+
},
136+
label: "Past 2 weeks",
135137
},
136-
label: "Past 2 weeks",
137-
},
138-
{
139-
dateRange: {
140-
startDate: now.subtract(1, "month").toDate(),
141-
endDate: now.toDate(),
138+
{
139+
dateRange: {
140+
startDate: now.subtract(1, "month").toDate(),
141+
endDate: now.toDate(),
142+
},
143+
label: "Past month",
142144
},
143-
label: "Past month",
144-
},
145-
{
146-
dateRange: {
147-
startDate: now.subtract(3, "month").toDate(),
148-
endDate: now.toDate(),
145+
{
146+
dateRange: {
147+
startDate: now.subtract(3, "month").toDate(),
148+
endDate: now.toDate(),
149+
},
150+
label: "Past 3 months",
149151
},
150-
label: "Past 3 months",
151-
},
152-
{
153-
dateRange: {
154-
startDate: now.subtract(6, "month").toDate(),
155-
endDate: now.toDate(),
152+
{
153+
dateRange: {
154+
startDate: now.subtract(6, "month").toDate(),
155+
endDate: now.toDate(),
156+
},
157+
label: "Past 6 months",
156158
},
157-
label: "Past 6 months",
158-
},
159-
{
160-
dateRange: {
161-
startDate: now.subtract(1, "year").toDate(),
162-
endDate: now.toDate(),
159+
{
160+
dateRange: {
161+
startDate: now.subtract(1, "year").toDate(),
162+
endDate: now.toDate(),
163+
},
164+
label: "Past year",
163165
},
164-
label: "Past year",
165-
}
166166
];
167167

168168
return (
@@ -214,7 +214,6 @@ export const DateTimeFutureStartDatesDisabled: Story = {
214214
},
215215
};
216216

217-
218217
// export const PredefinedDatesArbitraryDates: Story = {
219218
// render: (args: Args) => {
220219
// const endDate = args.endDate ? new Date(args.endDate) : undefined;

0 commit comments

Comments
 (0)