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

Fix last row disappearing when dragging a row in the table (#12297)

Browse Source 
# Fix last row disappearing when dragging a row in the table

Fixes https://github.com/twentyhq/core-team-issues/issues/836

The issue came from the fact that the provided placeholder was not
mounted at the right place (after the footer when it should be mounted
before it).

I created a context to which we can pass the placeholder. We can use
this placeholder anywhere inside the table by using
`RecordTableBodyDroppablePlaceholder`.

## Before


https://github.com/user-attachments/assets/39a2e45b-6d97-4450-bfee-12135a873a1d


## After


https://github.com/user-attachments/assets/ca126819-67f2-4358-b644-85172fef3b8f
This commit is contained in:
Raphaël Bosi
2025-05-27 12:02:24 +02:00
committed by GitHub
parent c7b3ebc743
commit d85c45a4cf
5 changed files with 30 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
import { RecordTableBodyDroppablePlaceholder } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDroppablePlaceholder';
import { RecordTableBodyFetchMoreLoader } from '@/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader';
import { RecordTableAggregateFooter } from '@/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter';
import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow';
@ -27,6 +28,7 @@ export const RecordTableNoRecordGroupRows = () => {
);
})}
<RecordTableBodyFetchMoreLoader />
<RecordTableBodyDroppablePlaceholder />
{!isRecordTableInitialLoading && allRecordIds.length > 0 && (
<RecordTableAggregateFooter />
)}

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

@ -1,6 +1,7 @@
import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId';
import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
import { RecordTableBodyDroppablePlaceholder } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDroppablePlaceholder';
import { RecordTableAggregateFooter } from '@/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter';
import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow';
import { RecordTableRecordGroupSectionAddNew } from '@/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew';
@ -57,6 +58,7 @@ export const RecordTableRecordGroupRows = () => {
})}
<RecordTableRecordGroupSectionLoadMore />
<RecordTableRecordGroupSectionAddNew />
<RecordTableBodyDroppablePlaceholder />
<RecordTableAggregateFooter
key={currentRecordGroupId}
currentRecordGroupId={currentRecordGroupId}

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

@ -1,4 +1,5 @@
import { RecordTableBody } from '@/object-record/record-table/record-table-body/components/RecordTableBody';
import { RecordTableBodyDroppableContextProvider } from '@/object-record/record-table/record-table-body/contexts/RecordTableBodyDroppableContext';
import { recordTableHoverPositionComponentState } from '@/object-record/record-table/states/recordTableHoverPositionComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { Droppable } from '@hello-pangea/dnd';
@ -36,8 +37,11 @@ export const RecordTableBodyDroppable = ({
{...provided.droppableProps}
onMouseLeave={() => setRecordTableHoverPosition(null)}
>
{children}
{provided.placeholder}
<RecordTableBodyDroppableContextProvider
value={{ droppablePlaceholder: provided.placeholder }}
>
{children}
</RecordTableBodyDroppableContextProvider>
</RecordTableBody>
)}
</Droppable>

7
packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppablePlaceholder.tsx Normal file
View File

@ -0,0 +1,7 @@
import { useRecordTableBodyDroppableContextOrThrow } from '@/object-record/record-table/record-table-body/contexts/RecordTableBodyDroppableContext';
export const RecordTableBodyDroppablePlaceholder = () => {
const { droppablePlaceholder } = useRecordTableBodyDroppableContextOrThrow();
return droppablePlaceholder;
};

13
packages/twenty-front/src/modules/object-record/record-table/record-table-body/contexts/RecordTableBodyDroppableContext.ts Normal file
View File

@ -0,0 +1,13 @@
import { ReactNode } from 'react';
import { createRequiredContext } from '~/utils/createRequiredContext';
export type RecordTableBodyDroppableContextValue = {
droppablePlaceholder: ReactNode;
};
export const [
RecordTableBodyDroppableContextProvider,
useRecordTableBodyDroppableContextOrThrow,
] = createRequiredContext<RecordTableBodyDroppableContextValue>(
'RecordTableBodyDroppableContext',
);