feat(module:select): refactor the select to support virutal scroll

close #4585 close #3497
NG-ZORRO · Feb 26, 2020 · 40daee9 · 40daee9
1 parent 05a53e1
commit 40daee9
Show file tree

Hide file tree

Showing 56 changed files with 1,633 additions and 3,006 deletions.
diff --git a/components/calendar/nz-calendar-header.spec.ts b/components/calendar/nz-calendar-header.spec.ts
@@ -8,8 +8,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { CandyDate } from '../core';
 import { NzI18nModule } from '../i18n/nz-i18n.module';
 import { NzRadioGroupComponent as RadioGroup, NzRadioModule } from '../radio/index';
-import { NzSelectComponent as Select } from '../select/nz-select.component';
-import { NzSelectModule } from '../select/nz-select.module';
+import { NzSelectComponent as Select } from '../select/select.component';
+import { NzSelectModule } from '../select/select.module';
 import { NzCalendarHeaderComponent, NzCalendarHeaderComponent as CalendarHeader } from './nz-calendar-header.component';
 
 registerLocaleData(zh);

diff --git a/components/checkbox/checkbox.module.ts b/components/checkbox/checkbox.module.ts
@@ -6,16 +6,16 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { A11yModule } from '@angular/cdk/a11y';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-
 import { NzCheckboxGroupComponent } from './checkbox-group.component';
 import { NzCheckboxWrapperComponent } from './checkbox-wrapper.component';
 import { NzCheckboxComponent } from './checkbox.component';
 
 @NgModule({
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, A11yModule],
   declarations: [NzCheckboxComponent, NzCheckboxGroupComponent, NzCheckboxWrapperComponent],
   exports: [NzCheckboxComponent, NzCheckboxGroupComponent, NzCheckboxWrapperComponent]
 })

diff --git a/components/select/demo/basic.ts b/components/select/demo/basic.ts
@@ -3,29 +3,28 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-select-basic',
   template: `
-    <div>
-      <nz-select [(ngModel)]="selectedValue" nzAllowClear nzPlaceHolder="Choose">
-        <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
-        <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
-        <nz-option nzValue="disabled" nzLabel="Disabled" nzDisabled></nz-option>
-      </nz-select>
-      <nz-select [ngModel]="'lucy'" nzDisabled>
-        <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
-      </nz-select>
-      <nz-select [ngModel]="'lucy'" nzLoading>
-        <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
-      </nz-select>
-    </div>
+    <nz-select ngModel="lucy">
+      <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
+      <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
+      <nz-option nzValue="disabled" nzLabel="Disabled" nzDisabled></nz-option>
+    </nz-select>
+    <nz-select ngModel="lucy" nzDisabled>
+      <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
+    </nz-select>
+    <nz-select ngModel="lucy" nzLoading>
+      <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
+    </nz-select>
+    <nz-select ngModel="lucy" nzAllowClear nzPlaceHolder="Choose">
+      <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
+    </nz-select>
   `,
   styles: [
     `
       nz-select {
-        margin-right: 8px;
+        margin: 0 8px 10px 0;
         width: 120px;
       }
     `
   ]
 })
