import { endOfYear, isSameDay } from 'date-fns'; import { useState } from 'react'; import { Icon, Modal, Dropdown, Item } from 'react-basics'; import { useIntl, defineMessages } from 'react-intl'; import DatePickerForm from 'components/metrics/DatePickerForm'; import useLocale from 'hooks/useLocale'; import { dateFormat } from 'lib/date'; import Calendar from 'assets/calendar.svg'; const messages = defineMessages({ today: { id: 'label.today', defaultMessage: 'Today' }, lastHours: { id: 'label.last-hours', defaultMessage: 'Last {x} hours' }, yesterday: { id: 'label.yesterday', defaultMessage: 'Yesterday' }, thisWeek: { id: 'label.this-week', defaultMessage: 'This week' }, lastDays: { id: 'label.last-days', defaultMessage: 'Last {x} days' }, thisMonth: { id: 'label.this-month', defaultMessage: 'This month' }, thisYear: { id: 'label.this-year', defaultMessage: 'This year' }, allTime: { id: 'label.all-time', defaultMessage: 'All time' }, customRange: { id: 'label.custom-range', defaultMessage: 'Custom-range' }, }); function DateFilter({ value, startDate, endDate, onChange, className }) { const { formatMessage } = useIntl(); const [showPicker, setShowPicker] = useState(false); const options = [ { label: formatMessage(messages.today), value: '1day' }, { label: formatMessage(messages.lastHours, { x: 24 }), value: '24hour', }, { label: formatMessage(messages.yesterday), value: '-1day', }, { label: formatMessage(messages.thisWeek), value: '1week', divider: true, }, { label: formatMessage(messages.lastDays, { x: 7 }), value: '7day', }, { label: formatMessage(messages.thisMonth), value: '1month', divider: true, }, { label: formatMessage(messages.lastDays, { x: 30 }), value: '30day', }, { label: formatMessage(messages.lastDays, { x: 90 }), value: '90day', }, { label: formatMessage(messages.thisYear), value: '1year' }, { label: formatMessage(messages.allTime), value: 'all', divider: true, }, { label: formatMessage(messages.customRange), value: 'custom', divider: true, }, ]; const renderValue = value => { return value === 'custom' ? ( handleChange('custom')} /> ) : ( options.find(e => e.value === value).label ); }; const handleChange = async value => { if (value === 'custom') { setShowPicker(true); return; } onChange(value); }; const handlePickerChange = value => { setShowPicker(false); onChange(value); }; const handleClose = () => setShowPicker(false); return ( <> {({ label, value }) => {label}} {showPicker && ( setShowPicker(false)} /> )} ); } const CustomRange = ({ startDate, endDate, onClick }) => { const { locale } = useLocale(); function handleClick(e) { e.stopPropagation(); onClick(); } return ( <> {dateFormat(startDate, 'd LLL y', locale)} {!isSameDay(startDate, endDate) && ` — ${dateFormat(endDate, 'd LLL y', locale)}`} ); }; export default DateFilter;