ctx menu refactor

packages/web/src/datagrid/ChangeSetGrider.ts

@@ -60,7 +60,7 @@ export default class ChangeSetGrider extends Grider {
     this.batchChangeSet = null;
     this.compiledMacroFunc = compileMacroFunction(macro, this._errors);
 
-    console.log('changeSet', this.changeSet);
+    // console.log('changeSet', this.changeSet);
   }
 
   get errors() {

packages/web/src/jsontree/JSONTree.svelte

@@ -1,22 +1,24 @@
 <script lang="ts">
   import JSONNode from './JSONNode.svelte';
   import { setContext } from 'svelte';
-  import contextMenu from '../utility/contextMenu';
+  import contextMenu, { getContextMenu } from '../utility/contextMenu';
 
   setContext('json-tree-context-key', {});
 
   export let key = '';
+  export let menu = null;
   export let value;
   export let expanded = false;
   export let labelOverride = null;
-  export let menu;
 
   export let isDeleted;
   export let isInserted;
   export let isModified;
+
+  const parentMenu = getContextMenu();
 </script>
 
-<ul use:contextMenu={menu} class:isDeleted class:isInserted class:isModified>
+<ul use:contextMenu={[parentMenu, menu]} class:isDeleted class:isInserted class:isModified>
   <JSONNode {key} {value} isParentExpanded={true} isParentArray={false} {expanded} {labelOverride} />
 </ul>
 

packages/web/src/jsonview/CollectionJsonRow.svelte

@@ -20,10 +20,10 @@
   import EditJsonModal from '../modals/EditJsonModal.svelte';
   import ErrorMessageModal from '../modals/ErrorMessageModal.svelte';
   import { showModal } from '../modals/modalTools';
+  import { getContextMenu, registerMenu } from '../utility/contextMenu';
 
   export let rowIndex;
   export let grider;
-  export let commonMenu;
 
   $: rowData = grider.getRowData(rowIndex);
   $: rowStatus = grider.getRowStatus(rowIndex);
@@ -32,20 +32,16 @@
     editJsonRowDocument(grider, rowIndex);
   }
 
-  function createMenu() {
+  registerMenu([
-    return [
+    { text: 'Edit document', onClick: handleEditDocument },
-      ...commonMenu,
+    { text: 'Delete document', onClick: () => grider.deleteRow(rowIndex) },
-      { text: 'Edit document', onClick: handleEditDocument },
+    { text: 'Revert row changes', onClick: () => grider.revertRowChanges(rowIndex) },
-      { text: 'Delete document', onClick: () => grider.deleteRow(rowIndex) },
+  ]);
-      { text: 'Revert row changes', onClick: () => grider.revertRowChanges(rowIndex) },
-    ];
-  }
 </script>
 
 <JSONTree
   value={rowData}
   labelOverride="({rowIndex + 1}) "
-  menu={createMenu}
   isModified={rowStatus.status == 'updated'}
   isInserted={rowStatus.status == 'inserted'}
   isDeleted={rowStatus.status == 'deleted'}

packages/web/src/jsonview/CollectionJsonView.svelte

@@ -27,7 +27,7 @@
   import Pager from '../elements/Pager.svelte';
 
   import { getActiveTabId } from '../stores';
-  import contextMenu from '../utility/contextMenu';
+  import contextMenu, { getContextMenu, registerMenu } from '../utility/contextMenu';
   import CollectionJsonRow from './CollectionJsonRow.svelte';
 
   export let conid;
@@ -81,20 +81,21 @@
     invalidateCommands();
   });
 
-  const commonMenu = [{ command: 'dataJson.switchToTable' }];
+  registerMenu({ command: 'dataJson.switchToTable' });
+  const menu = getContextMenu();
 
   $: grider = new ChangeSetGrider(loadedRows, changeSetState, dispatchChangeSet, display);
 
-  $: console.log('GRIDER', grider);
+  // $: console.log('GRIDER', grider);
 </script>
 
-<div class="flexcol flex1" use:contextMenu={commonMenu}>
+<div class="flexcol flex1" use:contextMenu={menu}>
   <div class="toolbar">
     <Pager bind:skip bind:limit on:load={() => display.reload()} />
   </div>
   <div class="json">
     {#each _.range(0, grider.rowCount) as rowIndex}
-      <CollectionJsonRow {grider} {rowIndex} {commonMenu} />
+      <CollectionJsonRow {grider} {rowIndex} />
     {/each}
   </div>
 </div>

packages/web/src/utility/contextMenu.ts

@@ -4,10 +4,10 @@ import { currentDropDownMenu } from '../stores';
 
 export function registerMenu(items) {
   const parentMenu = getContext('componentContextMenu');
-  setContext('componentContextMenu', parentMenu ? [parentMenu, items] : items);
+  setContext('componentContextMenu', [parentMenu, items]);
 }
 
-export default function contextMenu(node, items) {
+export default function contextMenu(node, items = []) {
   const handleContextMenu = e => {
     e.preventDefault();
     e.stopPropagation();
@@ -47,3 +47,7 @@ export function extractMenuItems(menu) {
   doExtractMenuItems(menu, res);
   return res;
 }
+
+export function getContextMenu(): any {
+  return getContext('componentContextMenu');
+}