fix(module:layout): fix responsive sider not work

NG-ZORRO · Jan 29, 2020 · 9f951f8 · 9f951f8
1 parent 49dd17c
commit 9f951f8
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 40 deletions.
diff --git a/components/layout/sider.component.ts b/components/layout/sider.component.ts
@@ -9,13 +9,15 @@
 import { MediaMatcher } from '@angular/cdk/layout';
 import { Platform } from '@angular/cdk/platform';
 import {
+  AfterContentInit,
   AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ContentChild,
   EventEmitter,
   Input,
+  NgZone,
   OnChanges,
   OnDestroy,
   OnInit,
@@ -25,10 +27,10 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 
-import { IndexableObject, InputBoolean, NzBreakpointKey, NzDomEventService, siderResponsiveMap, toCssPixel } from 'ng-zorro-antd/core';
+import { InputBoolean, NzBreakpointKey, NzDomEventService, siderResponsiveMap, toCssPixel } from 'ng-zorro-antd/core';
 import { NzMenuDirective } from 'ng-zorro-antd/menu';
-import { Subject } from 'rxjs';
-import { finalize, takeUntil } from 'rxjs/operators';
+import { merge, of, Subject } from 'rxjs';
+import { delay, finalize, takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'nz-sider',
@@ -50,7 +52,7 @@ import { finalize, takeUntil } from 'rxjs/operators';
       [nzReverseArrow]="nzReverseArrow"
       [nzTrigger]="nzTrigger"
       [nzZeroTrigger]="nzZeroTrigger"
-      [siderWidth]="hostStyleMap.width"
+      [siderWidth]="widthSetting"
       (click)="setCollapsed(!nzCollapsed)"
     ></div>
   `,
@@ -60,12 +62,15 @@ import { finalize, takeUntil } from 'rxjs/operators';
     '[class.ant-layout-sider-light]': `nzTheme === 'light'`,
     '[class.ant-layout-sider-dark]': `nzTheme === 'dark'`,
     '[class.ant-layout-sider-collapsed]': `nzCollapsed`,
-    '[style]': 'hostStyleMap'
+    '[style.flex]': 'flexSetting',
+    '[style.maxWidth]': 'widthSetting',
+    '[style.minWidth]': 'widthSetting',
+    '[style.width]': 'widthSetting'
   }
 })
-export class NzSiderComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
+export class NzSiderComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges, AfterContentInit {
   private destroy$ = new Subject();
-  @ContentChild(NzMenuDirective) nzMenuDirective: NzMenuDirective;
+  @ContentChild(NzMenuDirective) nzMenuDirective: NzMenuDirective | null = null;
   @Output() readonly nzCollapsedChange = new EventEmitter();
   @Input() nzWidth: string | number = 200;
   @Input() nzTheme: 'light' | 'dark' = 'dark';
@@ -77,49 +82,44 @@ export class NzSiderComponent implements OnInit, AfterViewInit, OnDestroy, OnCha
   @Input() @InputBoolean() nzCollapsible = false;
   @Input() @InputBoolean() nzCollapsed = false;
   matchBreakPoint = false;
-  hostStyleMap: IndexableObject = {};
+  flexSetting: string | null = null;
+  widthSetting: string | null = null;
 
   updateStyleMap(): void {
-    let widthSetting: string;
-    if (this.nzCollapsed) {
-      widthSetting = `${this.nzCollapsedWidth}px`;
-    } else {
-      widthSetting = toCssPixel(this.nzWidth);
-    }
-    const flexSetting = `0 0 ${widthSetting}`;
-    this.hostStyleMap = {
-      flex: flexSetting,
-      maxWidth: widthSetting,
-      minWidth: widthSetting,
-      width: widthSetting
-    };
+    this.widthSetting = this.nzCollapsed ? `${this.nzCollapsedWidth}px` : toCssPixel(this.nzWidth);
+    this.flexSetting = `0 0 ${this.widthSetting}`;
     this.cdr.markForCheck();
   }
 
   updateBreakpointMatch(): void {
     if (this.nzBreakpoint) {
       this.matchBreakPoint = this.mediaMatcher.matchMedia(siderResponsiveMap[this.nzBreakpoint]).matches;
       this.setCollapsed(this.matchBreakPoint);
+      this.cdr.markForCheck();
     }
-    this.cdr.markForCheck();
   }
+
   updateMenuInlineCollapsed(): void {
-    if (this.nzMenuDirective && this.nzMenuDirective.nzMode === 'inline') {
+    if (this.nzMenuDirective && this.nzMenuDirective.nzMode === 'inline' && this.nzCollapsedWidth !== 0) {
       this.nzMenuDirective.setInlineCollapsed(this.nzCollapsed);
     }
   }
+
   setCollapsed(collapsed: boolean): void {
-    this.nzCollapsed = collapsed;
-    this.nzCollapsedChange.emit(collapsed);
-    this.updateMenuInlineCollapsed();
-    this.updateStyleMap();
-    this.cdr.markForCheck();
+    if (collapsed !== this.nzCollapsed) {
+      this.nzCollapsed = collapsed;
+      this.nzCollapsedChange.emit(collapsed);
+      this.updateMenuInlineCollapsed();
+      this.updateStyleMap();
+      this.cdr.markForCheck();
+    }
   }
 
   constructor(
     private mediaMatcher: MediaMatcher,
     private platform: Platform,
     private cdr: ChangeDetectorRef,
+    private ngZone: NgZone,
     private nzDomEventService: NzDomEventService
   ) {}
 
@@ -128,22 +128,31 @@ export class NzSiderComponent implements OnInit, AfterViewInit, OnDestroy, OnCha
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    this.updateStyleMap();
-    if (changes.nzCollapsed) {
+    const { nzCollapsed, nzCollapsedWidth, nzWidth } = changes;
+    if (nzCollapsed || nzCollapsedWidth || nzWidth) {
+      this.updateStyleMap();
+    }
+    if (nzCollapsed) {
       this.updateMenuInlineCollapsed();
     }
   }
 
+  ngAfterContentInit(): void {
+    this.updateMenuInlineCollapsed();
+  }
+
   ngAfterViewInit(): void {
     if (this.platform.isBrowser) {
-      Promise.resolve().then(() => this.updateBreakpointMatch());
-      this.nzDomEventService
-        .registerResizeListener()
-        .pipe(
-          takeUntil(this.destroy$),
-          finalize(() => this.nzDomEventService.unregisterResizeListener())
-        )
-        .subscribe(() => this.updateBreakpointMatch());
+      merge(
+        this.nzDomEventService.registerResizeListener().pipe(finalize(() => this.nzDomEventService.unregisterResizeListener())),
+        of(true).pipe(delay(0))
+      )
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(() => {
+          this.ngZone.run(() => {
+            this.updateBreakpointMatch();
+          });
+        });
     }
   }
 

diff --git a/components/menu/demo/inline-collapsed.ts b/components/menu/demo/inline-collapsed.ts
@@ -8,7 +8,7 @@ import { Component } from '@angular/core';
         <i nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"></i>
       </button>
       <ul nz-menu nzMode="inline" nzTheme="dark" [nzInlineCollapsed]="isCollapsed">
-        <li nz-menu-item nz-tooltip nzPlacement="right" [nzTitle]="isCollapsed ? 'Navigation One' : ''" nzSelected>
+        <li nz-menu-item nz-tooltip nzTooltipPlacement="right" [nzTitle]="isCollapsed ? 'Navigation One' : ''" nzSelected>
           <i nz-icon nzType="mail"></i>
           <span>Navigation One</span>
         </li>

diff --git a/components/menu/menu.directive.ts b/components/menu/menu.directive.ts
@@ -150,6 +150,9 @@ export class NzMenuDirective implements AfterContentInit, OnInit, OnChanges, OnD
     }
     if (nzMode) {
       this.mode$.next(this.nzMode);
+      if (!changes.nzMode.isFirstChange() && this.listOfNzSubMenuComponent) {
+        this.listOfNzSubMenuComponent.forEach(submenu => submenu.setOpenStateWithoutDebounce(false));
+      }
     }
   }
 

diff --git a/components/menu/submenu.service.ts b/components/menu/submenu.service.ts
@@ -61,10 +61,11 @@ export class NzSubmenuService {
       flatMap(() => this.mode$),
       filter(mode => mode !== 'inline' || this.isMenuInsideDropDown)
     );
-    const isCurrentSubmenuOpen$ = merge(this.isMouseEnterTitleOrOverlay$.pipe(auditTime(150)), isClosedByMenuItemClick.pipe(mapTo(false)));
+    const isCurrentSubmenuOpen$ = merge(this.isMouseEnterTitleOrOverlay$, isClosedByMenuItemClick.pipe(mapTo(false)));
     /** combine the child submenu status with current submenu status to calculate host submenu open **/
     const isSubMenuOpenWithDebounce$ = combineLatest([this.isChildSubMenuOpen$, isCurrentSubmenuOpen$]).pipe(
       map(([isChildSubMenuOpen, isCurrentSubmenuOpen]) => isChildSubMenuOpen || isCurrentSubmenuOpen),
+      auditTime(150),
       distinctUntilChanged()
     );
     isSubMenuOpenWithDebounce$.pipe(distinctUntilChanged()).subscribe(data => {