blyzer/graphs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Require apply for custom date range
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m34s
Details

Browse Source
This commit is contained in:
Cauê Faleiros
2026-07-03 15:23:34 -03:00
parent caea53b94d
commit b53ca39fe9
1 changed files with 36 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/DateRangePicker.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState, useRef } from 'react';
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';
@@ -32,10 +32,18 @@ const REFRESH_OPTIONS = [
{ 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' });
@@ -49,8 +57,8 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
const newStart = parseLocalDateInput(e.target.value);
if (newStart && !isNaN(newStart.getTime())) {
const start = startOfLocalDay(newStart);
const end = dateRange.end < start ? endOfLocalDay(start) : dateRange.end;
onChange({ start, end });
const end = draftRange.end < start ? endOfLocalDay(start) : draftRange.end;
setCustomDraft({ appliedKey: appliedRangeKey, range: { start, end } });
}
};
@@ -58,11 +66,19 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
const newEnd = parseLocalDateInput(e.target.value);
if (newEnd && !isNaN(newEnd.getTime())) {
const end = endOfLocalDay(newEnd);
const start = dateRange.start > end ? startOfLocalDay(end) : dateRange.start;
onChange({ start, end });
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 {
@@ -103,11 +119,11 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
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(dateRange.start)}</span>
<span className="w-full text-center">{formatDisplayDate(draftRange.start)}</span>
<input
ref={startRef}
type="date"
value={formatDateForInput(dateRange.start)}
value={formatDateForInput(draftRange.start)}
onChange={handleStartChange}
className="absolute inset-0 opacity-0 cursor-pointer"
/>
@@ -119,16 +135,24 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
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(dateRange.end)}</span>
<span className="w-full text-center">{formatDisplayDate(draftRange.end)}</span>
<input
ref={endRef}
type="date"
value={formatDateForInput(dateRange.end)}
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>
@@ -136,7 +160,9 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
<button
key={preset.label}
onClick={() => {
onChange(preset.getRange());
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"