75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
import { useState } from 'react';
|
|
import { Button, Row, Calendar } from '@umami/react-zen';
|
|
import { isAfter, isBefore, isSameDay, startOfDay, endOfDay } from 'date-fns';
|
|
import { FILTER_DAY, FILTER_RANGE } from '@/lib/constants';
|
|
import { useMessages } from '@/components/hooks';
|
|
import { parseDate } from '@internationalized/date';
|
|
import styles from './DatePickerForm.module.css';
|
|
|
|
export function DatePickerForm({
|
|
startDate: defaultStartDate,
|
|
endDate: defaultEndDate,
|
|
minDate,
|
|
maxDate,
|
|
onChange,
|
|
onClose,
|
|
}) {
|
|
const [selected, setSelected] = useState(
|
|
isSameDay(defaultStartDate, defaultEndDate) ? FILTER_DAY : FILTER_RANGE,
|
|
);
|
|
const [singleDate, setSingleDate] = useState(defaultStartDate || new Date());
|
|
const [startDate, setStartDate] = useState(defaultStartDate || new Date());
|
|
const [endDate] = useState(defaultEndDate || new Date());
|
|
const { formatMessage, labels } = useMessages();
|
|
|
|
const disabled =
|
|
selected === FILTER_DAY
|
|
? isAfter(minDate, singleDate) && isBefore(maxDate, singleDate)
|
|
: isAfter(startDate, endDate);
|
|
|
|
const handleSave = () => {
|
|
if (selected === FILTER_DAY) {
|
|
onChange(`range:${startOfDay(singleDate).getTime()}:${endOfDay(singleDate).getTime()}`);
|
|
} else {
|
|
onChange(`range:${startOfDay(startDate).getTime()}:${endOfDay(endDate).getTime()}`);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<div className={styles.filter}>
|
|
<Row>
|
|
<Button key={FILTER_DAY} onPress={key => setSelected(key as any)}>
|
|
{formatMessage(labels.singleDay)}
|
|
</Button>
|
|
<Button key={FILTER_RANGE} onPress={key => setSelected(key as any)}>
|
|
{formatMessage(labels.dateRange)}
|
|
</Button>
|
|
</Row>
|
|
</div>
|
|
<div className={styles.calendars}>
|
|
{selected === FILTER_DAY && (
|
|
<Calendar
|
|
value={parseDate(singleDate.toISOString().split('T')[0])}
|
|
onChange={d => setSingleDate(d.toDate('America/Los_Angeles'))}
|
|
/>
|
|
)}
|
|
{selected === FILTER_RANGE && (
|
|
<>
|
|
<Calendar
|
|
value={parseDate(startDate.toISOString().split('T')[0])}
|
|
onChange={d => setStartDate(d.toDate('America/Los_Angeles'))}
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className={styles.buttons}>
|
|
<Button variant="primary" onPress={handleSave} isDisabled={disabled}>
|
|
{formatMessage(labels.save)}
|
|
</Button>
|
|
<Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|