-export class NzDemoSelectBasicComponent {
-  selectedValue = 'lucy';
-}
+export class NzDemoSelectBasicComponent {}
diff --git a/components/select/demo/big-data.md b/components/select/demo/big-data.md
@@ -0,0 +1,15 @@
+---
+order: 20
+title:
+  zh-CN: 大量数据
+  en-US: Large amounts of data
+---
+
+## zh-CN
+
+组件使用了虚拟滚动技术，可以同时处理大量数据。
+
+## en-US
+
+With the help of virtual scroll, select component can deal with Large amounts of data.
+
diff --git a/components/select/demo/big-data.ts b/components/select/demo/big-data.ts
@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-select-big-data',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <nz-select nzMode="multiple" nzPlaceHolder="Please select" [(ngModel)]="listOfSelectedValue">
+      <nz-option *ngFor="let item of listOfOption" [nzLabel]="item" [nzValue]="item"></nz-option>
+    </nz-select>
+  `,
+  styles: [
+    `
+      nz-select {
+        width: 100%;
+      }
+    `
+  ]
+})
+export class NzDemoSelectBigDataComponent implements OnInit {
+  listOfOption: string[] = [];
+  listOfSelectedValue = ['a10', 'c12'];
+
+  ngOnInit(): void {
+    const children: string[] = [];
+    for (let i = 10; i < 100000; i++) {
+      children.push(`${i.toString(36)}${i}`);
+    }
+    this.listOfOption = children;
+  }
+}
diff --git a/components/select/demo/border-less.md b/components/select/demo/border-less.md
@@ -0,0 +1,14 @@
+---
+order: 21
+title:
+  zh-CN: 无边框
+  en-US: Bordered-less
+---
+
+## zh-CN
+
+无边框样式。
+
+## en-US
+
+Bordered-less style component.
diff --git a/components/select/demo/border-less.ts b/components/select/demo/border-less.ts
@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-select-border-less',
+  template: `
+    <nz-select ngModel="lucy" nzBorderless>
+      <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
+      <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
+      <nz-option nzValue="disabled" nzLabel="Disabled" nzDisabled></nz-option>
+    </nz-select>
+    <nz-select ngModel="lucy" nzDisabled nzBorderless>
+      <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
+    </nz-select>
+  `,
+  styles: [
+    `
+      nz-select {
+        margin: 0 8px 10px 0;
+        width: 120px;
+      }
+    `
+  ]
+})
+export class NzDemoSelectBorderLessComponent {}
diff --git a/components/select/demo/custom-content.md b/components/select/demo/custom-content.md
@@ -7,7 +7,7 @@ title:
 
 ## zh-CN
 
-通过 `nzCustomContent` 自定义 nz-option 显示的内容。
+通过 `nzCustomContent` 自定义下拉菜单选项显示的内容。
 
 ## en-US
 

diff --git a/components/select/demo/custom-dropdown-menu.ts b/components/select/demo/custom-dropdown-menu.ts
@@ -3,30 +3,47 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-select-custom-dropdown-menu',
   template: `
-    <nz-select nzShowSearch nzAllowClear [ngModel]="'lucy'" [nzDropdownRender]="render">
-      <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
-      <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
+    <nz-select nzShowSearch nzAllowClear [nzDropdownRender]="renderTemplate" nzPlaceHolder="custom dropdown render">
+      <nz-option *ngFor="let item of listOfItem" [nzLabel]="item" [nzValue]="item"></nz-option>
     </nz-select>
-    <ng-template #render>
+    <ng-template #renderTemplate>
       <nz-divider></nz-divider>
-      <div class="add-item"><i nz-icon nzType="plus"></i> Add item</div>
+      <div class="container">
+        <input type="text" nz-input #inputElement />
+        <a class="add-item" (click)="addItem(inputElement)"><i nz-icon nzType="plus"></i> Add item</a>
+      </div>
     </ng-template>
   `,
   styles: [
     `
       nz-select {
-        width: 120px;
+        width: 240px;
       }
-
       nz-divider {
         margin: 4px 0;
       }
-
+      .container {
+        display: flex;
+        flex-wrap: nowrap;
+        padding: 8px;
+      }
+      input {
+      }
       .add-item {
+        flex: 0 0 auto;
         padding: 8px;
-        cursor: pointer;
+        display: block;
       }
     `
   ]
 })
-export class NzDemoSelectCustomDropdownMenuComponent {}
+export class NzDemoSelectCustomDropdownMenuComponent {
+  listOfItem = ['jack', 'lucy'];
+  index = 0;
+  addItem(input: HTMLInputElement): void {
+    const value = input.value;
+    if (this.listOfItem.indexOf(value) === -1) {
+      this.listOfItem = [...this.listOfItem, input.value || `New item ${this.index++}`];
+    }
+  }
+}
diff --git a/components/select/demo/custom-template.md b/components/select/demo/custom-template.md
@@ -1,8 +1,8 @@
 ---
-order: 18
+order: 22
 title:
-  zh-CN: 自定义选择器内容
-  en-US: Custom Select Template
+  zh-CN: 自定义选择标签
+  en-US: Custom Top Render
 ---
 
 ## zh-CN

diff --git a/components/select/demo/custom-template.ts b/components/select/demo/custom-template.ts
@@ -3,23 +3,29 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-select-custom-template',
   template: `
