fix: deprecate HeaderMenu items in favor of commandItems

6pac · Oct 24, 2023 · 3987789 · 3987789
1 parent 2cc3175
commit 3987789
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/examples/example-plugin-headermenu.html b/examples/example-plugin-headermenu.html
@@ -118,7 +118,7 @@ <h2>View Source:</h2>
     for (var i = 0; i < columns.length; i++) {
       columns[i].header = {
         menu: {
-          items: [
+          commandItems: [
             {
               iconCssClass: 'sgi sgi-caret sgi-flip-v',
               title: "Sort Ascending",
@@ -164,21 +164,21 @@ <h2>View Source:</h2>
             {
               // we can also have multiple nested sub-menus
               command: 'freezing', title: 'Freeze/Pinning',
-              items: [
+              commandItems: [
                 { command: "freeze-columns", title: "Freeze Columns" },
                 { command: "unfreeze-columns", title: "Unfreeze all Columns" },
               ]
             },
             {
               // we can also have multiple nested sub-menus
               command: 'feedback', title: 'Feedback',
-              items: [
+              commandItems: [
                 { command: "column-love", title: "Column is great", iconCssClass: "sgi sgi-star", tooltip: "this will automatically send us an email about this new column detail" },
                 { command: "column-hate", title: "Column is not useful", iconCssClass: "sgi sgi-information-outline", tooltip: "this will automatically send us an email about this new column detail" },
                 "divider",
                 {
                   command: 'sub-menu', title: 'Contact Us', iconCssClass: "sgi sgi-user", subMenuTitle: "contact us...", subMenuTitleCssClass: "italic",
-                  items: [
+                  commandItems: [
                     { command: "contact-email", title: "Email us", iconCssClass: "sgi sgi-pencil-outline" },
                     { command: "contact-chat", title: "Chat with us", iconCssClass: "sgi sgi-message-outline" },
                     { command: "contact-meeting", title: "Book an appointment", iconCssClass: "sgi sgi-coffee-outline" },

diff --git a/src/models/headerMenuItems.interface.ts b/src/models/headerMenuItems.interface.ts
@@ -2,6 +2,10 @@ import type { Column, MenuCommandItem } from './index';
 import type { SlickGrid } from '../slick.grid';
 
 export interface HeaderMenuItems {
+  /** List of command items to show in the header menu. */
+  commandItems: Array<HeaderMenuCommandItem | 'divider'>;
+
+  /** @deprecated use `commandItems` instead. List of commands to show in the header menu. */
   items: Array<HeaderMenuCommandItem | 'divider'>;
 }
 
@@ -18,5 +22,8 @@ export interface HeaderMenuCommandItemCallbackArgs {
 
 export interface HeaderMenuCommandItem extends Omit<MenuCommandItem, 'commandItems'> {
   /** Array of Command Items (title, command, disabled, ...) */
+  commandItems: Array<HeaderMenuCommandItem | 'divider'>;
+
+  /** @deprecated use `commandItems` instead. Array of Command Items (title, command, disabled, ...) */
   items: Array<HeaderMenuCommandItem | 'divider'>;
 }
diff --git a/src/plugins/slick.headermenu.ts b/src/plugins/slick.headermenu.ts
@@ -215,6 +215,10 @@ export class SlickHeaderMenu implements SlickPlugin {
     const column = args.column;
     const menu = column?.header?.menu as HeaderMenuItems;
 
+    if (menu?.items) {
+      console.warn('[SlickGrid] Header Menu "items" prperty was deprecated in favor of "commandItems" to align with all other Menu plugins.');
+    }
+
     if (menu) {
       // run the override function (when defined), if the result is false it won't go further
       if (!this.runOverrideFunctionWhenExists<typeof args>(this._options.menuUsabilityOverride, args)) {
@@ -288,7 +292,7 @@ export class SlickHeaderMenu implements SlickPlugin {
     }
 
     // create 1st parent menu container & reposition it
-    this._menuElm = this.createMenu(menu.items, columnDef);
+    this._menuElm = this.createMenu(menu.commandItems || menu.items, columnDef);
     const containerNode = this._grid.getContainerNode();
     if (containerNode) {
       containerNode.appendChild(this._menuElm);
@@ -427,7 +431,7 @@ export class SlickHeaderMenu implements SlickPlugin {
       // optionally open sub-menu(s) by mouseover
       if (this._options.subMenuOpenByEvent === 'mouseover') {
         this._bindingEventService.bind(menuItemElm, 'mouseover', ((e: DOMMouseOrTouchEvent<HTMLDivElement>) => {
-          if ((item as HeaderMenuCommandItem).items) {
+          if ((item as HeaderMenuCommandItem).commandItems || (item as HeaderMenuCommandItem).items) {
             this.repositionSubMenu(item as HeaderMenuCommandItem, columnDef, level, e);
           } else if (!isSubMenu) {
             this.destroySubMenus();
@@ -436,7 +440,7 @@ export class SlickHeaderMenu implements SlickPlugin {
       }
 
       // the option/command item could be a sub-menu if it has another list of commands/options
-      if ((item as HeaderMenuCommandItem).items) {
+      if ((item as HeaderMenuCommandItem).commandItems || (item as HeaderMenuCommandItem).items) {
         const chevronElm = document.createElement('div');
         chevronElm.className = 'sub-item-chevron';
         if (this._options.subItemChevronClass) {
@@ -457,7 +461,7 @@ export class SlickHeaderMenu implements SlickPlugin {
     if (item !== 'divider' && !item.disabled && !item.divider) {
       const command = (item as HeaderMenuCommandItem).command || '';
 
-      if (command !== undefined && !(item as HeaderMenuCommandItem).items) {
+      if (Utils.isDefined(command) && !item.commandItems && !(item as HeaderMenuCommandItem).items) {
         const callbackArgs = {
           grid: this._grid,
           column: columnDef,
@@ -475,7 +479,7 @@ export class SlickHeaderMenu implements SlickPlugin {
         if (!e.defaultPrevented) {
           this.hideMenu();
         }
-      } else if ((item as HeaderMenuCommandItem).items) {
+      } else if (item.commandItems || (item as HeaderMenuCommandItem).items) {
         this.repositionSubMenu(item as HeaderMenuCommandItem, columnDef, level, e);
       } else {
         this.destroySubMenus();
@@ -490,7 +494,7 @@ export class SlickHeaderMenu implements SlickPlugin {
     }
 
     // creating sub-menu, we'll also pass level & the item object since we might have "subMenuTitle" to show
-    const subMenuElm = this.createMenu(item.items || [], columnDef, level + 1, item);
+    const subMenuElm = this.createMenu(item.commandItems || item.items || [], columnDef, level + 1, item);
     document.body.appendChild(subMenuElm);
     this.repositionMenu(e, subMenuElm);
   }