-
Notifications
You must be signed in to change notification settings - Fork 2
/
DateRangeModal.tsx
68 lines (57 loc) · 2.31 KB
/
DateRangeModal.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import React, { useEffect, useState } from "react";
import { Button } from "@mui/material";
import moment from "moment";
import { useTranslation } from "react-i18next";
import CustomModal from "../CustomModal";
import { DatePickerFooter, Container, WrapButton } from "./styles";
import CustomDatePicker, { IDateRange } from "../CustomDatePicker";
export const DATETIME_PARTTEN = `YYYY/MM/DD HH:mm:ss`;
const toLocalTime = (date?: string): Date | null => (date ? moment.utc(date, DATETIME_PARTTEN).local().toDate() : null);
const toTimeFormat = (date: Date | null): string | undefined =>
date ? moment(date).format(DATETIME_PARTTEN) : undefined;
export interface DateRange {
fromDate?: string;
toDate?: string;
}
export interface DateRangeModalProps {
onClose?: () => void;
onDateRangeChange: (range: DateRange) => void;
value?: DateRange;
onClearValue?: ((value: React.SetStateAction<DateRange>) => void) | undefined;
open: boolean;
}
const DateRangeModal: React.FC<DateRangeModalProps> = ({ onClose, onDateRangeChange, open, value, onClearValue }) => {
const { t } = useTranslation();
const [dateRange, setDateRange] = useState<IDateRange>([null, null]);
useEffect(() => {
if (!value) return;
const { fromDate, toDate } = value;
if (fromDate && toDate) setDateRange([toLocalTime(fromDate), toLocalTime(toDate)]);
}, [value, setDateRange]);
const onSubmit = () => {
onDateRangeChange({ fromDate: toTimeFormat(dateRange[0]), toDate: toTimeFormat(dateRange[1]) });
onClose?.();
};
const onCloseModalDateRange = () => {
onClose?.();
if (dateRange[0] === null || dateRange[1] === null) {
onClearValue && onClearValue({ fromDate: "", toDate: "" });
}
};
return (
<CustomModal open={open} onClose={() => onClose?.()} title={t("common.selectDateRange")} width={500}>
<Container>
<CustomDatePicker dateRange={dateRange} setDateRange={setDateRange} hideFuture />
<DatePickerFooter>
<WrapButton disabled={!dateRange[0] || !dateRange[1]} variant="contained" onClick={onSubmit}>
{t("common.ok")}
</WrapButton>
<Button variant="outlined" onClick={onCloseModalDateRange}>
{t("common.cancel")}
</Button>
</DatePickerFooter>
</Container>
</CustomModal>
);
};
export default DateRangeModal;