Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unselect record table records on table body click #8306

Merged
merged 4 commits into from
Nov 4, 2024
Merged

Unselect record table records on table body click #8306

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
590a852
Unselect record table records on table body click
charlesBochet Nov 4, 2024
39bb2bc
Fix
charlesBochet Nov 4, 2024
7f3bdf8
Fix
charlesBochet Nov 4, 2024
d1a719b
Fix
charlesBochet Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,13 @@ import { RecordTableContextProvider } from '@/object-record/record-table/compone
import { RecordTableEmptyState } from '@/object-record/record-table/empty-state/components/RecordTableEmptyState';
import { RecordTableBody } from '@/object-record/record-table/record-table-body/components/RecordTableBody';
import { RecordTableBodyEffect } from '@/object-record/record-table/record-table-body/components/RecordTableBodyEffect';
import { RecordTableBodyUnselectEffect } from '@/object-record/record-table/record-table-body/components/RecordTableBodyUnselectEffect';
import { RecordTableHeader } from '@/object-record/record-table/record-table-header/components/RecordTableHeader';
import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState';
import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useRef } from 'react';

const StyledTable = styled.table`
border-radius: ${({ theme }) => theme.border.radius.sm};
Expand All @@ -32,6 +34,8 @@ export const RecordTable = ({
objectNameSingular,
onColumnsChange,
}: RecordTableProps) => {
const tableBodyRef = useRef<HTMLTableElement>(null);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

logic: Type mismatch between tableBodyRef (HTMLTableElement) and RecordTableBodyUnselectEffect props (HTMLDivElement)


const isRecordTableInitialLoading = useRecoilComponentValueV2(
isRecordTableInitialLoadingComponentState,
recordTableId,
Expand Down Expand Up @@ -67,10 +71,14 @@ export const RecordTable = ({
viewBarId={viewBarId}
>
<RecordTableBodyEffect />
<RecordTableBodyUnselectEffect
tableBodyRef={tableBodyRef}
recordTableId={recordTableId}
/>
{recordTableIsEmpty ? (
<RecordTableEmptyState />
) : (
<StyledTable className="entity-table-cell">
<StyledTable className="entity-table-cell" ref={tableBodyRef}>
<RecordTableHeader
objectMetadataNameSingular={objectNameSingular}
/>
Expand Down
12 changes: 3 additions & 9 deletions ...wenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ import { mapColumnDefinitionsToViewFields } from '@/views/utils/mapColumnDefinit
import { RecordUpdateContext } from '../contexts/EntityUpdateMutationHookContext';
import { useRecordTable } from '../hooks/useRecordTable';

import { RecordTableInternalEffect } from './RecordTableInternalEffect';

const StyledTableWithHeader = styled.div`
height: 100%;
`;
Expand Down Expand Up @@ -45,7 +43,7 @@ export const RecordTableWithWrappers = ({
recordTableId,
viewBarId,
}: RecordTableWithWrappersProps) => {
const tableBodyRef = useRef<HTMLDivElement>(null);
const tableRef = useRef<HTMLDivElement>(null);

const { resetTableRowSelection, setRowSelected } = useRecordTable({
recordTableId,
Expand All @@ -72,25 +70,21 @@ export const RecordTableWithWrappers = ({
<RecordUpdateContext.Provider value={updateRecordMutation}>
<StyledTableWithHeader>
<StyledTableContainer>
<StyledTableInternalContainer ref={tableBodyRef}>
<StyledTableInternalContainer ref={tableRef}>
<RecordTable
viewBarId={viewBarId}
recordTableId={recordTableId}
objectNameSingular={objectNameSingular}
onColumnsChange={handleColumnsChange}
/>
<DragSelect
dragSelectable={tableBodyRef}
dragSelectable={tableRef}
onDragSelectionStart={() => {
resetTableRowSelection();
}}
onDragSelectionChange={setRowSelected}
/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

logic: DragSelect is now positioned inside StyledTableInternalContainer which could affect its behavior if the container has overflow constraints

</StyledTableInternalContainer>
<RecordTableInternalEffect
tableBodyRef={tableBodyRef}
recordTableId={recordTableId}
/>
</StyledTableContainer>
</StyledTableWithHeader>
</RecordUpdateContext.Provider>
Expand Down
12 changes: 6 additions & 6 deletions .../components/RecordTableInternalEffect.tsx → ...ponents/RecordTableBodyUnselectEffect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@ import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkey
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useListenClickOutsideV2 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';

type RecordTableInternalEffectProps = {
recordTableId: string;
type RecordTableBodyUnselectEffectProps = {
tableBodyRef: React.RefObject<HTMLDivElement>;
recordTableId: string;
};

export const RecordTableInternalEffect = ({
recordTableId,
export const RecordTableBodyUnselectEffect = ({
tableBodyRef,
}: RecordTableInternalEffectProps) => {
const leaveTableFocus = useLeaveTableFocus(recordTableId);
recordTableId,
}: RecordTableBodyUnselectEffectProps) => {
const leaveTableFocus = useLeaveTableFocus();

const { resetTableRowSelection, useMapKeyboardToSoftFocus } = useRecordTable({
recordTableId,
Expand Down
Loading