refactor(module:tabs): refactor component (NG-ZORRO#5590)

hsuanxyz · Jul 22, 2020 · 8214de3 · 8214de3
1 parent ba32e8a
commit 8214de3
Show file tree

Hide file tree

Showing 32 changed files with 1,493 additions and 1,797 deletions.
diff --git a/components/core/resize-observers/public-api.ts b/components/core/resize-observers/public-api.ts
@@ -4,4 +4,4 @@
  */
 
 export { NzResizeObserversModule } from './resize-observers.module';
-export { NzResizeObserver } from './resize-observers.service';
+export { NzResizeObserver, NzResizeObserverFactory as ɵNzResizeObserverFactory } from './resize-observers.service';
diff --git a/components/tabs/demo/card-top.ts b/components/tabs/demo/card-top.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-tabs-card-top',
   template: `
     <div class="card-container">
-      <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
+      <nz-tabset nzType="card">
         <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab Title ' + tab">
           <p>Content of Tab Pane {{ tab }}</p>
           <p>Content of Tab Pane {{ tab }}</p>
@@ -22,26 +22,25 @@ import { Component } from '@angular/core';
         display: block;
       }
 
-      .card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
+      .card-container ::ng-deep p {
+        margin: 0;
+      }
+      .card-container ::ng-deep > .ant-tabs-card .ant-tabs-content {
         height: 120px;
         margin-top: -16px;
       }
-
-      .card-container ::ng-deep .ant-tabs-card .ant-tabs-content .ant-tabs-tabpane {
+      .card-container ::ng-deep > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
         background: #fff;
         padding: 16px;
       }
-
-      .card-container ::ng-deep .ant-tabs-card .ant-tabs-bar {
-        border-color: #fff;
+      .card-container ::ng-deep > .ant-tabs-card > .ant-tabs-nav::before {
+        display: none;
       }
-
-      .card-container ::ng-deep .ant-tabs-card .ant-tabs-bar .ant-tabs-tab {
+      .card-container ::ng-deep > .ant-tabs-card .ant-tabs-tab {
         border-color: transparent;
         background: transparent;
       }
-
-      .card-container ::ng-deep .ant-tabs-card .ant-tabs-bar .ant-tabs-tab-active {
+      .card-container ::ng-deep > .ant-tabs-card .ant-tabs-tab-active {
         border-color: #fff;
         background: #fff;
       }

diff --git a/components/tabs/demo/card.ts b/components/tabs/demo/card.ts
@@ -3,8 +3,8 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-tabs-card',
   template: `
-    <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
-      <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab' + tab"> Content of Tab Pane {{ tab }} </nz-tab>
+    <nz-tabset nzType="card">
+      <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab' + tab">Content of Tab Pane {{ tab }}</nz-tab>
     </nz-tabset>
   `
 })

diff --git a/components/tabs/demo/custom-add-trigger.ts b/components/tabs/demo/custom-add-trigger.ts
@@ -6,22 +6,17 @@ import { Component } from '@angular/core';
     <div style="margin-bottom: 16px;">
       <button nz-button (click)="newTab()">ADD</button>
     </div>
-    <nz-tabset [nzType]="'card'" [nzSelectedIndex]="index">
-      <nz-tab *ngFor="let tab of tabs" [nzTitle]="titleTemplate">
-        <ng-template #titleTemplate>
-          <div>{{ tab }}<i nz-icon nzType="close" class="ant-tabs-close-x" (click)="closeTab(tab)"></i></div>
-        </ng-template>
-        Content of {{ tab }}
-      </nz-tab>
+    <nz-tabset [(nzSelectedIndex)]="index" nzType="editable-card" nzHideAdd (nzClose)="closeTab($event)">
+      <nz-tab *ngFor="let tab of tabs; let i = index" [nzClosable]="i > 1" [nzTitle]="tab">Content of {{ tab }}</nz-tab>
     </nz-tabset>
   `
 })
 export class NzDemoTabsCustomAddTriggerComponent {
   index = 0;
   tabs = ['Tab 1', 'Tab 2'];
 
-  closeTab(tab: string): void {
-    this.tabs.splice(this.tabs.indexOf(tab), 1);
+  closeTab({ index }: { index: number }): void {
+    this.tabs.splice(index, 1);
   }
 
   newTab(): void {

diff --git a/components/tabs/demo/editable-card.ts b/components/tabs/demo/editable-card.ts
@@ -3,30 +3,21 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-tabs-editable-card',
   template: `
-    <nz-tabset [nzType]="'card'" [nzTabBarExtraContent]="extraTemplate">
-      <nz-tab *ngFor="let tab of tabs" [nzTitle]="titleTemplate">
-        <ng-template #titleTemplate>
-          <div>
-            {{ tab }}
-            <i nz-icon nzType="close" (click)="closeTab(tab)" class="ant-tabs-close-x"></i>
-          </div>
-        </ng-template>
-        Content of {{ tab }}
-      </nz-tab>
+    <nz-tabset [(nzSelectedIndex)]="selectedIndex" nzType="editable-card" (nzAdd)="newTab()" (nzClose)="closeTab($event)">
+      <nz-tab *ngFor="let tab of tabs" nzClosable [nzTitle]="tab">Content of {{ tab }}</nz-tab>
     </nz-tabset>
-    <ng-template #extraTemplate>
-      <i class="ant-tabs-new-tab" nz-icon nzType="plus" (click)="newTab()"></i>
-    </ng-template>
   `
 })
 export class NzDemoTabsEditableCardComponent {
   tabs = ['Tab 1', 'Tab 2'];
+  selectedIndex = 0;
 
-  closeTab(tab: string): void {
-    this.tabs.splice(this.tabs.indexOf(tab), 1);
+  closeTab({ index }: { index: number }): void {
+    this.tabs.splice(index, 1);
   }
 
   newTab(): void {
     this.tabs.push('New Tab');
+    this.selectedIndex = this.tabs.length;
   }
 }
diff --git a/components/tabs/demo/extra.ts b/components/tabs/demo/extra.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-tabs-extra',
   template: `
     <nz-tabset [nzTabBarExtraContent]="extraTemplate">
-      <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab ' + tab"> Content of tab {{ tab }} </nz-tab>
+      <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab ' + tab">Content of tab {{ tab }}</nz-tab>
     </nz-tabset>
     <ng-template #extraTemplate>
       <button nz-button>Extra Action</button>

diff --git a/components/tabs/demo/guard.ts b/components/tabs/demo/guard.ts
@@ -7,7 +7,7 @@ import { Observable } from 'rxjs';
   selector: 'nz-demo-tabs-guard',
   template: `
     <nz-tabset [nzCanDeactivate]="canDeactivate">
-      <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab' + tab"> Content of tab {{ tab }} </nz-tab>
+      <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab' + tab">Content of tab {{ tab }}</nz-tab>
     </nz-tabset>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush

diff --git a/components/tabs/demo/icon.ts b/components/tabs/demo/icon.ts
@@ -5,7 +5,10 @@ import { Component } from '@angular/core';
   template: `
     <nz-tabset>
       <nz-tab *ngFor="let tab of tabs" [nzTitle]="titleTemplate">
-        <ng-template #titleTemplate> <i nz-icon [nzType]="tab.icon"></i>{{ tab.name }} </ng-template>
+        <ng-template #titleTemplate>
+          <i nz-icon [nzType]="tab.icon"></i>
+          {{ tab.name }}
+        </ng-template>
         {{ tab.name }}
       </nz-tab>
     </nz-tabset>
@@ -14,12 +17,10 @@ import { Component } from '@angular/core';
 export class NzDemoTabsIconComponent {
   tabs = [
     {
-      active: true,
       name: 'Tab 1',
       icon: 'apple'
     },
     {
-      active: false,
       name: 'Tab 2',
       icon: 'android'
     }

diff --git a/components/tabs/demo/position.ts b/components/tabs/demo/position.ts
@@ -7,11 +7,11 @@ import { NzTabPosition } from 'ng-zorro-antd/tabs';
     <div style="margin-bottom: 16px;">
       Tab position：
       <nz-select [(ngModel)]="position" style="width: 80px;">
-        <nz-option *ngFor="let option of options" [nzLabel]="option.label" [nzValue]="option.value"> </nz-option>
+        <nz-option *ngFor="let option of options" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
       </nz-select>
     </div>
-    <nz-tabset [nzTabPosition]="position" [nzType]="'line'">
-      <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab ' + tab"> Content of tab {{ tab }} </nz-tab>
+    <nz-tabset [nzTabPosition]="position">
+      <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab ' + tab">Content of tab {{ tab }}</nz-tab>
     </nz-tabset>
   `
 })

