fix: preserve electric drilldown history
This commit is contained in:
@@ -58,9 +58,9 @@ export default function ElectricDaily() {
|
||||
const selectedDateRef = useRef(selectedDate);
|
||||
selectedDateRef.current = selectedDate;
|
||||
|
||||
const commitDrillContext = useCallback((next: ElectricDrillContext) => {
|
||||
const commitDrillContext = useCallback((next: ElectricDrillContext, mode: 'push' | 'replace' = 'replace') => {
|
||||
const url = buildElectricDrillUrl(window.location, next);
|
||||
window.history.replaceState(null, '', url);
|
||||
window.history[mode === 'push' ? 'pushState' : 'replaceState'](null, '', url);
|
||||
setDrillContext(next);
|
||||
}, []);
|
||||
|
||||
@@ -148,13 +148,14 @@ export default function ElectricDaily() {
|
||||
};
|
||||
|
||||
const toggleDate = (date: string) => {
|
||||
const opening = selectedDate !== date;
|
||||
commitDrillContext({
|
||||
...drillContext,
|
||||
vehicleScope,
|
||||
startDate: effectiveRange.start,
|
||||
endDate: effectiveRange.end,
|
||||
selectedDate: selectedDate === date ? undefined : date,
|
||||
});
|
||||
selectedDate: opening ? date : undefined,
|
||||
}, opening ? 'push' : 'replace');
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -251,10 +252,13 @@ export default function ElectricDaily() {
|
||||
return (
|
||||
<div key={m.month} className="border-t border-slate-100 first:border-t-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleMonth(m.month)}
|
||||
className={`w-full grid grid-cols-[minmax(0,1fr)_120px_88px] md:grid-cols-[minmax(0,1fr)_160px_120px] gap-3 px-3 py-2.5 text-left transition-colors ${
|
||||
open ? 'bg-blue-50/30' : 'hover:bg-slate-50'
|
||||
}`}
|
||||
aria-expanded={open}
|
||||
aria-controls={open ? `electric-month-${m.month}` : undefined}
|
||||
>
|
||||
<span className="flex items-center gap-1 text-[12px] text-slate-700 font-bold">
|
||||
<ChevronRight size={14} className={`transition-transform ${open ? 'rotate-90' : ''} text-slate-400`} />
|
||||
@@ -268,6 +272,7 @@ export default function ElectricDaily() {
|
||||
<AnimatePresence initial={false}>
|
||||
{open && (
|
||||
<motion.div
|
||||
id={`electric-month-${m.month}`}
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
@@ -286,6 +291,7 @@ export default function ElectricDaily() {
|
||||
onClick={() => toggleDate(d.date)}
|
||||
className={`grid w-full grid-cols-[minmax(0,1fr)_120px_88px] gap-3 px-3 py-2 pl-9 text-left md:grid-cols-[minmax(0,1fr)_160px_120px] ${abnormalBg}`}
|
||||
aria-expanded={selectedDate === d.date}
|
||||
aria-controls={selectedDate === d.date ? `electric-orders-${d.date}` : undefined}
|
||||
>
|
||||
<span className="flex items-center gap-1 text-[12px] font-bold text-slate-600">
|
||||
<ChevronRight size={12} className={`text-slate-400 transition-transform ${selectedDate === d.date ? 'rotate-90' : ''}`} />
|
||||
@@ -297,7 +303,7 @@ export default function ElectricDaily() {
|
||||
<span className="text-right"><TrendBadge value={d.chainPct} /></span>
|
||||
</button>
|
||||
{selectedDate === d.date && (
|
||||
<div className="border-t border-blue-100 bg-blue-50/40 px-3 py-3 md:pl-9">
|
||||
<div id={`electric-orders-${d.date}`} className="border-t border-blue-100 bg-blue-50/40 px-3 py-3 md:pl-9">
|
||||
{ordersError ? (
|
||||
<ErrorState message={ordersError} variant="inline" />
|
||||
) : !orders || orders.date !== d.date ? (
|
||||
|
||||
Reference in New Issue
Block a user