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

Introduce IsScrollable on ScrollWrapper (#9724)

Browse Source 
It's beautiful!

Using same techniques as for the Header! Was not that easy but looks
very nice now!
This commit is contained in:
Charles Bochet
2025-01-17 19:26:34 +01:00
committed by GitHub
parent 18dea07344
commit 8572471973
8 changed files with 93 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
View File

@ -9,6 +9,7 @@ import {
} from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
import { ScrollWrapperComponentInstanceContext } from '@/ui/utilities/scroll/states/contexts/ScrollWrapperComponentInstanceContext';
import { scrollWrapperScrollBottomComponentState } from '@/ui/utilities/scroll/states/scrollWrappeScrollBottomComponentState';
import { scrollWrapperInstanceComponentState } from '@/ui/utilities/scroll/states/scrollWrapperInstanceComponentState';
import { scrollWrapperScrollLeftComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollLeftComponentState';
import { scrollWrapperScrollTopComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollTopComponentState';
@ -106,10 +107,18 @@ export const ScrollWrapper = ({
componentInstanceId,
);
const setScrollBottom = useSetRecoilComponentStateV2(
scrollWrapperScrollBottomComponentState,
componentInstanceId,
);
const handleScroll = (overlayScroll: OverlayScrollbars) => {
const target = overlayScroll.elements().scrollOffsetElement;
setScrollTop(target.scrollTop);
setScrollLeft(target.scrollLeft);
setScrollBottom(
target.scrollHeight - target.clientHeight - target.scrollTop,
);
};
const setOverlayScrollbars = useSetRecoilComponentStateV2(
@ -129,6 +138,12 @@ export const ScrollWrapper = ({
},
},
events: {
updated: (osInstance) => {
const { scrollOffsetElement: target } = osInstance.elements();
setScrollBottom(
target.scrollHeight - target.clientHeight - target.scrollTop,
);
},
scroll: (osInstance) => {
const { scrollOffsetElement: target, scrollbarVertical } =
osInstance.elements();

9
packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollWrappeScrollBottomComponentState.ts Normal file
View File

@ -0,0 +1,9 @@
import { ScrollWrapperComponentInstanceContext } from '@/ui/utilities/scroll/states/contexts/ScrollWrapperComponentInstanceContext';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
export const scrollWrapperScrollBottomComponentState =
createComponentStateV2<number>({
key: 'scrollWrapperScrollBottomComponentState',
defaultValue: 0,
componentInstanceContext: ScrollWrapperComponentInstanceContext,
});