mirror of
https://github.com/twentyhq/twenty.git
synced 2024-09-11 15:35:36 +03:00
Removed performance optimization and put back previous system with recoil states for edit mode and soft focus to avoid side effects. (#6019)
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:
parent
78865ee73e
commit
3b7901b49a
@ -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],
|
||||
|
@ -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],
|
||||
|
@ -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 },
|
||||
),
|
||||
);
|
||||
};
|
||||
},
|
||||
[
|
||||
|
@ -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({
|
||||
|
@ -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 }),
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user