From 526cb0583b583605a20273d4460ad84977625508 Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Sun, 22 Jul 2018 11:07:06 +0800 Subject: [PATCH] feat(module:tree-select): support custom display in the trigger (#1832) close #1823 --- components/tree-select/demo/basic.ts | 1 + components/tree-select/demo/checkable.ts | 53 ++++++++++--------- components/tree-select/doc/index.en-US.md | 1 + components/tree-select/doc/index.zh-CN.md | 1 + .../tree-select/nz-tree-select.component.html | 8 +-- .../tree-select/nz-tree-select.component.ts | 27 +++++----- 6 files changed, 47 insertions(+), 44 deletions(-) diff --git a/components/tree-select/demo/basic.ts b/components/tree-select/demo/basic.ts index 251656cc882..2ce5b5d6a50 100755 --- 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 index 65b10cfe85c..ef4b2f30b72 100755 --- a/components/tree-select/demo/checkable.ts +++ b/components/tree-select/demo/checkable.ts @@ -1,5 +1,5 @@ -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', @@ -7,43 +7,44 @@ import {NzFormatEmitEvent, NzTreeNode} from 'ng-zorro-antd'; ` }) 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 index a29fa11e5a3..34cd3bd9c62 100755 --- 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 | - | diff --git a/components/tree-select/doc/index.zh-CN.md b/components/tree-select/doc/index.zh-CN.md index ad84166a64e..bad779d14bc 100755 --- 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 | - | diff --git a/components/tree-select/nz-tree-select.component.html b/components/tree-select/nz-tree-select.component.html index bfbec465747..959e0db9120 100644 --- a/components/tree-select/nz-tree-select.component.html +++ b/components/tree-select/nz-tree-select.component.html @@ -53,9 +53,9 @@
- {{ selectedNodes[0].title }} + {{ nzDisplayWith(selectedNodes[0]) }}
- {{ node.title }} + {{ nzDisplayWith(node) }}
  • diff --git a/components/tree-select/nz-tree-select.component.ts b/components/tree-select/nz-tree-select.component.ts index caf3190dcc3..1cc6b3d8048 100644 --- 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(); @Output() nzCleared = new EventEmitter(); @Output() nzRemoved = new EventEmitter(); - @Output() nzExpandChange = new EventEmitter(); @Output() nzTreeClick = new EventEmitter(); @Output() nzTreeCheckBoxChange = new EventEmitter();