Skip to content

Commit

Permalink
refactor: reconcile menu into base class & reuse few fn
Browse files Browse the repository at this point in the history
  • Loading branch information
ghiscoding committed Sep 12, 2021
1 parent 4243ead commit 5bda236
Show file tree
Hide file tree
Showing 32 changed files with 1,002 additions and 1,154 deletions.
204 changes: 104 additions & 100 deletions packages/common/src/controls/__tests__/gridMenuControl.spec.ts

Large diffs are not rendered by default.

360 changes: 133 additions & 227 deletions packages/common/src/controls/gridMenu.control.ts

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions packages/common/src/extensions/extensionUtility.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export class ExtensionUtility {
output = this.translaterService.translate(titleKey || ' ');
} else {
switch (propName) {
case 'commandTitle':
case 'customTitle':
output = title || enableTranslate && this.translaterService?.getCurrentLanguage && this.translaterService?.translate(`${translationPrefix}COMMANDS` || ' ') || locales?.TEXT_COMMANDS;
break;
Expand Down
3 changes: 3 additions & 0 deletions packages/common/src/interfaces/gridMenu.interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ export interface GridMenu extends GridMenuOption {
/** Callback fired Before the menu is shown. */
onBeforeMenuShow?: (e: Event, args: GridMenuEventWithElementCallbackArgs) => boolean | void;

/** SlickGrid Event fired when the menu is closing. */
onBeforeMenuClose?: (e: Event, args: GridMenuEventWithElementCallbackArgs) => boolean | void;

/** Callback fired when any of the columns checkbox selection changes. */
onColumnsChanged?: (e: Event, args: GridMenuOnColumnsChangedCallbackArgs) => void;

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import { Column, SlickGrid } from '.';
import { MenuCommandItem } from './menuCommandItem.interface';

export interface GridMenuCallbackArgs {
grid: SlickGrid;
menu: any;
columns: Column[];
visibleColumns: Column[]
}

export interface GridMenuCommandItemCallbackArgs {
/** A command identifier returned by the onCommand (or action) event callback handler. */
command: string;
Expand Down
50 changes: 5 additions & 45 deletions packages/common/src/interfaces/gridMenuItem.interface.ts
Original file line number Diff line number Diff line change
@@ -1,56 +1,16 @@
import { Column } from './column.interface';
import { GridMenuCommandItemCallbackArgs } from './gridMenuCommandItemCallbackArgs.interface';
import { SlickGrid } from './slickGrid.interface';

export interface GridMenuItem {
/** A command identifier to be passed to the onCommand event callback handlers. */
command: string;

/** A CSS class to be added to the menu item container. */
cssClass?: string;

/** Defaults to false, whether the item/command is disabled. */
disabled?: boolean;

/** Defaults to false, whether the item/command is hidden. */
hidden?: boolean;

/** Defaults to false, whether the command is actually a divider (separator). */
divider?: boolean;

/** CSS class to be added to the menu item icon. */
iconCssClass?: string;

/**
* @deprecated @use `iconCssClass`
* URL pointing to the icon image.
*/
iconImage?: string;

/** position order in the list, a lower number will make it on top of the list. Internal commands starts at 50. */
positionOrder?: number;

/** CSS class to be added to the menu item text. */
textCssClass?: string;

/** Menu item text to show in the list. */
title?: string;

/** Same as "title", except that it's a translation key which can be used on page load and/or when switching locale */
titleKey?: string;

/** Item tooltip to show while hovering the command. */
tooltip?: string;
import { GridMenuCallbackArgs, GridMenuCommandItemCallbackArgs } from './gridMenuCommandItemCallbackArgs.interface';
import { MenuCommandItem } from './menuCommandItem.interface';

export interface GridMenuItem extends MenuCommandItem<GridMenuCommandItemCallbackArgs, GridMenuCallbackArgs> {
// --
// action/override callbacks

/** Optionally define a callback function that gets executed when item is chosen (and/or use the onCommand event) */
action?: (event: Event, callbackArgs: GridMenuCommandItemCallbackArgs) => void;

/** Callback method that user can override the default behavior of showing/hiding an item from the list. */
itemVisibilityOverride?: (args: { grid: SlickGrid; menu: any; columns: Column[]; visibleColumns: Column[] }) => boolean;
itemVisibilityOverride?: (args: GridMenuCallbackArgs) => boolean;

/** Callback method that user can override the default behavior of enabling/disabling an item from the list. */
itemUsabilityOverride?: (args: { grid: SlickGrid; menu: any; columns: Column[]; visibleColumns: Column[] }) => boolean;
itemUsabilityOverride?: (args: GridMenuCallbackArgs) => boolean;
}
26 changes: 22 additions & 4 deletions packages/common/src/interfaces/gridMenuOption.interface.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Column, GridMenuItem, GridMenuLabel, GridOption, MenuCallbackArgs, } from './index';
import { Column, GridMenuCallbackArgs, GridMenuCommandItemCallbackArgs, GridMenuLabel, GridOption, MenuCallbackArgs, MenuCommandItem, } from './index';

export interface GridMenuOption {
/** Defaults to "right", which side to align the grid menu dropdown? */
Expand All @@ -10,16 +10,22 @@ export interface GridMenuOption {
*/
commandLabels?: GridMenuLabel;

/** Defaults to "Commands" which is the title that shows up over the custom commands list */
commandTitle?: string;

/** Same as "commandTitle", except that it's a translation key which can be used on page load and/or when switching locale */
commandTitleKey?: string;

/** Defaults to 0 (auto), minimum width of grid menu content (command, column list) */
contentMinWidth?: number;

/** Array of Custom Items (title, command, disabled, ...) */
customItems?: Array<GridMenuItem | 'divider'>;
customItems?: Array<MenuCommandItem<GridMenuCommandItemCallbackArgs, GridMenuCallbackArgs> | 'divider'>;

/** Defaults to "Commands" which is the title that shows up over the custom commands list */
/** @deprecated @use `commandTitle` Defaults to "Commands" which is the title that shows up over the custom commands list */
customTitle?: string;

/** Same as "customTitle", except that it's a translation key which can be used on page load and/or when switching locale */
/** @deprecated @use `commandTitleKey` Same as "customTitle", except that it's a translation key which can be used on page load and/or when switching locale */
customTitleKey?: string;

/** Defaults to "Columns" which is the title that shows up over the columns */
Expand All @@ -46,6 +52,9 @@ export interface GridMenuOption {
/** Defaults to true, which will hide the "Unfreeze Columns/Rows" command in the Grid Menu */
hideClearFrozenColumnsCommand?: boolean;

/** Defaults to false, hide the Close button on top right */
hideCloseButton?: boolean;

/** Defaults to false, which will hide the "Export to CSV" command in the Grid Menu (Grid Option "enableTextExport: true" has to be enabled) */
hideExportCsvCommand?: boolean;

Expand Down Expand Up @@ -112,6 +121,9 @@ export interface GridMenuOption {
/** Defaults to 15, margin to use at the bottom of the grid menu to deduce from the max-height, only in effect when height is undefined */
marginBottom?: number;

/** Maximum height that the drop menu will have, can be a number (250) or text ("none") */
maxHeight?: number | string;

/** Defaults to 16 pixels (only the number), which is the width in pixels of the Grid Menu icon container */
menuWidth?: number;

Expand All @@ -127,6 +139,12 @@ export interface GridMenuOption {
/** Same as "syncResizeTitle", except that it's a translation key which can be used on page load and/or when switching locale */
syncResizeTitleKey?: string;

/**
* Width (alias to `menuWidth`) that the drop menu can have.
* NOTE: the menu also has a "min-width" defined in CSS/SASS and setting a "width" below that threshold won't work, you change this min-width via SASS `$context-menu-min-width`
*/
width?: number | string;

// --
// action/override callbacks

Expand Down
5 changes: 3 additions & 2 deletions packages/common/src/interfaces/menuCommandItem.interface.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import { MenuItem } from './menuItem.interface';
import { MenuCommandItemCallbackArgs } from './menuCommandItemCallbackArgs.interface';
import { SlickEventData } from './slickEventData.interface';
import { MenuCallbackArgs } from './menuCallbackArgs.interface';

export interface MenuCommandItem extends MenuItem {
export interface MenuCommandItem<A = MenuCommandItemCallbackArgs, R = MenuCallbackArgs> extends MenuItem<R> {
/** A command identifier to be passed to the onCommand event callback handler (when using "commandItems"). */
command: string;

// --
// action/override callbacks

/** Optionally define a callback function that gets executed when item is chosen (and/or use the onCommand event) */
action?: (event: SlickEventData | Event, callbackArgs: MenuCommandItemCallbackArgs) => void;
action?: (event: SlickEventData | Event, callbackArgs: A) => void;
}
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@ export interface MenuCommandItemCallbackArgs extends MenuCallbackArgs {
/** Menu item selected */
item: MenuCommandItem;

/** Value of the cell we triggered the context menu from */
/** Value of the cell we triggered the menu from */
value?: any;
}
6 changes: 3 additions & 3 deletions packages/common/src/interfaces/menuItem.interface.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { MenuCallbackArgs } from './menuCallbackArgs.interface';

export interface MenuItem {
export interface MenuItem<O = MenuCallbackArgs> {
/** A CSS class to be added to the menu item container. */
cssClass?: string;

Expand Down Expand Up @@ -41,8 +41,8 @@ export interface MenuItem {
// action/override callbacks

/** Callback method that user can override the default behavior of showing/hiding an item from the list. */
itemVisibilityOverride?: (args: MenuCallbackArgs) => boolean;
itemVisibilityOverride?: (args: O) => boolean;

/** Callback method that user can override the default behavior of enabling/disabling an item from the list. */
itemUsabilityOverride?: (args: MenuCallbackArgs) => boolean;
itemUsabilityOverride?: (args: O) => boolean;
}
32 changes: 16 additions & 16 deletions packages/common/src/plugins/__tests__/cellMenu.plugin.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -276,20 +276,20 @@ describe('CellMenu Plugin', () => {
<span class="close" aria-hidden="true">×</span>
</button>
<div class="slick-cell-menu-command-list">
<div class="slick-cell-menu-item orange" data-command="command1">
<li class="slick-cell-menu-item orange" data-command="command1">
<div class="slick-cell-menu-icon"></div>
<span class="slick-cell-menu-content">Command 1</span>
</div>
<div class="slick-cell-menu-item" data-command="command2">
</li>
<li class="slick-cell-menu-item" data-command="command2">
<div class="slick-cell-menu-icon"></div>
<span class="slick-cell-menu-content">Command 2</span>
</div>
<div class="slick-cell-menu-item slick-cell-menu-item-divider"></div>
<div class="slick-cell-menu-item red" data-command="delete-row">
</li>
<li class="slick-cell-menu-item slick-cell-menu-item-divider"></li>
<li class="slick-cell-menu-item red" data-command="delete-row">
<div class="slick-cell-menu-icon mdi mdi-close"></div>
<span class="slick-cell-menu-content bold">Delete Row</span>
</div>
<div class="slick-cell-menu-item slick-cell-menu-item-divider"></div>
</li>
<li class="slick-cell-menu-item slick-cell-menu-item-divider"></li>
</div>
</div>`));
});
Expand Down Expand Up @@ -665,20 +665,20 @@ describe('CellMenu Plugin', () => {
<span class="close" aria-hidden="true">×</span>
</button>
<div class="slick-cell-menu-option-list">
<div class="slick-cell-menu-item purple" data-option="option1">
<li class="slick-cell-menu-item purple" data-option="option1">
<div class="slick-cell-menu-icon"></div>
<span class="slick-cell-menu-content">Option 1</span>
</div>
<div class="slick-cell-menu-item" data-option="option2">
</li>
<li class="slick-cell-menu-item" data-option="option2">
<div class="slick-cell-menu-icon"></div>
<span class="slick-cell-menu-content">Option 2</span>
</div>
<div class="slick-cell-menu-item slick-cell-menu-item-divider"></div>
<div class="slick-cell-menu-item sky" data-option="delete-row">
</li>
<li class="slick-cell-menu-item slick-cell-menu-item-divider"></li>
<li class="slick-cell-menu-item sky" data-option="delete-row">
<div class="slick-cell-menu-icon mdi mdi-checked"></div>
<span class="slick-cell-menu-content underline">Delete Row</span>
</div>
<div class="slick-cell-menu-item slick-cell-menu-item-divider"></div>
</li>
<li class="slick-cell-menu-item slick-cell-menu-item-divider"></li>
</div>
</div>`));
});
Expand Down
32 changes: 16 additions & 16 deletions packages/common/src/plugins/__tests__/contextMenu.plugin.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -314,20 +314,20 @@ describe('ContextMenu Plugin', () => {
<span class="close" aria-hidden="true">×</span>
</button>
<div class="slick-context-menu-command-list">
<div class="slick-context-menu-item orange" data-command="command1">
<li class="slick-context-menu-item orange" data-command="command1">
<div class="slick-context-menu-icon"></div>
<span class="slick-context-menu-content">Command 1</span>
</div>
<div class="slick-context-menu-item" data-command="command2">
</li>
<li class="slick-context-menu-item" data-command="command2">
<div class="slick-context-menu-icon"></div>
<span class="slick-context-menu-content">Command 2</span>
</div>
<div class="slick-context-menu-item slick-context-menu-item-divider"></div>
<div class="slick-context-menu-item red" data-command="delete-row">
</li>
<li class="slick-context-menu-item slick-context-menu-item-divider"></li>
<li class="slick-context-menu-item red" data-command="delete-row">
<div class="slick-context-menu-icon mdi mdi-close"></div>
<span class="slick-context-menu-content bold">Delete Row</span>
</div>
<div class="slick-context-menu-item slick-context-menu-item-divider"></div>
</li>
<li class="slick-context-menu-item slick-context-menu-item-divider"></li>
</div>
</div>`));
});
Expand Down Expand Up @@ -1228,20 +1228,20 @@ describe('ContextMenu Plugin', () => {
<span class="close" aria-hidden="true">×</span>
</button>
<div class="slick-context-menu-option-list">
<div class="slick-context-menu-item purple" data-option="option1">
<li class="slick-context-menu-item purple" data-option="option1">
<div class="slick-context-menu-icon"></div>
<span class="slick-context-menu-content">Option 1</span>
</div>
<div class="slick-context-menu-item" data-option="option2">
</li>
<li class="slick-context-menu-item" data-option="option2">
<div class="slick-context-menu-icon"></div>
<span class="slick-context-menu-content">Option 2</span>
</div>
<div class="slick-context-menu-item slick-context-menu-item-divider"></div>
<div class="slick-context-menu-item sky" data-option="delete-row">
</li>
<li class="slick-context-menu-item slick-context-menu-item-divider"></li>
<li class="slick-context-menu-item sky" data-option="delete-row">
<div class="slick-context-menu-icon mdi mdi-checked"></div>
<span class="slick-context-menu-content underline">Delete Row</span>
</div>
<div class="slick-context-menu-item slick-context-menu-item-divider"></div>
</li>
<li class="slick-context-menu-item slick-context-menu-item-divider"></li>
</div>
</div>`));
});
Expand Down
Loading

0 comments on commit 5bda236

Please sign in to comment.