CB-5364 adds context menu for data-viewer (#2810)

* CB-5364 adds context menu for data-viewer * chore: reverts changes * CB-5364 feat: adds context menu for object viewer --------- Co-authored-by: Daria Marutkina <[email protected]>
dbeaver · Aug 8, 2024 · 6239393 · 6239393
1 parent 8e0e0c9
commit 6239393
Showing 1 changed file with 18 additions and 13 deletions.
diff --git a/...plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/CellFormatter.tsx b/...plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/CellFormatter.tsx
@@ -8,7 +8,7 @@
 import { observer } from 'mobx-react-lite';
 import { useContext, useState } from 'react';
 
-import { getComputed, Icon, s, useMouse, useS, useStateDelay } from '@cloudbeaver/core-blocks';
+import { getComputed, Icon, s, useMouse, useMouseContextMenu, useS, useStateDelay } from '@cloudbeaver/core-blocks';
 import { ConnectionInfoResource, DATA_CONTEXT_CONNECTION } from '@cloudbeaver/core-connections';
 import { useDataContextLink } from '@cloudbeaver/core-data-context';
 import { useService } from '@cloudbeaver/core-di';
@@ -35,6 +35,7 @@ export const Menu = observer<Props>(function Menu({ value, node }) {
   const mouse = useMouse<HTMLDivElement>();
   const [menuOpened, switchState] = useState(false);
   const connection = connectionsInfoResource.getConnectionForNode(node.id);
+  const mouseContextMenu = useMouseContextMenu();
 
   useDataContextLink(menu.context, (context, id) => {
     context.set(DATA_CONTEXT_NAV_NODE, node, id);
@@ -60,21 +61,25 @@ export const Menu = observer<Props>(function Menu({ value, node }) {
       return !menu.available;
     });
 
+  function contextMenuOpenHandler(event: React.MouseEvent<HTMLDivElement>) {
+    mouseContextMenu.handleContextMenuOpen(event);
+  }
+
+  function valueFieldClickHandler(event: React.MouseEvent<HTMLDivElement>) {
+    event.preventDefault();
+  }
+
   return (
-    <div ref={mouse.reference} className={s(styles, { container: true, empty: menuEmpty })} onDoubleClick={openNode}>
-      <div className={classes.box}>
-        <div className={s(styles, { value: true, cellValue: true })} title={value}>
-          {value}
+    <ContextMenu mouseContextMenu={mouseContextMenu} menu={menu} placement="auto-end" modal disclosure onVisibleSwitch={switchState}>
+      <div className={s(styles, { container: true, empty: menuEmpty })} onDoubleClick={openNode}>
+        <div ref={mouse.reference} className={classes.box} onContextMenu={contextMenuOpenHandler}>
+          <div className={s(styles, { value: true, cellValue: true })} title={value} onClick={valueFieldClickHandler}>
+            {value}
+          </div>
+          {!menuEmpty && <Icon className={classes.icon} name="snack" viewBox="0 0 16 10" />}
         </div>
-        {!menuEmpty && (
-          <ContextMenu menu={menu} modal disclosure onVisibleSwitch={switchState}>
-            <div>
-              <Icon className={classes.icon} name="snack" viewBox="0 0 16 10" />
-            </div>
-          </ContextMenu>
-        )}
       </div>
-    </div>
+    </ContextMenu>
   );
 });