RSHB/DFiP_Budget_planing
9
0
Fork 0
Code Issues 24 Pull Requests 17 Actions Packages Projects Releases Wiki Activity

perf(realtime-table): шаг прокрутки колесом мыши ×2 (AURORA-1944)

Browse Source 
Хук useWheelScrollStep перехватывает щелчок колеса мыши над таблицей и
прокручивает вдвое больше (~100 px браузера -> 200 px). Тачпад, Ctrl и
Shift + колесо, горизонтальная прокрутка и поля ввода не меняются.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Andrey Epifancev 2026-10-29 18:26:04 +04:00
parent ef83a6c361
commit 36d8192221
2 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/RealtimeTable/RealtimeTable.jsx
View File

@ -20,6 +20,7 @@ import { BASE_TABLE_CONFIG, TABLE_ROW_HEIGHT, getTableBodyCellProps, getTablePap
import { useRealtimeActions, useVspOptions } from './contexts/RealtimeContext'; import { useRealtimeActions, useVspOptions } from './contexts/RealtimeContext';
import { useColumnSettings } from './hooks/useColumnSettings'; import { useColumnSettings } from './hooks/useColumnSettings';
import { useHeaderPortal } from './hooks/useHeaderPortal'; import { useHeaderPortal } from './hooks/useHeaderPortal';
import { useWheelScrollStep } from './hooks/useWheelScrollStep';
import { useTableScale } from './hooks/useTableScale'; import { useTableScale } from './hooks/useTableScale';
import { useBudgetYear } from './hooks/useBudgetYear'; import { useBudgetYear } from './hooks/useBudgetYear';
import { useValidationRules } from './hooks/useValidationRules'; import { useValidationRules } from './hooks/useValidationRules';
@ -158,6 +159,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
} = useColumnSettings(`${formId}_${formType}_${sheetName}_${direction}`); } = useColumnSettings(`${formId}_${formType}_${sheetName}_${direction}`);
const { headerPortalRef, containerRef } = useHeaderPortal(); const { headerPortalRef, containerRef } = useHeaderPortal();
useWheelScrollStep(containerRef);
const rowVirtualizerRef = useRef(null); const rowVirtualizerRef = useRef(null);
const columnVirtualizerRef = useRef(null); const columnVirtualizerRef = useRef(null);

22
web/src/components/RealtimeTable/hooks/useWheelScrollStep.js Normal file
View File

@ -0,0 +1,22 @@
import { useEffect } from 'react';
import { canScrollBy, getWheelScrollDelta } from '../utils/wheelScroll';
// Внутри полей ввода и выпадающих списков колесо работает как обычно.
const NATIVE_WHEEL_SELECTOR = 'textarea, select, input, [role="listbox"]';
export const useWheelScrollStep = (containerRef) => {
useEffect(() => {
const el = containerRef.current;
if (!el) return undefined;
const onWheel = (event) => {
if (event.target instanceof Element && event.target.closest(NATIVE_WHEEL_SELECTOR)) return;
const delta = getWheelScrollDelta(event);
if (delta === null || !canScrollBy(el, delta)) return;
event.preventDefault();
el.scrollTop += delta;
};
// passive: false — иначе preventDefault не работает.
el.addEventListener('wheel', onWheel, { passive: false });
return () => el.removeEventListener('wheel', onWheel);
}, [containerRef]);
};