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 { RecordTableRecordGroupsBody } from '@/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody';
import { RecordTableHeader } from '@/object-record/record-table/record-table-header/components/RecordTableHeader'; import { RecordTableHeader } from '@/object-record/record-table/record-table-header/components/RecordTableHeader';
import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect'; 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 { export interface RecordTableContentProps {
tableBodyRef: React.RefObject<HTMLTableElement>; tableBodyRef: React.RefObject<HTMLTableElement>;
@ -20,23 +30,37 @@ export const RecordTableContent = ({
handleDragSelectionEnd, handleDragSelectionEnd,
setRowSelected, setRowSelected,
hasRecordGroups, hasRecordGroups,
}: RecordTableContentProps) => ( }: RecordTableContentProps) => {
<> const [isDragging, setIsDragging] = useState(false);
<StyledTable ref={tableBodyRef}>
<RecordTableHeader /> const handleDragStart = () => {
{hasRecordGroups ? ( setIsDragging(true);
<RecordTableRecordGroupsBody /> handleDragSelectionStart();
) : ( };
<RecordTableNoRecordGroupBody />
)} const handleDragEnd = () => {
<RecordTableStickyEffect /> setIsDragging(false);
<RecordTableStickyBottomEffect /> handleDragSelectionEnd();
</StyledTable> };
<DragSelect
dragSelectable={tableBodyRef} return (
onDragSelectionStart={handleDragSelectionStart} <>
onDragSelectionChange={setRowSelected} <StyledTableWithPointerEvents ref={tableBodyRef} isDragging={isDragging}>
onDragSelectionEnd={handleDragSelectionEnd} <RecordTableHeader />
/> {hasRecordGroups ? (
</> <RecordTableRecordGroupsBody />
); ) : (
<RecordTableNoRecordGroupBody />
)}
<RecordTableStickyEffect />
<RecordTableStickyBottomEffect />
</StyledTableWithPointerEvents>
<DragSelect
dragSelectable={tableBodyRef}
onDragSelectionStart={handleDragStart}
onDragSelectionChange={setRowSelected}
onDragSelectionEnd={handleDragEnd}
/>
</>
);
};