Skip to content

Commit

Permalink
feat: add sub-menu(s) to GridMenu control (#868)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@ghiscoding
ghiscoding authored Oct 20, 2023
1 parent 6eaee7a commit 24f30f6
Show file tree
Hide file tree
Showing 7 changed files with 480 additions and 105 deletions.
131 changes: 131 additions & 0 deletions cypress/e2e/example-grid-menu.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,4 +287,135 @@ 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-submenu').should('have.length', 1);
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-submenu').should('have.length', 2);

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)'));
cy.get('.slick-submenu').should('have.length', 0);
});

it('should open Export->Excel context sub-menu then open Feedback->ContactUs sub-menus and expect previous Export menu to no longer exists', () => {
const subCommands1 = ['Text', 'Excel'];
const subCommands2 = ['Request update from shipping team', '', 'Contact Us'];
const subCommands2_1 = ['Email us', 'Chat with us', 'Book an appointment'];

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]));

// click different sub-menu
cy.get('.slick-gridmenu.slick-menu-level-0')
.find('.slick-gridmenu-item')
.contains('Feedback')
.should('exist')
.click();

cy.get('.slick-submenu').should('have.length', 1);
cy.get('.slick-gridmenu.slick-menu-level-1')
.should('exist')
.find('.slick-gridmenu-item')
.each(($command, index) => expect($command.text()).to.contain(subCommands2[index]));

// click on Feedback->ContactUs
cy.get('.slick-gridmenu.slick-menu-level-1.dropleft') // left align
.find('.slick-gridmenu-item')
.contains('Contact Us')
.should('exist')
.click();

cy.get('.slick-submenu').should('have.length', 2);
cy.get('.slick-gridmenu.slick-menu-level-2.dropright') // right align
.should('exist')
.find('.slick-gridmenu-item')
.each(($command, index) => expect($command.text()).to.eq(subCommands2_1[index]));

cy.get('.slick-gridmenu.slick-menu-level-2');

cy.get('.slick-gridmenu.slick-menu-level-2 .slick-gridmenu-command-list')
.find('.slick-gridmenu-item')
.contains('Chat with us')
.click()
.then(() => expect(stub.getCall(0)).to.be.calledWith('Command: contact-chat'));

cy.get('.slick-submenu').should('have.length', 0);
});
});
53 changes: 52 additions & 1 deletion examples/example-grid-menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -244,6 +251,36 @@ <h2>View Source:</h2>
title: "Disabled Command",
disabled: true,
command: "custom-command"
},
"divider",
{
// we can also have multiple nested sub-menus
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)" },
]
}
]
},
{
command: 'feedback', title: 'Feedback',
customItems: [
{ command: "request-update", title: "Request update from shipping team", iconCssClass: "sgi sgi-tag-outline", 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: "sgi sgi-user", subMenuTitle: "contact us...", subMenuTitleCssClass: "italic",
customItems: [
{ 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" },
]
}
]
}
]
}
Expand Down Expand Up @@ -383,7 +420,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;
}
}
});

Expand All @@ -404,6 +450,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) {
Expand Down
Loading

0 comments on commit 24f30f6

Please sign in to comment.