forked from mui/mui-x
-
Notifications
You must be signed in to change notification settings - Fork 1
/
useScrollFn.ts
49 lines (43 loc) · 1.81 KB
/
useScrollFn.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import { debounce } from '@material-ui/core/utils';
import * as React from 'react';
import { ScrollFn, ScrollParams } from '../../models/params/scrollParams';
import { useLogger } from './useLogger';
export function useScrollFn(
renderingZoneElementRef: React.RefObject<HTMLDivElement>,
columnHeadersElementRef: React.RefObject<HTMLDivElement>,
): [ScrollFn] {
const logger = useLogger('useScrollFn');
const previousValue = React.useRef<ScrollParams>();
const debouncedResetPointerEvents = React.useMemo(
() =>
debounce(() => {
renderingZoneElementRef.current!.style.pointerEvents = 'unset';
}, 300),
[renderingZoneElementRef],
);
const scrollTo: (v: ScrollParams) => void = React.useCallback(
(v) => {
if (v.left === previousValue.current?.left && v.top === previousValue.current.top) {
return;
}
if (renderingZoneElementRef && renderingZoneElementRef.current) {
logger.debug(`Moving ${renderingZoneElementRef.current.className} to: ${v.left}-${v.top}`);
if (renderingZoneElementRef.current!.style.pointerEvents !== 'none') {
renderingZoneElementRef.current!.style.pointerEvents = 'none';
}
// Force the creation of a layer, avoid paint when changing the transform value.
renderingZoneElementRef.current!.style.transform = `translate3d(-${v.left}px, -${v.top}px, 0)`;
columnHeadersElementRef.current!.style.transform = `translate3d(-${v.left}px, 0, 0)`;
debouncedResetPointerEvents();
previousValue.current = v;
}
},
[renderingZoneElementRef, logger, columnHeadersElementRef, debouncedResetPointerEvents],
);
React.useEffect(() => {
return () => {
debouncedResetPointerEvents.clear();
};
}, [renderingZoneElementRef, debouncedResetPointerEvents]);
return [scrollTo];
}