2023-02-15 11:27:18 +01:00
|
|
|
import DateFilter from 'components/input/DateFilter';
|
2023-01-11 17:33:43 +01:00
|
|
|
import { Button, Flexbox } from 'react-basics';
|
2024-01-29 10:32:05 +01:00
|
|
|
import { useDateRange, useMessages } from 'components/hooks';
|
2020-09-19 19:35:05 +02:00
|
|
|
import { DEFAULT_DATE_RANGE } from 'lib/constants';
|
2024-01-14 11:21:39 +01:00
|
|
|
import { DateRange } from 'lib/types';
|
2024-03-30 00:04:39 +01:00
|
|
|
import styles from './DateRangeSetting.module.css';
|
2020-09-19 19:35:05 +02:00
|
|
|
|
2023-04-21 17:00:42 +02:00
|
|
|
export function DateRangeSetting() {
|
2023-03-22 22:05:55 +01:00
|
|
|
const { formatMessage, labels } = useMessages();
|
2020-09-19 19:35:05 +02:00
|
|
|
const [dateRange, setDateRange] = useDateRange();
|
2023-05-12 01:42:58 +02:00
|
|
|
const { value } = dateRange;
|
2020-09-19 19:35:05 +02:00
|
|
|
|
2024-01-14 11:21:39 +01:00
|
|
|
const handleChange = (value: string | DateRange) => setDateRange(value);
|
2023-01-11 17:33:43 +01:00
|
|
|
const handleReset = () => setDateRange(DEFAULT_DATE_RANGE);
|
2020-09-19 19:35:05 +02:00
|
|
|
|
|
|
|
return (
|
2024-03-30 00:04:39 +01:00
|
|
|
<Flexbox gap={10} width={300}>
|
2023-05-18 22:21:35 +02:00
|
|
|
<DateFilter
|
2024-03-30 00:04:39 +01:00
|
|
|
className={styles.field}
|
2023-05-18 22:21:35 +02:00
|
|
|
value={value}
|
|
|
|
startDate={dateRange.startDate}
|
|
|
|
endDate={dateRange.endDate}
|
|
|
|
onChange={handleChange}
|
|
|
|
/>
|
2023-01-25 16:42:46 +01:00
|
|
|
<Button onClick={handleReset}>{formatMessage(labels.reset)}</Button>
|
2023-01-11 17:33:43 +01:00
|
|
|
</Flexbox>
|
2020-09-19 19:35:05 +02:00
|
|
|
);
|
|
|
|
}
|
2023-04-21 17:00:42 +02:00
|
|
|
|
|
|
|
export default DateRangeSetting;
|