support for toggling custom context menu (#1683)

* support for toggling custom context menu

* fix unit tests
This commit is contained in:
Denys Vuika 2017-03-03 09:25:08 +00:00 committed by Mario Romano
parent 0f718a56d7
commit a3cda4d958
8 changed files with 30 additions and 14 deletions

View File

@ -26,6 +26,7 @@ describe('ContextMenuDirective', () => {
beforeEach(() => {
contextMenuService = new ContextMenuService();
directive = new ContextMenuDirective(contextMenuService);
directive.enabled = true;
});
it('should show menu via service', (done) => {

View File

@ -25,11 +25,15 @@ export class ContextMenuDirective {
@Input('context-menu')
links: any[];
@Input('context-menu-enabled')
enabled: boolean = false;
constructor(private _contextMenuService: ContextMenuService) {
}
@HostListener('contextmenu', ['$event'])
onShowContextMenu(event?: MouseEvent) {
if (this.enabled) {
if (event) {
event.preventDefault();
}
@ -40,4 +44,5 @@ export class ContextMenuDirective {
}
}
}
}
}

View File

@ -103,7 +103,6 @@ Usage example of this component :
**my.component.ts**
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@ -155,17 +154,14 @@ export class DataTableDemo {
imports: [
BrowserModule,
CoreModule.forRoot(),
DataTableModule
DataTableModule.forRoot()
],
declarations: [DataTableDemo],
bootstrap: [DataTableDemo]
})
export class AppModule {
}
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
```
![DataTable demo](docs/assets/datatable-demo.png)
@ -179,6 +175,7 @@ platformBrowserDynamic().bootstrapModule(AppModule);
| `actions` | boolean | false | Toggles data actions column |
| `actionsPosition` | string (left\|right) | right | Position of the actions dropdown menu. |
| `fallbackThumbnail` | string | | Fallback image for row ehre thubnail is missing|
| `contextMenu` | boolean | false | Toggles custom context menu for the component |
### Events

View File

@ -67,7 +67,8 @@
class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
(click)="onRowClick(row, $event)"
(dblclick)="onRowDblClick(row, $event)"
[context-menu]="getContextMenuActions(row, col)">
[context-menu]="getContextMenuActions(row, col)"
[context-menu-enabled]="contextMenu">
<div *ngIf="!col.template">
<div *ngSwitchCase="'image'" class="cell-value">
<i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i>

View File

@ -45,6 +45,9 @@ export class DataTableComponent implements OnInit {
@Input()
fallbackThumbnail: string;
@Input()
contextMenu: boolean = false;
@Output()
rowClick: EventEmitter<DataRowEvent> = new EventEmitter<DataRowEvent>();

View File

@ -10,6 +10,7 @@
[actionsPosition]="contentActionsPosition"
[multiselect]="multiselect"
[fallbackThumbnail]="fallbackThumbnail"
[contextMenu]="contextMenuActions"
(showRowContextMenu)="onShowRowContextMenu($event)"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"

View File

@ -217,11 +217,19 @@ describe('DocumentList', () => {
});
it('should suppress default context menu', () => {
documentList.contextMenuActions = true;
spyOn(eventMock, 'preventDefault').and.stub();
documentList.onShowContextMenu(eventMock);
expect(eventMock.preventDefault).toHaveBeenCalled();
});
it('should not suppress default context menu', () => {
documentList.contextMenuActions = false;
spyOn(eventMock, 'preventDefault').and.stub();
documentList.onShowContextMenu(eventMock);
expect(eventMock.preventDefault).not.toHaveBeenCalled();
});
it('should emit file preview event on single click', (done) => {
let file = new FileNode();
documentList.preview.subscribe(e => {

View File

@ -272,7 +272,7 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
@HostListener('contextmenu', ['$event'])
onShowContextMenu(e?: Event) {
if (e) {
if (e && this.contextMenuActions) {
e.preventDefault();
}
}