feat(module:tree-select): support set nzNotFoundContent (#2740)

NG-ZORRO · Jan 7, 2019 · d9055f5 · d9055f5
1 parent c821d56
commit d9055f5
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 7 deletions.
diff --git a/components/tree-select/doc/index.en-US.md b/components/tree-select/doc/index.en-US.md
@@ -21,6 +21,7 @@ Any data whose entries are defined in a hierarchical manner is fit to use this c
 | `[nzPlaceHolder]` | Placeholder of the select input | string | - |
 | `[nzDisabled]` | Disabled or not | boolean | false |
 | `[nzShowSearch]` | Whether to display a search input in the dropdown menu(valid only in the single mode) | boolean | false |
+| `[nzNotFoundContent]` | Specify content to show when no result matches. | string | - |
 | `[nzDropdownMatchSelectWidth]` | Determine whether the dropdown menu and the select input are the same width | boolean | true |
 | `[nzDropdownStyle]` | To set the style of the dropdown menu | object | - |
 | `[nzMultiple]` | Support multiple or not, will be `true` when enable `nzCheckable`. | boolean | false |

diff --git a/components/tree-select/doc/index.zh-CN.md b/components/tree-select/doc/index.zh-CN.md
@@ -21,6 +21,7 @@ title: TreeSelect
 | `[nzPlaceHolder]` | 选择框默认文字 | string | - |
 | `[nzDisabled]` | 禁用选择器 | boolean | false |
 | `[nzShowSearch]` | 显示搜索框 | boolean | false |
+| `[nzNotFoundContent]` | 当下拉列表为空时显示的内容 | string | - |
 | `[nzDropdownMatchSelectWidth]` | 下拉菜单和选择器同宽 | boolean | true |
 | `[nzDropdownStyle]` | 下拉菜单的样式 | { [key: string]: string; } | - |
 | `[nzMultiple]` | 支持多选（当设置 nzCheckable 时自动变为true） | boolean | false |

diff --git a/components/tree-select/nz-tree-select.component.html b/components/tree-select/nz-tree-select.component.html
@@ -16,6 +16,7 @@
     [ngStyle]="nzDropdownStyle">
     <nz-tree
       #treeRef
+      [hidden]="isNotFound"
       [nzData]="nzNodes"
       [nzMultiple]="nzMultiple"
       [nzSearchValue]="inputValue"
@@ -31,8 +32,12 @@
       (nzClick)="nzTreeClick.emit($event)"
       (nzCheckedKeysChange)="updateSelectedNodes()"
       (nzSelectedKeysChange)="updateSelectedNodes()"
-      (nzCheckBoxChange)="nzTreeCheckBoxChange.emit($event)">
+      (nzCheckBoxChange)="nzTreeCheckBoxChange.emit($event)"
+      (nzSearchValueChange)="setSearchValues($event)">
     </nz-tree>
+    <span *ngIf="isNotFound" class="ant-select-not-found">
+          {{ nzNotFoundContent ? nzNotFoundContent : ('Select.notFoundContent' | nzI18n) }}
+    </span>
   </div>
 </ng-template>
 

diff --git a/components/tree-select/nz-tree-select.component.ts b/components/tree-select/nz-tree-select.component.ts
@@ -87,6 +87,7 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
   @Input() @InputBoolean() nzAsyncData = false;
   @Input() @InputBoolean() nzMultiple = false;
   @Input() @InputBoolean() nzDefaultExpandAll = false;
+  @Input() nzNotFoundContent: string;
   @Input() nzNodes: NzTreeNode[] = [];
   @Input() nzOpen = false;
   @Input() nzSize = 'default';
@@ -108,6 +109,7 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
 
   isComposing = false;
   isDestroy = true;
+  isNotFound = false;
   inputValue = '';
   dropDownClassMap: { [ className: string ]: boolean };
   dropDownPosition: 'top' | 'center' | 'bottom' = 'bottom';
@@ -223,7 +225,7 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
       this.closeDropDown();
     } else {
       this.openDropdown();
-      if (this.nzShowSearch) {
+      if (this.nzShowSearch || this.isMultiple) {
         this.focusOnInput();
       }
     }
@@ -368,14 +370,13 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
       this.updateSelectedNodes();
       const value = this.selectedNodes.map(node => node.key);
       this.value = [ ...value ];
-      if (this.nzShowSearch) {
+      if (this.nzShowSearch || this.isMultiple) {
         this.inputValue = '';
+        this.isNotFound = false;
       }
       if (this.isMultiple) {
         this.onChange(value);
-        if (this.nzShowSearch) {
-          this.focusOnInput();
-        }
+        this.focusOnInput();
       } else {
         this.closeDropDown();
         this.onChange(value.length ? value[ 0 ] : null);
@@ -412,6 +413,14 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
     this.closeDropDown();
   }
 
+  setSearchValues($event: NzFormatEmitEvent): void {
+    Promise.resolve().then(() => {
+      this.isNotFound = (this.nzShowSearch || this.isMultiple)
+        && this.inputValue
+        && $event.matchedKeys.length === 0;
+    });
+  }
+
   updateDropDownClassMap(): void {
     if (this.treeRef && !this.treeRef.nzTreeClass[ 'ant-select-tree' ]) {
       this.treeRef.nzTreeClass = { ...this.treeRef.nzTreeClass, [ 'ant-select-tree' ]: true };

diff --git a/components/tree-select/nz-tree-select.module.ts b/components/tree-select/nz-tree-select.module.ts
@@ -2,12 +2,13 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { NzI18nModule } from '../i18n/nz-i18n.module';
 import { NzIconModule } from '../icon/nz-icon.module';
 import { NzTreeModule } from '../tree/nz-tree.module';
 import { NzTreeSelectComponent } from './nz-tree-select.component';
 
 @NgModule({
-  imports     : [ CommonModule, OverlayModule, FormsModule, NzTreeModule, NzIconModule ],
+  imports     : [ CommonModule, OverlayModule, FormsModule, NzTreeModule, NzIconModule, NzI18nModule ],
   declarations: [ NzTreeSelectComponent ],
   exports     : [ NzTreeSelectComponent ]
 })

diff --git a/components/tree-select/nz-tree-select.spec.ts b/components/tree-select/nz-tree-select.spec.ts
@@ -177,6 +177,23 @@ describe('tree-select component', () => {
       tick();
       expect(treeSelect.nativeElement.querySelector('.ant-select-search--inline')).toBeNull();
     }));
+    it('should display no data', fakeAsync(() => {
+      treeSelectComponent.updateSelectedNodes();
+      fixture.detectChanges();
+      testComponent.showSearch = true;
+      fixture.detectChanges();
+      treeSelect.nativeElement.click();
+      fixture.detectChanges();
+      expect(overlayContainerElement.querySelector('nz-tree').getAttribute('hidden')).toBeNull();
+      expect(overlayContainerElement.querySelector('.ant-select-not-found')).toBeFalsy();
+      fixture.detectChanges();
+      treeSelectComponent.inputValue = 'invalid_value';
+      fixture.detectChanges();
+      tick(200);
+      fixture.detectChanges();
+      expect(overlayContainerElement.querySelector('nz-tree').getAttribute('hidden')).toBe('');
+      expect(overlayContainerElement.querySelector('.ant-select-not-found')).toBeTruthy();
+    }));
     it('should selectedValueDisplay style correct', fakeAsync(() => {
       testComponent.showSearch = true;
       fixture.detectChanges();
@@ -313,6 +330,25 @@ describe('tree-select component', () => {
       expect(treeSelectComponent.selectedNodes.length).toBe(0);
       expect(treeSelectComponent.nzOpen).toBe(false);
     }));
+
+    it('should display no data', fakeAsync(() => {
+      treeSelectComponent.updateSelectedNodes();
+      fixture.detectChanges();
+      testComponent.showSearch = true;
+      fixture.detectChanges();
+      treeSelect.nativeElement.click();
+      fixture.detectChanges();
+      expect(overlayContainerElement.querySelector('nz-tree').getAttribute('hidden')).toBeNull();
+      expect(overlayContainerElement.querySelector('.ant-select-not-found')).toBeFalsy();
+      fixture.detectChanges();
+      treeSelectComponent.inputValue = 'invalid_value';
+      fixture.detectChanges();
+      tick(200);
+      fixture.detectChanges();
+      expect(overlayContainerElement.querySelector('nz-tree').getAttribute('hidden')).toBe('');
+      expect(overlayContainerElement.querySelector('.ant-select-not-found')).toBeTruthy();
+    }));
+
   });
 
   describe('form', () => {