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

Implement <ScrollRestoration /> (#5086)

Browse Source 
### Description

Implement &lt;ScrollRestoration /&gt;

### Refs


[https://github.com/twentyhq/twenty/issues/4357](https://github.com/twentyhq/twenty/issues/4183)

### Demo


https://github.com/twentyhq/twenty/assets/140154534/321242e1-4751-4204-8c86-e9b921c1733e

Fixes #4357

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>
This commit is contained in:
gitstart-app[bot]
2024-05-17 16:36:28 +02:00
committed by GitHub
parent 992602b307
commit 0e525caf01
8 changed files with 161 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,8 +2,9 @@ import { createContext, RefObject, useEffect, useRef } from 'react';
import styled from '@emotion/styled';
import { OverlayScrollbars } from 'overlayscrollbars';
import { useOverlayScrollbars } from 'overlayscrollbars-react';
import { useRecoilCallback } from 'recoil';
import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { overlayScrollbarsState } from '@/ui/utilities/scroll/states/overlayScrollbarsState';
import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
import { scrollTopState } from '@/ui/utilities/scroll/states/scrollTopState';
@ -48,7 +49,9 @@ export const ScrollWrapper = ({
[],
);
const [initialize] = useOverlayScrollbars({
const setOverlayScrollbars = useSetRecoilState(overlayScrollbarsState);
const [initialize, instance] = useOverlayScrollbars({
options: {
scrollbars: { autoHide: 'scroll' },
overflow: {
@ -67,6 +70,10 @@ export const ScrollWrapper = ({
}
}, [initialize, scrollableRef]);
useEffect(() => {
setOverlayScrollbars(instance());
}, [instance, setOverlayScrollbars]);
return (
<ScrollWrapperContext.Provider value={scrollableRef}>
<StyledScrollWrapper ref={scrollableRef} className={className}>

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

@ -0,0 +1,7 @@
import { OverlayScrollbars } from 'overlayscrollbars';
import { createState } from 'twenty-ui';
export const overlayScrollbarsState = createState<OverlayScrollbars | null>({
key: 'scroll/overlayScrollbarsState',
defaultValue: null,
});

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

@ -0,0 +1,6 @@
import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';
export const scrollPositionState = createFamilyState({
key: 'scroll/scrollPositionState',
defaultValue: 0,
});