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

2
packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx
View File

@ -148,7 +148,7 @@ export const RecordBoard = ({ recordBoardId }: RecordBoardProps) => {
>
<StyledWrapper>
<StyledBoardHeader />
<ScrollWrapper>
<ScrollWrapper contextProviderName="recordBoard">
<StyledContainer ref={boardRef}>
<DragDropContext onDragEnd={onDragEnd}>
{columnIds.map((columnId) => (

6
packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
View File

@ -23,7 +23,7 @@ import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox';
import { contextMenuIsOpenState } from '@/ui/navigation/context-menu/states/contextMenuIsOpenState';
import { contextMenuPositionState } from '@/ui/navigation/context-menu/states/contextMenuPositionState';
import { AnimatedEaseInOut } from '@/ui/utilities/animation/components/AnimatedEaseInOut';
import { ScrollWrapperContext } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { RecordBoardScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
const StyledBoardCard = styled.div<{ selected: boolean }>`
background-color: ${({ theme, selected }) =>
@ -199,10 +199,10 @@ export const RecordBoardCard = () => {
return [updateEntity, { loading: false }];
};
const scrollWrapperRef = useContext(ScrollWrapperContext);
const scrollWrapperRef = useContext(RecordBoardScrollWrapperContext);
const { ref: cardRef, inView } = useInView({
root: scrollWrapperRef.current,
root: scrollWrapperRef?.ref.current,
rootMargin: '1000px',
});

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

@ -70,7 +70,7 @@ export const RecordTableWithWrappers = ({
return (
<EntityDeleteContext.Provider value={deleteOneRecord}>
<ScrollWrapper>
<ScrollWrapper contextProviderName="recordTableWithWrappers">
<RecordUpdateContext.Provider value={updateRecordMutation}>
<StyledTableWithHeader>
<StyledTableContainer>

8
packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyEffect.tsx
View File

@ -10,8 +10,8 @@ import { useRecordTableStates } from '@/object-record/record-table/hooks/interna
import { isRecordTableScrolledLeftComponentState } from '@/object-record/record-table/states/isRecordTableScrolledLeftComponentState';
import { isRecordTableScrolledTopComponentState } from '@/object-record/record-table/states/isRecordTableScrolledTopComponentState';
import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
import { scrollTopState } from '@/ui/utilities/scroll/states/scrollTopState';
import { useScrollLeftValue } from '@/ui/utilities/scroll/hooks/useScrollLeftValue';
import { useScrollTopValue } from '@/ui/utilities/scroll/hooks/useScrollTopValue';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { isNonEmptyString } from '@sniptt/guards';
import { useScrollToPosition } from '~/hooks/useScrollToPosition';
@ -38,7 +38,7 @@ export const RecordTableBodyEffect = () => {
const tableLastRowVisible = useRecoilValue(tableLastRowVisibleState);
const scrollTop = useRecoilValue(scrollTopState);
const scrollTop = useScrollTopValue('recordTableWithWrappers');
const setIsRecordTableScrolledTop = useSetRecoilComponentState(
isRecordTableScrolledTopComponentState,
);
@ -57,7 +57,7 @@ export const RecordTableBodyEffect = () => {
}
}, [scrollTop, setIsRecordTableScrolledTop]);
const scrollLeft = useRecoilValue(scrollLeftState);
const scrollLeft = useScrollLeftValue('recordTableWithWrappers');
const setIsRecordTableScrolledLeft = useSetRecoilComponentState(
isRecordTableScrolledLeftComponentState,

10
packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader.tsx
View File

@ -1,13 +1,13 @@
import styled from '@emotion/styled';
import { useContext } from 'react';
import { useInView } from 'react-intersection-observer';
import styled from '@emotion/styled';
import { useRecoilCallback, useRecoilValue } from 'recoil';
import { GRAY_SCALE } from 'twenty-ui';
import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
import { ScrollWrapperContext } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { RecordTableWithWrappersScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
type RecordTableBodyFetchMoreLoaderProps = {
objectNameSingular: string;
@ -40,12 +40,14 @@ export const RecordTableBodyFetchMoreLoader = ({
[setRecordTableLastRowVisible],
);
const scrollWrapperRef = useContext(ScrollWrapperContext);
const scrollWrapperRef = useContext(
RecordTableWithWrappersScrollWrapperContext,
);
const { ref: tbodyRef } = useInView({
onChange: onLastRowVisible,
rootMargin: '1000px',
root: scrollWrapperRef.current?.querySelector(
root: scrollWrapperRef?.ref.current?.querySelector(
'[data-overlayscrollbars-viewport="scrollbarHidden"]',
),
});

6
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx
View File

@ -54,11 +54,11 @@ const HIDDEN_TABLE_COLUMN_DROPDOWN_HOTKEY_SCOPE_ID =
export const RecordTableHeaderLastColumn = () => {
const { theme } = useContext(ThemeContext);
const scrollWrapper = useScrollWrapperScopedRef();
const scrollWrapper = useScrollWrapperScopedRef('recordTableWithWrappers');
const isTableWiderThanScreen =
(scrollWrapper.current?.clientWidth ?? 0) <
(scrollWrapper.current?.scrollWidth ?? 0);
(scrollWrapper.ref.current?.clientWidth ?? 0) <
(scrollWrapper.ref.current?.scrollWidth ?? 0);
const { hiddenTableColumnsSelector } = useRecordTableStates();

8
packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowWrapper.tsx
View File

@ -10,7 +10,7 @@ import { RecordTableContext } from '@/object-record/record-table/contexts/Record
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { RecordTableTr } from '@/object-record/record-table/record-table-row/components/RecordTableTr';
import { ScrollWrapperContext } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { RecordTableWithWrappersScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
export const RecordTableRowWrapper = ({
recordId,
@ -31,10 +31,12 @@ export const RecordTableRowWrapper = ({
const { isRowSelectedFamilyState } = useRecordTableStates();
const currentRowSelected = useRecoilValue(isRowSelectedFamilyState(recordId));
const scrollWrapperRef = useContext(ScrollWrapperContext);
const scrollWrapperRef = useContext(
RecordTableWithWrappersScrollWrapperContext,
);
const { ref: elementRef, inView } = useInView({
root: scrollWrapperRef.current?.querySelector(
root: scrollWrapperRef.ref.current?.querySelector(
'[data-overlayscrollbars-viewport="scrollbarHidden"]',
),
rootMargin: '1000px',