feat: add sub-menu(s) to HeaderMenu plugin (#1158)

* feat: add sub-menu(s) to HeaderMenu plugin
ghiscoding · Oct 29, 2023 · eeab42e · eeab42e
1 parent 8999297
commit eeab42e
Show file tree

Hide file tree

Showing 19 changed files with 616 additions and 137 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example14.scss b/examples/vite-demo-vanilla-bundle/src/examples/example14.scss
@@ -3,3 +3,10 @@ $control-height: 2.4em;
 
 // @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
 @import 'bulma/bulma';
+
+.salmon {
+  color: lightsalmon;
+}
+.green {
+  color: rgb(127, 196, 24);
+}
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example14.ts b/examples/vite-demo-vanilla-bundle/src/examples/example14.ts
@@ -355,6 +355,49 @@ export default class Example14 {
       },
     ];
 
+    // add custom Header Menu to all columns except "Action"
+    this.columnDefinitions.forEach(col => {
+      col.header = {
+        menu: {
+          items: [
+            { command: '', divider: true, positionOrder: 98 },
+            {
+              // we can also have multiple nested sub-menus
+              command: 'custom-actions', title: 'Hello', positionOrder: 99,
+              items: [
+                { command: 'hello-world', title: 'Hello World' },
+                { command: 'hello-slickgrid', title: 'Hello SlickGrid' },
+                {
+                  command: 'sub-menu', title: `Let's play`, cssClass: 'green', subMenuTitle: 'choose your game', subMenuTitleCssClass: 'text-italic salmon',
+                  items: [
+                    { command: 'sport-badminton', title: 'Badminton' },
+                    { command: 'sport-tennis', title: 'Tennis' },
+                    { command: 'sport-racquetball', title: 'Racquetball' },
+                    { command: 'sport-squash', title: 'Squash' },
+                  ]
+                }
+              ]
+            },
+            {
+              command: 'feedback', title: 'Feedback', positionOrder: 100,
+              items: [
+                { command: 'request-update', title: 'Request update from supplier', iconCssClass: 'mdi mdi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' },
+                'divider',
+                {
+                  command: 'sub-menu', title: 'Contact Us', iconCssClass: 'mdi mdi-account', subMenuTitle: 'contact us...', subMenuTitleCssClass: 'italic',
+                  items: [
+                    { command: 'contact-email', title: 'Email us', iconCssClass: 'mdi mdi-pencil-outline' },
+                    { command: 'contact-chat', title: 'Chat with us', iconCssClass: 'mdi mdi-message-text-outline' },
+                    { command: 'contact-meeting', title: 'Book an appointment', iconCssClass: 'mdi mdi-coffee' },
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      };
+    });
+
     this.gridOptions = {
       eventNamingStyle: EventNamingStyle.lowerCase,
       editable: true,
@@ -434,6 +477,20 @@ export default class Example14 {
       },
       // when using the cellMenu, you can change some of the default options and all use some of the callback methods
       enableCellMenu: true,
+      headerMenu: {
+        subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270',
+        onCommand: (_e, args) => {
+          // e.preventDefault(); // preventing default event would keep the menu open after the execution
+          const command = args.item?.command;
+          if (command.includes('hello-')) {
+            alert(args?.item.title);
+          } else if (command.includes('sport-')) {
+            alert('Just do it, play ' + args?.item?.title);
+          } else if (command.includes('contact-')) {
+            alert('Command: ' + args?.item?.command);
+          }
+        },
+      }
     };
   }
 

diff --git a/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts b/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts
@@ -316,12 +316,12 @@ describe('CellMenu Plugin', () => {
               </li>
               <li class="slick-menu-item slick-menu-item-divider"></li>
               <li class=\"slick-menu-item slick-submenu-item\" data-command=\"sub-commands\">
-                <div class=\"slick-menu-icon\">◦</div>
+                <div class=\"slick-menu-icon\"></div>
                 <span class=\"slick-menu-content\">Sub Commands</span>
                 <span class=\"sub-item-chevron\">⮞</span>
               </li>
               <li class=\"slick-menu-item slick-submenu-item\" data-command=\"sub-commands2\">
-                <div class=\"slick-menu-icon\">◦</div>
+                <div class=\"slick-menu-icon\"></div>
                 <span class=\"slick-menu-content\">Sub Commands 2</span>
                 <span class=\"sub-item-chevron\">⮞</span>
               </li>
@@ -804,7 +804,7 @@ describe('CellMenu Plugin', () => {
               </li>
               <li class="slick-menu-item slick-menu-item-divider"></li>
               <li class=\"slick-menu-item slick-submenu-item\" data-option=\"sub-options\">
-                <div class=\"slick-menu-icon\">◦</div>
+                <div class=\"slick-menu-icon\"></div>
                 <span class=\"slick-menu-content\">Sub Options</span>
                 <span class=\"sub-item-chevron\">⮞</span>
               </li>

diff --git a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts
@@ -342,7 +342,7 @@ describe('ContextMenu Plugin', () => {
               </li>
               <li class="slick-menu-item slick-menu-item-divider"></li>
               <li class=\"slick-menu-item slick-submenu-item\" data-command=\"sub-commands\">
-                <div class=\"slick-menu-icon\">◦</div>
+                <div class=\"slick-menu-icon\"></div>
                 <span class=\"slick-menu-content\">Sub Commands</span>
                 <span class=\"sub-item-chevron\">⮞</span>
               </li>
@@ -1349,7 +1349,7 @@ describe('ContextMenu Plugin', () => {
               </li>
               <li class="slick-menu-item slick-menu-item-divider"></li>
               <li class=\"slick-menu-item slick-submenu-item\" data-option=\"sub-options\">
-                <div class=\"slick-menu-icon\">◦</div>
+                <div class=\"slick-menu-icon\"></div>
                 <span class=\"slick-menu-content\">Sub Options</span>
                 <span class=\"sub-item-chevron\">⮞</span>
               </li>