feat(module:tree-select): support custom display in the trigger (NG-Z…

…ORRO#1832) close NG-ZORRO#1823
hsuanxyz · Jul 22, 2018 · 526cb05 · 526cb05
1 parent b2a6d09
commit 526cb05
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 44 deletions.
diff --git a/components/tree-select/demo/basic.ts b/components/tree-select/demo/basic.ts
@@ -8,6 +8,7 @@ import { NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd';
       style="width: 250px"
       [nzDefaultExpandedKeys]="expandKeys"
       [nzNodes]="nodes"
+      nzShowSearch
       nzPlaceHolder="Please select"
       [(ngModel)]="value"
       (ngModelChange)="onChange($event)">

diff --git a/components/tree-select/demo/checkable.ts b/components/tree-select/demo/checkable.ts
@@ -1,49 +1,50 @@
-import {Component, OnInit} from '@angular/core';
-import {NzFormatEmitEvent, NzTreeNode} from 'ng-zorro-antd';
+import { Component, OnInit } from '@angular/core';
+import { NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd';
 
 @Component({
   selector: 'nz-demo-tree-select-checkable',
   template: `
     <nz-tree-select
       style="width: 250px"
       [nzNodes]="nodes"
+      nzShowSearch
+      nzCheckable
       nzPlaceHolder="Please select"
       [(ngModel)]="value"
-      [nzCheckable]="true"
       (ngModelChange)="onChange($event)">
     </nz-tree-select>`
 })
 
 export class NzDemoTreeSelectCheckableComponent implements OnInit {
 
-  value: string[] = ['10001', '10022'];
+  value: string[] = [ '10001', '10022' ];
   nodes = [
     new NzTreeNode({
-      title: 'root1',
-      key: '1001',
+      title   : 'root1',
+      key     : '1001',
       children: [
         {
-          title: 'child1',
-          key: '10001',
+          title   : 'child1',
+          key     : '10001',
           children: [
             {
-              title: 'child1.1',
-              key: '100011',
+              title   : 'child1.1',
+              key     : '100011',
               children: []
             },
             {
-              title: 'child1.2',
-              key: '100012',
+              title   : 'child1.2',
+              key     : '100012',
               children: [
                 {
-                  title: 'grandchild1.2.1',
-                  key: '1000121',
-                  isLeaf: true,
+                  title   : 'grandchild1.2.1',
+                  key     : '1000121',
+                  isLeaf  : true,
                   disabled: true
                 },
                 {
-                  title: 'grandchild1.2.2',
-                  key: '1000122',
+                  title : 'grandchild1.2.2',
+                  key   : '1000122',
                   isLeaf: true
                 }
               ]
@@ -53,22 +54,22 @@ export class NzDemoTreeSelectCheckableComponent implements OnInit {
       ]
     }),
     new NzTreeNode({
-      title: 'root2',
-      key: '1002',
+      title   : 'root2',
+      key     : '1002',
       children: [
         {
-          title: 'child2.1',
-          key: '10021',
-          children: [],
+          title          : 'child2.1',
+          key            : '10021',
+          children       : [],
           disableCheckbox: true
         },
         {
-          title: 'child2.2',
-          key: '10022',
+          title   : 'child2.2',
+          key     : '10022',
           children: [
             {
-              title: 'grandchild2.2.1',
-              key: '100221',
+              title : 'grandchild2.2.1',
+              key   : '100221',
               isLeaf: true
             }
           ]

diff --git a/components/tree-select/doc/index.en-US.md b/components/tree-select/doc/index.en-US.md
@@ -32,4 +32,5 @@ Any data whose entries are defined in a hierarchical manner is fit to use this c
 | `[nzNodes]` | Data of the treeNodes | NzTreeNode\[] | \[] |
 | `[nzDefaultExpandAll]` | Whether to expand all treeNodes by default | boolean | false |
 | `[nzDefaultExpandedKeys]` | Default expanded treeNodes | string\[] | - |
+| `[nzDisplayWith]` | How to display the selected node value in the trigger | `(node: NzTreeNode) => string` | `(node: NzTreeNode) => node.title` |
 | `(nzExpandChange)` | Callback function for when a treeNode is expanded or collapsed |EventEmitter<NzFormatEmitEvent\> | - |
diff --git a/components/tree-select/doc/index.zh-CN.md b/components/tree-select/doc/index.zh-CN.md
@@ -32,4 +32,5 @@ title: TreeSelect
 | `[nzNodes]` | treeNodes 数据 | NzTreeNode\[] | \[] |
 | `[nzDefaultExpandAll]` | 默认展开所有树节点 | boolean | false |
 | `[nzDefaultExpandedKeys]` | 默认展开指定的树节点 | string\[] | \[] |
+| `[nzDisplayWith]` | 如何在输入框显示所选的节点值的方法 | `(node: NzTreeNode) => string` | `(node: NzTreeNode) => node.title` |
 | `(nzExpandChange)` | 点击展开树节点图标调用 | EventEmitter<NzFormatEmitEvent\> | - |
diff --git a/components/tree-select/nz-tree-select.component.html b/components/tree-select/nz-tree-select.component.html
@@ -53,9 +53,9 @@
       <div
         *ngIf="selectedNodes.length === 1"
         class="ant-select-selection-selected-value"
-        [attr.title]="selectedNodes[0].title"
+        [attr.title]="nzDisplayWith(selectedNodes[0])"
         [ngStyle]="selectedValueDisplay">
-        {{ selectedNodes[0].title }}
+        {{ nzDisplayWith(selectedNodes[0]) }}
       </div>
 
       <div
@@ -82,12 +82,12 @@
         <li
           [@selectTagAnimation]
           (@selectTagAnimation.done)="updatePosition()"
-          [attr.title]="node.title"
+          [attr.title]="nzDisplayWith(node)"
           [class.ant-select-selection__choice__disabled]="node.isDisabled"
           class="ant-select-selection__choice">
                <span *ngIf="!node.isDisabled" class="ant-select-selection__choice__remove"
                  (click)="removeSelected(node)"></span>
-          <span class="ant-select-selection__choice__content">{{ node.title }}</span>
+          <span class="ant-select-selection__choice__content">{{ nzDisplayWith(node) }}</span>
         </li>
       </ng-container>
       <li class="ant-select-search ant-select-search--inline">

diff --git a/components/tree-select/nz-tree-select.component.ts b/components/tree-select/nz-tree-select.component.ts
@@ -38,6 +38,7 @@ import { filter, tap } from 'rxjs/operators';
 
 import { selectDropDownAnimation } from '../core/animation/select-dropdown-animations';
 import { selectTagAnimation } from '../core/animation/select-tag-animations';
+import { InputBoolean } from '../core/util/convert';
 import { NzFormatEmitEvent } from '../tree/interface';
 import { NzTreeNode } from '../tree/nz-tree-node';
 import { NzTreeComponent } from '../tree/nz-tree.component';
@@ -82,7 +83,7 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
   inputValue = '';
   dropDownClassMap: { [ className: string ]: boolean };
   dropDownPosition: 'top' | 'center' | 'bottom' = 'bottom';
-  overlayRef: OverlayRef | null;
+  overlayRef: OverlayRef;
   portal: TemplatePortal<{}>;
   positionStrategy: FlexibleConnectedPositionStrategy;
   overlayBackdropClickSubscription: Subscription;
@@ -91,28 +92,26 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
   selectedNodes: NzTreeNode[] = [];
   value: string[] = [];
 
+  @Input() @InputBoolean() nzAllowClear = true;
+  @Input() @InputBoolean() nzShowExpand = true;
+  @Input() @InputBoolean() nzDropdownMatchSelectWidth = true;
+  @Input() @InputBoolean() nzCheckable = false;
+  @Input() @InputBoolean() nzShowSearch = false;
+  @Input() @InputBoolean() nzDisabled = false;
+  @Input() @InputBoolean() nzShowLine = false;
+  @Input() @InputBoolean() nzAsyncData = false;
+  @Input() @InputBoolean() nzMultiple = false;
+  @Input() @InputBoolean() nzDefaultExpandAll = false;
   @Input() nzOpen = false;
-  @Input() nzAllowClear = true;
   @Input() nzSize = 'default';
-  @Input() nzDropdownMatchSelectWidth = true;
   @Input() nzPlaceHolder = '';
-  @Input() nzShowSearch = true;
-  @Input() nzDisabled = false;
   @Input() nzDropdownStyle: { [ key: string ]: string; };
-
-  @Input() nzCheckable = false;
-  @Input() nzShowExpand = true;
-  @Input() nzShowLine = false;
-  @Input() nzAsyncData = false;
-  @Input() nzMultiple = false;
-  @Input() nzDefaultExpandAll = false;
   @Input() nzDefaultExpandedKeys: string[] = [];
   @Input() nzNodes: NzTreeNode[] = [];
-
+  @Input() nzDisplayWith: (node: NzTreeNode) => string = (node: NzTreeNode) => node.title;
   @Output() nzOpenChange = new EventEmitter<boolean>();
   @Output() nzCleared = new EventEmitter<void>();
   @Output() nzRemoved = new EventEmitter<NzTreeNode>();
-
   @Output() nzExpandChange = new EventEmitter<NzFormatEmitEvent>();
   @Output() nzTreeClick = new EventEmitter<NzFormatEmitEvent>();
   @Output() nzTreeCheckBoxChange = new EventEmitter<NzFormatEmitEvent>();