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

Replace hotkey scopes by focus stack (Part 2 - Record Table, Rows and Cells) (#12798)

Browse Source 
# Replace hotkey scopes by focus stack (Part 2 - Record Table, Rows and
Cells)

This PR is the second part of a refactoring aiming to deprecate the
hotkey scopes api in favor of the new focus stack api which is more
robust.
Part 1: https://github.com/twentyhq/twenty/pull/12673

The record table shortcuts are no longer centralized in the record
table, they now split and the focused element is in charge of applying
the desired shortcuts. (For instance: The rows are in charge of the row
navigation and the cells of the cells navigation).

## Video QA:


https://github.com/user-attachments/assets/f0bb9eed-8a2a-4b6d-a82f-1998e929f122


## Bugfixes:

### Fix record table click outside not working after opening and closing
a cell

Introduced by https://github.com/twentyhq/twenty/pull/11644

#### Before


https://github.com/user-attachments/assets/d28deda8-15e9-4ffe-b60a-e8b54625f8e5


#### After


https://github.com/user-attachments/assets/3f7e1ffc-15d9-4336-aeb0-bebd8ae0cbe0


### Fix ObjectFilterDropdownFilterInput hotkeys

Introduced by https://github.com/twentyhq/twenty/pull/12673

#### Before


https://github.com/user-attachments/assets/ab2039bd-ebe1-49ba-8377-a6b300664469


#### After


https://github.com/user-attachments/assets/90597453-dab2-426b-a134-0a24b0de0a6b
This commit is contained in:
Raphaël Bosi
2025-06-25 15:18:51 +02:00
committed by GitHub
parent 6450e11f1e
commit 1ab51d41aa
80 changed files with 1246 additions and 847 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardDeactivateBoardCardEffect.tsx
View File

