mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-19 17:14:57 +00:00
support for toggling custom context menu (#1683)
* support for toggling custom context menu * fix unit tests
This commit is contained in:
parent
0f718a56d7
commit
a3cda4d958
@ -26,6 +26,7 @@ describe('ContextMenuDirective', () => {
|
||||
beforeEach(() => {
|
||||
contextMenuService = new ContextMenuService();
|
||||
directive = new ContextMenuDirective(contextMenuService);
|
||||
directive.enabled = true;
|
||||
});
|
||||
|
||||
it('should show menu via service', (done) => {
|
||||
|
@ -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();
|
||||
}
|
||||
@ -41,3 +45,4 @@ export class ContextMenuDirective {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
|
||||
|
||||
```
|
||||
|
||||

|
||||
@ -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
|
||||
|
||||
|
@ -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>
|
||||
|
@ -45,6 +45,9 @@ export class DataTableComponent implements OnInit {
|
||||
@Input()
|
||||
fallbackThumbnail: string;
|
||||
|
||||
@Input()
|
||||
contextMenu: boolean = false;
|
||||
|
||||
@Output()
|
||||
rowClick: EventEmitter<DataRowEvent> = new EventEmitter<DataRowEvent>();
|
||||
|
||||
|
@ -10,6 +10,7 @@
|
||||
[actionsPosition]="contentActionsPosition"
|
||||
[multiselect]="multiselect"
|
||||
[fallbackThumbnail]="fallbackThumbnail"
|
||||
[contextMenu]="contextMenuActions"
|
||||
(showRowContextMenu)="onShowRowContextMenu($event)"
|
||||
(showRowActionsMenu)="onShowRowActionsMenu($event)"
|
||||
(executeRowAction)="onExecuteRowAction($event)"
|
||||
|
@ -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 => {
|
||||
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user