watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-07 22:27:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Typescript refactor.

Browse source
This commit is contained in:
Mike Cao 2023-12-03 03:07:03 -08:00
parent b578162cb6
commit 7c42f0da82
173 changed files with 968 additions and 549 deletions
Download patch file Download diff file Expand all files Collapse all files

86
src/components/metrics/DatePickerForm.js
View file

@ -1,86 +0,0 @@
import { useState } from 'react';
import { Button, ButtonGroup, Calendar } from 'react-basics';
import { isAfter, isBefore, isSameDay, startOfDay, endOfDay } from 'date-fns';
import useLocale from 'components/hooks/useLocale';
import { FILTER_DAY, FILTER_RANGE } from 'lib/constants';
import useMessages from 'components/hooks/useMessages';
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);
const [startDate, setStartDate] = useState(defaultStartDate);
const [endDate, setEndDate] = useState(defaultEndDate);
const { dateLocale } = useLocale();
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}>
<ButtonGroup selectedKey={selected} onSelect={setSelected}>
<Button key={FILTER_DAY}>{formatMessage(labels.singleDay)}</Button>
<Button key={FILTER_RANGE}>{formatMessage(labels.dateRange)}</Button>
</ButtonGroup>
</div>
<div className={styles.calendars}>
{selected === FILTER_DAY && (
<Calendar
date={singleDate}
minDate={minDate}
maxDate={maxDate}
locale={dateLocale}
onChange={setSingleDate}
/>
)}
{selected === FILTER_RANGE && (
<>
<Calendar
date={startDate}
minDate={minDate}
maxDate={endDate}
locale={dateLocale}
onChange={setStartDate}
/>
<Calendar
date={endDate}
minDate={startDate}
maxDate={maxDate}
locale={dateLocale}
onChange={setEndDate}
/>
</>
)}
</div>
<div className={styles.buttons}>
<Button variant="primary" onClick={handleSave} disabled={disabled}>
{formatMessage(labels.save)}
</Button>
<Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
</div>
</div>
);
}
export default DatePickerForm;