@ -1,13 +1,13 @@
import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext';
import { useActiveRecordBoardCard } from '@/object-record/record-board/hooks/useActiveRecordBoardCard';
import { useListenRightDrawerClose } from '@/ui/layout/right-drawer/hooks/useListenRightDrawerClose';
import { useListenToSidePanelClosing } from '@/ui/layout/right-drawer/hooks/useListenToSidePanelClosing';
import { useContext } from 'react';
export const RecordBoardDeactivateBoardCardEffect = () => {
const { recordBoardId } = useContext(RecordBoardContext);
const { deactivateBoardCard } = useActiveRecordBoardCard(recordBoardId);
useListenRightDrawerClose(() => {
useListenToSidePanelClosing(() => {
deactivateBoardCard();
});

1
packages/twenty-front/src/modules/object-record/record-index/constants/RecordIndexFocusId.ts Normal file
View File

@ -0,0 +1 @@
export const RECORD_INDEX_FOCUS_ID = 'record-index';

37
packages/twenty-front/src/modules/object-record/record-index/hooks/useResetFocusStackToRecordIndex.ts Normal file
View File

@ -0,0 +1,37 @@
import { RECORD_INDEX_FOCUS_ID } from '@/object-record/record-index/constants/RecordIndexFocusId';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { useResetFocusStackToFocusItem } from '@/ui/utilities/focus/hooks/useResetFocusStackToFocusItem';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
export const useResetFocusStackToRecordIndex = () => {
const { resetFocusStackToFocusItem } = useResetFocusStackToFocusItem();
const resetFocusStackToRecordIndex = () => {
resetFocusStackToFocusItem({
focusStackItem: {
focusId: RECORD_INDEX_FOCUS_ID,
componentInstance: {
componentType: FocusComponentType.PAGE,
componentInstanceId: RECORD_INDEX_FOCUS_ID,
},
globalHotkeysConfig: {
enableGlobalHotkeysWithModifiers: true,
enableGlobalHotkeysConflictingWithKeyboard: true,
},
memoizeKey: 'global',
},
hotkeyScope: {
scope: RecordIndexHotkeyScope.RecordIndex,
customScopes: {
goto: true,
keyboardShortcutMenu: true,
searchRecords: true,
},
},
});
};
return {
resetFocusStackToRecordIndex,
};
};

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

@ -2,11 +2,8 @@ import { RecordTableDeactivateRecordTableRowEffect } from '@/object-record/recor
import { RecordTableBodyEscapeHotkeyEffect } from '@/object-record/record-table/record-table-body/components/RecordTableBodyEscapeHotkeyEffect';
import { RecordTableBodyFocusClickOutsideEffect } from '@/object-record/record-table/record-table-body/components/RecordTableBodyFocusClickOutsideEffect';
import { RecordTableBodyFocusKeyboardEffect } from '@/object-record/record-table/record-table-body/components/RecordTableBodyFocusKeyboardEffect';
import { RecordTableBodyRowFocusKeyboardEffect } from '@/object-record/record-table/record-table-body/components/RecordTableBodyRowFocusKeyboardEffect';
import { RecordTableNoRecordGroupBodyEffect } from '@/object-record/record-table/record-table-body/components/RecordTableNoRecordGroupBodyEffect';
import { RecordTableRecordGroupBodyEffects } from '@/object-record/record-table/record-table-body/components/RecordTableRecordGroupBodyEffects';
import { isRecordTableRowFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableRowFocusActiveComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
export interface RecordTableBodyEffectsWrapperProps {
hasRecordGroups: boolean;
@ -17,10 +14,6 @@ export const RecordTableBodyEffectsWrapper = ({
hasRecordGroups,
tableBodyRef,
}: RecordTableBodyEffectsWrapperProps) => {
const isRecordTableRowFocusActive = useRecoilComponentValueV2(
isRecordTableRowFocusActiveComponentState,
);
return (
<>
{hasRecordGroups ? (
@ -30,7 +23,6 @@ export const RecordTableBodyEffectsWrapper = ({
)}
<RecordTableBodyEscapeHotkeyEffect />
<RecordTableBodyFocusKeyboardEffect />
{isRecordTableRowFocusActive && <RecordTableBodyRowFocusKeyboardEffect />}
<RecordTableBodyFocusClickOutsideEffect tableBodyRef={tableBodyRef} />
<RecordTableDeactivateRecordTableRowEffect />
</>

4
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableDeactivateRecordTableRowEffect.tsx
View File

@ -1,10 +1,10 @@
import { useActiveRecordTableRow } from '@/object-record/record-table/hooks/useActiveRecordTableRow';
import { useListenRightDrawerClose } from '@/ui/layout/right-drawer/hooks/useListenRightDrawerClose';
import { useListenToSidePanelClosing } from '@/ui/layout/right-drawer/hooks/useListenToSidePanelClosing';
export const RecordTableDeactivateRecordTableRowEffect = () => {
const { deactivateRecordTableRow } = useActiveRecordTableRow();
useListenRightDrawerClose(() => {
useListenToSidePanelClosing(() => {
deactivateRecordTableRow();
});

87
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableFocusModeHotkeysSetterEffect.tsx
View File

@ -1,87 +0,0 @@
import { useContext } from 'react';
import { Key } from 'ts-key-enum';
import { useClearField } from '@/object-record/record-field/hooks/useClearField';
import { useIsFieldClearable } from '@/object-record/record-field/hooks/useIsFieldClearable';
import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFieldInputOnly';
import { useToggleEditOnlyInput } from '@/object-record/record-field/hooks/useToggleEditOnlyInput';
import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { TableHotkeyScope } from '../types/TableHotkeyScope';
export const RecordTableFocusModeHotkeysSetterEffect = () => {
const { openTableCell } = useOpenRecordTableCellFromCell();
const { isReadOnly } = useContext(FieldContext);
const isFieldInputOnly = useIsFieldInputOnly();
const isFieldClearable = useIsFieldClearable();
const toggleEditOnlyInput = useToggleEditOnlyInput();
const clearField = useClearField();
useScopedHotkeys(
[Key.Backspace, Key.Delete],
() => {
if (!isFieldInputOnly && isFieldClearable) {
clearField();
}
},
TableHotkeyScope.TableFocus,
[clearField, isFieldClearable, isFieldInputOnly],
);
useScopedHotkeys(
Key.Enter,
() => {
if (isReadOnly) {
return;
}
if (!isFieldInputOnly) {
openTableCell();
} else {
toggleEditOnlyInput();
}
},
TableHotkeyScope.TableFocus,
[openTableCell, isFieldInputOnly, toggleEditOnlyInput, isReadOnly],
);
useScopedHotkeys(
'*',
(keyboardEvent) => {
if (isReadOnly) {
return;
}
if (!isFieldInputOnly) {
const isWritingText =
!isNonTextWritingKey(keyboardEvent.key) &&
!keyboardEvent.ctrlKey &&
!keyboardEvent.metaKey;
if (!isWritingText) {
return;
}
keyboardEvent.preventDefault();
keyboardEvent.stopPropagation();
keyboardEvent.stopImmediatePropagation();
openTableCell(keyboardEvent.key);
}
},
TableHotkeyScope.TableFocus,
[openTableCell, isFieldInputOnly, toggleEditOnlyInput, isReadOnly],
{
preventDefault: false,
},
);
return <></>;
};

6
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupBodyContextProvider.tsx
View File

@ -1,7 +1,7 @@
import { RecordTableBodyContextProvider } from '@/object-record/record-table/contexts/RecordTableBodyContext';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useHandleContainerMouseEnter } from '@/object-record/record-table/hooks/internal/useHandleContainerMouseEnter';
import { useRecordTableMove } from '@/object-record/record-table/hooks/useRecordTableMove';
import { useRecordTableMoveFocusedCell } from '@/object-record/record-table/hooks/useRecordTableMoveFocusedCell';
import { useCloseRecordTableCellInGroup } from '@/object-record/record-table/record-table-cell/hooks/internal/useCloseRecordTableCellInGroup';
import { useMoveHoverToCurrentCell } from '@/object-record/record-table/record-table-cell/hooks/useMoveHoverToCurrentCell';
import {
@ -29,10 +29,10 @@ export const RecordTableRecordGroupBodyContextProvider = ({
openTableCell(args);
};
const { move } = useRecordTableMove(recordTableId);
const { moveFocus } = useRecordTableMoveFocusedCell(recordTableId);
const handleMoveFocus = (direction: MoveFocusDirection) => {
move(direction);
moveFocus(direction);
};
const { closeTableCellInGroup } = useCloseRecordTableCellInGroup();

17
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
View File

@ -13,7 +13,7 @@ import { mapColumnDefinitionsToViewFields } from '@/views/utils/mapColumnDefinit
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
import { RecordTableContextProvider } from '@/object-record/record-table/components/RecordTableContextProvider';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { RecordUpdateContext } from '../contexts/EntityUpdateMutationHookContext';
import { useRecordTable } from '../hooks/useRecordTable';
@ -58,15 +58,16 @@ export const RecordTableWithWrappers = ({
},
);
useScopedHotkeys(
'ctrl+a,meta+a',
handleSelectAllRows,
TableHotkeyScope.TableFocus,
[],
{
useHotkeysOnFocusedElement({
keys: ['ctrl+a,meta+a'],
callback: handleSelectAllRows,
focusId: recordTableId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleSelectAllRows],
options: {
enableOnFormTags: false,
},
);
});
const { saveViewFields } = useSaveCurrentViewFields();

17
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useCloseCurrentTableCellInEditMode.ts
View File

@ -2,6 +2,8 @@ import { useRecoilCallback } from 'recoil';
import { recordTableCellEditModePositionComponentState } from '@/object-record/record-table/states/recordTableCellEditModePositionComponentState';
import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
import { useRemoveLastFocusItemFromFocusStackByComponentType } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackByComponentType';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
export const useCloseCurrentTableCellInEditMode = (recordTableId?: string) => {
@ -14,14 +16,25 @@ export const useCloseCurrentTableCellInEditMode = (recordTableId?: string) => {
const { goBackToPreviousDropdownFocusId } =
useGoBackToPreviousDropdownFocusId();
const { removeLastFocusItemFromFocusStackByComponentType } =
useRemoveLastFocusItemFromFocusStackByComponentType();
return useRecoilCallback(
({ set }) => {
return async () => {
return () => {
set(currentTableCellInEditModePositionState, null);
goBackToPreviousDropdownFocusId();
removeLastFocusItemFromFocusStackByComponentType({
componentType: FocusComponentType.OPEN_FIELD_INPUT,
});
};
},
[currentTableCellInEditModePositionState, goBackToPreviousDropdownFocusId],
[
currentTableCellInEditModePositionState,
goBackToPreviousDropdownFocusId,
removeLastFocusItemFromFocusStackByComponentType,
],
);
};

21
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts
View File

@ -1,7 +1,8 @@
import { useResetFocusStackToRecordIndex } from '@/object-record/record-index/hooks/useResetFocusStackToRecordIndex';
import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
import { useActiveRecordTableRow } from '@/object-record/record-table/hooks/useActiveRecordTableRow';
import { useFocusedRecordTableRow } from '@/object-record/record-table/hooks/useFocusedRecordTableRow';
import { useSetIsRecordTableFocusActive } from '@/object-record/record-table/record-table-cell/hooks/useSetIsRecordTableFocusActive';
import { useUnfocusRecordTableCell } from '@/object-record/record-table/record-table-cell/hooks/useUnfocusRecordTableCell';
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
import { recordTableHoverPositionComponentState } from '@/object-record/record-table/states/recordTableHoverPositionComponentState';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
@ -17,10 +18,6 @@ export const useLeaveTableFocus = (recordTableId?: string) => {
recordTableIdFromContext,
);
const { setIsFocusActiveForCurrentPosition } = useSetIsRecordTableFocusActive(
recordTableIdFromContext,
);
const setRecordTableHoverPosition = useSetRecoilComponentStateV2(
recordTableHoverPositionComponentState,
recordTableIdFromContext,
@ -34,15 +31,23 @@ export const useLeaveTableFocus = (recordTableId?: string) => {
recordTableIdFromContext,
);
return () => {
resetTableRowSelection();
const { resetFocusStackToRecordIndex } = useResetFocusStackToRecordIndex();
setIsFocusActiveForCurrentPosition(false);
const { unfocusRecordTableCell } = useUnfocusRecordTableCell(
recordTableIdFromContext,
);
return () => {
unfocusRecordTableCell();
resetTableRowSelection();
unfocusRecordTableRow();
deactivateRecordTableRow();
setRecordTableHoverPosition(null);
resetFocusStackToRecordIndex();
};
};

15
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts
View File

@ -4,7 +4,8 @@ import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record
import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { useSetIsRecordTableFocusActive } from '@/object-record/record-table/record-table-cell/hooks/useSetIsRecordTableFocusActive';
import { useFocusedRecordTableRow } from '@/object-record/record-table/hooks/useFocusedRecordTableRow';
import { useUnfocusRecordTableCell } from '@/object-record/record-table/record-table-cell/hooks/useUnfocusRecordTableCell';
import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
import { recordTableHoverPositionComponentState } from '@/object-record/record-table/states/recordTableHoverPositionComponentState';
@ -44,14 +45,14 @@ export const useSetRecordTableData = ({
recordTableId,
);
const { setIsFocusActiveForCurrentPosition } =
useSetIsRecordTableFocusActive(recordTableId);
const setRecordTableHoverPosition = useSetRecoilComponentStateV2(
recordTableHoverPositionComponentState,
recordTableId,
);
const { unfocusRecordTableCell } = useUnfocusRecordTableCell(recordTableId);
const { unfocusRecordTableRow } = useFocusedRecordTableRow(recordTableId);
return useRecoilCallback(
({ set, snapshot }) =>
<T extends ObjectRecord>({
@ -92,7 +93,8 @@ export const useSetRecordTableData = ({
const recordIds = records.map((record) => record.id);
if (!isDeeplyEqual(currentRowIds, recordIds)) {
setIsFocusActiveForCurrentPosition(false);
unfocusRecordTableCell();
unfocusRecordTableRow();
setRecordTableHoverPosition(null);
if (hasUserSelectedAllRows) {
@ -115,7 +117,8 @@ export const useSetRecordTableData = ({
recordIndexRecordIdsByGroupFamilyState,
recordIndexAllRecordIdsSelector,
hasUserSelectedAllRowsState,
setIsFocusActiveForCurrentPosition,
unfocusRecordTableCell,
unfocusRecordTableRow,
setRecordTableHoverPosition,
isRowSelectedFamilyState,
],

28
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableFocusPosition.ts
View File

@ -1,28 +0,0 @@
import { useRecoilCallback } from 'recoil';
import { recordTableFocusPositionComponentState } from '@/object-record/record-table/states/recordTableFocusPositionComponentState';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useSetIsRecordTableFocusActive } from '../../record-table-cell/hooks/useSetIsRecordTableFocusActive';
import { TableCellPosition } from '../../types/TableCellPosition';
export const useSetRecordTableFocusPosition = (recordTableId?: string) => {
const focusPositionState = useRecoilComponentCallbackStateV2(
recordTableFocusPositionComponentState,
recordTableId,
);
const { setIsFocusActive, setIsFocusActiveForCurrentPosition } =
useSetIsRecordTableFocusActive(recordTableId);
return useRecoilCallback(
({ set }) => {
return (newPosition: TableCellPosition) => {
set(focusPositionState, newPosition);
setIsFocusActiveForCurrentPosition(false);
setIsFocusActive(true, newPosition);
};
},
[focusPositionState, setIsFocusActive, setIsFocusActiveForCurrentPosition],
);
};

102
packages/twenty-front/src/modules/object-record/record-table/hooks/useFocusedRecordTableRow.ts
View File

@ -1,36 +1,58 @@
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { useUnfocusRecordTableCell } from '@/object-record/record-table/record-table-cell/hooks/useUnfocusRecordTableCell';
import { getRecordTableRowFocusId } from '@/object-record/record-table/record-table-row/utils/getRecordTableRowFocusId';
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
import { focusedRecordTableRowIndexComponentState } from '@/object-record/record-table/states/focusedRecordTableRowIndexComponentState';
import { isRecordTableCellFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableCellFocusActiveComponentState';
import { isRecordTableRowFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableRowFocusActiveComponentState';
import { isRecordTableRowFocusedComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowFocusedComponentFamilyState';
import { recordTableFocusPositionComponentState } from '@/object-record/record-table/states/recordTableFocusPositionComponentState';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useRecoilCallback } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
export const useFocusedRecordTableRow = (recordTableId?: string) => {
const recordTableIdFromContext = useAvailableComponentInstanceIdOrThrow(
RecordTableComponentInstanceContext,
recordTableId,
);
const isRowFocusedState = useRecoilComponentCallbackStateV2(
isRecordTableRowFocusedComponentFamilyState,
recordTableId,
recordTableIdFromContext,
);
const focusedRowIndexState = useRecoilComponentCallbackStateV2(
focusedRecordTableRowIndexComponentState,
recordTableId,
recordTableIdFromContext,
);
const isRowFocusActiveState = useRecoilComponentCallbackStateV2(
isRecordTableRowFocusActiveComponentState,
recordTableId,
recordTableIdFromContext,
);
const focusedCellPositionState = useRecoilComponentCallbackStateV2(
recordTableFocusPositionComponentState,
recordTableId,
recordTableIdFromContext,
);
const isRecordTableCellFocusActiveState = useRecoilComponentCallbackStateV2(
isRecordTableCellFocusActiveComponentState,
recordTableId,
recordTableIdFromContext,
);
const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
const { removeFocusItemFromFocusStackById } =
useRemoveFocusItemFromFocusStackById();
const { unfocusRecordTableCell } = useUnfocusRecordTableCell(
recordTableIdFromContext,
);
const unfocusRecordTableRow = useRecoilCallback(
@ -44,11 +66,26 @@ export const useFocusedRecordTableRow = (recordTableId?: string) => {
return;
}
const focusId = getRecordTableRowFocusId({
recordTableId: recordTableIdFromContext,
rowIndex: focusedRowIndex,
});
removeFocusItemFromFocusStackById({
focusId,
});
set(focusedRowIndexState, null);
set(isRowFocusedState(focusedRowIndex), false);
set(isRowFocusActiveState, false);
},
[focusedRowIndexState, isRowFocusedState, isRowFocusActiveState],
[
focusedRowIndexState,
isRowFocusedState,
isRowFocusActiveState,
recordTableIdFromContext,
removeFocusItemFromFocusStackById,
],
);
const focusRecordTableRow = useRecoilCallback(
@ -60,13 +97,51 @@ export const useFocusedRecordTableRow = (recordTableId?: string) => {
if (isDefined(focusedRowIndex) && focusedRowIndex !== rowIndex) {
set(isRowFocusedState(focusedRowIndex), false);
const focusId = getRecordTableRowFocusId({
recordTableId: recordTableIdFromContext,
rowIndex: focusedRowIndex,
});
removeFocusItemFromFocusStackById({
focusId,
});
}
const focusId = getRecordTableRowFocusId({
recordTableId: recordTableIdFromContext,
rowIndex,
});
pushFocusItemToFocusStack({
focusId,
component: {
type: FocusComponentType.RECORD_TABLE_ROW,
instanceId: focusId,
},
hotkeyScope: {
scope: RecordIndexHotkeyScope.RecordIndex,
customScopes: {
goto: true,
keyboardShortcutMenu: true,
searchRecords: true,
},
},
memoizeKey: focusId,
});
set(focusedRowIndexState, rowIndex);
set(isRowFocusedState(rowIndex), true);
set(isRowFocusActiveState, true);
},
[focusedRowIndexState, isRowFocusedState, isRowFocusActiveState],
[
focusedRowIndexState,
recordTableIdFromContext,
pushFocusItemToFocusStack,
isRowFocusedState,
isRowFocusActiveState,
removeFocusItemFromFocusStackById,
],
);
const restoreRecordTableRowFocusFromCellPosition = useRecoilCallback(
@ -84,20 +159,21 @@ export const useFocusedRecordTableRow = (recordTableId?: string) => {
.getLoadable(isRecordTableCellFocusActiveState)
.getValue();
if (
!isDefined(focusedRowIndex) ||
!isDefined(focusedCellPosition) ||
!isRecordTableCellFocusActive
) {
if (!isDefined(focusedCellPosition) || !isRecordTableCellFocusActive) {
return;
}
focusRecordTableRow(focusedCellPosition.row);
unfocusRecordTableCell();
if (isDefined(focusedRowIndex)) {
focusRecordTableRow(focusedCellPosition.row);
}
},
[
focusedRowIndexState,
focusedCellPositionState,
isRecordTableCellFocusActiveState,
unfocusRecordTableCell,
focusRecordTableRow,
],
);

80
packages/twenty-front/src/modules/object-record/record-table/hooks/useMapKeyboardToFocus.ts
View File

@ -1,80 +0,0 @@
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { useRecordTableMove } from '@/object-record/record-table/hooks/useRecordTableMove';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { Key } from 'ts-key-enum';
const TABLE_NAVIGATION_CUSTOM_SCOPES = {
goto: true,
keyboardShortcutMenu: true,
searchRecords: true,
};
export const useMapKeyboardToFocus = (recordTableId?: string) => {
const { setHotkeyScopeAndMemorizePreviousScope } = usePreviousHotkeyScope();
const { move } = useRecordTableMove(recordTableId);
useScopedHotkeys(
[Key.ArrowUp, `${Key.Shift}+${Key.Enter}`],
() => {
move('up');
},
TableHotkeyScope.TableFocus,
[move],
);
useScopedHotkeys(
Key.ArrowDown,
() => {
move('down');
},
TableHotkeyScope.TableFocus,
[move],
);
useScopedHotkeys(
[Key.ArrowUp],
() => {
setHotkeyScopeAndMemorizePreviousScope({
scope: TableHotkeyScope.TableFocus,
customScopes: TABLE_NAVIGATION_CUSTOM_SCOPES,
});
move('up');
},
RecordIndexHotkeyScope.RecordIndex,
[move],
);
useScopedHotkeys(
[Key.ArrowDown],
() => {
setHotkeyScopeAndMemorizePreviousScope({
scope: TableHotkeyScope.TableFocus,
customScopes: TABLE_NAVIGATION_CUSTOM_SCOPES,
});
move('down');
},
RecordIndexHotkeyScope.RecordIndex,
[move],
);
useScopedHotkeys(
[Key.ArrowLeft, `${Key.Shift}+${Key.Tab}`],
() => {
move('left');
},
TableHotkeyScope.TableFocus,
[move],
);
useScopedHotkeys(
[Key.ArrowRight, Key.Tab],
() => {
move('right');
},
TableHotkeyScope.TableFocus,
[move],
);
};

8
packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts
View File

@ -12,7 +12,6 @@ import { RecordTableComponentInstanceContext } from '@/object-record/record-tabl
import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState';
import { onColumnsChangeComponentState } from '@/object-record/record-table/states/onColumnsChangeComponentState';
import { useRecordTableMove } from '@/object-record/record-table/hooks/useRecordTableMove';
import { onToggleColumnSortComponentState } from '@/object-record/record-table/states/onToggleColumnSortComponentState';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
@ -20,7 +19,6 @@ import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-sta
import { useLeaveTableFocus } from './internal/useLeaveTableFocus';
import { useResetTableRowSelection } from './internal/useResetTableRowSelection';
import { useSelectAllRows } from './internal/useSelectAllRows';
import { useSetRecordTableFocusPosition } from './internal/useSetRecordTableFocusPosition';
import { useSetRowSelectedState } from './internal/useSetRowSelectedState';
type useRecordTableProps = {
recordTableId?: string;
@ -94,10 +92,6 @@ export const useRecordTable = (props?: useRecordTableProps) => {
const resetTableRowSelection = useResetTableRowSelection(recordTableId);
const setFocusPosition = useSetRecordTableFocusPosition(recordTableId);
const { move } = useRecordTableMove(recordTableId);
const { selectAllRows } = useSelectAllRows(recordTableId);
return {
@ -106,11 +100,9 @@ export const useRecordTable = (props?: useRecordTableProps) => {
leaveTableFocus,
setRowSelected,
resetTableRowSelection,
move,
selectAllRows,
setOnColumnsChange,
setIsRecordTableInitialLoading,
setFocusPosition,
setHasUserSelectedAllRows,
setOnToggleColumnSort,
};

39
packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTableMove.ts
View File

@ -1,39 +0,0 @@
import { useRecordTableMoveFocusedCell } from '@/object-record/record-table/hooks/useRecordTableMoveFocusedCell';
import { useRecordTableMoveFocusedRow } from '@/object-record/record-table/hooks/useRecordTableMoveFocusedRow';
import { isRecordTableCellFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableCellFocusActiveComponentState';
import { MoveFocusDirection } from '@/object-record/record-table/types/MoveFocusDirection';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useRecoilCallback } from 'recoil';
export const useRecordTableMove = (recordTableId?: string) => {
const { moveFocusedRow } = useRecordTableMoveFocusedRow(recordTableId);
const { moveFocus } = useRecordTableMoveFocusedCell(recordTableId);
const isRecordTableFocusActiveState = useRecoilComponentCallbackStateV2(
isRecordTableCellFocusActiveComponentState,
recordTableId,
);
const move = useRecoilCallback(
({ snapshot }) =>
(direction: MoveFocusDirection) => {
const isRecordTableFocusActive = getSnapshotValue(
snapshot,
isRecordTableFocusActiveState,
);
if (isRecordTableFocusActive) {
moveFocus(direction);
} else {
moveFocusedRow(direction);
}
},
[isRecordTableFocusActiveState, moveFocusedRow, moveFocus],
);
return {
move,
};
};

25
packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTableMoveFocusedCell.ts
View File

@ -4,13 +4,13 @@ import { MoveFocusDirection } from '@/object-record/record-table/types/MoveFocus
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
import { useSetRecordTableFocusPosition } from '@/object-record/record-table/hooks/internal/useSetRecordTableFocusPosition';
import { useFocusRecordTableCell } from '@/object-record/record-table/record-table-cell/hooks/useFocusRecordTableCell';
import { recordTableFocusPositionComponentState } from '@/object-record/record-table/states/recordTableFocusPositionComponentState';
import { numberOfTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/numberOfTableColumnsComponentSelector';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
export const useRecordTableMoveFocusedCell = (recordTableId?: string) => {
const setFocusPosition = useSetRecordTableFocusPosition(recordTableId);
const { focusRecordTableCell } = useFocusRecordTableCell(recordTableId);
const focusPositionState = useRecoilComponentCallbackStateV2(
recordTableFocusPositionComponentState,
@ -33,12 +33,12 @@ export const useRecordTableMoveFocusedCell = (recordTableId?: string) => {
newRowIndex = 0;
}
setFocusPosition({
focusRecordTableCell({
...focusPosition,
row: newRowIndex,
});
},
[focusPositionState, setFocusPosition],
[focusPositionState, focusRecordTableCell],
);
const moveDown = useRecoilCallback(
@ -56,12 +56,12 @@ export const useRecordTableMoveFocusedCell = (recordTableId?: string) => {
newRowIndex = allRecordIds.length - 1;
}
setFocusPosition({
focusRecordTableCell({
...focusPosition,
row: newRowIndex,
});
},
[recordIndexAllRecordIdsSelector, setFocusPosition, focusPositionState],
[recordIndexAllRecordIdsSelector, focusRecordTableCell, focusPositionState],
);
const numberOfTableColumnsSelector = useRecoilComponentCallbackStateV2(
@ -101,12 +101,12 @@ export const useRecordTableMoveFocusedCell = (recordTableId?: string) => {
}
if (isNotLastColumn) {
setFocusPosition({
focusRecordTableCell({
row: currentRowIndex,
column: currentColumnIndex + 1,
});
} else if (isLastColumnButNotLastRow) {
setFocusPosition({
focusRecordTableCell({
row: currentRowIndex + 1,
column: 0,
});
@ -116,7 +116,7 @@ export const useRecordTableMoveFocusedCell = (recordTableId?: string) => {
recordIndexAllRecordIdsSelector,
focusPositionState,
numberOfTableColumnsSelector,
setFocusPosition,
focusRecordTableCell,
],
);
@ -146,18 +146,18 @@ export const useRecordTableMoveFocusedCell = (recordTableId?: string) => {
}
if (isNotFirstColumn) {
setFocusPosition({
focusRecordTableCell({
row: currentRowIndex,
column: currentColumnIndex - 1,
});
} else if (isFirstColumnButNotFirstRow) {
setFocusPosition({
focusRecordTableCell({
row: currentRowIndex - 1,
column: numberOfTableColumns - 1,
});
}
},
[numberOfTableColumnsSelector, focusPositionState, setFocusPosition],
[numberOfTableColumnsSelector, focusPositionState, focusRecordTableCell],
);
const moveFocus = (direction: MoveFocusDirection) => {
@ -182,7 +182,6 @@ export const useRecordTableMoveFocusedCell = (recordTableId?: string) => {
moveLeft,
moveRight,
moveUp,
setFocusPosition,
moveFocus,
};
};

36
packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTableRowFocusHotkeys.ts Normal file
View File

@ -0,0 +1,36 @@
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useRecordTableMoveFocusedRow } from '@/object-record/record-table/hooks/useRecordTableMoveFocusedRow';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { Key } from 'ts-key-enum';
export const useRecordTableRowFocusHotkeys = ({
focusId,
hotkeyScope,
}: {
focusId: string;
hotkeyScope: string;
}) => {
const { recordTableId } = useRecordTableContextOrThrow();
const { moveFocusedRow } = useRecordTableMoveFocusedRow(recordTableId);
useHotkeysOnFocusedElement({
keys: [Key.ArrowUp, `${Key.Shift}+${Key.Enter}`, 'k'],
callback: () => {
moveFocusedRow('up');
},
focusId,
scope: hotkeyScope,
dependencies: [moveFocusedRow],
});
useHotkeysOnFocusedElement({
keys: [Key.ArrowDown, 'j'],
callback: () => {
moveFocusedRow('down');
},
focusId,
scope: hotkeyScope,
dependencies: [moveFocusedRow],
});
};

14
packages/twenty-front/src/modules/object-record/record-table/hooks/useTableColumns.ts
View File

@ -2,6 +2,7 @@ import { useCallback } from 'react';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { useUnfocusRecordTableCell } from '@/object-record/record-table/record-table-cell/hooks/useUnfocusRecordTableCell';
import { useMoveViewColumns } from '@/views/hooks/useMoveViewColumns';
import { useSetTableColumns } from '@/object-record/record-table/hooks/useSetTableColumns';
@ -40,6 +41,10 @@ export const useTableColumns = (props?: useRecordTableProps) => {
const { handleColumnMove } = useMoveViewColumns();
const { unfocusRecordTableCell } = useUnfocusRecordTableCell(
props?.recordTableId,
);
const instanceId = useAvailableComponentInstanceIdOrThrow(
RecordTableComponentInstanceContext,
props?.recordTableId,
@ -106,6 +111,8 @@ export const useTableColumns = (props?: useRecordTableProps) => {
direction: 'left' | 'right',
column: ColumnDefinition<FieldMetadata>,
) => {
unfocusRecordTableCell();
const currentColumnArrayIndex = visibleTableColumns.findIndex(
(visibleColumn) =>
visibleColumn.fieldMetadataId === column.fieldMetadataId,
@ -119,7 +126,12 @@ export const useTableColumns = (props?: useRecordTableProps) => {
await handleColumnsChange(columns);
},
[visibleTableColumns, handleColumnMove, handleColumnsChange],
[
unfocusRecordTableCell,
visibleTableColumns,
handleColumnMove,
handleColumnsChange,
],
);
const handleColumnReorder = useCallback(

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

@ -1,11 +1,11 @@
import { Key } from 'ts-key-enum';
import { RECORD_INDEX_FOCUS_ID } from '@/object-record/record-index/constants/RecordIndexFocusId';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useFocusedRecordTableRow } from '@/object-record/record-table/hooks/useFocusedRecordTableRow';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { isAtLeastOneTableRowSelectedSelector } from '@/object-record/record-table/record-table-row/states/isAtLeastOneTableRowSelectedSelector';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
export const RecordTableBodyEscapeHotkeyEffect = () => {
@ -15,23 +15,26 @@ export const RecordTableBodyEscapeHotkeyEffect = () => {
recordTableId,
});
const { unfocusRecordTableRow } = useFocusedRecordTableRow(recordTableId);
const isAtLeastOneRecordSelected = useRecoilComponentValueV2(
isAtLeastOneTableRowSelectedSelector,
);
useScopedHotkeys(
[Key.Escape],
() => {
unfocusRecordTableRow();
if (isAtLeastOneRecordSelected) {
resetTableRowSelection();
}
const handleEscape = () => {
if (isAtLeastOneRecordSelected) {
resetTableRowSelection();
}
};
useHotkeysOnFocusedElement({
keys: [Key.Escape],
callback: handleEscape,
focusId: RECORD_INDEX_FOCUS_ID,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleEscape],
options: {
preventDefault: true,
},
RecordIndexHotkeyScope.RecordIndex,
[isAtLeastOneRecordSelected, resetTableRowSelection, unfocusRecordTableRow],
);
});
return null;
};

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

@ -4,10 +4,8 @@ import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/Recor
import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useLeaveTableFocus } from '@/object-record/record-table/hooks/internal/useLeaveTableFocus';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { MODAL_BACKDROP_CLICK_OUTSIDE_ID } from '@/ui/layout/modal/constants/ModalBackdropClickOutsideId';
import { PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID } from '@/ui/layout/page/constants/PageActionContainerClickOutsideId';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useRecoilValue } from 'recoil';
@ -24,8 +22,6 @@ export const RecordTableBodyFocusClickOutsideEffect = ({
const currentHotkeyScope = useRecoilValue(currentHotkeyScopeState);
const setHotkeyScope = useSetHotkeyScope();
useListenClickOutside({
excludedClickOutsideIds: [
ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID,
@ -36,19 +32,11 @@ export const RecordTableBodyFocusClickOutsideEffect = ({
listenerId: RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID,
refs: [tableBodyRef],
callback: () => {
if (
currentHotkeyScope.scope !== TableHotkeyScope.TableFocus &&
currentHotkeyScope.scope !== RecordIndexHotkeyScope.RecordIndex
) {
if (currentHotkeyScope.scope !== RecordIndexHotkeyScope.RecordIndex) {
return;
}
leaveTableFocus();
setHotkeyScope(RecordIndexHotkeyScope.RecordIndex, {
goto: true,
keyboardShortcutMenu: true,
searchRecords: true,
});
},
});

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

@ -1,54 +1,12 @@
import { RECORD_INDEX_FOCUS_ID } from '@/object-record/record-index/constants/RecordIndexFocusId';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useFocusedRecordTableRow } from '@/object-record/record-table/hooks/useFocusedRecordTableRow';
import { useMapKeyboardToFocus } from '@/object-record/record-table/hooks/useMapKeyboardToFocus';
import { useSetIsRecordTableFocusActive } from '@/object-record/record-table/record-table-cell/hooks/useSetIsRecordTableFocusActive';
import { isRecordTableCellFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableCellFocusActiveComponentState';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { Key } from 'ts-key-enum';
import { useRecordTableRowFocusHotkeys } from '@/object-record/record-table/hooks/useRecordTableRowFocusHotkeys';
export const RecordTableBodyFocusKeyboardEffect = () => {
const { recordTableId } = useRecordTableContextOrThrow();
useRecordTableRowFocusHotkeys({
focusId: RECORD_INDEX_FOCUS_ID,
hotkeyScope: RecordIndexHotkeyScope.RecordIndex,
});
const setHotkeyScope = useSetHotkeyScope();
const { restoreRecordTableRowFocusFromCellPosition } =
useFocusedRecordTableRow(recordTableId);
const { setIsFocusActiveForCurrentPosition } =
useSetIsRecordTableFocusActive(recordTableId);
const isRecordTableFocusActive = useRecoilComponentValueV2(
isRecordTableCellFocusActiveComponentState,
);
useMapKeyboardToFocus(recordTableId);
useScopedHotkeys(
[Key.Escape],
() => {
if (isRecordTableFocusActive) {
restoreRecordTableRowFocusFromCellPosition();
setIsFocusActiveForCurrentPosition(false);
} else {
setHotkeyScope(RecordIndexHotkeyScope.RecordIndex, {
goto: true,
keyboardShortcutMenu: true,
searchRecords: true,
});
}
},
TableHotkeyScope.TableFocus,
[
setIsFocusActiveForCurrentPosition,
restoreRecordTableRowFocusFromCellPosition,
setHotkeyScope,
isRecordTableFocusActive,
],
);
return <></>;
return null;
};

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

@ -1,31 +0,0 @@
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useRecordTableMoveFocusedRow } from '@/object-record/record-table/hooks/useRecordTableMoveFocusedRow';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { Key } from 'ts-key-enum';
export const RecordTableBodyRowFocusKeyboardEffect = () => {
const { recordTableId } = useRecordTableContextOrThrow();
const { moveFocusedRow } = useRecordTableMoveFocusedRow(recordTableId);
useScopedHotkeys(
[Key.ArrowUp, 'k'],
() => {
moveFocusedRow('up');
},
TableHotkeyScope.TableFocus,
[moveFocusedRow],
);
useScopedHotkeys(
[Key.ArrowDown, 'j'],
() => {
moveFocusedRow('down');
},
TableHotkeyScope.TableFocus,
[moveFocusedRow],
);
return <></>;
};

14
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellArrowKeysEffect.tsx Normal file
View File

@ -0,0 +1,14 @@
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { useCurrentlyFocusedRecordTableCellFocusId } from '@/object-record/record-table/record-table-cell/hooks/useCurrentlyFocusedRecordTableCellFocusId';
import { useRecordTableCellFocusHotkeys } from '@/object-record/record-table/record-table-cell/hooks/useRecordTableCellFocusHotkeys';
export const RecordTableCellArrowKeysEffect = () => {
const recordTableCellFocusId = useCurrentlyFocusedRecordTableCellFocusId();
useRecordTableCellFocusHotkeys({
focusId: recordTableCellFocusId,
hotkeyScope: RecordIndexHotkeyScope.RecordIndex,
});
return null;
};

6
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx
View File

@ -5,7 +5,7 @@ import { recordFieldInputLayoutDirectionComponentState } from '@/object-record/r
import { recordFieldInputLayoutDirectionLoadingComponentState } from '@/object-record/record-field/states/recordFieldInputLayoutDirectionLoadingComponentState';
import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex';
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
import { useSetRecordTableFocusPosition } from '@/object-record/record-table/hooks/internal/useSetRecordTableFocusPosition';
import { useFocusRecordTableCell } from '@/object-record/record-table/record-table-cell/hooks/useFocusRecordTableCell';
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@ -93,7 +93,7 @@ export const RecordTableCellEditMode = ({
const { cellPosition } = useContext(RecordTableCellContext);
const setFocusPosition = useSetRecordTableFocusPosition();
const { focusRecordTableCell } = useFocusRecordTableCell();
return (
<StyledEditableCellEditModeContainer
@ -104,7 +104,7 @@ export const RecordTableCellEditMode = ({
{isFieldInputOnly ? (
<StyledInputModeOnlyContainer
onClick={() => {
setFocusPosition(cellPosition);
focusRecordTableCell(cellPosition);
}}
>
{children}

4
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditModePortal.tsx
View File

@ -1,9 +1,9 @@
import { RecordTableCellPortalWrapper } from '@/object-record/record-table/record-table-cell/components/RecordTableCellPortalWrapper';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { RecordTableFocusModeHotkeysSetterEffect } from '@/object-record/record-table/components/RecordTableFocusModeHotkeysSetterEffect';
import { RecordTableCellEditMode } from '@/object-record/record-table/record-table-cell/components/RecordTableCellEditMode';
import { RecordTableCellFieldInput } from '@/object-record/record-table/record-table-cell/components/RecordTableCellFieldInput';
import { RecordTableCellHotkeysEffect } from '@/object-record/record-table/record-table-cell/components/RecordTableCellHotkeysEffect';
import { recordTableCellEditModePositionComponentState } from '@/object-record/record-table/states/recordTableCellEditModePositionComponentState';
import { recordTableFocusPositionComponentState } from '@/object-record/record-table/states/recordTableFocusPositionComponentState';
import styled from '@emotion/styled';
@ -38,7 +38,7 @@ export const RecordTableCellEditModePortal = () => {
</RecordTableCellEditMode>
</StyledRecordTableCellHoveredPortal>
)}
<RecordTableFocusModeHotkeysSetterEffect />
<RecordTableCellHotkeysEffect />
</RecordTableCellPortalWrapper>
);
};

118
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellHotkeysEffect.tsx Normal file
View File

@ -0,0 +1,118 @@
import { useContext } from 'react';
import { Key } from 'ts-key-enum';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { useClearField } from '@/object-record/record-field/hooks/useClearField';
import { useIsFieldClearable } from '@/object-record/record-field/hooks/useIsFieldClearable';
import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFieldInputOnly';
import { useToggleEditOnlyInput } from '@/object-record/record-field/hooks/useToggleEditOnlyInput';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useFocusedRecordTableRow } from '@/object-record/record-table/hooks/useFocusedRecordTableRow';
import { useCurrentlyFocusedRecordTableCellFocusId } from '@/object-record/record-table/record-table-cell/hooks/useCurrentlyFocusedRecordTableCellFocusId';
import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell';
import { useListenToSidePanelOpening } from '@/ui/layout/right-drawer/hooks/useListenToSidePanelOpening';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey';
export const RecordTableCellHotkeysEffect = () => {
const { openTableCell } = useOpenRecordTableCellFromCell();
const { isReadOnly } = useContext(FieldContext);
const cellFocusId = useCurrentlyFocusedRecordTableCellFocusId();
const { onCloseTableCell } = useRecordTableBodyContextOrThrow();
const isFieldInputOnly = useIsFieldInputOnly();
const isFieldClearable = useIsFieldClearable();
const toggleEditOnlyInput = useToggleEditOnlyInput();
const clearField = useClearField();
const handleBackspaceOrDelete = () => {
if (!isFieldInputOnly && isFieldClearable) {
clearField();
}
};
const handleEnter = () => {
if (isReadOnly) {
return;
}
if (!isFieldInputOnly) {
openTableCell();
} else {
toggleEditOnlyInput();
}
};
const handleAnyKey = (keyboardEvent: KeyboardEvent) => {
if (isReadOnly) {
return;
}
if (!isFieldInputOnly) {
const isWritingText =
!isNonTextWritingKey(keyboardEvent.key) &&
!keyboardEvent.ctrlKey &&
!keyboardEvent.metaKey;
if (!isWritingText) {
return;
}
keyboardEvent.preventDefault();
keyboardEvent.stopPropagation();
keyboardEvent.stopImmediatePropagation();
openTableCell(keyboardEvent.key);
}
};
const { recordTableId } = useRecordTableContextOrThrow();
const { restoreRecordTableRowFocusFromCellPosition } =
useFocusedRecordTableRow(recordTableId);
const handleEscape = () => {
restoreRecordTableRowFocusFromCellPosition();
};
useListenToSidePanelOpening(() => onCloseTableCell());
useHotkeysOnFocusedElement({
keys: [Key.Backspace, Key.Delete],
callback: handleBackspaceOrDelete,
focusId: cellFocusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleBackspaceOrDelete],
});
useHotkeysOnFocusedElement({
keys: [Key.Enter],
callback: handleEnter,
focusId: cellFocusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleEnter],
});
useHotkeysOnFocusedElement({
keys: [Key.Escape],
callback: handleEscape,
focusId: cellFocusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleEscape],
});
useHotkeysOnFocusedElement({
keys: ['*'],
callback: handleAnyKey,
focusId: cellFocusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleAnyKey],
options: {
preventDefault: false,
},
});
return null;
};

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

@ -1,4 +1,5 @@
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { RecordTableCellArrowKeysEffect } from '@/object-record/record-table/record-table-cell/components/RecordTableCellArrowKeysEffect';
import { RecordTableCellEditModePortal } from '@/object-record/record-table/record-table-cell/components/RecordTableCellEditModePortal';
import { RecordTableCellHoveredPortal } from '@/object-record/record-table/record-table-cell/components/RecordTableCellHoveredPortal';
import { isRecordTableCellFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableCellFocusActiveComponentState';
@ -16,7 +17,12 @@ export const RecordTableCellPortals = () => {
<>
<RecordTableCellHoveredPortal />
{isRecordTableFocusActive && <RecordTableCellEditModePortal />}
{isRecordTableFocusActive && (
<>
<RecordTableCellEditModePortal />
<RecordTableCellArrowKeysEffect />
</>
)}
</>
);
};

4
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveHoverToCurrentCell.test.tsx
View File

@ -2,6 +2,7 @@ import { renderHook } from '@testing-library/react';
import { act } from 'react';
import { RecoilRoot, useRecoilValue } from 'recoil';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
import { RecordTableRowContextProvider } from '@/object-record/record-table/contexts/RecordTableRowContext';
@ -13,14 +14,13 @@ import {
} from '@/object-record/record-table/record-table-cell/hooks/__mocks__/cell';
import { useMoveHoverToCurrentCell } from '@/object-record/record-table/record-table-cell/hooks/useMoveHoverToCurrentCell';
import { recordTableHoverPositionComponentState } from '@/object-record/record-table/states/recordTableHoverPositionComponentState';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<RecoilRoot
initializeState={({ set }) => {
set(currentHotkeyScopeState, {
scope: TableHotkeyScope.TableFocus,
scope: RecordIndexHotkeyScope.RecordIndex,
customScopes: {},
});
}}

40
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useSetIsRecordTableFocusActive.test.tsx
View File

@ -3,7 +3,7 @@ import React, { act } from 'react';
import { RecoilRoot, useRecoilValue } from 'recoil';
import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
import { useSetIsRecordTableFocusActive } from '@/object-record/record-table/record-table-cell/hooks/useSetIsRecordTableFocusActive';
import { useSetIsRecordTableCellFocusActive } from '@/object-record/record-table/record-table-cell/hooks/useSetIsRecordTableCellFocusActive';
import { isRecordTableCellFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableCellFocusActiveComponentState';
import { recordTableFocusPositionComponentState } from '@/object-record/record-table/states/recordTableFocusPositionComponentState';
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
@ -47,8 +47,8 @@ const Wrapper = ({ children }: { children: React.ReactNode }) => (
const renderHooks = () => {
const { result } = renderHook(
() => {
const { setIsFocusActive, setIsFocusActiveForCurrentPosition } =
useSetIsRecordTableFocusActive('test-table-id');
const { setIsRecordTableCellFocusActive } =
useSetIsRecordTableCellFocusActive('test-table-id');
const isRecordTableFocusActive = useRecoilValue(
isRecordTableCellFocusActiveComponentState.atomFamily({
instanceId: 'test-table-id',
@ -60,8 +60,7 @@ const renderHooks = () => {
}),
);
return {
setIsFocusActive,
setIsFocusActiveForCurrentPosition,
setIsRecordTableCellFocusActive,
isRecordTableFocusActive,
focusPosition,
};
@ -87,7 +86,10 @@ describe('useSetIsRecordTableFocusActive', () => {
const cellPosition: TableCellPosition = { column: 1, row: 0 };
act(() => {
result.current.setIsFocusActive(true, cellPosition);
result.current.setIsRecordTableCellFocusActive({
isRecordTableFocusActive: true,
cellPosition,
});
});
expect(mockGetElementById).toHaveBeenCalledWith('record-table-cell-1-0');
@ -105,7 +107,10 @@ describe('useSetIsRecordTableFocusActive', () => {
const cellPosition: TableCellPosition = { column: 1, row: 0 };
act(() => {
result.current.setIsFocusActive(false, cellPosition);
result.current.setIsRecordTableCellFocusActive({
isRecordTableFocusActive: false,
cellPosition,
});
});
expect(mockGetElementById).toHaveBeenCalledWith('record-table-cell-1-0');
@ -117,22 +122,6 @@ describe('useSetIsRecordTableFocusActive', () => {
expect(result.current.focusPosition).toEqual(cellPosition);
});
it('should set focus for current position', () => {
const { result } = renderHooks();
act(() => {
result.current.setIsFocusActiveForCurrentPosition(true);
});
expect(mockGetElementById).toHaveBeenCalledWith('record-table-cell-1-0');
expect(mockClassList.add).toHaveBeenCalledWith('focus-active');
expect(result.current.isRecordTableFocusActive).toBe(true);
expect(result.current.focusPosition).toEqual({ column: 1, row: 0 });
});
it('should handle case when the cell element is not found', () => {
mockGetElementById.mockReturnValue(null);
@ -141,7 +130,10 @@ describe('useSetIsRecordTableFocusActive', () => {
const cellPosition: TableCellPosition = { column: 1, row: 0 };
act(() => {
result.current.setIsFocusActive(true, cellPosition);
result.current.setIsRecordTableCellFocusActive({
isRecordTableFocusActive: true,
cellPosition,
});
});
expect(mockGetElementById).toHaveBeenCalledWith('record-table-cell-1-0');

11
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/internal/__tests__/useCloseRecordTableCellInGroup.test.tsx
View File

@ -21,12 +21,6 @@ import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
const setHotkeyScope = jest.fn();
jest.mock('@/ui/utilities/hotkey/hooks/useSetHotkeyScope', () => ({
useSetHotkeyScope: () => setHotkeyScope,
}));
const onColumnsChange = jest.fn();
const recordTableId = 'scopeId';
@ -94,10 +88,5 @@ describe('useCloseRecordTableCellInGroup', () => {
expect(result.current.isDragSelectionStartEnabled()).toBe(true);
expect(result.current.currentTableCellInEditModePosition).toBe(null);
expect(setHotkeyScope).toHaveBeenCalledWith('table-focus', {
goto: true,
keyboardShortcutMenu: true,
searchRecords: true,
});
});
});

11
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/internal/__tests__/useCloseRecordTableCellNoGroup.test.tsx
View File

@ -21,12 +21,6 @@ import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
const setHotkeyScope = jest.fn();
jest.mock('@/ui/utilities/hotkey/hooks/useSetHotkeyScope', () => ({
useSetHotkeyScope: () => setHotkeyScope,
}));
const onColumnsChange = jest.fn();
const recordTableId = 'scopeId';
@ -95,10 +89,5 @@ describe('useCloseRecordTableCellNoGroup', () => {
expect(result.current.isDragSelectionStartEnabled()).toBe(true);
expect(result.current.currentTableCellInEditModePosition).toBe(null);
expect(setHotkeyScope).toHaveBeenCalledWith('table-focus', {
goto: true,
keyboardShortcutMenu: true,
searchRecords: true,
});
});
});

37
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/internal/useCloseRecordTableCellInGroup.ts
View File

@ -1,19 +1,18 @@
import { useRecoilCallback } from 'recoil';
import { FOCUS_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/FocusClickOutsideListenerId';
import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId';
import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useCloseCurrentTableCellInEditMode } from '@/object-record/record-table/hooks/internal/useCloseCurrentTableCellInEditMode';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { useResetFocusStack } from '@/ui/utilities/focus/hooks/useResetFocusStack';
import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
export const useCloseRecordTableCellInGroup = () => {
const { recordTableId } = useRecordTableContextOrThrow();
const setHotkeyScope = useSetHotkeyScope();
const { setDragSelectionStartEnabled } = useDragSelect();
const { toggleClickOutside } = useClickOutsideListener(
@ -23,28 +22,24 @@ export const useCloseRecordTableCellInGroup = () => {
const closeCurrentTableCellInEditMode =
useCloseCurrentTableCellInEditMode(recordTableId);
const { resetFocusStack } = useResetFocusStack();
const clickOutsideListenerIsActivatedState =
useRecoilComponentCallbackStateV2(
clickOutsideListenerIsActivatedComponentState,
RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID,
);
const closeTableCellInGroup = useRecoilCallback(
() => () => {
toggleClickOutside(true);
setDragSelectionStartEnabled(true);
closeCurrentTableCellInEditMode();
// TODO: Remove this once we've fully migrated away from hotkey scopes
resetFocusStack();
setHotkeyScope(TableHotkeyScope.TableFocus, {
goto: true,
keyboardShortcutMenu: true,
searchRecords: true,
});
},
({ set }) =>
() => {
toggleClickOutside(true);
setDragSelectionStartEnabled(true);
closeCurrentTableCellInEditMode();
set(clickOutsideListenerIsActivatedState, true);
},
[
clickOutsideListenerIsActivatedState,
closeCurrentTableCellInEditMode,
resetFocusStack,
setDragSelectionStartEnabled,
setHotkeyScope,
toggleClickOutside,
],
);

51
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/internal/useCloseRecordTableCellNoGroup.ts
View File

@ -1,19 +1,17 @@
import { FOCUS_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/FocusClickOutsideListenerId';
import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useCloseCurrentTableCellInEditMode } from '@/object-record/record-table/hooks/internal/useCloseCurrentTableCellInEditMode';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { useResetFocusStack } from '@/ui/utilities/focus/hooks/useResetFocusStack';
import { useCallback } from 'react';
import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useRecoilCallback } from 'recoil';
export const useCloseRecordTableCellNoGroup = () => {
const { recordTableId } = useRecordTableContextOrThrow();
const setHotkeyScope = useSetHotkeyScope();
const { setDragSelectionStartEnabled } = useDragSelect();
const { toggleClickOutside } = useClickOutsideListener(
@ -23,28 +21,27 @@ export const useCloseRecordTableCellNoGroup = () => {
const closeCurrentTableCellInEditMode =
useCloseCurrentTableCellInEditMode(recordTableId);
const { resetFocusStack } = useResetFocusStack();
const clickOutsideListenerIsActivatedState =
useRecoilComponentCallbackStateV2(
clickOutsideListenerIsActivatedComponentState,
RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID,
);
const closeTableCellNoGroup = useCallback(() => {
toggleClickOutside(true);
setDragSelectionStartEnabled(true);
closeCurrentTableCellInEditMode();
// TODO: Remove this once we've fully migrated away from hotkey scopes
resetFocusStack();
setHotkeyScope(TableHotkeyScope.TableFocus, {
goto: true,
keyboardShortcutMenu: true,
searchRecords: true,
});
}, [
closeCurrentTableCellInEditMode,
resetFocusStack,
setDragSelectionStartEnabled,
setHotkeyScope,
toggleClickOutside,
]);
const closeTableCellNoGroup = useRecoilCallback(
({ set }) =>
() => {
toggleClickOutside(true);
setDragSelectionStartEnabled(true);
closeCurrentTableCellInEditMode();
set(clickOutsideListenerIsActivatedState, true);
},
[
clickOutsideListenerIsActivatedState,
closeCurrentTableCellInEditMode,
setDragSelectionStartEnabled,
toggleClickOutside,
],
);
return {
closeTableCellNoGroup,

18
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useCurrentlyFocusedRecordTableCellFocusId.ts Normal file
View File

@ -0,0 +1,18 @@
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { getRecordTableCellFocusId } from '@/object-record/record-table/record-table-cell/utils/getRecordTableCellFocusId';
import { recordTableFocusPositionComponentState } from '@/object-record/record-table/states/recordTableFocusPositionComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
export const useCurrentlyFocusedRecordTableCellFocusId = () => {
const { recordTableId } = useRecordTableContextOrThrow();
const focusPosition = useRecoilComponentValueV2(
recordTableFocusPositionComponentState,
recordTableId,
);
return getRecordTableCellFocusId({
recordTableId,
cellPosition: focusPosition,
});
};

88
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useFocusRecordTableCell.ts Normal file
View File

@ -0,0 +1,88 @@
import { useRecoilCallback } from 'recoil';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { getRecordTableCellFocusId } from '@/object-record/record-table/record-table-cell/utils/getRecordTableCellFocusId';
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
import { recordTableFocusPositionComponentState } from '@/object-record/record-table/states/recordTableFocusPositionComponentState';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { TableCellPosition } from '../../types/TableCellPosition';
import { useSetIsRecordTableCellFocusActive } from './useSetIsRecordTableCellFocusActive';
export const useFocusRecordTableCell = (recordTableId?: string) => {
const recordTableIdFromProps = useAvailableComponentInstanceIdOrThrow(
RecordTableComponentInstanceContext,
recordTableId,
);
const focusPositionState = useRecoilComponentCallbackStateV2(
recordTableFocusPositionComponentState,
recordTableIdFromProps,
);
const { setIsRecordTableCellFocusActive } =
useSetIsRecordTableCellFocusActive(recordTableIdFromProps);
const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
const { removeFocusItemFromFocusStackById } =
useRemoveFocusItemFromFocusStackById();
const focusRecordTableCell = useRecoilCallback(
({ set, snapshot }) => {
return (newPosition: TableCellPosition) => {
const currentPosition = snapshot
.getLoadable(focusPositionState)
.getValue();
const currentCellFocusId = getRecordTableCellFocusId({
recordTableId: recordTableIdFromProps,
cellPosition: currentPosition,
});
removeFocusItemFromFocusStackById({
focusId: currentCellFocusId,
});
set(focusPositionState, newPosition);
setIsRecordTableCellFocusActive({
isRecordTableFocusActive: false,
cellPosition: currentPosition,
});
setIsRecordTableCellFocusActive({
isRecordTableFocusActive: true,
cellPosition: newPosition,
});
const cellFocusId = getRecordTableCellFocusId({
recordTableId: recordTableIdFromProps,
cellPosition: newPosition,
});
pushFocusItemToFocusStack({
focusId: cellFocusId,
component: {
type: FocusComponentType.RECORD_TABLE_CELL,
instanceId: cellFocusId,
},
hotkeyScope: {
scope: RecordIndexHotkeyScope.RecordIndex,
},
memoizeKey: cellFocusId,
});
};
},
[
focusPositionState,
recordTableIdFromProps,
removeFocusItemFromFocusStackById,
setIsRecordTableCellFocusActive,
pushFocusItemToFocusStack,
],
);
return { focusRecordTableCell };
};

1
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveHoverToCurrentCell.ts
View File

@ -37,7 +37,6 @@ export const useMoveHoverToCurrentCell = (recordTableId: string) => {
);
if (
currentHotkeyScope.scope !== TableHotkeyScope.TableFocus &&
currentHotkeyScope.scope !== TableHotkeyScope.CellEditMode &&
currentHotkeyScope.scope !== AppHotkeyScope.CommandMenuOpen &&
currentHotkeyScope.scope !== RecordIndexHotkeyScope.RecordIndex

8
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts
View File

@ -24,9 +24,9 @@ import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInput
import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
import { useOpenRecordFromIndexView } from '@/object-record/record-index/hooks/useOpenRecordFromIndexView';
import { useSetRecordTableFocusPosition } from '@/object-record/record-table/hooks/internal/useSetRecordTableFocusPosition';
import { useActiveRecordTableRow } from '@/object-record/record-table/hooks/useActiveRecordTableRow';
import { useFocusedRecordTableRow } from '@/object-record/record-table/hooks/useFocusedRecordTableRow';
import { useFocusRecordTableCell } from '@/object-record/record-table/record-table-cell/hooks/useFocusRecordTableCell';
import { isRecordTableRowFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableRowFocusActiveComponentState';
import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
@ -90,7 +90,7 @@ export const useOpenRecordTableCellV2 = (recordTableId: string) => {
recordTableId,
);
const setFocusPosition = useSetRecordTableFocusPosition();
const { focusRecordTableCell } = useFocusRecordTableCell();
const { openRecordFromIndexView } = useOpenRecordFromIndexView();
@ -157,7 +157,7 @@ export const useOpenRecordTableCellV2 = (recordTableId: string) => {
deactivateRecordTableRow();
setFocusPosition(cellPosition);
focusRecordTableCell(cellPosition);
setIsRowFocusActive(false);
@ -194,7 +194,7 @@ export const useOpenRecordTableCellV2 = (recordTableId: string) => {
[
clickOutsideListenerIsActivatedState,
deactivateRecordTableRow,
setFocusPosition,
focusRecordTableCell,
setIsRowFocusActive,
setDragSelectionStartEnabled,
openFieldInput,

56
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useRecordTableCellFocusHotkeys.ts Normal file
View File

@ -0,0 +1,56 @@
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useRecordTableMoveFocusedCell } from '@/object-record/record-table/hooks/useRecordTableMoveFocusedCell';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { Key } from 'ts-key-enum';
export const useRecordTableCellFocusHotkeys = ({
focusId,
hotkeyScope,
}: {
focusId: string;
hotkeyScope: string;
}) => {
const { recordTableId } = useRecordTableContextOrThrow();
const { moveFocus } = useRecordTableMoveFocusedCell(recordTableId);
useHotkeysOnFocusedElement({
keys: [Key.ArrowUp],
callback: () => {
moveFocus('up');
},
focusId,
scope: hotkeyScope,
dependencies: [moveFocus],
});
useHotkeysOnFocusedElement({
keys: [Key.ArrowDown],
callback: () => {
moveFocus('down');
},
focusId,
scope: hotkeyScope,
dependencies: [moveFocus],
});
useHotkeysOnFocusedElement({
keys: [Key.ArrowLeft],
callback: () => {
moveFocus('left');
},
focusId,
scope: hotkeyScope,
dependencies: [moveFocus],
});
useHotkeysOnFocusedElement({
keys: [Key.ArrowRight],
callback: () => {
moveFocus('right');
},
focusId,
scope: hotkeyScope,
dependencies: [moveFocus],
});
};

34
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetIsRecordTableFocusActive.ts → packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetIsRecordTableCellFocusActive.ts
View File

@ -1,23 +1,23 @@
import { isRecordTableCellFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableCellFocusActiveComponentState';
import { recordTableFocusPositionComponentState } from '@/object-record/record-table/states/recordTableFocusPositionComponentState';
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useRecoilCallback } from 'recoil';
export const useSetIsRecordTableFocusActive = (recordTableId?: string) => {
export const useSetIsRecordTableCellFocusActive = (recordTableId?: string) => {
const isRecordTableFocusActiveState = useRecoilComponentCallbackStateV2(
isRecordTableCellFocusActiveComponentState,
recordTableId,
);
const focusPositionState = useRecoilComponentCallbackStateV2(
recordTableFocusPositionComponentState,
recordTableId,
);
const setIsFocusActive = useRecoilCallback(
const setIsRecordTableCellFocusActive = useRecoilCallback(
({ set }) =>
(isRecordTableFocusActive: boolean, cellPosition: TableCellPosition) => {
({
isRecordTableFocusActive,
cellPosition,
}: {
isRecordTableFocusActive: boolean;
cellPosition: TableCellPosition;
}) => {
const cellId = `record-table-cell-${cellPosition.column}-${cellPosition.row}`;
const cellElement = document.getElementById(cellId);
@ -35,17 +35,7 @@ export const useSetIsRecordTableFocusActive = (recordTableId?: string) => {
[isRecordTableFocusActiveState],
);
const setIsFocusActiveForCurrentPosition = useRecoilCallback(
({ snapshot }) =>
(isRecordTableFocusActive: boolean) => {
const currentPosition = snapshot
.getLoadable(focusPositionState)
.getValue();
setIsFocusActive(isRecordTableFocusActive, currentPosition);
},
[setIsFocusActive, focusPositionState],
);
return { setIsFocusActive, setIsFocusActiveForCurrentPosition };
return {
setIsRecordTableCellFocusActive,
};
};

59
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useUnfocusRecordTableCell.ts Normal file
View File

@ -0,0 +1,59 @@
import { useRecoilCallback } from 'recoil';
import { getRecordTableCellFocusId } from '@/object-record/record-table/record-table-cell/utils/getRecordTableCellFocusId';
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
import { recordTableFocusPositionComponentState } from '@/object-record/record-table/states/recordTableFocusPositionComponentState';
import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useSetIsRecordTableCellFocusActive } from './useSetIsRecordTableCellFocusActive';
export const useUnfocusRecordTableCell = (recordTableId?: string) => {
const recordTableIdFromProps = useAvailableComponentInstanceIdOrThrow(
RecordTableComponentInstanceContext,
recordTableId,
);
const focusPositionState = useRecoilComponentCallbackStateV2(
recordTableFocusPositionComponentState,
recordTableIdFromProps,
);
const { setIsRecordTableCellFocusActive } =
useSetIsRecordTableCellFocusActive(recordTableIdFromProps);
const { removeFocusItemFromFocusStackById } =
useRemoveFocusItemFromFocusStackById();
const unfocusRecordTableCell = useRecoilCallback(
({ snapshot }) => {
return () => {
const currentPosition = snapshot
.getLoadable(focusPositionState)
.getValue();
const currentCellFocusId = getRecordTableCellFocusId({
recordTableId: recordTableIdFromProps,
cellPosition: currentPosition,
});
removeFocusItemFromFocusStackById({
focusId: currentCellFocusId,
});
setIsRecordTableCellFocusActive({
isRecordTableFocusActive: false,
cellPosition: currentPosition,
});
};
},
[
focusPositionState,
recordTableIdFromProps,
removeFocusItemFromFocusStackById,
setIsRecordTableCellFocusActive,
],
);
return { unfocusRecordTableCell };
};

11
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/utils/getRecordTableCellFocusId.ts Normal file
View File

@ -0,0 +1,11 @@
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
export const getRecordTableCellFocusId = ({
recordTableId,
cellPosition,
}: {
recordTableId: string;
cellPosition: TableCellPosition;
}) => {
return `${recordTableId}-cell-${cellPosition.row}-${cellPosition.column}`;
};

8
packages/twenty-front/src/modules/object-record/record-table/record-table-header/hooks/useOpenRecordFilterChipFromTableHeader.ts
View File

@ -2,7 +2,7 @@ import { useCreateEmptyRecordFilterFromFieldMetadataItem } from '@/object-record
import { useFilterableFieldMetadataItemsInRecordIndexContext } from '@/object-record/record-filter/hooks/useFilterableFieldMetadataItemsInRecordIndexContext';
import { useUpsertRecordFilter } from '@/object-record/record-filter/hooks/useUpsertRecordFilter';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { useOpenDropdownFromOutside } from '@/ui/layout/dropdown/hooks/useOpenDropdownFromOutside';
import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetEditableFilterChipDropdownStates } from '@/views/hooks/useSetEditableFilterChipDropdownStates';
import { isDefined } from 'twenty-shared/utils';
@ -20,7 +20,7 @@ export const useOpenRecordFilterChipFromTableHeader = () => {
const { upsertRecordFilter } = useUpsertRecordFilter();
const { openDropdownFromOutside } = useOpenDropdownFromOutside();
const { openDropdown } = useDropdownV2();
const { setEditableFilterChipDropdownStates } =
useSetEditableFilterChipDropdownStates();
@ -45,7 +45,7 @@ export const useOpenRecordFilterChipFromTableHeader = () => {
if (isDefined(existingNonAdvancedRecordFilter)) {
setEditableFilterChipDropdownStates(existingNonAdvancedRecordFilter);
openDropdownFromOutside(existingNonAdvancedRecordFilter.id);
openDropdown(existingNonAdvancedRecordFilter.id);
return;
}
@ -56,7 +56,7 @@ export const useOpenRecordFilterChipFromTableHeader = () => {
upsertRecordFilter(newRecordFilter);
setEditableFilterChipDropdownStates(newRecordFilter);
openDropdownFromOutside(newRecordFilter.id);
openDropdown(newRecordFilter.id);
};
return { openRecordFilterChipFromTableHeader };

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

@ -4,6 +4,7 @@ import { RecordTableCellGrip } from '@/object-record/record-table/record-table-c
import { RecordTableLastEmptyCell } from '@/object-record/record-table/record-table-cell/components/RecordTableLastEmptyCell';
import { RecordTableCells } from '@/object-record/record-table/record-table-row/components/RecordTableCells';
import { RecordTableDraggableTr } from '@/object-record/record-table/record-table-row/components/RecordTableDraggableTr';
import { RecordTableRowArrowKeysEffect } from '@/object-record/record-table/record-table-row/components/RecordTableRowArrowKeysEffect';
import { RecordTableRowHotkeyEffect } from '@/object-record/record-table/record-table-row/components/RecordTableRowHotkeyEffect';
import { isRecordTableRowFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableRowFocusActiveComponentState';
import { isRecordTableRowFocusedComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowFocusedComponentFamilyState';
@ -41,7 +42,12 @@ export const RecordTableRow = ({
draggableIndex={rowIndexForDrag}
focusIndex={rowIndexForFocus}
>
{isRowFocusActive && isFocused && <RecordTableRowHotkeyEffect />}
{isRowFocusActive && isFocused && (
<>
<RecordTableRowHotkeyEffect />
<RecordTableRowArrowKeysEffect />
</>
)}
<RecordTableCellGrip />
<RecordTableCellCheckbox />
<RecordTableCells />

14
packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowArrowKeysEffect.tsx Normal file
View File

@ -0,0 +1,14 @@
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { useRecordTableRowFocusHotkeys } from '@/object-record/record-table/hooks/useRecordTableRowFocusHotkeys';
import { useRecordTableRowFocusId } from '@/object-record/record-table/record-table-row/hooks/useRecordTableRowFocusId';
export const RecordTableRowArrowKeysEffect = () => {
const recordTableRowFocusId = useRecordTableRowFocusId();
useRecordTableRowFocusHotkeys({
focusId: recordTableRowFocusId,
hotkeyScope: RecordIndexHotkeyScope.RecordIndex,
});
return null;
};

74
packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowHotkeyEffect.tsx
View File

@ -1,76 +1,10 @@
import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { useSetRecordTableFocusPosition } from '@/object-record/record-table/hooks/internal/useSetRecordTableFocusPosition';
import { useActiveRecordTableRow } from '@/object-record/record-table/hooks/useActiveRecordTableRow';
import { useSetCurrentRowSelected } from '@/object-record/record-table/record-table-row/hooks/useSetCurrentRowSelected';
import { isRecordTableRowFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableRowFocusActiveComponentState';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { Key } from 'ts-key-enum';
import { useRecordTableRowFocusId } from '@/object-record/record-table/record-table-row/hooks/useRecordTableRowFocusId';
import { useRecordTableRowHotkeys } from '@/object-record/record-table/record-table-row/hooks/useRecordTableRowHotkeys';
export const RecordTableRowHotkeyEffect = () => {
const { isSelected, recordId, objectNameSingular, rowIndex } =
useRecordTableRowContextOrThrow();
const recordTableRowFocusId = useRecordTableRowFocusId();
const { setCurrentRowSelected } = useSetCurrentRowSelected();
const { openRecordInCommandMenu } = useOpenRecordInCommandMenu();
const { activateRecordTableRow } = useActiveRecordTableRow();
const setIsRowFocusActive = useSetRecoilComponentStateV2(
isRecordTableRowFocusActiveComponentState,
);
const setFocusPosition = useSetRecordTableFocusPosition();
useScopedHotkeys(
'x',
() => {
setCurrentRowSelected({
newSelectedState: !isSelected,
});
},
TableHotkeyScope.TableFocus,
);
useScopedHotkeys(
`${Key.Shift}+x`,
() => {
setCurrentRowSelected({
newSelectedState: !isSelected,
shouldSelectRange: true,
});
},
TableHotkeyScope.TableFocus,
);
useScopedHotkeys(
[`${Key.Control}+${Key.Enter}`, `${Key.Meta}+${Key.Enter}`],
() => {
openRecordInCommandMenu({
recordId: recordId,
objectNameSingular: objectNameSingular,
isNewRecord: false,
});
activateRecordTableRow(rowIndex);
},
TableHotkeyScope.TableFocus,
);
useScopedHotkeys(
Key.Enter,
() => {
setIsRowFocusActive(false);
setFocusPosition({
row: rowIndex,
column: 0,
});
},
TableHotkeyScope.TableFocus,
);
useRecordTableRowHotkeys(recordTableRowFocusId);
return null;
};

14
packages/twenty-front/src/modules/object-record/record-table/record-table-row/hooks/useRecordTableRowFocusId.ts Normal file
View File

@ -0,0 +1,14 @@
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { getRecordTableRowFocusId } from '@/object-record/record-table/record-table-row/utils/getRecordTableRowFocusId';
export const useRecordTableRowFocusId = () => {
const { rowIndex } = useRecordTableRowContextOrThrow();
const { recordTableId } = useRecordTableContextOrThrow();
return getRecordTableRowFocusId({
recordTableId,
rowIndex,
});
};

145
packages/twenty-front/src/modules/object-record/record-table/record-table-row/hooks/useRecordTableRowHotkeys.ts Normal file
View File

@ -0,0 +1,145 @@
import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { useActiveRecordTableRow } from '@/object-record/record-table/hooks/useActiveRecordTableRow';
import { useFocusedRecordTableRow } from '@/object-record/record-table/hooks/useFocusedRecordTableRow';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { useFocusRecordTableCell } from '@/object-record/record-table/record-table-cell/hooks/useFocusRecordTableCell';
import { getRecordTableCellFocusId } from '@/object-record/record-table/record-table-cell/utils/getRecordTableCellFocusId';
import { useSetCurrentRowSelected } from '@/object-record/record-table/record-table-row/hooks/useSetCurrentRowSelected';
import { isAtLeastOneTableRowSelectedSelector } from '@/object-record/record-table/record-table-row/states/isAtLeastOneTableRowSelectedSelector';
import { isRecordTableRowFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableRowFocusActiveComponentState';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { Key } from 'ts-key-enum';
export const useRecordTableRowHotkeys = (focusId: string) => {
const { isSelected, recordId, objectNameSingular, rowIndex } =
useRecordTableRowContextOrThrow();
const { setCurrentRowSelected } = useSetCurrentRowSelected();
const { openRecordInCommandMenu } = useOpenRecordInCommandMenu();
const { activateRecordTableRow } = useActiveRecordTableRow();
const setIsRowFocusActive = useSetRecoilComponentStateV2(
isRecordTableRowFocusActiveComponentState,
);
const { focusRecordTableCell } = useFocusRecordTableCell();
const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
const { recordTableId } = useRecordTableContextOrThrow();
const handleSelectRow = () => {
setCurrentRowSelected({
newSelectedState: !isSelected,
});
};
const handleSelectRowWithShift = () => {
setCurrentRowSelected({
newSelectedState: !isSelected,
shouldSelectRange: true,
});
};
const handleOpenRecordInCommandMenu = () => {
openRecordInCommandMenu({
recordId: recordId,
objectNameSingular: objectNameSingular,
isNewRecord: false,
});
activateRecordTableRow(rowIndex);
};
const handleEnterRow = () => {
setIsRowFocusActive(false);
const cellPosition = {
row: rowIndex,
column: 0,
};
focusRecordTableCell(cellPosition);
const cellFocusId = getRecordTableCellFocusId({
recordTableId,
cellPosition,
});
pushFocusItemToFocusStack({
focusId: cellFocusId,
component: {
type: FocusComponentType.RECORD_TABLE_CELL,
instanceId: cellFocusId,
},
hotkeyScope: {
scope: RecordIndexHotkeyScope.RecordIndex,
},
memoizeKey: cellFocusId,
});
};
const { resetTableRowSelection } = useRecordTable({
recordTableId,
});
const { unfocusRecordTableRow } = useFocusedRecordTableRow(recordTableId);
const isAtLeastOneRecordSelected = useRecoilComponentValueV2(
isAtLeastOneTableRowSelectedSelector,
);
const handleEscape = () => {
unfocusRecordTableRow();
if (isAtLeastOneRecordSelected) {
resetTableRowSelection();
}
};
useHotkeysOnFocusedElement({
keys: ['x'],
callback: handleSelectRow,
focusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleSelectRow],
});
useHotkeysOnFocusedElement({
keys: [`${Key.Shift}+x`],
callback: handleSelectRowWithShift,
focusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleSelectRowWithShift],
});
useHotkeysOnFocusedElement({
keys: [`${Key.Control}+${Key.Enter}`, `${Key.Meta}+${Key.Enter}`],
callback: handleOpenRecordInCommandMenu,
focusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleOpenRecordInCommandMenu],
});
useHotkeysOnFocusedElement({
keys: [Key.Enter],
callback: handleEnterRow,
focusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleEnterRow],
});
useHotkeysOnFocusedElement({
keys: [Key.Escape],
callback: handleEscape,
focusId,
scope: RecordIndexHotkeyScope.RecordIndex,
dependencies: [handleEscape],
});
};

9
packages/twenty-front/src/modules/object-record/record-table/record-table-row/utils/getRecordTableRowFocusId.ts Normal file
View File

@ -0,0 +1,9 @@
export const getRecordTableRowFocusId = ({
recordTableId,
rowIndex,
}: {
recordTableId: string;
rowIndex: number;
}) => {
return `${recordTableId}-row-${rowIndex}`;
};

3
packages/twenty-front/src/modules/object-record/record-table/types/TableHotkeyScope.ts
View File

@ -1,6 +1,3 @@
export enum TableHotkeyScope {
CellDoubleTextInput = 'cell-double-text-input',
CellEditMode = 'cell-edit-mode',
CellDateEditMode = 'cell-date-edit-mode',
TableFocus = 'table-focus',
}