feat(module:menu): selected child item, its parent highlight (#264)

close #262
NG-ZORRO · Sep 16, 2017 · 970e968 · 970e968
1 parent 686f5fd
commit 970e968
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/src/components/menu/nz-menu.component.spec.ts b/src/components/menu/nz-menu.component.spec.ts
@@ -188,6 +188,26 @@ describe('NzMenuComponent', () => {
       // const debugElement4 = fixture.debugElement.query(By.directive(NzSubMenuComponent));
       // expect(debugElement4.nativeElement.classList.contains('ant-menu-submenu-open')).toBe(true);
     })
+
+    it('should apply class based on sub-items select state', () => {
+      const fixture = TestBed.createComponent(TestMenuSubMenu);
+      const testComponent = fixture.debugElement.componentInstance;
+      const debugElement = fixture.debugElement.query(By.directive(NzSubMenuComponent));
+      expect(debugElement).toBeDefined();
+
+      testComponent._mode = 'vertical';
+      testComponent.selectOne = false;
+      fixture.detectChanges();
+      const debugElement1 = fixture.debugElement.query(By.directive(NzSubMenuComponent));
+      expect(debugElement1.nativeElement.classList.contains('ant-menu-submenu-selected')).toBe(false);
+
+      testComponent._mode = 'vertical';
+      testComponent.selectOne = true;
+      fixture.detectChanges();
+      const debugElement2 = fixture.debugElement.query(By.directive(NzSubMenuComponent));
+      expect(debugElement2.nativeElement.classList.contains('ant-menu-submenu-selected')).toBe(true);
+
+    })
   });
 });
 
@@ -238,7 +258,7 @@ class TestMenuTheme {
       <li nz-submenu [(nzOpen)]="isOpenOne" (nzOpenChange)="openChange('one')">
         <span title><i class="anticon anticon-mail"></i> Navigation One</span>
         <ul>
-          <li nz-menu-item>Option 1</li>
+          <li nz-menu-item [nzSelected]="selectOne">Option 1</li>
         </ul>
       </li>
       <li nz-submenu [(nzOpen)]="isOpenTwo" (nzOpenChange)="openChange('Two')">
@@ -255,6 +275,7 @@ class TestMenuSubMenu {
   isTestOpen = true;
   isOpenOne = false;
   isOpenTwo = false;
+  selectOne = false;
 
   openChange(value) {
     if (!this.isTestOpen) {

diff --git a/src/components/menu/nz-submenu.component.ts b/src/components/menu/nz-submenu.component.ts
@@ -57,6 +57,13 @@ export class NzSubMenuComponent implements OnInit, OnDestroy, AfterViewInit {
   @Input() nzOpen = false;
   @Output() nzOpenChange: EventEmitter<boolean> = new EventEmitter();
 
+  get subItemSelected(): boolean {
+    return !!this.nzMenuComponent.menuItems.find(e => e.selected && e.nzSubMenuComponent === this);
+  }
+  get submenuSelected(): boolean {
+    return !!this.subMenus._results.find(e => e !== this && e.subItemSelected)
+  }
+
   clickSubMenuTitle() {
     if ((this.nzMenuComponent.nzMode === 'inline') || (!this.isInDropDown)) {
       this.nzOpen = !this.nzOpen;
@@ -106,12 +113,16 @@ export class NzSubMenuComponent implements OnInit, OnDestroy, AfterViewInit {
     return this.isInDropDown && (this.nzMenuComponent.nzMode === 'horizontal');
   }
 
-
   @HostBinding('class.ant-menu-submenu')
   get setMenuSubmenuClass() {
     return !this.isInDropDown;
   }
 
+  @HostBinding('class.ant-menu-submenu-selected')
+  get setMenuSubmenuSelectedClass() {
+    return this.submenuSelected || this.subItemSelected;
+  }
+
   @HostBinding('class.ant-menu-submenu-vertical')
   get setMenuVerticalClass() {
     return (!this.isInDropDown) && (this.nzMenuComponent.nzMode === 'vertical');