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

Use scroll left instead of intersection observer (#3522)

Browse Source
This commit is contained in:
Lucas Bordeau
2024-01-24 10:39:04 +01:00
committed by GitHub
parent c7ad6a0de7
commit e54c141484
5 changed files with 37 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableFirstColumnScrollObserver.tsx
View File

@ -1,22 +1,20 @@
import { useContext } from 'react';
import { useInView } from 'react-intersection-observer';
import { useContext, useEffect } from 'react';
import { useRecoilValue } from 'recoil';
import { RecordTableRefContext } from '@/object-record/record-table/contexts/RecordTableRefContext';
import { ScrollWrapperContext } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
export const RecordTableFirstColumnScrollObserver = () => {
const scrollWrapperRef = useContext(ScrollWrapperContext);
export const RecordTableFirstColumnScrollEffect = () => {
const recordTableRef = useContext(RecordTableRefContext);
const { ref: elementRef } = useInView({
root: scrollWrapperRef.current,
onChange: (inView) => {
recordTableRef.current?.classList.toggle(
'freeze-first-columns-shadow',
!inView,
);
},
});
const scrollLeft = useRecoilValue(scrollLeftState);
return <div ref={elementRef}></div>;
useEffect(() => {
recordTableRef.current?.classList.toggle(
'freeze-first-columns-shadow',
scrollLeft > 0,
);
}, [scrollLeft, recordTableRef]);
return <></>;
};

4
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
View File

@ -6,7 +6,7 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
import { RecordTable } from '@/object-record/record-table/components/RecordTable';
import { RecordTableFirstColumnScrollObserver } from '@/object-record/record-table/components/RecordTableFirstColumnScrollObserver';
import { RecordTableFirstColumnScrollEffect } from '@/object-record/record-table/components/RecordTableFirstColumnScrollObserver';
import { RecordTableRefContextWrapper } from '@/object-record/record-table/components/RecordTableRefContext';
import { EntityDeleteContext } from '@/object-record/record-table/contexts/EntityDeleteHookContext';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
@ -113,7 +113,7 @@ export const RecordTableWithWrappers = ({
<EntityDeleteContext.Provider value={deleteOneRecord}>
<ScrollWrapper>
<RecordTableRefContextWrapper>
<RecordTableFirstColumnScrollObserver />
<RecordTableFirstColumnScrollEffect />
<RecordUpdateContext.Provider value={updateRecordMutation}>
<StyledTableWithHeader>
<StyledTableContainer>