65 lines
2.2 KiB
JavaScript
65 lines
2.2 KiB
JavaScript
import { DateRange } from 'react-date-range';
|
|
import { de } from 'date-fns/locale';
|
|
import { buildSelectionRange } from '../utils/dateUtils';
|
|
|
|
const RangePickerModal = ({ entry, minDate, onSelectRange, onResetRange, onClose }) => {
|
|
if (!entry) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-40 flex items-center justify-center bg-black bg-opacity-40 px-4" onClick={onClose}>
|
|
<div
|
|
className="bg-white rounded-2xl shadow-2xl w-full max-w-lg"
|
|
onClick={(event) => event.stopPropagation()}
|
|
>
|
|
<div className="px-5 pt-5 pb-3 border-b">
|
|
<p className="text-xs uppercase tracking-wide text-gray-500">Zeitraum auswählen für</p>
|
|
<p className="text-lg font-semibold text-gray-900">{entry.label || `Store ${entry.id}`}</p>
|
|
</div>
|
|
<div className="px-2 py-4">
|
|
<DateRange
|
|
onChange={(ranges) => {
|
|
const { startDate, endDate } = ranges.selection;
|
|
onSelectRange(startDate, endDate);
|
|
}}
|
|
moveRangeOnFirstSelection={false}
|
|
ranges={[
|
|
buildSelectionRange(
|
|
entry.desiredDateRange?.start,
|
|
entry.desiredDateRange?.end,
|
|
minDate
|
|
)
|
|
]}
|
|
rangeColors={['#2563EB']}
|
|
months={1}
|
|
direction="horizontal"
|
|
showDateDisplay={false}
|
|
locale={de}
|
|
minDate={minDate}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-between px-5 py-3 border-t bg-gray-50 rounded-b-2xl">
|
|
<button type="button" className="text-sm text-gray-600 hover:text-gray-900" onClick={onResetRange}>
|
|
Zurücksetzen
|
|
</button>
|
|
<div className="flex items-center gap-3">
|
|
<button type="button" className="text-sm text-gray-600 hover:text-gray-900" onClick={onClose}>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-md"
|
|
onClick={onClose}
|
|
>
|
|
Fertig
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RangePickerModal;
|