fix(module:table): fix 4.1.0 style error (#4953)

NG-ZORRO · Mar 31, 2020 · 44f606c · 44f606c
1 parent 828b13e
commit 44f606c
Show file tree

Hide file tree

Showing 27 changed files with 461 additions and 234 deletions.
diff --git a/components/auto-complete/autocomplete-trigger.directive.ts b/components/auto-complete/autocomplete-trigger.directive.ts
@@ -307,6 +307,7 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
   private getOverlayConfig(): OverlayConfig {
     return new OverlayConfig({
       positionStrategy: this.getOverlayPosition(),
+      disposeOnNavigation: true,
       scrollStrategy: this.overlay.scrollStrategies.reposition(),
       // default host element width
       width: this.nzAutocomplete.nzWidth || this.getHostWidth()

diff --git a/components/drawer/drawer.component.ts b/components/drawer/drawer.component.ts
@@ -6,7 +6,10 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { FocusTrap, FocusTrapFactory } from '@angular/cdk/a11y';
 import { ESCAPE } from '@angular/cdk/keycodes';
+import { Overlay, OverlayConfig, OverlayKeyboardDispatcher, OverlayRef } from '@angular/cdk/overlay';
+import { CdkPortalOutlet, ComponentPortal, PortalInjector, TemplatePortal } from '@angular/cdk/portal';
 import { DOCUMENT } from '@angular/common';
 import {
   AfterViewInit,
@@ -29,10 +32,6 @@ import {
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
-
-import { FocusTrap, FocusTrapFactory } from '@angular/cdk/a11y';
-import { Overlay, OverlayConfig, OverlayKeyboardDispatcher, OverlayRef } from '@angular/cdk/overlay';
-import { CdkPortalOutlet, ComponentPortal, PortalInjector, TemplatePortal } from '@angular/cdk/portal';
 import { NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { InputBoolean, toCssPixel } from 'ng-zorro-antd/core/util';
@@ -348,6 +347,7 @@ export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny> exte
 
   private getOverlayConfig(): OverlayConfig {
     return new OverlayConfig({
+      disposeOnNavigation: true,
       positionStrategy: this.overlay.position().global(),
       scrollStrategy: this.overlay.scrollStrategies.block()
     });

diff --git a/components/dropdown/context-menu.service.ts b/components/dropdown/context-menu.service.ts
@@ -36,12 +36,10 @@ export class NzContextMenuService {
     if ($event instanceof MouseEvent) {
       $event.preventDefault();
     }
-    const positionStrategy = this.overlay
-      .position()
-      .flexibleConnectedTo({ x, y })
-      .withPositions(listOfPositions);
+    const positionStrategy = this.overlay.position().flexibleConnectedTo({ x, y }).withPositions(listOfPositions);
     this.overlayRef = this.overlay.create({
       positionStrategy,
+      disposeOnNavigation: true,
       scrollStrategy: this.overlay.scrollStrategies.close()
     });
     positionStrategy.positionChanges.subscribe(change => {

diff --git a/components/ng-zorro-antd.module.ts b/components/ng-zorro-antd.module.ts
@@ -135,9 +135,7 @@ export * from 'ng-zorro-antd/tree';
 export * from 'ng-zorro-antd/tree-select';
 export * from 'ng-zorro-antd/typography';
 export * from 'ng-zorro-antd/upload';
-
 export * from 'ng-zorro-antd/version';
-
 export * from 'ng-zorro-antd/core/animation';
 export * from 'ng-zorro-antd/core/config';
 export * from 'ng-zorro-antd/core/environments';

diff --git a/components/pagination/pagination-default.component.ts b/components/pagination/pagination-default.component.ts
@@ -9,62 +9,63 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  ElementRef,
   EventEmitter,
   Input,
   OnChanges,
   Output,
+  Renderer2,
   SimpleChanges,
   TemplateRef,
+  ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzPaginationItemComponent } from './pagination-item.component';
 import { PaginationItemRenderContext } from './pagination.types';
 
 @Component({
-  selector: 'ul[nz-pagination-default]',
+  selector: 'nz-pagination-default',
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <li class="ant-pagination-total-text" *ngIf="showTotal">
-      <ng-template [ngTemplateOutlet]="showTotal" [ngTemplateOutletContext]="{ $implicit: total, range: ranges }"></ng-template>
-    </li>
-    <li
-      *ngFor="let page of listOfPageItem; trackBy: trackByPageItem"
-      nz-pagination-item
-      [locale]="locale"
-      [type]="page.type"
-      [index]="page.index"
-      [disabled]="page.disabled"
-      [itemRender]="itemRender"
-      [active]="pageIndex === page.index"
-      (gotoIndex)="jumpPage($event)"
-      (diffIndex)="jumpDiff($event)"
-    ></li>
-    <div
-      nz-pagination-options
-      *ngIf="showQuickJumper || showSizeChanger"
-      [total]="total"
-      [locale]="locale"
-      [disabled]="disabled"
-      [nzSize]="nzSize"
-      [showSizeChanger]="showSizeChanger"
-      [showQuickJumper]="showQuickJumper"
-      [pageIndex]="pageIndex"
-      [pageSize]="pageSize"
-      [pageSizeOptions]="pageSizeOptions"
-      (pageIndexChange)="onPageIndexChange($event)"
-      (pageSizeChange)="onPageSizeChange($event)"
-    ></div>
-  `,
-  host: {
-    '[class.ant-pagination]': 'true',
-    '[class.ant-pagination-disabled]': 'disabled',
-    '[class.mini]': `nzSize === 'small'`
-  }
+    <ng-template #containerTemplate>
+      <li class="ant-pagination-total-text" *ngIf="showTotal">
+        <ng-template [ngTemplateOutlet]="showTotal" [ngTemplateOutletContext]="{ $implicit: total, range: ranges }"></ng-template>
+      </li>
+      <li
+        *ngFor="let page of listOfPageItem; trackBy: trackByPageItem"
+        nz-pagination-item
+        [locale]="locale"
+        [type]="page.type"
+        [index]="page.index"
+        [disabled]="page.disabled"
+        [itemRender]="itemRender"
+        [active]="pageIndex === page.index"
+        (gotoIndex)="jumpPage($event)"
+        (diffIndex)="jumpDiff($event)"
+      ></li>
+      <div
+        nz-pagination-options
+        *ngIf="showQuickJumper || showSizeChanger"
+        [total]="total"
+        [locale]="locale"
+        [disabled]="disabled"
+        [nzSize]="nzSize"
+        [showSizeChanger]="showSizeChanger"
+        [showQuickJumper]="showQuickJumper"
+        [pageIndex]="pageIndex"
+        [pageSize]="pageSize"
+        [pageSizeOptions]="pageSizeOptions"
+        (pageIndexChange)="onPageIndexChange($event)"
+        (pageSizeChange)="onPageSizeChange($event)"
+      ></div>
+    </ng-template>
+  `
 })
 export class NzPaginationDefaultComponent implements OnChanges {
+  @ViewChild('containerTemplate', { static: true }) template: TemplateRef<NzSafeAny>;
   @Input() nzSize: 'default' | 'small' = 'default';
   @Input() itemRender: TemplateRef<PaginationItemRenderContext>;
   @Input() showTotal: TemplateRef<{ $implicit: number; range: [number, number] }> | null = null;
@@ -81,6 +82,10 @@ export class NzPaginationDefaultComponent implements OnChanges {
   ranges = [0, 0];
   listOfPageItem: Array<Partial<NzPaginationItemComponent>> = [];
 
+  constructor(renderer: Renderer2, elementRef: ElementRef) {
+    renderer.removeChild(renderer.parentNode(elementRef.nativeElement), elementRef.nativeElement);
+  }
+
   jumpPage(index: number): void {
     this.onPageIndexChange(index);
   }

diff --git a/components/pagination/pagination-simple.component.ts b/components/pagination/pagination-simple.component.ts
@@ -9,53 +9,54 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  ElementRef,
   EventEmitter,
   Input,
   OnChanges,
   Output,
+  Renderer2,
   SimpleChanges,
   TemplateRef,
+  ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { toNumber } from 'ng-zorro-antd/core/util';
 import { PaginationItemRenderContext } from './pagination.types';
 
 @Component({
-  selector: 'ul[nz-pagination-simple]',
+  selector: 'nz-pagination-simple',
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <li
-      nz-pagination-item
-      [attr.title]="locale.prev_page"
-      [disabled]="isFirstIndex"
-      (click)="prePage()"
-      type="prev"
-      [itemRender]="itemRender"
-    ></li>
-    <li [attr.title]="pageIndex + '/' + lastIndex" class="ant-pagination-simple-pager">
-      <input [disabled]="disabled" [value]="pageIndex" (keydown.enter)="jumpToPageViaInput($event)" size="3" />
-      <span class="ant-pagination-slash">/</span>
-      {{ lastIndex }}
-    </li>
-    <li
-      nz-pagination-item
-      [attr.title]="locale.next_page"
-      [disabled]="isLastIndex"
-      (click)="nextPage()"
-      type="next"
-      [itemRender]="itemRender"
-    ></li>
-  `,
-  host: {
-    '[class.ant-pagination]': 'true',
-    '[class.ant-pagination-simple]': 'true',
-    '[class.ant-pagination-disabled]': 'disabled'
-  }
+    <ng-template #containerTemplate>
+      <li
+        nz-pagination-item
+        [attr.title]="locale.prev_page"
+        [disabled]="isFirstIndex"
+        (click)="prePage()"
+        type="prev"
+        [itemRender]="itemRender"
+      ></li>
+      <li [attr.title]="pageIndex + '/' + lastIndex" class="ant-pagination-simple-pager">
+        <input [disabled]="disabled" [value]="pageIndex" (keydown.enter)="jumpToPageViaInput($event)" size="3" />
+        <span class="ant-pagination-slash">/</span>
+        {{ lastIndex }}
+      </li>
+      <li
+        nz-pagination-item
+        [attr.title]="locale.next_page"
+        [disabled]="isLastIndex"
+        (click)="nextPage()"
+        type="next"
+        [itemRender]="itemRender"
+      ></li>
+    </ng-template>
+  `
 })
 export class NzPaginationSimpleComponent implements OnChanges {
+  @ViewChild('containerTemplate', { static: true }) template: TemplateRef<NzSafeAny>;
   @Input() itemRender: TemplateRef<PaginationItemRenderContext> | null = null;
   @Input() disabled = false;
   @Input() locale: NzSafeAny = {};
@@ -67,6 +68,10 @@ export class NzPaginationSimpleComponent implements OnChanges {
   isFirstIndex = false;
   isLastIndex = false;
 
+  constructor(renderer: Renderer2, elementRef: ElementRef) {
+    renderer.removeChild(renderer.parentNode(elementRef.nativeElement), elementRef.nativeElement);
+  }
+
   jumpToPageViaInput($event: Event): void {
     const target = $event.target as HTMLInputElement;
     const index = toNumber(target.value, this.pageIndex);

diff --git a/components/pagination/pagination.component.ts b/components/pagination/pagination.component.ts
@@ -37,38 +37,43 @@ import { PaginationItemRenderContext } from './pagination.types';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <ng-container *ngIf="showPagination">
-      <ul
-        *ngIf="nzSimple"
-        nz-pagination-simple
-        [class.ant-table-pagination]="nzInsideTable"
-        [disabled]="nzDisabled"
-        [itemRender]="nzItemRender"
-        [locale]="locale"
-        [pageSize]="nzPageSize"
-        [total]="nzTotal"
-        [pageIndex]="nzPageIndex"
-        (pageIndexChange)="onPageIndexChange($event)"
-      ></ul>
-      <ul
-        *ngIf="!nzSimple"
-        nz-pagination-default
-        [class.ant-table-pagination]="nzInsideTable"
-        [nzSize]="size"
-        [itemRender]="nzItemRender"
-        [showTotal]="nzShowTotal"
-        [disabled]="nzDisabled"
-        [locale]="locale"
-        [showSizeChanger]="nzShowSizeChanger"
-        [showQuickJumper]="nzShowQuickJumper"
-        [total]="nzTotal"
-        [pageIndex]="nzPageIndex"
-        [pageSize]="nzPageSize"
-        [pageSizeOptions]="nzPageSizeOptions"
-        (pageIndexChange)="onPageIndexChange($event)"
-        (pageSizeChange)="onPageSizeChange($event)"
-      ></ul>
+      <ng-container *ngIf="nzSimple; else defaultPagination.template">
+        <ng-template [ngTemplateOutlet]="simplePagination.template"></ng-template>
+      </ng-container>
     </ng-container>
-  `
+    <nz-pagination-simple
+      #simplePagination
+      [disabled]="nzDisabled"
+      [itemRender]="nzItemRender"
+      [locale]="locale"
+      [pageSize]="nzPageSize"
+      [total]="nzTotal"
+      [pageIndex]="nzPageIndex"
+      (pageIndexChange)="onPageIndexChange($event)"
+    ></nz-pagination-simple>
+    <nz-pagination-default
+      #defaultPagination
+      [nzSize]="size"
+      [itemRender]="nzItemRender"
+      [showTotal]="nzShowTotal"
+      [disabled]="nzDisabled"
+      [locale]="locale"
+      [showSizeChanger]="nzShowSizeChanger"
+      [showQuickJumper]="nzShowQuickJumper"
+      [total]="nzTotal"
+      [pageIndex]="nzPageIndex"
+      [pageSize]="nzPageSize"
+      [pageSizeOptions]="nzPageSizeOptions"
+      (pageIndexChange)="onPageIndexChange($event)"
+      (pageSizeChange)="onPageSizeChange($event)"
+    ></nz-pagination-default>
+  `,
+  host: {
+    '[class.ant-pagination]': 'true',
+    '[class.ant-pagination-simple]': 'nzSimple',
+    '[class.ant-pagination-disabled]': 'nzDisabled',
+    '[class.mini]': `!nzSimple && size === 'small'`
+  }
 })
 export class NzPaginationComponent implements OnInit, OnDestroy, OnChanges {
   @Output() readonly nzPageSizeChange: EventEmitter<number> = new EventEmitter();
@@ -78,7 +83,6 @@ export class NzPaginationComponent implements OnInit, OnDestroy, OnChanges {
   @Input() nzPageSizeOptions = [10, 20, 30, 40];
   @Input() nzItemRender: TemplateRef<PaginationItemRenderContext>;
   @Input() @InputBoolean() nzDisabled = false;
-  @Input() @InputBoolean() nzInsideTable = false;
   @Input() @InputBoolean() nzShowSizeChanger = false;
   @Input() @InputBoolean() nzHideOnSinglePage = false;
   @Input() @InputBoolean() nzShowQuickJumper = false;