208 lines
10 KiB
TypeScript
208 lines
10 KiB
TypeScript
import React, { useRef, useState } from 'react';
|
|
import { Calendar, RefreshCw, ChevronDown } from 'lucide-react';
|
|
import type { DateRange } from '../types';
|
|
import { endOfLocalDay, formatDateParam, parseLocalDateInput, rangeForDay, rangeForLastDays, rangeForPreviousDay, startOfLocalDay } from '../dateRanges';
|
|
|
|
interface DateRangePickerProps {
|
|
dateRange: DateRange;
|
|
onChange: (range: DateRange) => void;
|
|
refreshInterval?: number;
|
|
setRefreshInterval?: (interval: number) => void;
|
|
onManualRefresh?: () => void;
|
|
}
|
|
|
|
const PRESETS = [
|
|
{ label: 'Hoje', getRange: () => rangeForDay(new Date()) },
|
|
{ label: 'Ontem', getRange: () => rangeForPreviousDay() },
|
|
{ label: 'Últimos 7 dias', getRange: () => rangeForLastDays(7) },
|
|
{ label: 'Últimos 30 dias', getRange: () => rangeForLastDays(30) },
|
|
{ label: 'Este Mês', getRange: () => { const end = endOfLocalDay(new Date()); const start = startOfLocalDay(new Date(end.getFullYear(), end.getMonth(), 1)); return { start, end }; } },
|
|
{ label: 'Mês Passado', getRange: () => { const d = new Date(); const start = new Date(d.getFullYear(), d.getMonth() - 1, 1); const end = new Date(d.getFullYear(), d.getMonth(), 0, 23, 59, 59, 999); return { start, end }; } },
|
|
{ label: 'Últimos 90 dias', getRange: () => rangeForLastDays(90) },
|
|
{ label: 'Este Ano', getRange: () => { const end = endOfLocalDay(new Date()); const start = startOfLocalDay(new Date(end.getFullYear(), 0, 1)); return { start, end }; } },
|
|
{ label: 'Todo o Período', getRange: () => { const end = endOfLocalDay(new Date()); const start = startOfLocalDay(new Date(2000, 0, 1)); return { start, end }; } },
|
|
];
|
|
|
|
const REFRESH_OPTIONS = [
|
|
{ label: 'Desligado', value: 0 },
|
|
{ label: '5s', value: 5000 },
|
|
{ label: '10s', value: 10000 },
|
|
{ label: '30s', value: 30000 },
|
|
{ label: '1m', value: 60000 },
|
|
{ label: '5m', value: 300000 },
|
|
];
|
|
|
|
const getRangeKey = (range: DateRange) => `${formatDateParam(range.start)}:${formatDateParam(range.end)}`;
|
|
|
|
const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange, refreshInterval, setRefreshInterval, onManualRefresh }) => {
|
|
const [isPresetOpen, setIsPresetOpen] = useState(false);
|
|
const [customDraft, setCustomDraft] = useState(() => ({
|
|
appliedKey: getRangeKey(dateRange),
|
|
range: dateRange
|
|
}));
|
|
const startRef = useRef<HTMLInputElement>(null);
|
|
const endRef = useRef<HTMLInputElement>(null);
|
|
const appliedRangeKey = getRangeKey(dateRange);
|
|
const draftRange = customDraft.appliedKey === appliedRangeKey ? customDraft.range : dateRange;
|
|
|
|
const formatDisplayDate = (date: Date) => {
|
|
return date.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' });
|
|
};
|
|
|
|
const formatDateForInput = (date: Date) => {
|
|
return formatDateParam(date);
|
|
};
|
|
|
|
const handleStartChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const newStart = parseLocalDateInput(e.target.value);
|
|
if (newStart && !isNaN(newStart.getTime())) {
|
|
const start = startOfLocalDay(newStart);
|
|
const end = draftRange.end < start ? endOfLocalDay(start) : draftRange.end;
|
|
setCustomDraft({ appliedKey: appliedRangeKey, range: { start, end } });
|
|
}
|
|
};
|
|
|
|
const handleEndChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const newEnd = parseLocalDateInput(e.target.value);
|
|
if (newEnd && !isNaN(newEnd.getTime())) {
|
|
const end = endOfLocalDay(newEnd);
|
|
const start = draftRange.start > end ? startOfLocalDay(end) : draftRange.start;
|
|
setCustomDraft({ appliedKey: appliedRangeKey, range: { start, end } });
|
|
}
|
|
};
|
|
|
|
const draftRangeKey = getRangeKey(draftRange);
|
|
const isDraftApplied = draftRangeKey === appliedRangeKey;
|
|
|
|
const handleApplyCustomRange = () => {
|
|
onChange(draftRange);
|
|
setIsPresetOpen(false);
|
|
};
|
|
|
|
const openPicker = (ref: React.RefObject<HTMLInputElement | null>) => {
|
|
if (ref.current) {
|
|
try {
|
|
if ('showPicker' in HTMLInputElement.prototype) {
|
|
ref.current.showPicker();
|
|
} else {
|
|
ref.current.focus();
|
|
}
|
|
} catch {
|
|
ref.current.focus();
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap sm:items-center sm:gap-3">
|
|
{/* Date Presets Dropdown */}
|
|
<div className="relative w-full sm:w-auto">
|
|
<button
|
|
onClick={() => setIsPresetOpen(!isPresetOpen)}
|
|
className="flex min-h-11 w-full items-center gap-2 rounded-xl border border-dark-border bg-dark-card px-4 py-2.5 text-sm font-medium text-dark-text shadow-sm transition-colors hover:border-brand-primary cursor-pointer sm:w-auto"
|
|
>
|
|
<Calendar size={16} className="text-dark-muted shrink-0" />
|
|
<span>{formatDisplayDate(dateRange.start)} - {formatDisplayDate(dateRange.end)}</span>
|
|
<ChevronDown size={14} className="text-dark-muted ml-1" />
|
|
</button>
|
|
|
|
{isPresetOpen && (
|
|
<>
|
|
<div className="fixed inset-0 z-10" onClick={() => setIsPresetOpen(false)}></div>
|
|
<div className="fixed inset-x-3 top-20 z-20 mt-0 max-h-[calc(100dvh-6rem)] overflow-y-auto rounded-xl border border-dark-border bg-dark-card py-2 shadow-xl sm:absolute sm:right-0 sm:top-auto sm:inset-x-auto sm:mt-2 sm:max-h-[32rem] sm:w-56">
|
|
<div className="px-4 pb-3 pt-1 border-b border-dark-border mb-2 flex flex-col gap-2">
|
|
<span className="text-xs font-bold text-dark-muted uppercase tracking-widest">Período Customizado</span>
|
|
<div className="flex flex-col gap-1.5">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<span className="text-xs font-medium text-dark-text w-6">De:</span>
|
|
<div
|
|
className="relative bg-dark-input border border-dark-border text-dark-text text-xs rounded-lg px-2 py-1 focus-within:border-brand-primary w-full cursor-pointer overflow-hidden flex items-center h-6"
|
|
onClick={() => openPicker(startRef)}
|
|
>
|
|
<span className="w-full text-center">{formatDisplayDate(draftRange.start)}</span>
|
|
<input
|
|
ref={startRef}
|
|
type="date"
|
|
value={formatDateForInput(draftRange.start)}
|
|
onChange={handleStartChange}
|
|
className="absolute inset-0 opacity-0 cursor-pointer"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<span className="text-xs font-medium text-dark-text w-6">Até:</span>
|
|
<div
|
|
className="relative bg-dark-input border border-dark-border text-dark-text text-xs rounded-lg px-2 py-1 focus-within:border-brand-primary w-full cursor-pointer overflow-hidden flex items-center h-6"
|
|
onClick={() => openPicker(endRef)}
|
|
>
|
|
<span className="w-full text-center">{formatDisplayDate(draftRange.end)}</span>
|
|
<input
|
|
ref={endRef}
|
|
type="date"
|
|
value={formatDateForInput(draftRange.end)}
|
|
onChange={handleEndChange}
|
|
className="absolute inset-0 opacity-0 cursor-pointer"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={handleApplyCustomRange}
|
|
disabled={isDraftApplied}
|
|
className="mt-1 inline-flex h-8 w-full items-center justify-center rounded-lg bg-brand-primary px-3 text-xs font-bold text-white transition-colors hover:bg-brand-primary/90 disabled:cursor-not-allowed disabled:bg-dark-input disabled:text-dark-muted cursor-pointer"
|
|
>
|
|
Aplicar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<span className="px-4 text-xs font-bold text-dark-muted uppercase tracking-widest mb-1 block">Atalhos</span>
|
|
{PRESETS.map((preset) => (
|
|
<button
|
|
key={preset.label}
|
|
onClick={() => {
|
|
const nextRange = preset.getRange();
|
|
setCustomDraft({ appliedKey: getRangeKey(nextRange), range: nextRange });
|
|
onChange(nextRange);
|
|
setIsPresetOpen(false);
|
|
}}
|
|
className="w-full text-left px-4 py-2 text-sm text-dark-muted hover:text-dark-text hover:bg-dark-input transition-colors cursor-pointer"
|
|
>
|
|
{preset.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Auto Refresh Dropdown */}
|
|
{setRefreshInterval && onManualRefresh && (
|
|
<div className="flex min-h-11 w-full items-center overflow-hidden rounded-xl border border-dark-border bg-dark-card shadow-sm transition-colors hover:border-brand-primary sm:w-auto">
|
|
<button
|
|
onClick={onManualRefresh}
|
|
className="flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium text-dark-text hover:text-brand-primary hover:bg-dark-input transition-colors border-r border-dark-border cursor-pointer"
|
|
title="Atualizar Agora"
|
|
>
|
|
<RefreshCw size={16} className="text-brand-primary" />
|
|
<span>Atualizar</span>
|
|
</button>
|
|
<select
|
|
value={refreshInterval}
|
|
onChange={(e) => setRefreshInterval(Number(e.target.value))}
|
|
className="appearance-none bg-transparent text-sm font-bold text-dark-muted pl-4 pr-10 py-2.5 focus:outline-none cursor-pointer relative"
|
|
style={{ backgroundImage: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 0.75rem center', backgroundSize: '1em' }}
|
|
>
|
|
{REFRESH_OPTIONS.map(opt => (
|
|
<option key={opt.label} value={opt.value} className="bg-dark-card font-medium text-dark-text">
|
|
{opt.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DateRangePicker;
|