umami/components/common/DateFilter.js

135 lines
3.4 KiB
JavaScript
Raw Normal View History

2020-09-13 10:26:54 +02:00
import React, { useState } from 'react';
import PropTypes from 'prop-types';
2020-09-06 02:27:01 +02:00
import { FormattedMessage } from 'react-intl';
2020-09-17 01:28:54 +02:00
import { endOfYear, isSameDay } from 'date-fns';
2020-09-13 10:26:54 +02:00
import Modal from './Modal';
import DropDown from './DropDown';
import DatePickerForm from 'components/forms/DatePickerForm';
import useLocale from 'hooks/useLocale';
2022-01-14 09:04:07 +01:00
import { dateFormat } from 'lib/date';
import Calendar from 'assets/calendar-alt.svg';
import Icon from './Icon';
export const filterOptions = [
{ label: <FormattedMessage id="label.today" defaultMessage="Today" />, value: '1day' },
2020-09-06 02:27:01 +02:00
{
label: (
<FormattedMessage id="label.last-hours" defaultMessage="Last {x} hours" values={{ x: 24 }} />
),
value: '24hour',
},
{
label: <FormattedMessage id="label.this-week" defaultMessage="This week" />,
value: '1week',
divider: true,
},
2020-09-06 02:27:01 +02:00
{
label: (
<FormattedMessage id="label.last-days" defaultMessage="Last {x} days" values={{ x: 7 }} />
),
value: '7day',
},
{
label: <FormattedMessage id="label.this-month" defaultMessage="This month" />,
value: '1month',
divider: true,
},
2020-09-06 02:27:01 +02:00
{
label: (
<FormattedMessage id="label.last-days" defaultMessage="Last {x} days" values={{ x: 30 }} />
),
value: '30day',
},
{
label: (
<FormattedMessage id="label.last-days" defaultMessage="Last {x} days" values={{ x: 90 }} />
),
value: '90day',
},
{ label: <FormattedMessage id="label.this-year" defaultMessage="This year" />, value: '1year' },
2022-01-14 09:04:07 +01:00
{
label: <FormattedMessage id="label.all-time" defaultMessage="All time" />,
value: 'all',
divider: true,
},
2020-09-13 10:26:54 +02:00
{
label: <FormattedMessage id="label.custom-range" defaultMessage="Custom range" />,
value: 'custom',
divider: true,
2020-09-13 10:26:54 +02:00
},
2020-07-31 05:11:43 +02:00
];
function DateFilter({ value, startDate, endDate, onChange, className, options }) {
2020-09-13 10:26:54 +02:00
const [showPicker, setShowPicker] = useState(false);
const displayValue =
value === 'custom' ? (
<CustomRange startDate={startDate} endDate={endDate} onClick={() => handleChange('custom')} />
) : (
value
);
2020-09-13 10:26:54 +02:00
2022-01-14 09:04:07 +01:00
async function handleChange(value) {
2020-09-13 10:26:54 +02:00
if (value === 'custom') {
setShowPicker(true);
return;
}
2022-01-14 09:04:07 +01:00
onChange(value);
}
2020-09-13 10:26:54 +02:00
function handlePickerChange(value) {
setShowPicker(false);
onChange(value);
}
2020-08-02 06:20:52 +02:00
return (
2020-09-13 10:26:54 +02:00
<>
<DropDown
className={className}
value={displayValue}
options={options || filterOptions}
2020-09-13 10:26:54 +02:00
onChange={handleChange}
/>
{showPicker && (
<Modal>
<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 (
<>
<Icon icon={<Calendar />} className="mr-2" onClick={handleClick} />
2020-09-17 01:28:54 +02:00
{dateFormat(startDate, 'd LLL y', locale)}
{!isSameDay(startDate, endDate) && `${dateFormat(endDate, 'd LLL y', locale)}`}
</>
);
};
DateFilter.propTypes = {
value: PropTypes.string,
startDate: PropTypes.instanceOf(Date),
endDate: PropTypes.instanceOf(Date),
onChange: PropTypes.func,
className: PropTypes.string,
};
export default DateFilter;