feat(context-menu): add nbContextMenuTrigger parameter (#1139)

Closes #1112

src/app/playground-components.ts

@@ -1258,6 +1258,18 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
  component: 'ContextMenuTestComponent',
  name: 'Context Menu Test',
  },
+ {
+ path: 'context-menu-modes.component',
+ link: '/context-menu/context-menu-modes.component',
+ component: 'ContextMenuModesComponent',
+ name: 'Context Menu Modes',
+ },
+ {
+ path: 'context-menu-noop.component',
+ link: '/context-menu/context-menu-noop.component',
+ component: 'ContextMenuNoopComponent',
+ name: 'Context Menu Noop',
+ },
  ],
  },
  {

src/framework/theme/components/context-menu/context-menu.directive.ts

@@ -88,6 +88,23 @@ import { NB_DOCUMENT } from '../../theme.options';
  * ```ts
  * items = [{ title: 'Profile' }, { title: 'Log out' }];
  * ```
+ * Context menu has a number of triggers which provides an ability to show and hide the component in different ways:
+ *
+ * - Click mode shows the component when a user clicks on the host element and hides when the user clicks
+ * somewhere on the document outside the component.
+ * - Hint provides capability to show the component when the user hovers over the host element
+ * and hide when the user hovers out of the host.
+ * - Hover works like hint mode with one exception - when the user moves mouse from host element to
+ * the container element the component remains open, so that it is possible to interact with it content.
+ * - Focus mode is applied when user focuses the element.
+ * - Noop mode - the component won't react to the user interaction.
+ *
+ * @stacked-example(Available Triggers, context-menu/context-menu-modes.component.html)
+ *
+ * Noop mode is especially useful when you need to control Popover programmatically, for example show/hide
+ * as a result of some third-party action, like HTTP request or validation check:
+ *
+ * @stacked-example(Manual Control, context-menu/context-menu-noop.component)
  * */
 @Directive({ selector: '[nbContextMenu]' })
 export class NbContextMenuDirective implements AfterViewInit, OnDestroy {
@@ -122,6 +139,13 @@ export class NbContextMenuDirective implements AfterViewInit, OnDestroy {
  this.items = items;
  };
 
+ /**
+ * Describes when the container will be shown.
+ * Available options: `click`, `hover`, `hint`, `focus` and `noop`
+ * */
+ @Input('nbContextMenuTrigger')
+ trigger: NbTrigger = NbTrigger.CLICK;
+
  protected ref: NbOverlayRef;
  protected container: ComponentRef<any>;
  protected positionStrategy: NbAdjustableConnectedPositionStrategy;
@@ -140,11 +164,15 @@ export class NbContextMenuDirective implements AfterViewInit, OnDestroy {
  ngAfterViewInit() {
  this.subscribeOnTriggers();
  this.subscribeOnItemClick();
+ this.subscribeOnPositionChange();
  }
 
  ngOnDestroy() {
  this.alive = false;
  this.hide();
+ if (this.ref) {
+ this.ref.dispose();
+ }
  }
 
  show() {
@@ -172,12 +200,10 @@ export class NbContextMenuDirective implements AfterViewInit, OnDestroy {
  }
 
  protected createOverlay() {
- this.positionStrategy = this.createPositionStrategy();
  this.ref = this.overlay.create({
  positionStrategy: this.positionStrategy,
  scrollStrategy: this.overlay.scrollStrategies.reposition(),
  });
- this.subscribeOnPositionChange();
  }
 
  protected openContextMenu() {
@@ -197,13 +223,14 @@ export class NbContextMenuDirective implements AfterViewInit, OnDestroy {
 
  protected createTriggerStrategy(): NbTriggerStrategy {
  return this.triggerStrategyBuilder
- .trigger(NbTrigger.CLICK)
+ .trigger(this.trigger)
  .host(this.hostRef.nativeElement)
  .container(() => this.container)
  .build();
  }
 
  protected subscribeOnPositionChange() {
+ this.positionStrategy = this.createPositionStrategy();
  this.positionStrategy.positionChange
  .pipe(takeWhile(() => this.alive))
  .subscribe((position: NbPosition) => patch(this.container, { position }));

src/framework/theme/components/context-menu/context-menu.spec.ts

@@ -0,0 +1,234 @@
+import { Component, ComponentRef, ElementRef, Inject, Injectable, Input, NgModule, ViewChild } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { of as observableOf, Subject } from 'rxjs';
+
+import { NbThemeModule } from '../../theme.module';
+import { NbLayoutModule } from '../layout/layout.module';
+import {
+ NbAdjustment,
+ NbPosition,
+ NbPositionBuilderService,
+ NbTrigger,
+ NbTriggerStrategy,
+ NbTriggerStrategyBuilderService,
+} from '../cdk';
+import { NB_DOCUMENT } from '../../theme.options';
+import { NbContextMenuDirective } from './context-menu.directive';
+import { NbMenuModule } from '../menu/menu.module';
+import { NbContextMenuModule } from './context-menu.module';
+
+
+@Component({
+ selector: 'nb-context-menu-test',
+ template: `
+ <nb-layout>
+ <nb-layout-column>
+ <button #button [nbContextMenu]="items" [nbContextMenuTrigger]="trigger">
+ </button>
+ </nb-layout-column>
+ </nb-layout>
+ `,
+})
+export class NbContextMenuTestComponent {
+ @Input() trigger: NbTrigger = NbTrigger.CLICK;
+ @ViewChild('button') button: ElementRef;
+ @ViewChild(NbContextMenuDirective) contextMenu: NbContextMenuDirective;
+
+ items = [{ title: 'User' }, { title: 'Log Out' }];
+}
+
+@NgModule({
+ imports: [
+ RouterTestingModule.withRoutes([]),
+ NoopAnimationsModule,
+ NbThemeModule.forRoot(),
+ NbLayoutModule,
+ NbMenuModule.forRoot(),
+ NbContextMenuModule,
+ ],
+ declarations: [
+ NbContextMenuTestComponent,
+ ],
+})
+export class ContextMenuTestModule {
+}
+
+export class MockPositionBuilder {
+ positionChange = new Subject();
+ _connectedTo: ElementRef<any>;
+ _position: NbPosition;
+ _adjustment: NbAdjustment;
+
+ connectedTo(connectedTo: ElementRef<any>) {
+ this._connectedTo = connectedTo;
+ return this;
+ }
+
+ position(position: NbPosition) {
+ this._position = position;
+ return this;
+ }
+
+ adjustment(adjustment: NbAdjustment) {
+ this._adjustment = adjustment;
+ return this;
+ }
+
+ offset() {
+ return this;
+ };
+
+ attach() {
+ };
+
+ apply() {
+ };
+
+ detach() {
+ };
+
+ dispose() {
+ };
+}
+
+@Injectable()
+export class MockTriggerStrategyBuilder {
+
+ _host: HTMLElement;
+ _container: () => ComponentRef<any>;
+ _trigger: NbTrigger;
+
+ constructor(@Inject(NB_DOCUMENT) public _document: Document) {
+ }
+
+ trigger(trigger: NbTrigger): this {
+ this._trigger = trigger;
+ return this;
+ }
+
+ host(host: HTMLElement): this {
+ this._host = host;
+ return this;
+ }
+
+ container(container: () => ComponentRef<any>): this {
+ this._container = container;
+ return this;
+ }
+
+ build(): NbTriggerStrategy {
+ return {
+ show$: observableOf(null),
+ hide$: observableOf(null),
+ } as NbTriggerStrategy;
+ }
+}
+
+describe('Directive: NbContextMenuDirective', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({ imports: [ContextMenuTestModule] });
+ });
+
+ let fixture: ComponentFixture<NbContextMenuTestComponent>;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(NbContextMenuTestComponent);
+ fixture.detectChanges();
+ });
+
+ afterEach(() => {
+ fixture.destroy();
+ });
+
+ it('should render context menu', () => {
+ fixture.componentInstance.contextMenu.show();
+ fixture.detectChanges();
+
+ const menu = fixture.nativeElement.querySelector('nb-context-menu nb-menu');
+ expect(menu).toBeTruthy();
+ });
+
+ it('should hide', fakeAsync(() => {
+ let menu;
+ fixture.componentInstance.contextMenu.show();
+ fixture.detectChanges();
+
+
+ menu = fixture.nativeElement.querySelector('nb-context-menu nb-menu');
+ expect(menu).toBeTruthy();
+ fixture.componentInstance.contextMenu.hide();
+ fixture.detectChanges();
+
+ tick(); // we need this tick for animations
+ menu = fixture.nativeElement.querySelector('nb-context-menu nb-menu');
+ expect(menu).toBeFalsy();
+ }));
+
+ it('should toogle', fakeAsync(() => {
+ let menu;
+
+ fixture.componentInstance.contextMenu.show();
+ fixture.detectChanges();
+
+ menu = fixture.nativeElement.querySelector('nb-context-menu nb-menu');
+ expect(menu).toBeTruthy();
+ fixture.componentInstance.contextMenu.toggle();
+ fixture.detectChanges();
+
+ tick(); // we need this tick for animations
+ const tooltip = fixture.nativeElement.querySelector('nb-context-menu');
+ expect(tooltip).toBeNull();
+
+ fixture.componentInstance.contextMenu.toggle();
+ fixture.detectChanges();
+ tick();
+
+ menu = fixture.nativeElement.querySelector('nb-context-menu nb-menu');
+ expect(menu).toBeTruthy();
+ }));
+
+ it('should build position strategy', () => {
+ const mockPositionBuilder = new MockPositionBuilder();
+ TestBed.resetTestingModule();
+ TestBed.configureTestingModule({
+ imports: [ContextMenuTestModule],
+ providers: [{ provide: NbPositionBuilderService, useValue: mockPositionBuilder }],
+ });
+ fixture = TestBed.createComponent(NbContextMenuTestComponent);
+ fixture.detectChanges();
+
+ expect(mockPositionBuilder._connectedTo.nativeElement).toBe(fixture.componentInstance.button.nativeElement);
+ expect(mockPositionBuilder._position).toBe(NbPosition.BOTTOM);
+ expect(mockPositionBuilder._adjustment).toBe(NbAdjustment.CLOCKWISE);
+ });
+
+ it('should build with default trigger strategy', () => {
+ TestBed.resetTestingModule();
+ const bed = TestBed.configureTestingModule({
+ imports: [ContextMenuTestModule],
+ providers: [{ provide: NbTriggerStrategyBuilderService, useClass: MockTriggerStrategyBuilder }],
+ });
+ const mockTriggerStrategy = bed.get(NbTriggerStrategyBuilderService);
+ fixture = TestBed.createComponent(NbContextMenuTestComponent);
+ fixture.detectChanges();
+
+ expect(mockTriggerStrategy._trigger).toBe(NbTrigger.CLICK);
+ });
+
+ it('should build with custom trigger strategy', () => {
+ TestBed.resetTestingModule();
+ const bed = TestBed.configureTestingModule({
+ imports: [ContextMenuTestModule],
+ providers: [{ provide: NbTriggerStrategyBuilderService, useClass: MockTriggerStrategyBuilder }],
+ });
+ const mockTriggerStrategy = bed.get(NbTriggerStrategyBuilderService);
+ fixture = TestBed.createComponent(NbContextMenuTestComponent);
+ fixture.componentInstance.trigger = NbTrigger.HOVER;
+ fixture.detectChanges();
+
+ expect(mockTriggerStrategy._trigger).toBe(NbTrigger.HOVER);
+ });
+});

src/framework/theme/components/popover/popover.directive.ts

@@ -90,23 +90,23 @@ import { NbPopoverComponent } from './popover.component';
  * <button nbPopover="Hello, Popover!" [nbPopoverAdjust]="false"></button>
  * ```
  *
- * Also popover has some different modes which provides capability show$ and hide$ popover in different ways:
+ * Popover has a number of triggers which provides an ability to show and hide the component in different ways:
  *
- * - Click popover mode shows when a user clicking on the host element and hides when the user clicks
- * somewhere on the document except popover.
- * - Hint mode provides capability show$ popover when the user hovers on the host element
- * and hide$ popover when user hovers out of the host.
- * - Hover mode works like hint mode with one exception - when the user moves mouse from host element to
- * the container element popover will not be hidden.
+ * - Click mode shows the component when a user clicks on the host element and hides when the user clicks
+ * somewhere on the document outside the component.
+ * - Hint provides capability to show the component when the user hovers over the host element
+ * and hide when the user hovers out of the host.
+ * - Hover works like hint mode with one exception - when the user moves mouse from host element to
+ * the container element the component remains open, so that it is possible to interact with it content.
  * - Focus mode is applied when user focuses the element.
- * - Noop mode - the popover won't react based on user interaction.
+ * - Noop mode - the component won't react to the user interaction.
  *
- * @stacked-example(Available Modes, popover/popover-modes.component.html)
+ * @stacked-example(Available Triggers, popover/popover-modes.component.html)
  *
  * Noop mode is especially useful when you need to control Popover programmatically, for example show/hide
  * as a result of some third-party action, like HTTP request or validation check:
  *
- * @stacked-example(Manual control, popover/popover-noop.component)
+ * @stacked-example(Manual Control, popover/popover-noop.component)
  *
  * @additional-example(Template Ref, popover/popover-template-ref.component)
  * @additional-example(Custom Component, popover/popover-custom-component.component)

src/playground/without-layout/context-menu/context-menu-modes.component.html

@@ -0,0 +1,15 @@
+<nb-layout>
+ <nb-layout-column>
+ <button nbButton outline [nbContextMenu]="items" nbContextMenuTrigger="click">
+ Click Mode
+ </button>
+
+ <button nbButton outline [nbContextMenu]="items" nbContextMenuTrigger="focus">
+ Focus (Tab) Mode
+ </button>
+
+ <button nbButton outline [nbContextMenu]="items" nbContextMenuTrigger="hover">
+ Hover Mode
+ </button>
+ </nb-layout-column>
+</nb-layout>