feat(module:TreeSelect): optional debounce

components/tree-select/doc/index.en-US.md

@@ -45,6 +45,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd';
 | `[nzDisplayWith]` | How to display the selected node value in the trigger | `(node: NzTreeNode) => string` | `(node: NzTreeNode) => node.title` |
 | `[nzMaxTagCount]` | Max tag count to show| number | - |
 | `[nzMaxTagPlaceholder]` | Placeholder for not showing tags | TemplateRef<{ $implicit: NzTreeNode[] }> | - |
+| `[nzDebounceTime]` | time of debounce during input search value | number | 0 |
 | `(nzExpandChange)` | Callback function for when a treeNode is expanded or collapsed |`EventEmitter<NzFormatEmitEvent>` | - |
 
 #### Methods

components/tree-select/doc/index.zh-CN.md

@@ -45,6 +45,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd';
 | `[nzDisplayWith]` | 如何在输入框显示所选的节点值的方法 | `(node: NzTreeNode) => string` | `(node: NzTreeNode) => node.title` |
 | `[nzMaxTagCount]` | 最多显示多少个 tag | number | - |
 | `[nzMaxTagPlaceholder]` | 隐藏 tag 时显示的内容 | TemplateRef<{ $implicit: NzTreeNode[] }> | - |
+| `[nzDebounceTime]` | 在输入搜索值期间的去抖动时间 | number | 0 |
 | `(nzExpandChange)` | 点击展开树节点图标调用 | `EventEmitter<NzFormatEmitEvent>` | - |
 
 #### 方法

components/tree-select/nz-tree-select.component.html

@@ -37,7 +37,8 @@
       nzSelectMode
       [nzData]="nzNodes"
       [nzMultiple]="nzMultiple"
-      [nzSearchValue]="inputValue"
+      [nzSearchValue]="searchValue"
+      [nzSearchValue]="searchValue"
       [nzShowIcon]="nzShowIcon"
       [nzCheckable]="nzCheckable"
       [nzAsyncData]="nzAsyncData"

components/tree-select/nz-tree-select.component.ts

@@ -31,8 +31,8 @@ import {
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
-import { merge, of as observableOf, Subscription } from 'rxjs';
-import { filter, tap } from 'rxjs/operators';
+import { merge, of as observableOf, Observable, Subject, Subscription } from 'rxjs';
+import { debounceTime, filter, tap } from 'rxjs/operators';
 
 import {
   isNotNil,
@@ -120,6 +120,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
   @Input() nzDisplayWith: (node: NzTreeNode) => string | undefined = (node: NzTreeNode) => node.title;
   @Input() nzMaxTagCount: number;
   @Input() nzMaxTagPlaceholder: TemplateRef<{ $implicit: NzTreeNode[] }>;
+  @Input() nzDebounceTime: number = 0;
   @Output() readonly nzOpenChange = new EventEmitter<boolean>();
   @Output() readonly nzCleared = new EventEmitter<void>();
   @Output() readonly nzRemoved = new EventEmitter<NzTreeNode>();
@@ -143,6 +144,9 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
   selectionChangeSubscription: Subscription;
   selectedNodes: NzTreeNode[] = [];
   value: string[] = [];
+  searchValue = '';
+  searchValue$: Subject<string> = new Subject();
+  searchValueChangeSubscription: Subscription;
 
   onChange: (value: string[] | string | null) => void;
   onTouched: () => void = () => null;
@@ -200,6 +204,9 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
     this.isDestroy = true;
     this.closeDropDown();
     this.selectionChangeSubscription.unsubscribe();
+    if (this.searchValueChangeSubscription) {
+      this.searchValueChangeSubscription.unsubscribe();
+    }
   }
 
   setDisabledState(isDisabled: boolean): void {
@@ -211,6 +218,12 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
     if (changes.hasOwnProperty('nzNodes')) {
       this.updateSelectedNodes(true);
     }
+    if (changes.hasOwnProperty('nzDebounceTime')) {
+      if (this.searchValueChangeSubscription) {
+        this.searchValueChangeSubscription.unsubscribe();
+      }
+      this.searchValueChangeSubscription = this.subscribeSearchValueChange();
+    }
   }
 
   writeValue(value: string[] | string): void {
@@ -289,6 +302,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
 
   setInputValue(value: string): void {
     this.inputValue = value;
+    this.searchValue$.next(value);
     this.updateInputWidth();
     this.updatePosition();
   }
@@ -347,6 +361,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
       this.value = [...value];
       if (this.nzShowSearch || this.isMultiple) {
         this.inputValue = '';
+        this.searchValue$.next('');
         this.isNotFound = false;
       }
       if (this.isMultiple) {
@@ -360,6 +375,15 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
     });
   }
 
+  subscribeSearchValueChange(): Subscription {
+    const searchValueObservable: Observable<string> = this.searchValue$
+      .asObservable()
+      .pipe(debounceTime(this.nzDebounceTime));
+    return searchValueObservable.subscribe(value => {
+      this.searchValue = value;
+    });
+  }
+
   updateSelectedNodes(init: boolean = false): void {
     if (init) {
       const nodes = this.coerceTreeNodes(this.nzNodes);

components/tree-select/nz-tree-select.spec.ts

@@ -247,6 +247,23 @@ describe('tree-select component', () => {
         `+ ${testComponent.value.length - testComponent.maxTagCount} ...`
       );
     }));
+    it('should debounce work', fakeAsync(() => {
+      fixture.detectChanges();
+      testComponent.nzSelectTreeComponent.setInputValue('abc');
+      fixture.detectChanges();
+      expect(testComponent.nzSelectTreeComponent.searchValue === 'abc');
+      tick(200);
+      fixture.detectChanges();
+      expect(testComponent.nzSelectTreeComponent.searchValue === 'abc');
+      testComponent.debounceTime = 200;
+      fixture.detectChanges();
+      testComponent.nzSelectTreeComponent.setInputValue('123');
+      fixture.detectChanges();
+      expect(testComponent.nzSelectTreeComponent.searchValue === 'abc');
+      tick(200);
+      fixture.detectChanges();
+      expect(testComponent.nzSelectTreeComponent.searchValue === '123');
+    }));
   });
 
   describe('checkable', () => {
@@ -497,6 +514,7 @@ describe('tree-select component', () => {
       [nzMultiple]="multiple"
       [nzMaxTagCount]="maxTagCount"
       [nzDropdownStyle]="{ height: '120px' }"
+      [nzDebounceTime]="debounceTime"
     >
     </nz-tree-select>
   `
@@ -509,6 +527,7 @@ export class NzTestTreeSelectBasicComponent {
   allowClear = false;
   disabled = false;
   showSearch = false;
+  debounceTime = 0;
   dropdownMatchSelectWidth = true;
   multiple = false;
   maxTagCount = Infinity;