Skip to content

Commit

Permalink
fix(context-menu): hide on menu item click (#431)
Browse files Browse the repository at this point in the history
  • Loading branch information
tibing-old-email authored and nnixaa committed May 21, 2018
1 parent a07496d commit a5bcd3c
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 4 deletions.
14 changes: 12 additions & 2 deletions e2e/context-menu.e2e-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,27 @@ describe('nb-context-menu', () => {
browser.get('#/context-menu').then(done);
});

it('have to hide when click on item', () => {
element(withContextMenu).click();
const containerContent = element(popover).all(by.css('nb-menu > ul > li')).get(2);
expect(containerContent.isPresent()).toBeTruthy();

containerContent.click();
expect(containerContent.isPresent()).toBeFalsy();
});

it('have to be opened by click', () => {
element(withContextMenu).click();
const containerContent = element(popover).element(by.css('nb-menu > ul'));

expect(containerContent.isPresent()).toBeTruthy();
});

it('should have two menu items', () => {
it('should have three menu items', () => {
element(withContextMenu).click();
const menuItems = element(popover).all(by.css('nb-menu > ul > li'));

expect(menuItems.count()).toEqual(2);
expect(menuItems.count()).toEqual(3);
});

it('have to open user page after click on first item', () => {
Expand Down
1 change: 1 addition & 0 deletions src/app/context-menu-test/context-menu-test.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export class NbContextMenuTestComponent {
items = [
{ title: 'Profile', link: '/user' },
{ title: 'Logout', link: '/popover' },
{ title: 'Another action' },
];

itemsWithIcons = [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@ import {
ComponentFactoryResolver, Directive, ElementRef, HostListener, Inject, Input, OnDestroy,
OnInit, PLATFORM_ID,
} from '@angular/core';
import { filter, takeWhile } from 'rxjs/operators';
import { NbPopoverDirective } from '../popover/popover.directive';
import { NbMenuItem } from '../menu/menu.service';
import { NbMenuItem, NbMenuService } from '../menu/menu.service';
import { NbThemeService } from '../../services/theme.service';
import { NbPopoverAdjustment, NbPopoverPlacement } from '../popover/helpers/model';
import { NbContextMenuComponent } from './context-menu.component';
Expand Down Expand Up @@ -99,20 +100,25 @@ export class NbContextMenuDirective implements OnInit, OnDestroy {
* */
@Input('nbContextMenuTag')
set tag(tag: string) {
this.menuTag = tag;
this.popover.context = Object.assign(this.context, { tag });
}

protected popover: NbPopoverDirective;
protected context = {};

private menuTag: string;
private alive: boolean = true;

constructor(hostRef: ElementRef,
themeService: NbThemeService,
componentFactoryResolver: ComponentFactoryResolver,
positioningHelper: NbPositioningHelper,
adjustmentHelper: NbAdjustmentHelper,
triggerHelper: NbTriggerHelper,
@Inject(PLATFORM_ID) platformId,
placementHelper: NbPlacementHelper) {
placementHelper: NbPlacementHelper,
private menuService: NbMenuService) {
/**
* Initialize popover with all the important inputs.
* */
Expand All @@ -131,10 +137,12 @@ export class NbContextMenuDirective implements OnInit, OnDestroy {

ngOnInit() {
this.popover.ngOnInit();
this.subscribeOnItemClick();
}

ngOnDestroy() {
this.popover.ngOnDestroy();
this.alive = false;
}

/**
Expand Down Expand Up @@ -172,4 +180,13 @@ export class NbContextMenuDirective implements OnInit, OnDestroy {
throw Error(`List of menu items expected, but given: ${items}`)
}
}

private subscribeOnItemClick() {
this.menuService.onItemClick()
.pipe(
takeWhile(() => this.alive),
filter(({tag}) => tag === this.menuTag),
)
.subscribe(() => this.hide());
}
}

0 comments on commit a5bcd3c

Please sign in to comment.