diff --git a/components/tabs/demo/size.ts b/components/tabs/demo/size.ts
@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
       <label nz-radio-button nzValue="large"><span>Large</span></label>
     </nz-radio-group>
     <nz-tabset [nzSize]="size">
-      <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab ' + tab"> Content of tab {{ tab }} </nz-tab>
+      <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab ' + tab">Content of tab {{ tab }}</nz-tab>
     </nz-tabset>
   `
 })

diff --git a/components/tabs/demo/slide.ts b/components/tabs/demo/slide.ts
@@ -4,15 +4,17 @@ import { NzTabPosition } from 'ng-zorro-antd/tabs';
 @Component({
   selector: 'nz-demo-tabs-slide',
   template: `
-    <nz-radio-group [(ngModel)]="nzTabPosition">
+    <nz-radio-group [(ngModel)]="nzTabPosition" style="margin-bottom: 8px;">
       <label nz-radio-button [nzValue]="'top'">Horizontal</label>
       <label nz-radio-button [nzValue]="'left'">Vertical</label>
     </nz-radio-group>
-    <nz-input-number style="float:right;" [nzMin]="0" [nzMax]="10" [(ngModel)]="selectedIndex"></nz-input-number>
+    <nz-input-number style="float:right;" [nzMin]="0" [nzMax]="29" [(ngModel)]="selectedIndex"></nz-input-number>
+
     <nz-tabset style="height:220px;" [nzTabPosition]="nzTabPosition" [(nzSelectedIndex)]="selectedIndex" (nzSelectChange)="log([$event])">
       <nz-tab
         *ngFor="let tab of tabs"
         [nzTitle]="tab.name"