-    <nz-select nzAllowClear nzPlaceHolder="Select OS" [(ngModel)]="selectedOS" [nzCustomTemplate]="custom">
-      <nz-option nzCustomContent nzLabel="Windows" nzValue="windows"><i nz-icon nzType="windows"></i> Windows </nz-option>
-      <nz-option nzCustomContent nzLabel="Mac" nzValue="mac"><i nz-icon nzType="apple"></i> Mac</nz-option>
-      <nz-option nzCustomContent nzLabel="Android" nzValue="android"><i nz-icon nzType="android"></i> Android </nz-option>
+    <nz-select nzAllowClear nzPlaceHolder="Select OS" [nzCustomTemplate]="defaultTemplate">
+      <nz-option nzLabel="Windows" nzValue="windows"></nz-option>
+      <nz-option nzLabel="Apple" nzValue="apple"></nz-option>
+      <nz-option nzLabel="Android" nzValue="android"></nz-option>
     </nz-select>
-    <ng-template #custom let-selected>
-      <span>Label: {{ selected.nzLabel }} Value: {{ selected.nzValue }}</span>
+    <ng-template #defaultTemplate let-selected> <i nz-icon [nzType]="selected.nzValue"></i> {{ selected.nzLabel }} </ng-template>
+    <br />
+    <br />
+    <nz-select nzAllowClear nzPlaceHolder="Select OS" nzMode="multiple" [nzCustomTemplate]="multipleTemplate">
+      <nz-option nzLabel="Windows" nzValue="windows"></nz-option>
+      <nz-option nzLabel="Apple" nzValue="apple"></nz-option>
+      <nz-option nzLabel="Android" nzValue="android"></nz-option>
+    </nz-select>
+    <ng-template #multipleTemplate let-selected>
+      <div class="ant-select-selection-item-content"><i nz-icon [nzType]="selected.nzValue"></i> {{ selected.nzLabel }}</div>
     </ng-template>
   `,
   styles: [
     `
       nz-select {
-        width: 200px;
+        width: 100%;
       }
     `
   ]
 })
-export class NzDemoSelectCustomTemplateComponent {
-  selectedOS = null;
-}
+export class NzDemoSelectCustomTemplateComponent {}
diff --git a/components/select/demo/frontend-search.md b/components/select/demo/frontend-search.md
diff --git a/components/select/demo/frontend-search.ts b/components/select/demo/frontend-search.ts
diff --git a/components/select/demo/module b/components/select/demo/module
@@ -2,7 +2,8 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { NzRadioModule } from 'ng-zorro-antd/radio';
 import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzInputModule } from 'ng-zorro-antd/input';
 import { FormsModule } from '@angular/forms';
 import { HttpClientJsonpModule } from '@angular/common/http';
 
-export const moduleList = [ FormsModule, HttpClientJsonpModule, NzSelectModule, NzDividerModule, NzRadioModule, NzIconModule ];
+export const moduleList = [ FormsModule, HttpClientJsonpModule, NzSelectModule, NzDividerModule, NzRadioModule, NzIconModule, NzInputModule ];
diff --git a/components/select/demo/multiple.ts b/components/select/demo/multiple.ts
@@ -10,7 +10,7 @@ import { Component, OnInit } from '@angular/core';
       nzPlaceHolder="Please select"
       [(ngModel)]="listOfSelectedValue"
     >
-      <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
+      <nz-option *ngFor="let item of listOfOption" [nzLabel]="item" [nzValue]="item"></nz-option>
     </nz-select>
     <ng-template #tagPlaceHolder let-selectedList> and {{ selectedList.length }} more selected </ng-template>
   `,
@@ -23,13 +23,13 @@ import { Component, OnInit } from '@angular/core';
   ]
 })
 export class NzDemoSelectMultipleComponent implements OnInit {
-  listOfOption: Array<{ label: string; value: string }> = [];
+  listOfOption: string[] = [];
   listOfSelectedValue = ['a10', 'c12'];
 
   ngOnInit(): void {
-    const children: Array<{ label: string; value: string }> = [];
+    const children: string[] = [];
     for (let i = 10; i < 36; i++) {
-      children.push({ label: i.toString(36) + i, value: i.toString(36) + i });
+      children.push(`${i.toString(36)}${i}`);
     }
     this.listOfOption = children;
   }

diff --git a/components/select/demo/optgroup.ts b/components/select/demo/optgroup.ts
@@ -9,8 +9,9 @@ import { Component } from '@angular/core';
         <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
       </nz-option-group>
       <nz-option-group nzLabel="Engineer">
-        <nz-option nzValue="Tom" nzLabel="tom"></nz-option>
+        <nz-option nzValue="tom" nzLabel="Tom"></nz-option>
       </nz-option-group>
+      <nz-option nzValue="lily" nzLabel="Lily"></nz-option>
     </nz-select>
   `,
   styles: [