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

Disable Cell Hover Effect During Row Selection (#11908)

Browse Source 
https://github.com/user-attachments/assets/925c02b7-6e34-4bb6-8f9e-2426de57088c



Closes #11878
This commit is contained in:
Abdul Rahman
2025-05-07 13:22:23 +05:30
committed by GitHub
parent 7b78b64bca
commit b5bacbbd29
1 changed files with 44 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableContent.tsx
View File

@ -5,6 +5,16 @@ import { RecordTableNoRecordGroupBody } from '@/object-record/record-table/recor
import { RecordTableRecordGroupsBody } from '@/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody';
import { RecordTableHeader } from '@/object-record/record-table/record-table-header/components/RecordTableHeader';
import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
import styled from '@emotion/styled';
import { useState } from 'react';
const StyledTableWithPointerEvents = styled(StyledTable)<{
isDragging: boolean;
}>`
& > * {
pointer-events: ${({ isDragging }) => (isDragging ? 'none' : 'auto')};
}
`;
export interface RecordTableContentProps {
tableBodyRef: React.RefObject<HTMLTableElement>;
@ -20,23 +30,37 @@ export const RecordTableContent = ({
handleDragSelectionEnd,
setRowSelected,
hasRecordGroups,
}: RecordTableContentProps) => (
<>
<StyledTable ref={tableBodyRef}>
<RecordTableHeader />
{hasRecordGroups ? (
<RecordTableRecordGroupsBody />
) : (
<RecordTableNoRecordGroupBody />
)}
<RecordTableStickyEffect />
<RecordTableStickyBottomEffect />
</StyledTable>
<DragSelect
dragSelectable={tableBodyRef}
onDragSelectionStart={handleDragSelectionStart}
onDragSelectionChange={setRowSelected}
onDragSelectionEnd={handleDragSelectionEnd}
/>
</>
);
}: RecordTableContentProps) => {
const [isDragging, setIsDragging] = useState(false);
const handleDragStart = () => {
setIsDragging(true);
handleDragSelectionStart();
};
const handleDragEnd = () => {
setIsDragging(false);
handleDragSelectionEnd();
};
return (
<>
<StyledTableWithPointerEvents ref={tableBodyRef} isDragging={isDragging}>
<RecordTableHeader />
{hasRecordGroups ? (
<RecordTableRecordGroupsBody />
) : (
<RecordTableNoRecordGroupBody />
)}
<RecordTableStickyEffect />
<RecordTableStickyBottomEffect />
</StyledTableWithPointerEvents>
<DragSelect
dragSelectable={tableBodyRef}
onDragSelectionStart={handleDragStart}
onDragSelectionChange={setRowSelected}
onDragSelectionEnd={handleDragEnd}
/>
</>
);
};