diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupRows.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupRows.tsx index 28a4f4ae2..1feefdd81 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupRows.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupRows.tsx @@ -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 = () => { ); })} + {!isRecordTableInitialLoading && allRecordIds.length > 0 && ( )} diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx index 6dd0d879b..a92111010 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx @@ -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 = () => { })} + setRecordTableHoverPosition(null)} > - {children} - {provided.placeholder} + + {children} + )} diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppablePlaceholder.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppablePlaceholder.tsx new file mode 100644 index 000000000..9764a17a1 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppablePlaceholder.tsx @@ -0,0 +1,7 @@ +import { useRecordTableBodyDroppableContextOrThrow } from '@/object-record/record-table/record-table-body/contexts/RecordTableBodyDroppableContext'; + +export const RecordTableBodyDroppablePlaceholder = () => { + const { droppablePlaceholder } = useRecordTableBodyDroppableContextOrThrow(); + + return droppablePlaceholder; +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/contexts/RecordTableBodyDroppableContext.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/contexts/RecordTableBodyDroppableContext.ts new file mode 100644 index 000000000..cf22a97cd --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/contexts/RecordTableBodyDroppableContext.ts @@ -0,0 +1,13 @@ +import { ReactNode } from 'react'; +import { createRequiredContext } from '~/utils/createRequiredContext'; + +export type RecordTableBodyDroppableContextValue = { + droppablePlaceholder: ReactNode; +}; + +export const [ + RecordTableBodyDroppableContextProvider, + useRecordTableBodyDroppableContextOrThrow, +] = createRequiredContext( + 'RecordTableBodyDroppableContext', +);