Skip to content

Commit

Permalink
feat(module:tree-select): support set the max count for tags (NG-ZORR…
Browse files Browse the repository at this point in the history
  • Loading branch information
hsuanxyz authored and Ricbet committed Apr 9, 2020
1 parent de84893 commit 5e6dddc
Show file tree
Hide file tree
Showing 9 changed files with 65 additions and 7 deletions.
2 changes: 2 additions & 0 deletions components/select/doc/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@ Select component to select value from options.
| `[nzMenuItemSelectedIcon]` | The custom menuItemSelected icon | `TemplateRef<void>` | - |
| `[nzTokenSeparators]` | Separator used to tokenize on tag/multiple mode | `string[]` | `[]` |
| `[nzLoading]` | indicate loading state | boolean | false |
| `[nzMaxTagCount]` | Max tag count to show| number | - |
| `[nzMaxTagPlaceholder]` | Placeholder for not showing tags | TemplateRef<{ $implicit: any[] }> | - |
| `(ngModelChange)` | Current selected nz-option value change callback. | `EventEmitter<any[]>` | - |
| `(nzOpenChange)` | dropdown expand change callback | `EventEmitter<boolean>` | `false` |
| `(nzScrollToBottom)` | Called when dropdown scrolls to bottom | `EventEmitter<void>` | - |
Expand Down
2 changes: 2 additions & 0 deletions components/select/doc/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ title: Select
| `[nzMenuItemSelectedIcon]` | 自定义当前选中的条目图标 | `TemplateRef<void>` | - |
| `[nzTokenSeparators]` | 在 tags 和 multiple 模式下自动分词的分隔符 | `string[]` | `[]` |
| `[nzLoading]` | 加载中状态 | boolean | `false` |
| `[nzMaxTagCount]` | 最多显示多少个 tag | number | - |
| `[nzMaxTagPlaceholder]` | 隐藏 tag 时显示的内容 | TemplateRef<{ $implicit: any[] }> | - |
| `(ngModelChange)` | 选中的 nz-option 发生变化时,调用此函数 | `EventEmitter<any[]>` | - |
| `(nzOpenChange)` | 下拉菜单打开状态变化回调 | `EventEmitter<boolean>` | - |
| `(nzScrollToBottom)` | 下拉列表滚动到底部的回调 | `EventEmitter<void>` | - |
Expand Down
4 changes: 2 additions & 2 deletions components/tree-select/demo/multiple.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ title:

## zh-CN

多选的树选择。
多选的树选择,例子中通过 `nzMaxTagCount` 限制最多显示3个选项

## en-US

Multiple selection usage.
Multiple selection usage, max 3 option will display at the same time by `nzMaxTagCount`.
7 changes: 6 additions & 1 deletion components/tree-select/demo/multiple.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,19 @@ import { Component, OnInit } from '@angular/core';
selector: 'nz-demo-tree-select-multiple',
template: `
<nz-tree-select style="width: 250px"
nzPlaceHolder="Please select"
[nzMaxTagCount]="3"
[nzMaxTagPlaceholder]="omittedPlaceHolder"
[nzNodes]="nodes"
[nzDefaultExpandAll]="true"
[nzAllowClear]="false"
nzPlaceHolder="Please select"
[(ngModel)]="value"
[nzMultiple]="true"
(ngModelChange)="onChange($event)">
</nz-tree-select>
<ng-template #omittedPlaceHolder let-omittedValues>
and {{omittedValues.length}} more...
</ng-template>
`
})

Expand Down
2 changes: 2 additions & 0 deletions components/tree-select/doc/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,6 @@ Any data whose entries are defined in a hierarchical manner is fit to use this c
| `[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` |
| `[nzMaxTagCount]` | Max tag count to show| number | - |
| `[nzMaxTagPlaceholder]` | Placeholder for not showing tags | TemplateRef<{ $implicit: NzTreeNode[] }> | - |
| `(nzExpandChange)` | Callback function for when a treeNode is expanded or collapsed |`EventEmitter<NzFormatEmitEvent>` | - |
2 changes: 2 additions & 0 deletions components/tree-select/doc/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,6 @@ title: TreeSelect
| `[nzDefaultExpandAll]` | 默认展开所有树节点 | `boolean` | `false` |
| `[nzDefaultExpandedKeys]` | 默认展开指定的树节点 | `string[]` | - |
| `[nzDisplayWith]` | 如何在输入框显示所选的节点值的方法 | `(node: NzTreeNode) => string` | `(node: NzTreeNode) => node.title` |
| `[nzMaxTagCount]` | 最多显示多少个 tag | number | - |
| `[nzMaxTagPlaceholder]` | 隐藏 tag 时显示的内容 | TemplateRef<{ $implicit: NzTreeNode[] }> | - |
| `(nzExpandChange)` | 点击展开树节点图标调用 | `EventEmitter<NzFormatEmitEvent>` | - |
17 changes: 16 additions & 1 deletion components/tree-select/nz-tree-select.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@
class="ant-select-selection__placeholder">
{{ nzPlaceHolder }}
</div>
<ng-container *ngFor="let node of selectedNodes; trackBy:trackValue">
<ng-container *ngFor="let node of selectedNodes | slice: 0 : nzMaxTagCount; trackBy:trackValue">
<li
[@zoomMotion]
[attr.title]="nzDisplayWith(node)"
Expand All @@ -114,6 +114,21 @@
<span class="ant-select-selection__choice__content">{{ nzDisplayWith(node) }}</span>
</li>
</ng-container>
<li [@zoomMotion]
*ngIf="selectedNodes.length > nzMaxTagCount"
class="ant-select-selection__choice">
<div class="ant-select-selection__choice__content">
<ng-container *ngIf="nzMaxTagPlaceholder">
<ng-template
[ngTemplateOutlet]="nzMaxTagPlaceholder"
[ngTemplateOutletContext]="{ $implicit: selectedNodes | slice: nzMaxTagCount}">
</ng-template>
</ng-container>
<ng-container *ngIf="!nzMaxTagPlaceholder">
+ {{ selectedNodes.length - nzMaxTagCount }} ...
</ng-container>
</div>
</li>
<li class="ant-select-search ant-select-search--inline">
<ng-template [ngTemplateOutlet]="inputTemplate"></ng-template>
</li>
Expand Down
13 changes: 11 additions & 2 deletions components/tree-select/nz-tree-select.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
Output,
Renderer2,
SimpleChanges,
TemplateRef,
ViewChild
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
Expand All @@ -30,6 +31,7 @@ import { filter, tap } from 'rxjs/operators';

