umami/components/input/DateFilter.js

146 lines
3.5 KiB
JavaScript
Raw Normal View History

import { useState } from 'react';
import { Icon, Modal, Dropdown, Item, Text, Flexbox } from 'react-basics';
import { endOfYear, isSameDay } from 'date-fns';
import DatePickerForm from 'components/metrics/DatePickerForm';
2020-09-13 10:26:54 +02:00
import useLocale from 'hooks/useLocale';
2023-05-18 08:20:06 +02:00
import { dateFormat } from 'lib/date';
import Icons from 'components/icons';
2023-03-22 22:05:55 +01:00
import useMessages from 'hooks/useMessages';
2023-05-18 08:20:06 +02:00
export function DateFilter({
value,
startDate,
endDate,
className,
onChange,
showAllTime = false,
alignment = 'end',
}) {
2023-03-22 22:05:55 +01:00
const { formatMessage, labels } = useMessages();
2020-09-13 10:26:54 +02:00
const [showPicker, setShowPicker] = useState(false);
const options = [
{ label: formatMessage(labels.today), value: '1day' },
{
label: formatMessage(labels.lastHours, { x: 24 }),
value: '24hour',
},
{
label: formatMessage(labels.yesterday),
value: '-1day',
},
{
label: formatMessage(labels.thisWeek),
value: '1week',
divider: true,
},
{
label: formatMessage(labels.lastDays, { x: 7 }),
value: '7day',
},
{
label: formatMessage(labels.thisMonth),
value: '1month',
divider: true,
},
{
label: formatMessage(labels.lastDays, { x: 30 }),
value: '30day',
},
{
label: formatMessage(labels.lastDays, { x: 90 }),
value: '90day',
},
{ label: formatMessage(labels.thisYear), value: '1year' },
2023-05-18 08:20:06 +02:00
showAllTime && {
label: formatMessage(labels.allTime),
value: 'all',
divider: true,
},
{
label: formatMessage(labels.customRange),
value: 'custom',
divider: true,
},
2023-04-25 23:41:54 +02:00
].filter(n => n);
const renderValue = value => {
2023-05-29 07:28:11 +02:00
return value.startsWith('range') ? (
<CustomRange startDate={startDate} endDate={endDate} onClick={() => handleChange('custom')} />
) : (
options.find(e => e.value === value).label
);
};
2020-09-13 10:26:54 +02:00
const handleChange = value => {
2020-09-13 10:26:54 +02:00
if (value === 'custom') {
setShowPicker(true);
return;
}
2023-05-18 08:20:06 +02:00
onChange(value);
};
const handlePickerChange = value => {
2020-09-13 10:26:54 +02:00
setShowPicker(false);
2023-05-18 08:20:06 +02:00
onChange(value);
};
const handleClose = () => setShowPicker(false);
2020-09-13 10:26:54 +02:00
2020-08-02 06:20:52 +02:00
return (
2020-09-13 10:26:54 +02:00
<>
<Dropdown
2020-09-13 10:26:54 +02:00
className={className}
items={options}
renderValue={renderValue}
value={value}
2023-05-18 08:20:06 +02:00
alignment={alignment}
placeholder={formatMessage(labels.selectDate)}
2020-09-13 10:26:54 +02:00
onChange={handleChange}
>
{({ label, value, divider }) => (
<Item key={value} divider={divider}>
{label}
</Item>
)}
</Dropdown>
2020-09-13 10:26:54 +02:00
{showPicker && (
<Modal onClose={handleClose}>
2020-09-13 10:26:54 +02:00
<DatePickerForm
startDate={startDate}
endDate={endDate}
minDate={new Date(2000, 0, 1)}
maxDate={endOfYear(new Date())}
onChange={handlePickerChange}
onClose={() => setShowPicker(false)}
/>
</Modal>
)}
</>
2020-08-02 06:20:52 +02:00
);
}
const CustomRange = ({ startDate, endDate, onClick }) => {
const { locale } = useLocale();
function handleClick(e) {
e.stopPropagation();
onClick();
}
return (
<Flexbox gap={10} alignItems="center" wrap="nowrap">
<Icon className="mr-2" onClick={handleClick}>
<Icons.Calendar />
</Icon>
<Text>
{dateFormat(startDate, 'd LLL y', locale)}
{!isSameDay(startDate, endDate) && `${dateFormat(endDate, 'd LLL y', locale)}`}
</Text>
</Flexbox>
);
};
export default DateFilter;