diff --git a/front/src/modules/ui/data-table/hooks/useGetIsSomeCellInEditMode.ts b/front/src/modules/ui/data-table/hooks/useGetIsSomeCellInEditMode.ts new file mode 100644 index 000000000..60ebb6f16 --- /dev/null +++ b/front/src/modules/ui/data-table/hooks/useGetIsSomeCellInEditMode.ts @@ -0,0 +1,26 @@ +import { useRecoilCallback } from 'recoil'; + +import { currentTableCellInEditModePositionState } from '../states/currentTableCellInEditModePositionState'; +import { isTableCellInEditModeFamilyState } from '../states/isTableCellInEditModeFamilyState'; + +export const useGetIsSomeCellInEditMode = () => { + return useRecoilCallback( + ({ snapshot }) => + () => { + const currentTableCellInEditModePosition = snapshot + .getLoadable(currentTableCellInEditModePositionState) + .valueOrThrow(); + + const isSomeCellInEditMode = snapshot + .getLoadable( + isTableCellInEditModeFamilyState( + currentTableCellInEditModePosition, + ), + ) + .valueOrThrow(); + + return isSomeCellInEditMode; + }, + [], + ); +}; diff --git a/front/src/modules/ui/data-table/hooks/useMoveSoftFocusToCurrentCellOnHover.ts b/front/src/modules/ui/data-table/hooks/useMoveSoftFocusToCurrentCellOnHover.ts new file mode 100644 index 000000000..fc1bc34f9 --- /dev/null +++ b/front/src/modules/ui/data-table/hooks/useMoveSoftFocusToCurrentCellOnHover.ts @@ -0,0 +1,27 @@ +import { useRecoilCallback } from 'recoil'; + +import { currentTableCellInEditModePositionState } from '../states/currentTableCellInEditModePositionState'; +import { isTableCellInEditModeFamilyState } from '../states/isTableCellInEditModeFamilyState'; +import { useSetSoftFocusOnCurrentTableCell } from '../table-cell/hooks/useSetSoftFocusOnCurrentTableCell'; + +export const useMoveSoftFocusToCurrentCellOnHover = () => { + const setSoftFocusOnCurrentTableCell = useSetSoftFocusOnCurrentTableCell(); + + return useRecoilCallback( + ({ snapshot }) => + () => { + const currentTableCellInEditModePosition = snapshot + .getLoadable(currentTableCellInEditModePositionState) + .valueOrThrow(); + + const isSomeCellInEditMode = snapshot.getLoadable( + isTableCellInEditModeFamilyState(currentTableCellInEditModePosition), + ); + + if (!isSomeCellInEditMode.contents) { + setSoftFocusOnCurrentTableCell(); + } + }, + [setSoftFocusOnCurrentTableCell], + ); +}; diff --git a/front/src/modules/ui/data-table/table-cell/components/TableCellContainer.tsx b/front/src/modules/ui/data-table/table-cell/components/TableCellContainer.tsx index b3910b44b..e5bac6f0a 100644 --- a/front/src/modules/ui/data-table/table-cell/components/TableCellContainer.tsx +++ b/front/src/modules/ui/data-table/table-cell/components/TableCellContainer.tsx @@ -8,6 +8,8 @@ import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext'; import { ColumnIndexContext } from '../../contexts/ColumnIndexContext'; +import { useGetIsSomeCellInEditMode } from '../../hooks/useGetIsSomeCellInEditMode'; +import { useMoveSoftFocusToCurrentCellOnHover } from '../../hooks/useMoveSoftFocusToCurrentCellOnHover'; import { TableHotkeyScope } from '../../types/TableHotkeyScope'; import { useCurrentTableCellEditMode } from '../hooks/useCurrentTableCellEditMode'; import { useIsSoftFocusOnCurrentTableCell } from '../hooks/useIsSoftFocusOnCurrentTableCell'; @@ -58,8 +60,15 @@ export const TableCellContainer = ({ }: TableCellContainerProps) => { const { isCurrentTableCellInEditMode } = useCurrentTableCellEditMode(); + const getIsSomeCellInEditMode = useGetIsSomeCellInEditMode(); + const [isHovered, setIsHovered] = useState(false); + const moveSoftFocusToCurrentCellOnHover = + useMoveSoftFocusToCurrentCellOnHover(); + + const hasSoftFocus = useIsSoftFocusOnCurrentTableCell(); + const setSoftFocusOnCurrentTableCell = useSetSoftFocusOnCurrentTableCell(); const { openTableCell } = useTableCell(); @@ -70,7 +79,12 @@ export const TableCellContainer = ({ }; const handleContainerMouseEnter = () => { - setIsHovered(true); + const isSomeCellInEditMode = getIsSomeCellInEditMode(); + + if (!isHovered && !isSomeCellInEditMode) { + setIsHovered(true); + moveSoftFocusToCurrentCellOnHover(); + } }; const handleContainerMouseLeave = () => { @@ -84,14 +98,12 @@ export const TableCellContainer = ({ const isEmpty = useIsFieldEmpty(); const showButton = - buttonIcon && - isHovered && + !!buttonIcon && + hasSoftFocus && !isCurrentTableCellInEditMode && !editModeContentOnly && (!isFirstColumnCell || !isEmpty); - const hasSoftFocus = useIsSoftFocusOnCurrentTableCell(); - return ( )} - + {editModeContentOnly ? editModeContent : nonEditModeContent} diff --git a/front/src/modules/ui/data-table/table-cell/components/TableCellDisplayContainer.tsx b/front/src/modules/ui/data-table/table-cell/components/TableCellDisplayContainer.tsx index be1c5b66e..c6d156817 100644 --- a/front/src/modules/ui/data-table/table-cell/components/TableCellDisplayContainer.tsx +++ b/front/src/modules/ui/data-table/table-cell/components/TableCellDisplayContainer.tsx @@ -19,7 +19,7 @@ const StyledEditableCellDisplayModeOuterContainer = styled.div< padding-right: ${({ theme }) => theme.spacing(1)}; width: 100%; ${(props) => - props.softFocus || props.isHovered + props.softFocus ? `background: ${props.theme.background.transparent.secondary}; border-radius: ${props.theme.border.radius.sm}; outline: 1px solid ${props.theme.font.color.extraLight};` @@ -39,14 +39,12 @@ export const TableCellDisplayContainer = ({ softFocus, onClick, scrollRef, - isHovered, }: React.PropsWithChildren) => ( diff --git a/front/src/modules/ui/data-table/table-cell/components/TableCellDisplayMode.tsx b/front/src/modules/ui/data-table/table-cell/components/TableCellDisplayMode.tsx index 0ceb6d4a0..1054f22d8 100644 --- a/front/src/modules/ui/data-table/table-cell/components/TableCellDisplayMode.tsx +++ b/front/src/modules/ui/data-table/table-cell/components/TableCellDisplayMode.tsx @@ -7,8 +7,7 @@ import { TableCellDisplayContainer } from './TableCellDisplayContainer'; export const TableCellDisplayMode = ({ children, - isHovered, -}: React.PropsWithChildren & { isHovered?: boolean }) => { +}: React.PropsWithChildren) => { const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentTableCell(); const isFieldInputOnly = useIsFieldInputOnly(); @@ -24,7 +23,7 @@ export const TableCellDisplayMode = ({ }; return ( - + {children} ); diff --git a/front/src/modules/ui/utilities/drag-select/hooks/useDragSelect.ts b/front/src/modules/ui/utilities/drag-select/hooks/useDragSelect.ts index adba31fff..fb9c21a75 100644 --- a/front/src/modules/ui/utilities/drag-select/hooks/useDragSelect.ts +++ b/front/src/modules/ui/utilities/drag-select/hooks/useDragSelect.ts @@ -1,9 +1,9 @@ -import { useRecoilCallback, useRecoilState } from 'recoil'; +import { useRecoilCallback, useSetRecoilState } from 'recoil'; import { isDragSelectionStartEnabledState } from '../states/internal/isDragSelectionStartEnabledState'; export const useDragSelect = () => { - const [, setIsDragSelectionStartEnabled] = useRecoilState( + const setIsDragSelectionStartEnabled = useSetRecoilState( isDragSelectionStartEnabledState, );