2020-12-15 00:58:15 +03:00
|
|
|
import { useState } from 'react';
|
2020-12-25 12:29:25 +03:00
|
|
|
import { DropdownItem } from 'reactstrap';
|
2020-12-25 12:43:36 +03:00
|
|
|
import { DropdownBtn } from '../DropdownBtn';
|
2021-12-22 22:14:26 +03:00
|
|
|
import { useEffectExceptFirstTime } from '../helpers/hooks';
|
2020-12-15 00:58:15 +03:00
|
|
|
import {
|
|
|
|
DateInterval,
|
|
|
|
DateRange,
|
|
|
|
rangeOrIntervalToString,
|
|
|
|
intervalToDateRange,
|
|
|
|
rangeIsInterval,
|
2021-10-03 22:07:07 +03:00
|
|
|
dateRangeIsEmpty,
|
2020-12-15 00:58:15 +03:00
|
|
|
} from './types';
|
|
|
|
import DateRangeRow from './DateRangeRow';
|
2021-03-06 18:54:43 +03:00
|
|
|
import { DateIntervalDropdownItems } from './DateIntervalDropdownItems';
|
2020-12-15 00:58:15 +03:00
|
|
|
|
2020-12-15 01:15:06 +03:00
|
|
|
export interface DateRangeSelectorProps {
|
2020-12-15 00:58:15 +03:00
|
|
|
initialDateRange?: DateInterval | DateRange;
|
|
|
|
disabled?: boolean;
|
|
|
|
onDatesChange: (dateRange: DateRange) => void;
|
2020-12-15 01:35:31 +03:00
|
|
|
defaultText: string;
|
2021-12-22 22:14:26 +03:00
|
|
|
updatable?: boolean;
|
2020-12-15 00:58:15 +03:00
|
|
|
}
|
|
|
|
|
2020-12-15 01:35:31 +03:00
|
|
|
export const DateRangeSelector = (
|
2021-12-22 22:14:26 +03:00
|
|
|
{ onDatesChange, initialDateRange, defaultText, disabled, updatable = false }: DateRangeSelectorProps,
|
2020-12-15 01:35:31 +03:00
|
|
|
) => {
|
2021-11-11 00:25:56 +03:00
|
|
|
const initialIntervalIsRange = rangeIsInterval(initialDateRange);
|
2022-03-26 14:17:42 +03:00
|
|
|
const [activeInterval, setActiveInterval] = useState(initialIntervalIsRange ? initialDateRange : undefined);
|
|
|
|
const [activeDateRange, setActiveDateRange] = useState(initialIntervalIsRange ? undefined : initialDateRange);
|
2021-11-11 00:25:56 +03:00
|
|
|
|
2020-12-15 00:58:15 +03:00
|
|
|
const updateDateRange = (dateRange: DateRange) => {
|
2021-10-03 22:09:48 +03:00
|
|
|
setActiveInterval(dateRangeIsEmpty(dateRange) ? 'all' : undefined);
|
2020-12-15 00:58:15 +03:00
|
|
|
setActiveDateRange(dateRange);
|
|
|
|
onDatesChange(dateRange);
|
|
|
|
};
|
2021-11-11 00:25:56 +03:00
|
|
|
const updateInterval = (dateInterval: DateInterval) => {
|
2020-12-15 00:58:15 +03:00
|
|
|
setActiveInterval(dateInterval);
|
|
|
|
setActiveDateRange(undefined);
|
|
|
|
onDatesChange(intervalToDateRange(dateInterval));
|
|
|
|
};
|
|
|
|
|
2021-12-22 22:14:26 +03:00
|
|
|
updatable && useEffectExceptFirstTime(() => {
|
2021-12-23 12:51:13 +03:00
|
|
|
const isDateInterval = rangeIsInterval(initialDateRange);
|
|
|
|
|
|
|
|
isDateInterval && updateInterval(initialDateRange);
|
|
|
|
initialDateRange && !isDateInterval && updateDateRange(initialDateRange);
|
2022-03-26 14:17:42 +03:00
|
|
|
}, [initialDateRange]);
|
2021-12-22 22:14:26 +03:00
|
|
|
|
2020-12-15 00:58:15 +03:00
|
|
|
return (
|
2020-12-25 12:43:36 +03:00
|
|
|
<DropdownBtn disabled={disabled} text={rangeOrIntervalToString(activeInterval ?? activeDateRange) ?? defaultText}>
|
2021-11-11 00:25:56 +03:00
|
|
|
<DateIntervalDropdownItems allText={defaultText} active={activeInterval} onChange={updateInterval} />
|
2020-12-25 12:29:25 +03:00
|
|
|
<DropdownItem divider />
|
|
|
|
<DropdownItem header>Custom:</DropdownItem>
|
|
|
|
<DropdownItem text>
|
|
|
|
<DateRangeRow
|
|
|
|
{...activeDateRange}
|
|
|
|
onStartDateChange={(startDate) => updateDateRange({ ...activeDateRange, startDate })}
|
|
|
|
onEndDateChange={(endDate) => updateDateRange({ ...activeDateRange, endDate })}
|
|
|
|
/>
|
|
|
|
</DropdownItem>
|
2020-12-25 12:43:36 +03:00
|
|
|
</DropdownBtn>
|
2020-12-15 00:58:15 +03:00
|
|
|
);
|
|
|
|
};
|