+        [nzDisabled]="tab.disabled"
         (nzSelect)="log(['select', tab])"
         (nzClick)="log(['click', tab])"
         (nzDeselect)="log(['deselect', tab])"
@@ -23,7 +25,7 @@ import { NzTabPosition } from 'ng-zorro-antd/tabs';
   `
 })
 export class NzDemoTabsSlideComponent implements OnInit {
-  tabs: Array<{ name: string; content: string }> = [];
+  tabs: Array<{ name: string; content: string; disabled: boolean }> = [];
   nzTabPosition: NzTabPosition = 'top';
   selectedIndex = 0;
 
@@ -33,9 +35,10 @@ export class NzDemoTabsSlideComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    for (let i = 0; i < 11; i++) {
+    for (let i = 0; i < 30; i++) {
       this.tabs.push({
         name: `Tab ${i}`,
+        disabled: i === 28,
         content: `Content of tab ${i}`
       });
     }

diff --git a/components/tabs/doc/index.en-US.md b/components/tabs/doc/index.en-US.md
@@ -32,17 +32,15 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs';
 | `[nzTabBarExtraContent]` | Extra content in tab bar | `TemplateRef<void>` | - |
 | `[nzTabBarStyle]` | Tab bar style object | `object` | - |
 | `[nzTabPosition]` | Position of tabs | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | |
-| `[nzType]` | Basic style of tabs | `'line' \| 'card'` | `'line'` | ✅ |
+| `[nzType]` | Basic style of tabs | `'line' \| 'card' \| 'editable-card'` | `'line'` | ✅ |
 | `[nzTabBarGutter]` | The gap between tabs | `number` | - | ✅ |
 | `[nzHideAll]` | Whether hide all tabs | `boolean` | `false` |
-| `[nzShowPagination]` | Whether show pre or next button when exceed display area | `boolean` | `true` | ✅ |
 | `[nzLinkRouter]` | Link with Angular router. It supports child mode and query param mode | `boolean` | `false` ||
 | `[nzLinkExact]` | Use exact routing matching | `boolean` | `true` |
 | `[nzCanDeactivate]` | Determine if a tab can be deactivated | `NzTabsCanDeactivateFn` | - |
+| `[nzCentered]` | Centers tabs | `boolean` | `false` |
 | `(nzSelectedIndexChange)` | Current tab's index change callback | `EventEmitter<number>` | - |
 | `(nzSelectChange)` | Current tab's change callback | `EventEmitter<{index: number,tab: NzTabComponent}>` | - |
-| `(nzOnNextClick)` | Callback executed when next button is clicked | `EventEmitter<void>` | - |
-| `(nzOnPrevClick)` | Callback executed when prev button is clicked | `EventEmitter<void>` | - |
 
 ### nz-tab
 
@@ -55,6 +53,20 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs';
 | `(nzSelect)` | title select callback | `EventEmitter<void>` | - |
 | `(nzDeselect)` | title deselect callback | `EventEmitter<void>` | - |
 
+### nz-tabset[nzType="editable-card"]
+
+| Property | Description | Type | Default | Global Config |
+| --- | --- | --- | --- | --- |
+| `[nzHideAdd]` | Hide plus icon or not | `boolean` | `false` |
+| `(nzAdd)` | When add button clicked emit | `EventEmitter<>` | - |
+| `(nzClose)` | When close button clicked emit | `EventEmitter<{ index: number }>` | - |
+
+### nz-tabset[nzType="editable-card"] > nz-tab
+| Property | Description | Type | Default | Global Config |
+| --- | --- | --- | --- | --- |
+| `[nzClosable]` | Show close icon or not | `boolean` | `false` |
+
+
 ### [nz-tab]
 
 Tab contents can be lazy loaded by declaring the body in a `ng-template` with the `[nz-tab]` attribute.

diff --git a/components/tabs/doc/index.zh-CN.md b/components/tabs/doc/index.zh-CN.md
@@ -35,17 +35,15 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs';
 | `[nzTabBarExtraContent]` | tab bar 上额外的元素 | `TemplateRef<void>` | - |
 | `[nzTabBarStyle]` | tab bar 的样式对象 | `object` | - |
 | `[nzTabPosition]` | 页签位置，可选值有 `top` `right` `bottom` `left` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | |
-| `[nzType]` | 页签的基本样式，可选 `line`、`card` 类型 | `'line' \| 'card'` | `'line'` | ✅ |
+| `[nzType]` | 页签的基本样式 | `'line' \| 'card' \| 'editable-card'` | `'line'` | ✅ |
 | `[nzTabBarGutter]` | tabs 之间的间隙 | `number` | - | ✅ |
 | `[nzHideAll]` | 是否隐藏所有tab内容 | `boolean` | `false` |
-| `[nzShowPagination]` | 是否超出范围时显示pre和next按钮 | `boolean` | `true` | ✅ |
 | `[nzLinkRouter]` | 与 Angular 路由联动 | `boolean` | `false` ||
 | `[nzLinkExact]` | 以严格匹配模式确定联动的路由 | `boolean` | `true` |
 | `[nzCanDeactivate]` | 决定一个 tab 是否可以被切换 | `NzTabsCanDeactivateFn` | - |
+| `[nzCentered]` | 标签居中展示 | `boolean` | `false` |
 | `(nzSelectedIndexChange)` | 当前激活 tab 面板的 序列号变更回调函数 | `EventEmitter<number>` | - |
 | `(nzSelectChange)` | 当前激活 tab 面板变更回调函数 | `EventEmitter<{index: number,tab: NzTabComponent}>` | - |
-| `(nzOnNextClick)` | next 按钮被点击的回调 | `EventEmitter<void>` | - |
-| `(nzOnPrevClick)` | prev 按钮被点击的回调 | `EventEmitter<void>` | - |
 
 ### nz-tab
 
@@ -58,6 +56,19 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs';
 | `(nzSelect)` | tab被选中的回调函数 | `EventEmitter<void>` | - |
 | `(nzDeselect)` | tab被取消选中的回调函数 | `EventEmitter<void>` | - |
 
+### nz-tabset[nzType="editable-card"]
+
+| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
+| --- | --- | --- | --- | --- |
+| `[nzHideAdd]` | 隐藏添加按钮 | `boolean` | `false` |
+| `(nzAdd)` | 点击添加按钮时的事件 | `EventEmitter<>` | - |
+| `(nzClose)` | 点击删除按钮时的事件 | `EventEmitter<{ index: number }>` | - |
+
+### nz-tabset[nzType="editable-card"] > nz-tab
+| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
+| --- | --- | --- | --- | --- |
+| `[nzClosable]` | 显示删除按钮 | `boolean` | `false` |
+
 ### [nz-tab]
 
 与 `ng-template` 一同使用，用于标记需要懒加载的 `tab` 内容，具体用法见示例。

diff --git a/components/tabs/tabs.types.ts → components/tabs/interfaces.ts b/components/tabs/tabs.types.ts → components/tabs/interfaces.ts
@@ -2,9 +2,15 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
+
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { Observable } from 'rxjs';
 
+export type NzTabPosition = 'top' | 'bottom' | 'left' | 'right';
+export type NzTabType = 'line' | 'card' | 'editable-card';
+export type NzTabsCanDeactivateFn = (fromIndex: number, toIndex: number) => Observable<boolean> | Promise<boolean> | boolean;
+export type NzTabPositionMode = 'horizontal' | 'vertical';
+
 export interface NzAnimatedInterface {
   inkBar: boolean;
   tabPane: boolean;
@@ -15,8 +21,22 @@ export class NzTabChangeEvent {
   tab: NzSafeAny;
 }
 
-export type NzTabsCanDeactivateFn = (fromIndex: number, toIndex: number) => Observable<boolean> | Promise<boolean> | boolean;
+export interface NzTabScrollListOffset {
+  x: number;
+  y: number;
+}
 
-export type NzTabPosition = 'top' | 'bottom' | 'left' | 'right';
-export type NzTabPositionMode = 'horizontal' | 'vertical';
-export type NzTabType = 'line' | 'card';
+export type NzTabScrollListOffsetEvent = NzTabScrollListOffset & { event: Event };
+
+interface NzTabWheelScrollEvent {
+  type: 'wheel';
+  event: WheelEvent;
+}
+
+interface NzTabTouchScrollEvent {
+  type: 'touchstart' | 'touchmove' | 'touchend';
+  event: TouchEvent;
+}
+
+export type NzTabScrollEvent = NzTabTouchScrollEvent | NzTabWheelScrollEvent;
+export type NzTabScrollEventHandlerFun<T extends NzTabScrollEvent['event']> = (event: T) => void;
diff --git a/components/tabs/public-api.ts b/components/tabs/public-api.ts
@@ -3,13 +3,17 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-export * from './tab-body.component';
-export * from './tab-label.directive';
+export { NzTabAddButtonComponent as ɵNzTabAddButtonComponent } from './tab-add-button.component';
+export { NzTabsInkBarDirective as ɵNzTabsInkBarDirective } from './tabs-ink-bar.directive';
+export { NzTabNavBarComponent as ɵNzTabNavBarComponent } from './tab-nav-bar.component';
+export { NzTabNavItemDirective as ɵNzTabNavItemDirective } from './tab-nav-item.directive';
+export { NzTabBodyComponent as ɵNzTabBodyComponent } from './tab-body.component';
+export { NzTabNavOperationComponent as ɵNzTabNavOperationComponent } from './tab-nav-operation.component';
+export { NzTabScrollListDirective as ɵNzTabScrollListDirective } from './tab-scroll-list.directive';
+export { NzTabCloseButtonComponent as ɵNzTabCloseButtonComponent } from './tab-close-button.component';
 export * from './tab.component';
-export * from './tabs-ink-bar.directive';
-export * from './tabs.module';
-export * from './tabs-nav.component';
-export * from './tabset.component';
 export * from './tab.directive';
 export * from './tab-link.directive';
-export * from './tabs.types';
+export * from './tabs.module';
+export * from './tabset.component';
+export * from './interfaces';
diff --git a/components/tabs/style/patch.less b/components/tabs/style/patch.less
@@ -11,6 +11,7 @@ a[nz-tab-link] {
 }
 
 nz-tabset,
+nz-tab-nav-operation,
 nz-tabs-nav {
   display: block;
 }