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

Fix bug hover on table (#3404)

Browse Source
This commit is contained in:
Charles Bochet
2024-01-12 16:30:32 +01:00
committed by GitHub
parent 6672b04733
commit 4f306f8955
3 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@ import { useRecoilCallback } from 'recoil';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
export const useGetIsSomeCellInEditMode = (recordTableId?: string) => { export const useGetIsSomeCellInEditModeState = (recordTableId?: string) => {
const { const {
currentTableCellInEditModePositionState, currentTableCellInEditModePositionState,
isTableCellInEditModeFamilyState, isTableCellInEditModeFamilyState,
@ -17,11 +17,11 @@ export const useGetIsSomeCellInEditMode = (recordTableId?: string) => {
currentTableCellInEditModePositionState(), currentTableCellInEditModePositionState(),
); );
const isSomeCellInEditMode = isTableCellInEditModeFamilyState( const isSomeCellInEditModeState = isTableCellInEditModeFamilyState(
currentTableCellInEditModePosition, currentTableCellInEditModePosition,
); );
return isSomeCellInEditMode; return isSomeCellInEditModeState;
}, },
[currentTableCellInEditModePositionState, isTableCellInEditModeFamilyState], [currentTableCellInEditModePositionState, isTableCellInEditModeFamilyState],
); );

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

@ -1,7 +1,7 @@
import { useRecoilCallback, useSetRecoilState } from 'recoil'; import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { Key } from 'ts-key-enum'; import { Key } from 'ts-key-enum';
import { useGetIsSomeCellInEditMode } from '@/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode'; import { useGetIsSomeCellInEditModeState } from '@/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
@ -318,7 +318,8 @@ export const useRecordTable = (props?: useRecordTableProps) => {
const { selectAllRows } = useSelectAllRows(recordTableId); const { selectAllRows } = useSelectAllRows(recordTableId);
const getIsSomeCellInEditMode = useGetIsSomeCellInEditMode(recordTableId); const isSomeCellInEditModeState =
useGetIsSomeCellInEditModeState(recordTableId);
return { return {
scopeId, scopeId,
@ -344,7 +345,7 @@ export const useRecordTable = (props?: useRecordTableProps) => {
setIsRecordTableInitialLoading, setIsRecordTableInitialLoading,
setRecordTableLastRowVisible, setRecordTableLastRowVisible,
setSoftFocusPosition, setSoftFocusPosition,
getIsSomeCellInEditMode, isSomeCellInEditModeState,
selectedRowIdsSelector, selectedRowIdsSelector,
}; };
}; };

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

@ -1,5 +1,6 @@
import { ReactElement, useContext, useState } from 'react'; import { ReactElement, useContext, useState } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { useGetButtonIcon } from '@/object-record/field/hooks/useGetButtonIcon'; import { useGetButtonIcon } from '@/object-record/field/hooks/useGetButtonIcon';
import { useIsFieldEmpty } from '@/object-record/field/hooks/useIsFieldEmpty'; import { useIsFieldEmpty } from '@/object-record/field/hooks/useIsFieldEmpty';
@ -57,7 +58,8 @@ export const TableCellContainer = ({
}: TableCellContainerProps) => { }: TableCellContainerProps) => {
const { isCurrentTableCellInEditMode } = useCurrentTableCellEditMode(); const { isCurrentTableCellInEditMode } = useCurrentTableCellEditMode();
const { getIsSomeCellInEditMode } = useRecordTable(); const { isSomeCellInEditModeState } = useRecordTable();
const isSomeCellInEditMode = useRecoilValue(isSomeCellInEditModeState());
const [isHovered, setIsHovered] = useState(false); const [isHovered, setIsHovered] = useState(false);
@ -76,8 +78,6 @@ export const TableCellContainer = ({
}; };
const handleContainerMouseEnter = () => { const handleContainerMouseEnter = () => {
const isSomeCellInEditMode = getIsSomeCellInEditMode();
if (!isHovered && !isSomeCellInEditMode) { if (!isHovered && !isSomeCellInEditMode) {
setIsHovered(true); setIsHovered(true);
moveSoftFocusToCurrentCellOnHover(); moveSoftFocusToCurrentCellOnHover();