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

Fix overlay scroll gaps (#4512)

Browse Source 
* fix overlay scroll leaving gap

* fixed tests

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
brendanlaschke
2024-03-31 10:53:37 +02:00
committed by GitHub
parent da8f1b0a66
commit aacb3763e7
10 changed files with 89 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,13 @@
import { createContext, RefObject, useRef } from 'react';
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 { useListenScroll } from '../hooks/useListenScroll';
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,
@ -10,11 +16,9 @@ export const ScrollWrapperContext = createContext<RefObject<HTMLDivElement>>({
const StyledScrollWrapper = styled.div`
display: flex;
height: 100%;
overflow: auto;
scrollbar-gutter: stable;
width: 100%;
&.scrolling::-webkit-scrollbar-thumb {
.os-scrollbar-handle {
background-color: ${({ theme }) => theme.border.color.medium};
}
`;
@ -22,15 +26,47 @@ const StyledScrollWrapper = styled.div`
export type ScrollWrapperProps = {
children: React.ReactNode;
className?: string;
hideY?: boolean;
hideX?: boolean;
};
export const ScrollWrapper = ({ children, className }: ScrollWrapperProps) => {
export const ScrollWrapper = ({
children,
className,
hideX,
hideY,
}: ScrollWrapperProps) => {
const scrollableRef = useRef<HTMLDivElement>(null);
useListenScroll({
scrollableRef,
const handleScroll = useRecoilCallback(
({ set }) =>
(overlayScroll: OverlayScrollbars) => {
const target = overlayScroll.elements().scrollOffsetElement;
set(scrollTopState(), target.scrollTop);
set(scrollLeftState(), target.scrollLeft);
},
[],
);
const [initialize] = useOverlayScrollbars({
options: {
scrollbars: { autoHide: 'scroll' },
overflow: {
y: hideY ? 'hidden' : undefined,
x: hideX ? 'hidden' : undefined,
},
},
events: {
scroll: handleScroll,
},
});
useEffect(() => {
if (scrollableRef?.current !== null) {
initialize(scrollableRef.current);
}
}, [initialize, scrollableRef]);
return (
<ScrollWrapperContext.Provider value={scrollableRef}>
<StyledScrollWrapper ref={scrollableRef} className={className}>

48
packages/twenty-front/src/modules/ui/utilities/scroll/hooks/__tests__/useListenScroll.test.tsx
View File

@ -1,48 +0,0 @@
import React from 'react';
import { expect } from '@storybook/test';
import { act, fireEvent, renderHook } from '@testing-library/react';
import { RecoilRoot, useRecoilValue } from 'recoil';
import { useListenScroll } from '@/ui/utilities/scroll/hooks/useListenScroll';
import { isScrollingState } from '@/ui/utilities/scroll/states/isScrollingState';
import { isDefined } from '~/utils/isDefined';
const containerRef = React.createRef<HTMLDivElement>();
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<RecoilRoot>
<div id="container" ref={containerRef}>
{children}
</div>
</RecoilRoot>
);
jest.useFakeTimers();
describe('useListenScroll', () => {
it('should trigger the callback when scrolling', () => {
const { result } = renderHook(
() => {
useListenScroll({ scrollableRef: containerRef });
const isScrolling = useRecoilValue(isScrollingState);
return { isScrolling };
},
{
wrapper: Wrapper,
},
);
expect(result.current.isScrolling).toBe(false);
jest.advanceTimersByTime(500);
const container = document.querySelector('#container');
act(() => {
if (isDefined(container)) fireEvent.scroll(container);
});
expect(result.current.isScrolling).toBe(true);
});
});

66
packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useListenScroll.ts
View File

@ -1,66 +0,0 @@
import { useEffect } from 'react';
import debounce from 'lodash.debounce';
import { useRecoilCallback } from 'recoil';
import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
import { scrollTopState } from '@/ui/utilities/scroll/states/scrollTopState';
import { isScrollingState } from '../states/isScrollingState';
export const useListenScroll = <T extends Element>({
scrollableRef,
}: {
scrollableRef: React.RefObject<T>;
}) => {
const hideScrollBarsCallback = useRecoilCallback(
({ snapshot }) =>
() => {
const isScrolling = snapshot.getLoadable(isScrollingState).getValue();
if (!isScrolling) {
scrollableRef.current?.classList.remove('scrolling');
}
},
[scrollableRef],
);
const handleScrollStart = useRecoilCallback(
({ set }) =>
(event: Event) => {
set(isScrollingState, true);
scrollableRef.current?.classList.add('scrolling');
const target = event.target as HTMLElement;
set(scrollTopState, target.scrollTop);
set(scrollLeftState, target.scrollLeft);
},
[scrollableRef],
);
const handleScrollEnd = useRecoilCallback(
({ set }) =>
() => {
set(isScrollingState, false);
debounce(hideScrollBarsCallback, 1000)();
},
[hideScrollBarsCallback],
);
useEffect(() => {
const refTarget = scrollableRef.current;
refTarget?.addEventListener('scrollend', handleScrollEnd);
refTarget?.addEventListener('scroll', handleScrollStart);
return () => {
refTarget?.removeEventListener('scrollend', handleScrollEnd);
refTarget?.removeEventListener('scroll', handleScrollStart);
};
}, [
hideScrollBarsCallback,
handleScrollStart,
handleScrollEnd,
scrollableRef,
]);
};

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

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