Skip to content

Commit db02d14

Browse files
ArneiArnei
authored
Merge pull request #986 from snoesberger/614-use-reactdatepicker
Replace MUI DatePicker with react-datepicker
2 parents 9a2fe20 + 55db4a1 commit db02d14

7 files changed

Lines changed: 176 additions & 168 deletions

File tree

‎src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect } from "react";
22
import cn from "classnames";
33
import _ from "lodash";
4-
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
4+
import DatePicker from "react-datepicker";
55
import { Formik, FormikErrors, FormikProps } from "formik";
66
import { Field } from "../../../shared/Field";
77
import Notifications from "../../../shared/Notifications";
@@ -195,12 +195,12 @@ const EventDetailsSchedulingTab = ({
195195
: [];
196196

197197
return {
198-
scheduleStartDate: startDate.setHours(0, 0, 0).toString(),
198+
scheduleStartDate: startDate.toString(),
199199
scheduleStartHour: source.start.hour != null ? makeTwoDigits(source.start.hour) : "",
200200
scheduleStartMinute: source.start.minute != null ? makeTwoDigits(source.start.minute) : "",
201201
scheduleDurationHours: source.duration.hour != null ? makeTwoDigits(source.duration.hour) : "",
202202
scheduleDurationMinutes: source.duration.minute != null ? makeTwoDigits(source.duration.minute): "",
203-
scheduleEndDate: endDate.setHours(0, 0, 0).toString(),
203+
scheduleEndDate: endDate.toString(),
204204
scheduleEndHour: source.end.hour != null ? makeTwoDigits(source.end.hour): "",
205205
scheduleEndMinute: source.end.minute != null ? makeTwoDigits(source.end.minute): "",
206206
captureAgent: source.device.name,
@@ -286,8 +286,7 @@ const EventDetailsSchedulingTab = ({
286286
/* date picker for start date */
287287
<DatePicker
288288
name="scheduleStartDate"
289-
// tabIndex={1}
290-
value={new Date(formik.values.scheduleStartDate)}
289+
selected={new Date(formik.values.scheduleStartDate)}
291290
onChange={(value: Date | null) =>
292291
value && changeStartDate(
293292
value,
@@ -297,6 +296,14 @@ const EventDetailsSchedulingTab = ({
297296
checkConflictsWrapper
298297
)
299298
}
299+
showYearDropdown
300+
showMonthDropdown
301+
yearDropdownItemNumber={2}
302+
dateFormat="P"
303+
popperClassName="datepicker-custom"
304+
className="datepicker-custom-input"
305+
portalId="root"
306+
locale={currentLanguage?.dateLocale}
300307
/>
301308
) : (
302309
<>

‎src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
22
import { useTranslation } from "react-i18next";
33
import cn from "classnames";
44
import Notifications from "../../../shared/Notifications";
5-
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
5+
import DatePicker from "react-datepicker";
66
import {
77
getCurrentLanguageInformation,
88
getTimezoneOffset,
@@ -444,7 +444,7 @@ const Schedule = <T extends {
444444
<td>
445445
<DatePicker
446446
name="scheduleStartDate"
447-
value={typeof formik.values.scheduleStartDate === "string" ? parseISO(formik.values.scheduleStartDate): formik.values.scheduleStartDate}
447+
selected={typeof formik.values.scheduleStartDate === "string" ? parseISO(formik.values.scheduleStartDate): formik.values.scheduleStartDate}
448448
onChange={(value) => {
449449
if (formik.values.sourceMode === "SCHEDULE_MULTIPLE") {
450450
value && changeStartDateMultiple(
@@ -460,6 +460,14 @@ const Schedule = <T extends {
460460
);
461461
}
462462
}}
463+
showYearDropdown
464+
showMonthDropdown
465+
yearDropdownItemNumber={2}
466+
dateFormat="P"
467+
popperClassName="datepicker-custom"
468+
className="datepicker-custom-input"
469+
portalId="root"
470+
locale={currentLanguage?.dateLocale}
463471
/>
464472
</td>
465473
</tr>
@@ -474,14 +482,22 @@ const Schedule = <T extends {
474482
<td>
475483
<DatePicker
476484
name="scheduleEndDate"
477-
value={typeof formik.values.scheduleEndDate === "string" ? parseISO(formik.values.scheduleEndDate) : formik.values.scheduleEndDate}
485+
selected={typeof formik.values.scheduleEndDate === "string" ? parseISO(formik.values.scheduleEndDate) : formik.values.scheduleEndDate}
478486
onChange={(value) =>
479487
value && changeEndDateMultiple(
480488
value,
481489
formik.values,
482490
formik.setFieldValue
483491
)
484492
}
493+
showYearDropdown
494+
showMonthDropdown
495+
yearDropdownItemNumber={2}
496+
dateFormat="P"
497+
popperClassName="datepicker-custom"
498+
className="datepicker-custom-input"
499+
portalId="root"
500+
locale={currentLanguage?.dateLocale}
485501
/>
486502
</td>
487503
</tr>

‎src/components/shared/TableFilters.tsx‎

Lines changed: 50 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React, { useRef, useState, useEffect } from "react";
1+
import React, { useState, useEffect } from "react";
22
import { useTranslation } from "react-i18next";
3-
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
3+
import DatePicker from "react-datepicker";
44
import {
55
getFilters,
66
getSecondFilter,
@@ -26,6 +26,7 @@ import { useHotkeys } from "react-hotkeys-hook";
2626
import moment from "moment";
2727
import { AppThunk, useAppDispatch, useAppSelector } from "../../store";
2828
import { renderValidDate } from "../../utils/dateUtils";
29+
import { getCurrentLanguageInformation } from "../../utils/utils";
2930
import { Tooltip } from "./Tooltip";
3031
import DropDown from "./DropDown";
3132
import { AsyncThunk } from "@reduxjs/toolkit";
@@ -146,77 +147,34 @@ const TableFilters = ({
146147
// eslint-disable-next-line react-hooks/exhaustive-deps
147148
}, [itemValue]);
148149

149-
// Set the sate of startDate and endDate picked with datepicker
150-
const handleDatepickerChange = async (date: Date | null, isStart = false) => {
151-
if (date === null) {
152-
return;
153-
}
154-
155-
if (isStart) {
156-
date.setHours(0);
157-
date.setMinutes(0);
158-
date.setSeconds(0);
159-
setStartDate(date);
160-
} else {
161-
date.setHours(23);
162-
date.setMinutes(59);
163-
date.setSeconds(59);
164-
setEndDate(date);
165-
}
166-
};
167-
168-
// If both dates are set, set the value for the startDate filter
169-
// If the just changed, it can be passed here so we don't have wait a render
170-
// cycle for the useState state to update
171-
const handleDatepickerConfirm = async (date?: Date | null, isStart = false) => {
172-
if (date === null) {
173-
return;
174-
}
175-
176-
let myStartDate = startDate;
177-
let myEndDate = endDate;
178-
if (date && isStart) {
179-
myStartDate = date;
180-
myStartDate.setHours(0);
181-
myStartDate.setMinutes(0);
182-
myStartDate.setSeconds(0);
183-
}
184-
if (date && !isStart) {
185-
myEndDate = date;
186-
myEndDate.setHours(23);
187-
myEndDate.setMinutes(59);
188-
myEndDate.setSeconds(59);
189-
}
190-
191-
if (myStartDate && myEndDate && moment(myStartDate).isValid() && moment(myEndDate).isValid()) {
192-
let filter = filterMap.find(({ name }) => name === selectedFilter);
193-
if (filter) {
194-
dispatch(editFilterValue({
195-
filterName: filter.name,
196-
value: myStartDate.toISOString() + "/" + myEndDate.toISOString()
197-
}));
198-
setFilterSelector(false);
199-
dispatch(removeSelectedFilter());
200-
// Reload of resource after going to very first page.
201-
dispatch(goToPage(0))
202-
await dispatch(loadResource());
203-
dispatch(loadResourceIntoTable());
150+
const handleDatepicker = async (dates?: [Date | undefined | null, Date | undefined | null]) => {
151+
if (dates != null) {
152+
let [start, end] = dates;
153+
154+
start?.setHours(0);
155+
start?.setMinutes(0);
156+
start?.setSeconds(0)
157+
end?.setHours(23);
158+
end?.setMinutes(59);
159+
end?.setSeconds(59);
160+
161+
if (start && end && moment(start).isValid() && moment(end).isValid()) {
162+
let filter = filterMap.find(({ name }) => name === selectedFilter);
163+
if (filter) {
164+
dispatch(editFilterValue({
165+
filterName: filter.name,
166+
value: start.toISOString() + "/" + end.toISOString()
167+
}));
168+
setFilterSelector(false);
169+
dispatch(removeSelectedFilter());
170+
// Reload of resource after going to very first page.
171+
dispatch(goToPage(0))
172+
await dispatch(loadResource());
173+
dispatch(loadResourceIntoTable());
174+
}
204175
}
205-
}
206-
207-
if (myStartDate && isStart && !endDate) {
208-
let tmp = new Date(myStartDate.getTime());
209-
tmp.setHours(23);
210-
tmp.setMinutes(59);
211-
tmp.setSeconds(59);
212-
setEndDate(tmp);
213-
}
214-
if (myEndDate && !isStart && !startDate) {
215-
let tmp = new Date(myEndDate.getTime());
216-
tmp.setHours(0);
217-
tmp.setMinutes(0);
218-
tmp.setSeconds(0);
219-
setStartDate(tmp);
176+
if (start) setStartDate(start);
177+
if (end) setEndDate(end);
220178
}
221179
}
222180

@@ -315,8 +273,7 @@ const TableFilters = ({
315273
secondFilter={secondFilter}
316274
startDate={startDate}
317275
endDate={endDate}
318-
handleDate={handleDatepickerChange}
319-
handleDateConfirm={handleDatepickerConfirm}
276+
handleDate={handleDatepicker}
320277
handleChange={handleChange}
321278
openSecondFilterMenu={openSecondFilterMenu}
322279
setOpenSecondFilterMenu={setOpenSecondFilterMenu}
@@ -398,7 +355,6 @@ const FilterSwitch = ({
398355
startDate,
399356
endDate,
400357
handleDate,
401-
handleDateConfirm,
402358
secondFilter,
403359
openSecondFilterMenu,
404360
setOpenSecondFilterMenu,
@@ -407,17 +363,13 @@ const FilterSwitch = ({
407363
handleChange: (name: string, value: string) => void,
408364
startDate: Date | undefined,
409365
endDate: Date | undefined,
410-
handleDate: (date: Date | null, isStart?: boolean) => void,
411-
handleDateConfirm: (date: Date | undefined | null, isStart?: boolean) => void,
366+
handleDate: (dates: [Date | undefined | null, Date | undefined | null]) => void,
412367
secondFilter: string,
413368
openSecondFilterMenu: boolean,
414369
setOpenSecondFilterMenu: (open: boolean) => void,
415370
}) => {
416371
const { t } = useTranslation();
417372

418-
const startDateRef = useRef<HTMLInputElement>(null);
419-
const endDateRef = useRef<HTMLInputElement>(null);
420-
421373
if (!filter) {
422374
return null;
423375
}
@@ -471,51 +423,25 @@ const FilterSwitch = ({
471423
case "period":
472424
return (
473425
<div>
474-
{/* Show datepicker for start date */}
475-
<DatePicker
476-
autoFocus={true}
477-
inputRef={startDateRef}
478-
className="small-search start-date"
479-
value={startDate ?? null}
480-
format="dd/MM/yyyy"
481-
onChange={(date) => handleDate(date as Date | null, true)}
482-
// FixMe: onAccept does not trigger if the already set value is the same as the selected value
483-
// This prevents us from confirming from confirming our filter, if someone wants to selected the same
484-
// day for both start and end date (since we automatically set one to the other)
485-
onAccept={(e) => {handleDateConfirm(e as Date | null, true)}}
486-
slotProps={{
487-
textField: {
488-
onKeyDown: (event) => {
489-
if (event.key === "Enter") {
490-
handleDateConfirm(undefined, true)
491-
if (endDateRef.current && startDate && moment(startDate).isValid()) {
492-
endDateRef.current.focus();
493-
}
494-
}
495-
},
496-
},
497-
}}
498-
/>
499426
<DatePicker
500-
inputRef={endDateRef}
501-
className="small-search end-date"
502-
value={endDate ?? null}
503-
format="dd/MM/yyyy"
504-
onChange={(date) => handleDate(date as Date | null)}
505-
// FixMe: See above
506-
onAccept={(e) => handleDateConfirm(e as Date | null, false)}
507-
slotProps={{
508-
textField: {
509-
onKeyDown: (event) => {
510-
if (event.key === "Enter") {
511-
handleDateConfirm(undefined, false)
512-
if (startDateRef.current && endDate && moment(endDate).isValid()) {
513-
startDateRef.current.focus();
514-
}
515-
}
516-
},
517-
},
518-
}}
427+
startOpen
428+
autoFocus
429+
selected={startDate}
430+
onChange={(dates) => handleDate(dates)}
431+
startDate={startDate}
432+
endDate={endDate}
433+
selectsRange
434+
showYearDropdown
435+
showMonthDropdown
436+
yearDropdownItemNumber={2}
437+
swapRange
438+
allowSameDay
439+
dateFormat="P"
440+
popperPlacement="bottom"
441+
popperClassName="datepicker-custom"
442+
className="datepicker-custom-input"
443+
locale={getCurrentLanguageInformation()?.dateLocale}
444+
519445
/>
520446
</div>
521447
);

0 commit comments

Comments
 (0)