diff --git a/common-react/@dbeaver/react-data-grid/src/formatters/BooleanFormatter.tsx b/common-react/@dbeaver/react-data-grid/src/formatters/BooleanFormatter.tsx index 8c449f6fcd..c4664dfe77 100644 --- a/common-react/@dbeaver/react-data-grid/src/formatters/BooleanFormatter.tsx +++ b/common-react/@dbeaver/react-data-grid/src/formatters/BooleanFormatter.tsx @@ -4,11 +4,12 @@ import { Checkbox, clsx, Focusable } from '@dbeaver/ui-kit'; interface Props { value: boolean | null; className?: string; + focusable?: boolean; onClick?: React.MouseEventHandler; onKeyDown?: React.KeyboardEventHandler; } -export function BooleanFormatter({ value, className, onClick, onKeyDown }: Props) { +export function BooleanFormatter({ value, className, onClick, onKeyDown, focusable }: Props) { const handleKeyDown = (event: React.KeyboardEvent) => { if (event.code === 'Enter' || event.code === 'Space') { event.preventDefault(); @@ -17,6 +18,7 @@ export function BooleanFormatter({ value, className, onClick, onKeyDown }: Props }; return ( (undefined as any); diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx index 2b6c00b15c..2968133e83 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx @@ -5,7 +5,7 @@ * Licensed under the Apache License, Version 2.0. * you may not use this file except in compliance with the License. */ -import { computed, observable } from 'mobx'; +import { computed, observable, action } from 'mobx'; import { observer } from 'mobx-react-lite'; import { useContext, type HTMLAttributes } from 'react'; @@ -35,6 +35,7 @@ export const CellRenderer = observer(function CellRenderer({ rowIdx, colI const cellContext = useObservableRef( () => ({ isHovered: false, + isMenuVisible: false, get position(): ICellPosition { return { colIdx: this.colIdx, rowIdx: this.rowIdx }; }, @@ -70,9 +71,14 @@ export const CellRenderer = observer(function CellRenderer({ rowIdx, colI return this.tableDataContext.getEditionState(this.cell); }, + setMenuVisibility(visibility: boolean): void { + this.isMenuVisible = visibility; + }, }), { isHovered: observable.ref, + isMenuVisible: observable.ref, + setMenuVisibility: action, colIdx: observable.ref, rowIdx: observable.ref, row: computed, diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatter.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatter.tsx index ed7b3638ed..7ec0562035 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatter.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatter.tsx @@ -1,12 +1,12 @@ /* * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2024 DBeaver Corp and others + * Copyright (C) 2020-2025 DBeaver Corp and others * * Licensed under the Apache License, Version 2.0. * you may not use this file except in compliance with the License. */ import { observer } from 'mobx-react-lite'; -import { use, useContext, useDeferredValue, useState } from 'react'; +import { use, useContext } from 'react'; import { DataGridCellInnerContext } from '@cloudbeaver/plugin-data-grid'; import { getComputed, s, useObjectRef, useS } from '@cloudbeaver/core-blocks'; @@ -29,11 +29,11 @@ export const CellFormatter = observer(function CellFormatter({ rowIdx, co const tableDataContext = useContext(TableDataContext); const innerCellContext = use(DataGridCellInnerContext); const cellContext = useContext(CellContext); - const [menuVisible, setMenuVisible] = useState(false); const cell = cellContext.cell; - const showCellMenu = getComputed(() => !!cell && (innerCellContext?.isFocused || cellContext.isFocused || cellContext.isHovered || menuVisible)); - const showCellMenuDeferred = useDeferredValue(showCellMenu, showCellMenu); + const showCellMenu = getComputed( + () => !!cell && (innerCellContext?.isFocused || cellContext.isFocused || cellContext.isHovered || cellContext.isMenuVisible), + ); const styles = useS(style); const spreadsheetActions = useObjectRef>({ @@ -47,12 +47,16 @@ export const CellFormatter = observer(function CellFormatter({ rowIdx, co }, }); + function handleCellMenuStateSwitch(visible: boolean): void { + cellContext.setMenuVisibility(visible); + } + return (
- {showCellMenuDeferred && ( + {showCellMenu && (
(function CellFormatter({ rowIdx, co spreadsheetActions={spreadsheetActions} resultIndex={context.resultIndex} simple={context.simple} - onStateSwitch={setMenuVisible} + onStateSwitch={handleCellMenuStateSwitch} />
)} diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx index 3aca960ce6..3b77efadf9 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx @@ -53,6 +53,12 @@ export const BooleanFormatter = observer(function BooleanFo } return ( - + ); });