import { slideMotion } from '../core/animation/slide';
import { zoomMotion } from '../core/animation/zoom';
import { NzSizeLDSType } from '../core/types/size';
import { InputBoolean } from '../core/util/convert';
import { NzFormatEmitEvent } from '../tree/interface';
import { NzTreeNode, NzTreeNodeOptions } from '../tree/nz-tree-node';
Expand Down Expand Up @@ -84,11 +86,13 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, OnDe
@Input() nzNotFoundContent: string;
@Input() nzNodes: Array<NzTreeNode | NzTreeNodeOptions> = [];
@Input() nzOpen = false;
@Input() nzSize = 'default';
@Input() nzSize: NzSizeLDSType = 'default';
@Input() nzPlaceHolder = '';
@Input() nzDropdownStyle: { [ key: string ]: string; };
@Input() nzDefaultExpandedKeys: string[] = [];
@Input() nzDisplayWith: (node: NzTreeNode) => string = (node: NzTreeNode) => node.title;
@Input() nzMaxTagCount: number;
@Input() nzMaxTagPlaceholder: TemplateRef<{ $implicit: NzTreeNode[] }>;
@Output() readonly nzOpenChange = new EventEmitter<boolean>();
@Output() readonly nzCleared = new EventEmitter<void>();
@Output() readonly nzRemoved = new EventEmitter<NzTreeNode>();
Expand Down Expand Up @@ -240,7 +244,12 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, OnDe
) {
e.preventDefault();
if (this.selectedNodes.length) {
this.removeSelected(this.selectedNodes[ this.selectedNodes.length - 1 ]);
const removeNode = this.selectedNodes[ this.selectedNodes.length - 1 ];
this.removeSelected(removeNode);
this.nzTreeService.$statusChange.next({
'eventName': 'removeSelect',
'node' : removeNode
});
}
}
}
Expand Down
23 changes: 22 additions & 1 deletion components/tree-select/nz-tree-select.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,23 @@ describe('tree-select component', () => {
expect(selectedValueEl.style.display).toBe('none');
expect(selectedValueEl.style.opacity).toBe('1');
}));
it('should max tag count work', fakeAsync(() => {
testComponent.multiple = true;
testComponent.value = [ '1001', '10001', '100011', '100012' ];
fixture.detectChanges();
tick(200);
fixture.detectChanges();
expect(treeSelect.nativeElement.querySelectorAll('.ant-select-selection__choice').length).toBe(4);
testComponent.maxTagCount = 2;
fixture.detectChanges();
tick(200);
fixture.detectChanges();
expect(treeSelect.nativeElement.querySelectorAll('.ant-select-selection__choice').length).toBe(3);
const maxTagPlaceholderElement = treeSelect.nativeElement.querySelectorAll('.ant-select-selection__choice')[2]
.querySelector('.ant-select-selection__choice__content');
expect(maxTagPlaceholderElement).toBeTruthy();
expect(maxTagPlaceholderElement.innerText.trim()).toBe(`+ ${testComponent.value.length - testComponent.maxTagCount} ...`);
}));
});

describe('checkable', () => {
Expand Down Expand Up @@ -450,19 +467,23 @@ describe('tree-select component', () => {
[nzDropdownMatchSelectWidth]="dropdownMatchSelectWidth"
[nzDisabled]="disabled"
[nzShowSearch]="showSearch"
[nzMultiple]="multiple"
[nzMaxTagCount]="maxTagCount"
[nzDropdownStyle]="{ 'height': '120px' }">
</nz-tree-select>
`
})
export class NzTestTreeSelectBasicComponent {
@ViewChild(NzTreeSelectComponent) nzSelectTreeComponent: NzTreeSelectComponent;
expandKeys = [ '1001', '10001' ];
value = '10001';
value: string | string[] = '10001';
size = 'default';
allowClear = false;
disabled = false;
showSearch = false;
dropdownMatchSelectWidth = true;
multiple = false;
maxTagCount = Infinity;
nodes = [
new NzTreeNode({
title : 'root1',
Expand Down

0 comments on commit 5e6dddc

Please sign in to comment.