twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-23 20:13:21 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix save record table cell when clicking outside table (#8230)

Browse Source
This commit is contained in:
Baptiste Devessier 2024-10-31 11:45:40 +01:00 committed by GitHub
parent f5bde0251b
commit d0dc8bae4f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 45 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,19 +1,26 @@
import { Key } from 'ts-key-enum';
import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId';
import { useLeaveTableFocus } from '@/object-record/record-table/hooks/internal/useLeaveTableFocus';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useListenClickOutsideByClassName } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useListenClickOutsideV2 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
type RecordTableInternalEffectProps = {
recordTableId: string;
tableBodyRef: React.RefObject<HTMLDivElement>;
};
export const RecordTableInternalEffect = ({
recordTableId,
tableBodyRef,
}: RecordTableInternalEffectProps) => {
const { leaveTableFocus, resetTableRowSelection, useMapKeyboardToSoftFocus } =
useRecordTable({ recordTableId });
const leaveTableFocus = useLeaveTableFocus(recordTableId);
const { resetTableRowSelection, useMapKeyboardToSoftFocus } = useRecordTable({
recordTableId,
});
useMapKeyboardToSoftFocus();
@ -25,9 +32,9 @@ export const RecordTableInternalEffect = ({
TableHotkeyScope.Table,
);
useListenClickOutsideByClassName({
classNames: ['entity-table-cell'],
excludeClassNames: ['bottom-bar', 'action-menu-dropdown', 'command-menu'],
useListenClickOutsideV2({
listenerId: RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID,
refs: [tableBodyRef],
callback: () => {
leaveTableFocus();
},

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

@ -87,7 +87,10 @@ export const RecordTableWithWrappers = ({
onDragSelectionChange={setRowSelected}
/>
</StyledTableInternalContainer>
<RecordTableInternalEffect recordTableId={recordTableId} />
<RecordTableInternalEffect
tableBodyRef={tableBodyRef}
recordTableId={recordTableId}
/>
</StyledTableContainer>
</StyledTableWithHeader>
</RecordUpdateContext.Provider>

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

@ -0,0 +1 @@
export const RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID = 'record-table';

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

@ -1,19 +1,13 @@
import { useRecoilCallback } from 'recoil';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
import { useCloseCurrentTableCellInEditMode } from './useCloseCurrentTableCellInEditMode';
import { useDisableSoftFocus } from './useDisableSoftFocus';
export const useLeaveTableFocus = (recordTableId?: string) => {
const disableSoftFocus = useDisableSoftFocus(recordTableId);
const closeCurrentCellInEditMode =
useCloseCurrentTableCellInEditMode(recordTableId);
const { isSoftFocusActiveState } = useRecordTableStates(recordTableId);
@ -27,28 +21,14 @@ export const useLeaveTableFocus = (recordTableId?: string) => {
isSoftFocusActiveState,
);
const currentHotkeyScope = snapshot
.getLoadable(currentHotkeyScopeState)
.getValue();
resetTableRowSelection();
if (!isSoftFocusActive) {
return;
}
if (currentHotkeyScope?.scope === TableHotkeyScope.Table) {
return;
}
closeCurrentCellInEditMode();
disableSoftFocus();
},
[
closeCurrentCellInEditMode,
disableSoftFocus,
isSoftFocusActiveState,
resetTableRowSelection,
],
[disableSoftFocus, isSoftFocusActiveState, resetTableRowSelection],
);
};

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

@ -4,10 +4,19 @@ import { FieldInput } from '@/object-record/record-field/components/FieldInput';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { useIsFieldReadOnly } from '@/object-record/record-field/hooks/useIsFieldReadOnly';
import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId';
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
import { useSetRecoilState } from 'recoil';
export const RecordTableCellFieldInput = () => {
const { getClickOutsideListenerIsActivatedState } =
useClickOustideListenerStates(RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID);
const setClickOutsideListenerIsActivated = useSetRecoilState(
getClickOutsideListenerIsActivatedState,
);
const { onUpsertRecord, onMoveFocus, onCloseTableCell } =
useContext(RecordTableContext);
@ -40,6 +49,8 @@ export const RecordTableCellFieldInput = () => {
};
const handleClickOutside: FieldInputEvent = (persistField) => {
setClickOutsideListenerIsActivated(false);
onUpsertRecord({
persistField,
recordId,

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

@ -21,6 +21,8 @@ import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { isDefined } from '~/utils/isDefined';
import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId';
import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
import { useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
@ -42,6 +44,9 @@ export type OpenTableCellArgs = {
};
export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
const { getClickOutsideListenerIsActivatedState } =
useClickOustideListenerStates(RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID);
const { indexIdentifierUrl } = useContext(RecordIndexRootPropsContext);
const moveEditModeToTableCellPosition =
useMoveEditModeToTableCellPosition(tableScopeId);
@ -65,7 +70,7 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
const navigate = useNavigate();
const openTableCell = useRecoilCallback(
({ snapshot }) =>
({ snapshot, set }) =>
({
initialValue,
cellPosition,
@ -80,6 +85,8 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
return;
}
set(getClickOutsideListenerIsActivatedState, false);
const isFirstColumnCell = cellPosition.column === 0;
const fieldValue = getSnapshotValue(
@ -137,17 +144,18 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
}
},
[
getClickOutsideListenerIsActivatedState,
setDragSelectionStartEnabled,
moveEditModeToTableCellPosition,
initDraftValue,
toggleClickOutsideListener,
leaveTableFocus,
setHotkeyScope,
initDraftValue,
moveEditModeToTableCellPosition,
openRightDrawer,
navigate,
indexIdentifierUrl,
setViewableRecordId,
setViewableRecordNameSingular,
indexIdentifierUrl,
navigate,
openRightDrawer,
setHotkeyScope,
],
);