feat: add sub-menu(s) to GridMenu control

- currently only works by `click` event on sub-menus, I tried to implement it with `mouseover`/`mouseout` but it's a lot more complex (we need to know if we are mousing over the correct sub-menu or over something else and this and that... wow just too much work)... so `click` should be enough for now, even though it's slightly less user friendly
6pac · Oct 20, 2023 · c472ce1 · c472ce1
1 parent 6eaee7a
commit c472ce1
Show file tree

Hide file tree

Showing 7 changed files with 380 additions and 81 deletions.
diff --git a/cypress/e2e/example-grid-menu.cy.ts b/cypress/e2e/example-grid-menu.cy.ts
@@ -287,4 +287,73 @@ describe('Example - Grid Menu', () => {
       .should('be.visible')
       .click({ force: true });
   });
+
+  it('should be able to open Grid Menu and click on Export->Text and expect alert triggered with Text Export', () => {
+    const subCommands1 = ['Text', 'Excel'];
+    const stub = cy.stub();
+    cy.on('window:alert', stub);
+
+    cy.get('#myGrid')
+      .find('button.slick-gridmenu-button')
+      .click({ force: true });
+
+    cy.get('.slick-gridmenu.slick-menu-level-0 .slick-gridmenu-command-list')
+      .find('.slick-gridmenu-item')
+      .contains('Export')
+      .click();
+
+    cy.get('.slick-gridmenu.slick-menu-level-1 .slick-gridmenu-command-list')
+      .should('exist')
+      .find('.slick-gridmenu-item')
+      .each(($command, index) => expect($command.text()).to.contain(subCommands1[index]));
+
+    cy.get('.slick-gridmenu.slick-menu-level-1 .slick-gridmenu-command-list')
+      .find('.slick-gridmenu-item')
+      .contains('Text')
+      .click()
+      .then(() => expect(stub.getCall(0)).to.be.calledWith('Exporting as Text'));
+  });
+
+  it('should be able to open Grid Menu and click on Export->Excel->xls and expect alert triggered with Excel (xls) Export', () => {
+    const subCommands1 = ['Text', 'Excel'];
+    const subCommands2 = ['Excel (csv)', 'Excel (xls)'];
+    const stub = cy.stub();
+    cy.on('window:alert', stub);
+
+    cy.get('#myGrid')
+      .find('button.slick-gridmenu-button')
+      .click({ force: true });
+
+    cy.get('.slick-gridmenu.slick-menu-level-0 .slick-gridmenu-command-list')
+      .find('.slick-gridmenu-item')
+      .contains('Export')
+      .click();
+
+    cy.get('.slick-gridmenu.slick-menu-level-1 .slick-gridmenu-command-list')
+      .should('exist')
+      .find('.slick-gridmenu-item')
+      .each(($command, index) => expect($command.text()).to.contain(subCommands1[index]));
+
+    cy.get('.slick-gridmenu.slick-menu-level-1 .slick-gridmenu-command-list')
+      .find('.slick-gridmenu-item')
+      .contains('Excel')
+      .click();
+
+    cy.get('.slick-gridmenu.slick-menu-level-2 .slick-gridmenu-command-list').as('subMenuList2');
+
+    cy.get('@subMenuList2')
+      .find('.slick-menu-title')
+      .contains('available formats');
+
+    cy.get('@subMenuList2')
+      .should('exist')
+      .find('.slick-gridmenu-item')
+      .each(($command, index) => expect($command.text()).to.contain(subCommands2[index]));
+
+    cy.get('.slick-gridmenu.slick-menu-level-2 .slick-gridmenu-command-list')
+      .find('.slick-gridmenu-item')
+      .contains('Excel (xls)')
+      .click()
+      .then(() => expect(stub.getCall(0)).to.be.calledWith('Exporting as Excel (xls)'));
+  });
 });
diff --git a/examples/example-grid-menu.html b/examples/example-grid-menu.html
@@ -87,6 +87,12 @@
     .slick-columnpicker-list input[type=checkbox]:checked + label:before {
       opacity: 1; /* checked icon */
     }
+    .slick-gridmenu.slick-submenu {
+      background-color: #fbfbfb;
+      /* border-width: 2px; */
+      box-shadow: 0 2px 4px 2px rgba(146, 152, 163, 0.4);
+      /* min-width: 150px; */
+    }
   </style>
 </head>
 <body>
@@ -175,6 +181,7 @@ <h2>View Source:</h2>
     // when not passed, it will act as a regular Column Picker (with default Grid Menu image of drag-handle.png)
     gridMenu: {
       useClickToRepositionMenu: false, // defaults to true (false would use the icon offset to reposition the grid menu)
+      subItemChevronClass: 'sgi sgi-chevron-right',
       menuUsabilityOverride: function (args) {
         // we could disable the menu entirely by returning false
         return true;
@@ -244,6 +251,21 @@ <h2>View Source:</h2>
           title: "Disabled Command",
           disabled: true,
           command: "custom-command"
+        },
+        "divider",
+        {
+          // we can also have multiple sub-items
+          command: 'export', title: 'Export',
+          customItems: [
+            { command: "export-txt", title: "Text" },
+            {
+              command: 'sub-menu', title: 'Excel', cssClass: "green", subMenuTitle: "available formats", subMenuTitleCssClass: "italic orange",
+              customItems: [
+                { command: "export-csv", title: "Excel (csv)" },
+                { command: "export-xls", title: "Excel (xls)" },
+              ]
+            }
+          ]
         }
       ]
     }
@@ -383,7 +405,16 @@ <h2>View Source:</h2>
         grid.setSortColumns([]);
         dataView.refresh();
       } else {
-        alert("Command: " + args.command);
+        switch (args.command) {
+          case "export-csv":
+          case "export-txt":
+          case "export-xls":
+            alert("Exporting as " + args.item.title);
+            break;
+          default:
+            alert("Command: " + args.command);
+            break;
+        }
       }
     });
 
@@ -404,6 +435,11 @@ <h2>View Source:</h2>
     gridMenuControl.onMenuClose.subscribe(function(e, args) {
       console.log('Menu is closing');
       grid.autosizeColumns();
+
+      // you can prevent Grid Menu from closing
+      // e.preventDefault();
+      // console.log('default prevented')
+      // return false;
     });
 
     grid.onAutosizeColumns.subscribe(function(e, args) {