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

Created a specific scroll wrapper context per scroll wrapper and made ScrollTop and ScrollLeft componentStates (#6645)

Browse Source 
@lucasbordeau @charlesBochet 

Issue #4826 

Could u review this changes.

Let me know what do you think.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
nitin
2024-08-22 21:51:14 +05:30
committed by GitHub
parent 0a7700351f
commit 1030ff43d8
26 changed files with 205 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,19 +1,18 @@
import { createContext, RefObject, useEffect, useRef } from 'react';
import styled from '@emotion/styled';
import { OverlayScrollbars } from 'overlayscrollbars';
import { useOverlayScrollbars } from 'overlayscrollbars-react';
import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { useEffect, useRef } from 'react';
import { useSetRecoilState } from 'recoil';
import {
ContextProviderName,
getContextByProviderName,
} from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
import { useScrollStates } from '@/ui/utilities/scroll/hooks/internal/useScrollStates';
import { overlayScrollbarsState } from '@/ui/utilities/scroll/states/overlayScrollbarsState';
import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
import { scrollTopState } from '@/ui/utilities/scroll/states/scrollTopState';
import 'overlayscrollbars/overlayscrollbars.css';
export const ScrollWrapperContext = createContext<RefObject<HTMLDivElement>>({
current: null,
});
const StyledScrollWrapper = styled.div`
display: flex;
height: 100%;
@ -29,6 +28,7 @@ export type ScrollWrapperProps = {
className?: string;
hideY?: boolean;
hideX?: boolean;
contextProviderName: ContextProviderName;
};
export const ScrollWrapper = ({
@ -36,18 +36,21 @@ export const ScrollWrapper = ({
className,
hideX,
hideY,
contextProviderName,
}: ScrollWrapperProps) => {
const scrollableRef = useRef<HTMLDivElement>(null);
const Context = getContextByProviderName(contextProviderName);
const handleScroll = useRecoilCallback(
({ set }) =>
(overlayScroll: OverlayScrollbars) => {
const target = overlayScroll.elements().scrollOffsetElement;
set(scrollTopState, target.scrollTop);
set(scrollLeftState, target.scrollLeft);
},
[],
);
const { scrollTopComponentState, scrollLeftComponentState } =
useScrollStates(contextProviderName);
const setScrollTop = useSetRecoilState(scrollTopComponentState);
const setScrollLeft = useSetRecoilState(scrollLeftComponentState);
const handleScroll = (overlayScroll: OverlayScrollbars) => {
const target = overlayScroll.elements().scrollOffsetElement;
setScrollTop(target.scrollTop);
setScrollLeft(target.scrollLeft);
};
const setOverlayScrollbars = useSetRecoilState(overlayScrollbarsState);
@ -75,10 +78,10 @@ export const ScrollWrapper = ({
}, [instance, setOverlayScrollbars]);
return (
<ScrollWrapperContext.Provider value={scrollableRef}>
<Context.Provider value={{ ref: scrollableRef, id: contextProviderName }}>
<StyledScrollWrapper ref={scrollableRef} className={className}>
{children}
</StyledScrollWrapper>
</ScrollWrapperContext.Provider>
</Context.Provider>
);
};