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

Fix hover on table cells when the command menu is opened (#10446)

Browse Source 
This PR allows the table cell hover to be accessible even when the
command menu is opened.
I extracted the hotkeys logic from `RecordTableCellSoftFocusMode` into
`RecordTableCellSoftFocusModeHotkeysSetterEffect`. This component is
mounted conditionally if the hotkey scope is `TableSoftFocus`. By doing
so, the table cell hotkey scopes are not available when the command menu
is opened.

Before


https://github.com/user-attachments/assets/f0925565-f00a-4962-b18d-3c1617f77dd0


After


https://github.com/user-attachments/assets/49ec9195-3110-46d7-abb6-12854a8bb991

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Raphaël Bosi
2025-02-24 17:09:23 +01:00
committed by GitHub
parent e4f06a7c97
commit 9c7213a1e1
15 changed files with 172 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx
View File

@ -34,10 +34,6 @@ export const RightDrawerRecord = () => {
throw new Error(`Object name is not defined`);
}
if (!viewableRecordId && !isNewViewableRecordLoading) {
throw new Error(`Record id is not defined`);
}
const { objectNameSingular, objectRecordId } = useRecordShowPage(
viewableRecordNameSingular ?? '',
viewableRecordId ?? '',

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

@ -4,7 +4,7 @@ import { useHandleContainerMouseEnter } from '@/object-record/record-table/hooks
import { useUpsertTableRecordNoGroup } from '@/object-record/record-table/hooks/internal/useUpsertTableRecordNoGroup';
import { useRecordTableMoveFocus } from '@/object-record/record-table/hooks/useRecordTableMoveFocus';
import { useCloseRecordTableCellNoGroup } from '@/object-record/record-table/record-table-cell/hooks/internal/useCloseRecordTableCellNoGroup';
import { useMoveSoftFocusToCellOnHoverV2 } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCellOnHoverV2';
import { useMoveSoftFocusToCurrentCellOnHover } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover';
import {
OpenTableCellArgs,
useOpenRecordTableCellV2,
@ -55,11 +55,13 @@ export const RecordTableNoRecordGroupBodyContextProvider = ({
closeTableCellNoGroup();
};
const { moveSoftFocusToCell } =
useMoveSoftFocusToCellOnHoverV2(recordTableId);
const { moveSoftFocusToCurrentCell } =
useMoveSoftFocusToCurrentCellOnHover(recordTableId);
const handleMoveSoftFocusToCell = (cellPosition: TableCellPosition) => {
moveSoftFocusToCell(cellPosition);
const handleMoveSoftFocusToCurrentCell = (
cellPosition: TableCellPosition,
) => {
moveSoftFocusToCurrentCell(cellPosition);
};
const { triggerActionMenuDropdown } = useTriggerActionMenuDropdown({
@ -84,7 +86,7 @@ export const RecordTableNoRecordGroupBodyContextProvider = ({
onOpenTableCell: handleOpenTableCell,
onMoveFocus: handleMoveFocus,
onCloseTableCell: handleCloseTableCell,
onMoveSoftFocusToCell: handleMoveSoftFocusToCell,
onMoveSoftFocusToCurrentCell: handleMoveSoftFocusToCurrentCell,
onActionMenuDropdownOpened: handleActionMenuDropdown,
onCellMouseEnter: handleContainerMouseEnter,
}}

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

@ -4,7 +4,7 @@ import { useHandleContainerMouseEnter } from '@/object-record/record-table/hooks
import { useUpsertTableRecordInGroup } from '@/object-record/record-table/hooks/internal/useUpsertTableRecordInGroup';
import { useRecordTableMoveFocus } from '@/object-record/record-table/hooks/useRecordTableMoveFocus';
import { useCloseRecordTableCellInGroup } from '@/object-record/record-table/record-table-cell/hooks/internal/useCloseRecordTableCellInGroup';
import { useMoveSoftFocusToCellOnHoverV2 } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCellOnHoverV2';
import { useMoveSoftFocusToCurrentCellOnHover } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover';
import {
OpenTableCellArgs,
useOpenRecordTableCellV2,
@ -59,11 +59,13 @@ export const RecordTableRecordGroupBodyContextProvider = ({
closeTableCellInGroup();
};
const { moveSoftFocusToCell } =
useMoveSoftFocusToCellOnHoverV2(recordTableId);
const { moveSoftFocusToCurrentCell } =
useMoveSoftFocusToCurrentCellOnHover(recordTableId);
const handleMoveSoftFocusToCell = (cellPosition: TableCellPosition) => {
moveSoftFocusToCell(cellPosition);
const handleMoveSoftFocusToCurrentCell = (
cellPosition: TableCellPosition,
) => {
moveSoftFocusToCurrentCell(cellPosition);
};
const { triggerActionMenuDropdown } = useTriggerActionMenuDropdown({
@ -88,7 +90,7 @@ export const RecordTableRecordGroupBodyContextProvider = ({
onOpenTableCell: handleOpenTableCell,
onMoveFocus: handleMoveFocus,
onCloseTableCell: handlecloseTableCellInGroup,
onMoveSoftFocusToCell: handleMoveSoftFocusToCell,
onMoveSoftFocusToCurrentCell: handleMoveSoftFocusToCurrentCell,
onActionMenuDropdownOpened: handleActionMenuDropdown,
onCellMouseEnter: handleContainerMouseEnter,
}}

2
packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx
View File

@ -94,7 +94,7 @@ const meta: Meta = {
onOpenTableCell: () => {},
onMoveFocus: () => {},
onCloseTableCell: () => {},
onMoveSoftFocusToCell: () => {},
onMoveSoftFocusToCurrentCell: () => {},
onActionMenuDropdownOpened: () => {},
onCellMouseEnter: () => {},
}}

2
packages/twenty-front/src/modules/object-record/record-table/contexts/RecordTableBodyContext.ts
View File

@ -20,7 +20,7 @@ export type RecordTableBodyContextProps = {
onOpenTableCell: (args: OpenTableCellArgs) => void;
onMoveFocus: (direction: MoveFocusDirection) => void;
onCloseTableCell: () => void;
onMoveSoftFocusToCell: (cellPosition: TableCellPosition) => void;
onMoveSoftFocusToCurrentCell: (cellPosition: TableCellPosition) => void;
onActionMenuDropdownOpened: (
event: React.MouseEvent,
recordId: string,

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

@ -1,6 +1,6 @@
import { useRecoilCallback } from 'recoil';
import { useMoveSoftFocusToCellOnHoverV2 } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCellOnHoverV2';
import { useMoveSoftFocusToCurrentCellOnHover } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover';
import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
@ -18,8 +18,8 @@ export const useHandleContainerMouseEnter = ({
}: {
recordTableId: string;
}) => {
const { moveSoftFocusToCell } =
useMoveSoftFocusToCellOnHoverV2(recordTableId);
const { moveSoftFocusToCurrentCell } =
useMoveSoftFocusToCurrentCellOnHover(recordTableId);
const currentTableCellInEditModePositionState =
useRecoilComponentCallbackStateV2(
@ -56,7 +56,7 @@ export const useHandleContainerMouseEnter = ({
);
if (!isSomeCellInEditMode && !isSoftFocusOnTableCell) {
moveSoftFocusToCell(cellPosition);
moveSoftFocusToCurrentCell(cellPosition);
set(isSoftFocusUsingMouseState, true);
}
},
@ -64,7 +64,7 @@ export const useHandleContainerMouseEnter = ({
isSoftFocusOnTableCellFamilyState,
currentTableCellInEditModePositionState,
isTableCellInEditModeFamilyState,
moveSoftFocusToCell,
moveSoftFocusToCurrentCell,
],
);

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

@ -59,7 +59,7 @@ export const RecordTableCellBaseContainer = ({
const isReadOnly = useIsFieldValueReadOnly();
const { hasSoftFocus, cellPosition } = useContext(RecordTableCellContext);
const { onMoveSoftFocusToCell, onCellMouseEnter } =
const { onMoveSoftFocusToCurrentCell, onCellMouseEnter } =
useRecordTableBodyContextOrThrow();
const handleContainerMouseMove = () => {
@ -77,7 +77,7 @@ export const RecordTableCellBaseContainer = ({
const handleContainerClick = () => {
if (!hasSoftFocus) {
onMoveSoftFocusToCell(cellPosition);
onMoveSoftFocusToCurrentCell(cellPosition);
openTableCell();
}
};

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

@ -4,6 +4,10 @@ import { RecordTableCellContext } from '@/object-record/record-table/contexts/Re
import { RecordTableCellBaseContainer } from '@/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer';
import { RecordTableCellSoftFocusMode } from '@/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode';
import { RecordTableCellSoftFocusModeHotkeysSetterEffect } from '@/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusModeHotkeysSetterEffect';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { useRecoilValue } from 'recoil';
import { RecordTableCellDisplayMode } from './RecordTableCellDisplayMode';
import { RecordTableCellEditMode } from './RecordTableCellEditMode';
@ -22,15 +26,22 @@ export const RecordTableCellContainer = ({
}: RecordTableCellContainerProps) => {
const { hasSoftFocus, isInEditMode } = useContext(RecordTableCellContext);
const currentHotkeyScope = useRecoilValue(currentHotkeyScopeState);
return (
<RecordTableCellBaseContainer>
{isInEditMode ? (
<RecordTableCellEditMode>{editModeContent}</RecordTableCellEditMode>
) : hasSoftFocus ? (
<RecordTableCellSoftFocusMode
editModeContent={editModeContent}
nonEditModeContent={nonEditModeContent}
/>
<>
{currentHotkeyScope.scope === TableHotkeyScope.TableSoftFocus && (
<RecordTableCellSoftFocusModeHotkeysSetterEffect />
)}
<RecordTableCellSoftFocusMode
editModeContent={editModeContent}
nonEditModeContent={nonEditModeContent}
/>
</>
) : (
<RecordTableCellDisplayMode>
{nonEditModeContent}

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

@ -1,24 +1,16 @@
import { ReactElement, useContext, useEffect, useRef } from 'react';
import { useRecoilValue } from 'recoil';
import { Key } from 'ts-key-enum';
import { IconArrowUpRight } from 'twenty-ui';
import { useClearField } from '@/object-record/record-field/hooks/useClearField';
import { useGetButtonIcon } from '@/object-record/record-field/hooks/useGetButtonIcon';
import { useIsFieldClearable } from '@/object-record/record-field/hooks/useIsFieldClearable';
import { useIsFieldEmpty } from '@/object-record/record-field/hooks/useIsFieldEmpty';
import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFieldInputOnly';
import { useToggleEditOnlyInput } from '@/object-record/record-field/hooks/useToggleEditOnlyInput';
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
import { RecordTableCellButton } from '@/object-record/record-table/record-table-cell/components/RecordTableCellButton';
import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell';
import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey';
import { isDefined } from 'twenty-shared';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly';
import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext';
@ -48,13 +40,9 @@ export const RecordTableCellSoftFocusMode = ({
const isEmpty = useIsFieldEmpty();
const isFieldClearable = useIsFieldClearable();
const toggleEditOnlyInput = useToggleEditOnlyInput();
const scrollRef = useRef<HTMLDivElement>(null);
const isSoftFocusUsingMouse = useRecoilValue(isSoftFocusUsingMouseState);
const clearField = useClearField();
useEffect(() => {
if (!isSoftFocusUsingMouse) {
@ -62,65 +50,6 @@ export const RecordTableCellSoftFocusMode = ({
}
}, [isSoftFocusUsingMouse]);
useScopedHotkeys(
[Key.Backspace, Key.Delete],
() => {
if (!isFieldInputOnly && isFieldClearable) {
clearField();
}
},
TableHotkeyScope.TableSoftFocus,
[clearField, isFieldClearable, isFieldInputOnly],
);
useScopedHotkeys(
Key.Enter,
() => {
if (isFieldReadOnly) {
return;
}
if (!isFieldInputOnly) {
openTableCell();
} else {
toggleEditOnlyInput();
}
},
TableHotkeyScope.TableSoftFocus,
[openTableCell],
);
useScopedHotkeys(
'*',
(keyboardEvent) => {
if (isFieldReadOnly) {
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.TableSoftFocus,
[openTableCell],
{
preventDefault: false,
},
);
const handleClick = () => {
if (!isFieldInputOnly && !isFieldReadOnly) {
openTableCell();

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

@ -0,0 +1,99 @@
import { useEffect, useRef } from 'react';
import { useRecoilValue } from 'recoil';
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 { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly';
export const RecordTableCellSoftFocusModeHotkeysSetterEffect = () => {
const isFieldReadOnly = useIsFieldValueReadOnly();
const { openTableCell } = useOpenRecordTableCellFromCell();
const isFieldInputOnly = useIsFieldInputOnly();
const isFieldClearable = useIsFieldClearable();
const toggleEditOnlyInput = useToggleEditOnlyInput();
const scrollRef = useRef<HTMLDivElement>(null);
const isSoftFocusUsingMouse = useRecoilValue(isSoftFocusUsingMouseState);
const clearField = useClearField();
useEffect(() => {
if (!isSoftFocusUsingMouse) {
scrollRef.current?.scrollIntoView({ block: 'nearest' });
}
}, [isSoftFocusUsingMouse]);
useScopedHotkeys(
[Key.Backspace, Key.Delete],
() => {
if (!isFieldInputOnly && isFieldClearable) {
clearField();
}
},
TableHotkeyScope.TableSoftFocus,
[clearField, isFieldClearable, isFieldInputOnly],
);
useScopedHotkeys(
Key.Enter,
() => {
if (isFieldReadOnly) {
return;
}
if (!isFieldInputOnly) {
openTableCell();
} else {
toggleEditOnlyInput();
}
},
TableHotkeyScope.TableSoftFocus,
[openTableCell],
);
useScopedHotkeys(
'*',
(keyboardEvent) => {
if (isFieldReadOnly) {
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.TableSoftFocus,
[openTableCell],
{
preventDefault: false,
},
);
return <></>;
};

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

@ -1,4 +1,5 @@
import { act, renderHook } from '@testing-library/react';
import { renderHook } from '@testing-library/react';
import { act } from 'react';
import { CallbackInterface, RecoilRoot } from 'recoil';
import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
@ -98,17 +99,15 @@ const Wrapper = ({ children }: { children: React.ReactNode }) => (
describe('useMoveSoftFocusToCurrentCellOnHover', () => {
it('should work as expected', () => {
const { result } = renderHook(
() => {
return {
moveSoftFocusToCurrentCellOnHover:
useMoveSoftFocusToCurrentCellOnHover(),
};
},
() => useMoveSoftFocusToCurrentCellOnHover('scopeId'),
{ wrapper: Wrapper },
);
act(() => {
result.current.moveSoftFocusToCurrentCellOnHover();
result.current.moveSoftFocusToCurrentCell({
column: 3,
row: 2,
});
});
expect(mockCallbackInterface.set).toHaveBeenNthCalledWith(

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

@ -1,66 +0,0 @@
import { useRecoilCallback } from 'recoil';
import { useSetSoftFocus } from '@/object-record/record-table/record-table-cell/hooks/useSetSoftFocus';
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
export const useMoveSoftFocusToCellOnHoverV2 = (recordTableId: string) => {
const setSoftFocus = useSetSoftFocus(recordTableId);
const currentTableCellInEditModePositionState =
useRecoilComponentCallbackStateV2(
currentTableCellInEditModePositionComponentState,
recordTableId,
);
const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2(
isTableCellInEditModeComponentFamilyState,
recordTableId,
);
const moveSoftFocusToCell = useRecoilCallback(
({ snapshot }) =>
(cellPosition: TableCellPosition) => {
const currentTableCellInEditModePosition = getSnapshotValue(
snapshot,
currentTableCellInEditModePositionState,
);
const isSomeCellInEditMode = snapshot
.getLoadable(
isTableCellInEditModeFamilyState(
currentTableCellInEditModePosition,
),
)
.getValue();
const currentHotkeyScope = snapshot
.getLoadable(currentHotkeyScopeState)
.getValue();
if (
currentHotkeyScope.scope !== TableHotkeyScope.TableSoftFocus &&
currentHotkeyScope.scope !== TableHotkeyScope.CellEditMode &&
currentHotkeyScope.scope !== TableHotkeyScope.Table
) {
return;
}
if (!isSomeCellInEditMode) {
setSoftFocus(cellPosition);
}
},
[
currentTableCellInEditModePositionState,
isTableCellInEditModeFamilyState,
setSoftFocus,
],
);
return { moveSoftFocusToCell };
};

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

@ -1,29 +1,32 @@
import { useRecoilCallback } from 'recoil';
import { useSetSoftFocus } from '@/object-record/record-table/record-table-cell/hooks/useSetSoftFocus';
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useSetSoftFocusOnCurrentTableCell } from './useSetSoftFocusOnCurrentTableCell';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
export const useMoveSoftFocusToCurrentCellOnHover = () => {
const setSoftFocusOnCurrentTableCell = useSetSoftFocusOnCurrentTableCell();
export const useMoveSoftFocusToCurrentCellOnHover = (recordTableId: string) => {
const setSoftFocus = useSetSoftFocus(recordTableId);
const currentTableCellInEditModePositionState =
useRecoilComponentCallbackStateV2(
currentTableCellInEditModePositionComponentState,
recordTableId,
);
const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2(
isTableCellInEditModeComponentFamilyState,
recordTableId,
);
return useRecoilCallback(
const moveSoftFocusToCurrentCell = useRecoilCallback(
({ snapshot }) =>
() => {
(cellPosition: TableCellPosition) => {
const currentTableCellInEditModePosition = getSnapshotValue(
snapshot,
currentTableCellInEditModePositionState,
@ -44,19 +47,22 @@ export const useMoveSoftFocusToCurrentCellOnHover = () => {
if (
currentHotkeyScope.scope !== TableHotkeyScope.TableSoftFocus &&
currentHotkeyScope.scope !== TableHotkeyScope.CellEditMode &&
currentHotkeyScope.scope !== TableHotkeyScope.Table
currentHotkeyScope.scope !== TableHotkeyScope.Table &&
currentHotkeyScope.scope !== AppHotkeyScope.CommandMenuOpen
) {
return;
}
if (!isSomeCellInEditMode) {
setSoftFocusOnCurrentTableCell();
setSoftFocus(cellPosition);
}
},
[
currentTableCellInEditModePositionState,
isTableCellInEditModeFamilyState,
setSoftFocusOnCurrentTableCell,
setSoftFocus,
],
);
return { moveSoftFocusToCurrentCell };
};

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

@ -5,6 +5,8 @@ import { TableCellPosition } from '@/object-record/record-table/types/TableCellP
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { isSoftFocusActiveComponentState } from '@/object-record/record-table/states/isSoftFocusActiveComponentState';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
@ -19,13 +21,18 @@ export const useSetSoftFocus = (recordTableId?: string) => {
const setHotkeyScope = useSetHotkeyScope();
return useRecoilCallback(
({ set }) =>
({ snapshot, set }) =>
(newPosition: TableCellPosition) => {
setSoftFocusPosition(newPosition);
set(isSoftFocusActiveState, true);
setHotkeyScope(TableHotkeyScope.TableSoftFocus);
if (
snapshot.getLoadable(currentHotkeyScopeState).getValue().scope !==
AppHotkeyScope.CommandMenuOpen
) {
setHotkeyScope(TableHotkeyScope.TableSoftFocus);
}
},
[setSoftFocusPosition, isSoftFocusActiveState, setHotkeyScope],
);

2
packages/twenty-front/src/testing/decorators/RecordTableDecorator.tsx
View File

@ -45,7 +45,7 @@ export const RecordTableDecorator: Decorator = (Story) => {
onOpenTableCell: () => {},
onActionMenuDropdownOpened: () => {},
onMoveFocus: () => {},
onMoveSoftFocusToCell: () => {},
onMoveSoftFocusToCurrentCell: () => {},
onUpsertRecord: () => {},
}}
>