import React from 'react'; import { getDateRange } from 'lib/date'; import DropDown from './DropDown'; import { FormattedMessage } from 'react-intl'; const filterOptions = [ { label: ( <FormattedMessage id="label.last-hours" defaultMessage="Last {x} hours" values={{ x: 24 }} /> ), value: '24hour', }, { label: ( <FormattedMessage id="label.last-days" defaultMessage="Last {x} days" values={{ x: 7 }} /> ), value: '7day', }, { 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.today" defaultMessage="Today" />, value: '1day' }, { label: <FormattedMessage id="label.this-week" defaultMessage="This week" />, value: '1week' }, { label: <FormattedMessage id="label.this-month" defaultMessage="This month" />, value: '1month', }, { label: <FormattedMessage id="label.this-year" defaultMessage="This year" />, value: '1year' }, ]; export default function DateFilter({ value, onChange, className }) { function handleChange(value) { onChange(getDateRange(value)); } return ( <DropDown className={className} value={value} options={filterOptions} onChange={handleChange} /> ); }