twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-09-11 15:35:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

Removed performance optimization and put back previous system with recoil states for edit mode and soft focus to avoid side effects. (#6019)

Browse Source 
Fixes https://github.com/twentyhq/twenty/issues/6016

This was another side effect of the optimization made on
RecordTableCellContainer to avoid using recoil states, but which causes
too many unpredictable side effects.

I just put back the previous system which works well. We'll see how to
optimize it again later.
This commit is contained in:
Lucas Bordeau 2024-06-25 15:53:31 +02:00 committed by GitHub
parent 78865ee73e
commit 3b7901b49a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 33 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,13 +21,6 @@ export const useCloseCurrentTableCellInEditMode = (recordTableId?: string) => {
isTableCellInEditModeFamilyState(currentTableCellInEditModePosition),
false,
);
document.dispatchEvent(
new CustomEvent(
`edit-mode-change-${currentTableCellInEditModePosition.row}:${currentTableCellInEditModePosition.column}`,
{ detail: false },
),
);
};
},
[currentTableCellInEditModePositionState, isTableCellInEditModeFamilyState],

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

@ -24,23 +24,9 @@ export const useMoveEditModeToTableCellPosition = (recordTableId?: string) => {
false,
);
document.dispatchEvent(
new CustomEvent(
`edit-mode-change-${currentTableCellInEditModePosition.row}:${currentTableCellInEditModePosition.column}`,
{ detail: false },
),
);
set(currentTableCellInEditModePositionState, newPosition);
set(isTableCellInEditModeFamilyState(newPosition), true);
document.dispatchEvent(
new CustomEvent(
`edit-mode-change-${newPosition.row}:${newPosition.column}`,
{ detail: true },
),
);
};
},
[currentTableCellInEditModePositionState, isTableCellInEditModeFamilyState],

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

@ -24,23 +24,9 @@ export const useSetSoftFocusPosition = (recordTableId?: string) => {
set(isSoftFocusOnTableCellFamilyState(currentPosition), false);
document.dispatchEvent(
new CustomEvent(
`soft-focus-move-${currentPosition.row}:${currentPosition.column}`,
{ detail: false },
),
);
set(softFocusPositionState, newPosition);
set(isSoftFocusOnTableCellFamilyState(newPosition), true);
document.dispatchEvent(
new CustomEvent(
`soft-focus-move-${newPosition.row}:${newPosition.column}`,
{ detail: true },
),
);
};
},
[

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

@ -1,14 +1,20 @@
import React, { ReactElement, useContext, useEffect, useState } from 'react';
import React, { ReactElement, useContext } from 'react';
import { clsx } from 'clsx';
import { useRecoilValue } from 'recoil';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { RecordTableCellSoftFocusMode } from '@/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode';
import { useCurrentTableCellPosition } from '@/object-record/record-table/record-table-cell/hooks/useCurrentCellPosition';
import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell';
import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
import { extractComponentFamilyState } from '@/ui/utilities/state/component-state/utils/extractComponentFamilyState';
import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
@ -40,20 +46,36 @@ export const RecordTableCellContainer = ({
const { setIsFocused } = useFieldFocus();
const { openTableCell } = useOpenRecordTableCellFromCell();
const { isSelected, recordId, isPendingRow } = useContext(
RecordTableRowContext,
const { isSelected, recordId } = useContext(RecordTableRowContext);
const { onMoveSoftFocusToCell, onContextMenu, onCellMouseEnter } =
useContext(RecordTableContext);
const tableScopeId = useAvailableScopeIdOrThrow(
RecordTableScopeInternalContext,
getScopeIdOrUndefinedFromComponentId(),
);
const { isLabelIdentifier } = useContext(FieldContext);
const { onContextMenu, onCellMouseEnter } = useContext(RecordTableContext);
const shouldBeInitiallyInEditMode =
isPendingRow === true && isLabelIdentifier;
const isTableCellInEditModeFamilyState = extractComponentFamilyState(
isTableCellInEditModeComponentFamilyState,
tableScopeId,
);
const [hasSoftFocus, setHasSoftFocus] = useState(false);
const [isInEditMode, setIsInEditMode] = useState(shouldBeInitiallyInEditMode);
const isSoftFocusOnTableCellFamilyState = extractComponentFamilyState(
isSoftFocusOnTableCellComponentFamilyState,
tableScopeId,
);
const cellPosition = useCurrentTableCellPosition();
const isInEditMode = useRecoilValue(
isTableCellInEditModeFamilyState(cellPosition),
);
const hasSoftFocus = useRecoilValue(
isSoftFocusOnTableCellFamilyState(cellPosition),
);
const handleContextMenu = (event: React.MouseEvent) => {
onContextMenu(event, recordId);
};
@ -67,59 +89,16 @@ export const RecordTableCellContainer = ({
};
const handleContainerMouseLeave = () => {
setHasSoftFocus(false);
setIsFocused(false);
};
const handleContainerClick = () => {
if (!hasSoftFocus) {
onMoveSoftFocusToCell(cellPosition);
openTableCell();
}
};
useEffect(() => {
const customEventListener = (event: any) => {
event.stopPropagation();
const newHasSoftFocus = event.detail;
setHasSoftFocus(newHasSoftFocus);
setIsFocused(newHasSoftFocus);
};
document.addEventListener(
`soft-focus-move-${cellPosition.row}:${cellPosition.column}`,
customEventListener,
);
return () => {
document.removeEventListener(
`soft-focus-move-${cellPosition.row}:${cellPosition.column}`,
customEventListener,
);
};
}, [cellPosition, setIsFocused]);
useEffect(() => {
const customEventListener = (event: any) => {
const newIsInEditMode = event.detail;
setIsInEditMode(newIsInEditMode);
};
document.addEventListener(
`edit-mode-change-${cellPosition.row}:${cellPosition.column}`,
customEventListener,
);
return () => {
document.removeEventListener(
`edit-mode-change-${cellPosition.row}:${cellPosition.column}`,
customEventListener,
);
};
}, [cellPosition]);
return (
<td
className={clsx({

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

@ -13,7 +13,6 @@ import { RecordTableCellContext } from '@/object-record/record-table/contexts/Re
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { useCloseCurrentTableCellInEditMode } from '@/object-record/record-table/hooks/internal/useCloseCurrentTableCellInEditMode';
import { RecordTableCellButton } from '@/object-record/record-table/record-table-cell/components/RecordTableCellButton';
import { useCurrentTableCellPosition } from '@/object-record/record-table/record-table-cell/hooks/useCurrentCellPosition';
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';
@ -130,15 +129,10 @@ export const RecordTableCellSoftFocusMode = ({
*/
};
const { column, row } = useCurrentTableCellPosition();
useListenClickOutside({
refs: [scrollRef],
callback: () => {
closeCurrentTableCell();
document.dispatchEvent(
new CustomEvent(`soft-focus-move-${row}:${column}`, { detail: false }),
);
},
});