Closes https://github.com/twentyhq/private-issues/issues/217. Refactoring scroll not to cause table-wide re-render when opening a dropdown (triggering a scroll lock) in the table.
26 lines
899 B
TypeScript
26 lines
899 B
TypeScript
import { scrollWrapperInstanceComponentState } from '@/ui/utilities/scroll/states/scrollWrapperInstanceComponentState';
|
|
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
|
import { useRecoilCallback } from 'recoil';
|
|
|
|
export const useScrollToPosition = () => {
|
|
const scrollWrapperInstanceState = useRecoilComponentCallbackStateV2(
|
|
scrollWrapperInstanceComponentState,
|
|
);
|
|
|
|
const scrollToPosition = useRecoilCallback(
|
|
({ snapshot }) =>
|
|
(scrollPositionInPx: number) => {
|
|
const overlayScrollbars = snapshot
|
|
.getLoadable(scrollWrapperInstanceState)
|
|
.getValue();
|
|
|
|
const scrollWrapper = overlayScrollbars?.elements().viewport;
|
|
|
|
scrollWrapper?.scrollTo({ top: scrollPositionInPx });
|
|
},
|
|
[scrollWrapperInstanceState],
|
|
);
|
|
|
|
return { scrollToPosition };
|
|
};
|