admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Remove overlay-scroll-bar (#11258)

Browse Source 
## What

- Deprecate overlayscrollbars as we decided to follow the native
behavior
- rework on performances (avoid calling recoil states too much at field
level which is quite expensive)
- Also implements:
https://github.com/twentyhq/core-team-issues/issues/569

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Charles Bochet
2025-04-04 16:13:48 +02:00
committed by GitHub
parent 6b184cc641
commit 2308091b13
101 changed files with 664 additions and 952 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
packages/twenty-front/src/hooks/useScrollRestoration.ts
View File

@ -1,37 +0,0 @@
import { useEffect } from 'react';
import { useNavigation } from 'react-router-dom';
import { scrollWrapperInstanceComponentState } from '@/ui/utilities/scroll/states/scrollWrapperInstanceComponentState';
import { scrollWrapperScrollTopComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollTopComponentState';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { isDefined } from 'twenty-shared/utils';
/**
* @deprecated We should now use useScrollToPosition instead
* Note that `location.key` is used in the cache key, not `location.pathname`,
* so the same path navigated to at different points in the history stack will
* not share the same scroll position.
*/
export const useScrollRestoration = (viewportHeight?: number) => {
const { state } = useNavigation();
const [scrollTop, setScrollTop] = useRecoilComponentStateV2(
scrollWrapperScrollTopComponentState,
);
const overlayScrollbars = useRecoilComponentValueV2(
scrollWrapperInstanceComponentState,
);
const scrollWrapper = overlayScrollbars?.elements().viewport;
const skip = isDefined(viewportHeight) && scrollTop > viewportHeight;
useEffect(() => {
if (state === 'loading') {
setScrollTop(scrollWrapper?.scrollTop ?? 0);
} else if (state === 'idle' && isDefined(scrollWrapper) && !skip) {
scrollWrapper.scrollTo({ top: scrollTop });
}
}, [state, scrollWrapper, skip, scrollTop, setScrollTop]);
};

25
packages/twenty-front/src/hooks/useScrollToPosition.ts
View File

@ -1,25 +0,0 @@
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 };
};