From 1619f30c7e6b927e13ad211473364bde260cd75e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A1=E8=89=B2?= Date: Fri, 21 Jun 2019 17:48:57 +0800 Subject: [PATCH] feat(module:transfer): add nzShowSelectAll & nzRenderList properties (#3588) - close #3567, close #2870 --- components/transfer/demo/table-transfer.md | 14 +++ components/transfer/demo/table-transfer.ts | 95 ++++++++++++++++++ components/transfer/demo/tree-transfer.md | 14 +++ components/transfer/demo/tree-transfer.ts | 98 +++++++++++++++++++ components/transfer/doc/index.en-US.md | 14 ++- components/transfer/doc/index.zh-CN.md | 14 ++- components/transfer/interface.ts | 16 +-- .../transfer/nz-transfer-list.component.html | 44 ++++++--- .../transfer/nz-transfer-list.component.ts | 32 +++--- .../transfer/nz-transfer.component.html | 4 + components/transfer/nz-transfer.component.ts | 46 ++++++--- components/transfer/transfer.spec.ts | 51 +++++++--- 12 files changed, 378 insertions(+), 64 deletions(-) create mode 100644 components/transfer/demo/table-transfer.md create mode 100644 components/transfer/demo/table-transfer.ts create mode 100644 components/transfer/demo/tree-transfer.md create mode 100644 components/transfer/demo/tree-transfer.ts diff --git a/components/transfer/demo/table-transfer.md b/components/transfer/demo/table-transfer.md new file mode 100644 index 00000000000..d6583e48ee7 --- /dev/null +++ b/components/transfer/demo/table-transfer.md @@ -0,0 +1,14 @@ +--- +order: 5 +title: + zh-CN: 表格穿梭框 + en-US: Table Transfer +--- + +## zh-CN + +使用 Table 组件作为自定义渲染列表。 + +## en-US + +Customize render list with Table component. diff --git a/components/transfer/demo/table-transfer.ts b/components/transfer/demo/table-transfer.ts new file mode 100644 index 00000000000..4bfded04ea7 --- /dev/null +++ b/components/transfer/demo/table-transfer.ts @@ -0,0 +1,95 @@ +import { Component, OnInit } from '@angular/core'; +import { TransferItem } from 'ng-zorro-antd/transfer'; + +@Component({ + selector: 'nz-demo-transfer-table-transfer', + template: ` + + + + + + + Name + Tag + Description + + + + + + {{ data.title }} + + {{ data.tag }} + + {{ data.description }} + + + + + +
+ + +
+ ` +}) +export class NzDemoTransferTableTransferComponent implements OnInit { + // tslint:disable-next-line:no-any + list: any[] = []; + disabled = false; + showSearch = false; + + ngOnInit(): void { + for (let i = 0; i < 20; i++) { + this.list.push({ + key: i.toString(), + title: `content${i + 1}`, + description: `description of content${i + 1}`, + disabled: i % 4 === 0, + tag: ['cat', 'dog', 'bird'][i % 3] + }); + } + + [2, 3].forEach(idx => (this.list[idx].direction = 'right')); + } + + convertItems(items: TransferItem[]): TransferItem[] { + return items.filter(i => !i.hide); + } + + select(ret: {}): void { + console.log('nzSelectChange', ret); + } + + change(ret: {}): void { + console.log('nzChange', ret); + } +} diff --git a/components/transfer/demo/tree-transfer.md b/components/transfer/demo/tree-transfer.md new file mode 100644 index 00000000000..8593e5fd442 --- /dev/null +++ b/components/transfer/demo/tree-transfer.md @@ -0,0 +1,14 @@ +--- +order: 6 +title: + zh-CN: 树穿梭框 + en-US: Tree Transfer +--- + +## zh-CN + +使用 Tree 组件作为自定义渲染列表。 + +## en-US + +Customize render list with Tree component. diff --git a/components/transfer/demo/tree-transfer.ts b/components/transfer/demo/tree-transfer.ts new file mode 100644 index 00000000000..5787c61e70c --- /dev/null +++ b/components/transfer/demo/tree-transfer.ts @@ -0,0 +1,98 @@ +// tslint:disable: no-any +import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core'; +import { NzTreeNode } from 'ng-zorro-antd/core'; +import { TransferChange, TransferItem } from 'ng-zorro-antd/transfer'; +import { NzTreeComponent } from 'ng-zorro-antd/tree'; + +@Component({ + selector: 'nz-demo-transfer-tree-transfer', + template: ` + + + + + + + + {{ node.title }} + + + + + `, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class NzDemoTransferTreeTransferComponent { + @ViewChild('tree', { static: true }) tree: NzTreeComponent; + list: any[] = [ + { id: 1, parentid: 0, title: 'parent 1' }, + { id: 2, parentid: 1, title: 'leaf 1-1', disabled: true, isLeaf: true }, + { id: 3, parentid: 1, title: 'leaf 1-2', isLeaf: true } + ]; + treeData = this.generateTree(this.list); + checkedNodeList: NzTreeNode[] = []; + + private generateTree(arr: TransferItem[]): TransferItem[] { + const tree: TransferItem[] = []; + const mappedArr: any = {}; + let arrElem: TransferItem; + let mappedElem: TransferItem; + + for (let i = 0, len = arr.length; i < len; i++) { + arrElem = arr[i]; + mappedArr[arrElem.id] = { ...arrElem }; + mappedArr[arrElem.id].children = []; + } + + for (const id in mappedArr) { + if (mappedArr.hasOwnProperty(id)) { + mappedElem = mappedArr[id]; + if (mappedElem.parentid) { + mappedArr[mappedElem.parentid].children.push(mappedElem); + } else { + tree.push(mappedElem); + } + } + } + return tree; + } + + checkBoxChange(node: NzTreeNode, onItemSelect: (item: TransferItem) => void): void { + if (node.isDisabled) { + return; + } + node.isChecked = !node.isChecked; + if (node.isChecked) { + this.checkedNodeList.push(node); + } else { + const idx = this.checkedNodeList.indexOf(node); + if (idx !== -1) { + this.checkedNodeList.splice(idx, 1); + } + } + const item = this.list.find(w => w.id === node.origin.id); + onItemSelect(item); + } + + change(ret: TransferChange): void { + const isDisabled = ret.to === 'right'; + this.checkedNodeList.forEach(node => { + node.isDisabled = isDisabled; + node.isChecked = isDisabled; + }); + } +} diff --git a/components/transfer/doc/index.en-US.md b/components/transfer/doc/index.en-US.md index 6b428dd9423..c9dd2b8f534 100644 --- a/components/transfer/doc/index.en-US.md +++ b/components/transfer/doc/index.en-US.md @@ -27,13 +27,14 @@ import { NzTransferModule } from 'ng-zorro-antd'; | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | -| `[nzDataSource]` | Used for setting the source data. Except the elements whose keys are `direction: 'right'` prop. | `TransferItem[]` | `[]` | +| `[nzDataSource]` | Used for setting the source data. Except the elements whose keys are `direction: 'right'` prop , or using `nzTargetKeys` prop. | `TransferItem[]` | `[]` | | `[nzDisabled]` | Whether disabled transfer | `boolean` | `false` | | `[nzTitles]` | A set of titles that are sorted from left to right. | `string[]` | `['', '']` | | `[nzOperations]` | A set of operations that are sorted from bottom to top. | `string[]` | `['', '']` | | `[nzListStyle]` | A custom CSS style used for rendering the transfer columns. equal `ngStyle` | `object` | - | | `[nzItemUnit]` | single unit | `string` | `'item'` | | `[nzItemsUnit]` | multiple unit | `string` | `'items'` | +| `[nzRenderList]` | Customize render list, please refer to the case. | `Array｜null>` | `[null, null]` | | `[nzRender]` | The function to generate the item shown on a column. please refer to the case. | `TemplateRef` | - | | `[nzFooter]` | A function used for rendering the footer. please refer to the case. | `TemplateRef` | - | | `[nzShowSearch]` | If included, a search box is shown on each column. | `boolean` | `false` | @@ -41,6 +42,7 @@ import { NzTransferModule } from 'ng-zorro-antd'; | `[nzSearchPlaceholder]` | The hint text of the search box. | `string` | `'Search here'` | | `[nzNotFoundContent]` | Text to display when a column is empty. | `string` | `'The list is empty'` | | `[nzCanMove]` | Two verification when transfer choice box. please refer to the case. | `(arg: TransferCanMove) => Observable` | - | +| `[nzTargetKeys]` | A set of keys of elements that are listed on the right column. | `string[]` | - | | `(nzChange)` | A callback function that is executed when the transfer between columns is complete. | `EventEmitter` | - | | `(nzSearchChange)` | A callback function which is executed when search field are changed | `EventEmitter` | - | | `(nzSelectChange)` | A callback function which is executed when selected items are changed. | `EventEmitter` | - | @@ -75,3 +77,13 @@ import { NzTransferModule } from 'ng-zorro-antd'; | -------- | ----------- | ---- | ------- | | direction | data direction | `'left'｜'right'` | - | | value | Search keyword | `string` | - | + +#### nzRenderList + +| Property | Description | Type | Default | +| -------- | ----------- | ---- | ------- | +| `direction` | List render direction | `'left'｜'right'` | - | +| `disabled` | Disable list or not | `boolean` | - | +| `items` | Filtered items | `TransferItem[]` | - | +| `onItemSelect` | Select item | `(item: TransferItem) => void` | - | +| `onItemSelectAll` | Select a group of items | `(selected: boolean) => void` | - | diff --git a/components/transfer/doc/index.zh-CN.md b/components/transfer/doc/index.zh-CN.md index fae0c2252f5..ad95ecdd0fd 100644 --- a/components/transfer/doc/index.zh-CN.md +++ b/components/transfer/doc/index.zh-CN.md @@ -29,13 +29,14 @@ import { NzTransferModule } from 'ng-zorro-antd'; | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| `[nzDataSource]` | 数据源，其中若数据属性 `direction: 'right'` 将会被渲染到右边一栏中 | `TransferItem[]` | `[]` | +| `[nzDataSource]` | 数据源，其中若数据属性 `direction: 'right'` 将会被渲染到右边一栏中或使用 `nzTargetKeys` | `TransferItem[]` | `[]` | | `[nzDisabled]` | 是否禁用 | `boolean` | `false` | | `[nzTitles]` | 标题集合，顺序从左至右 | `string[]` | `['', '']` | | `[nzOperations]` | 操作文案集合，顺序从下至上 | `string[]` | `['', '']` | | `[nzListStyle]` | 两个穿梭框的自定义样式，等同 `ngStyle` | `object` | - | | `[nzItemUnit]` | 单数单位 | `string` | `'项目'` | | `[nzItemsUnit]` | 复数单位 | `string` | `'项目'` | +| `[nzRenderList]` | 自定义渲染列表，见示例 | `Array｜null>` | `[null, null]` | | `[nzRender]` | 每行数据渲染模板，见示例 | `TemplateRef` | - | | `[nzFooter]` | 底部渲染模板，见示例 | `TemplateRef` | - | | `[nzShowSearch]` | 是否显示搜索框 | `boolean` | `false` | @@ -43,6 +44,7 @@ import { NzTransferModule } from 'ng-zorro-antd'; | `[nzSearchPlaceholder]` | 搜索框的默认值 | `string` | `'请输入搜索内容'` | | `[nzNotFoundContent]` | 当列表为空时显示的内容 | `string` | `'列表为空'` | | `[nzCanMove]` | 穿梭时二次校验。**注意：** 穿梭组件内部始终只保留一份数据，二次校验过程中需取消穿梭项则直接删除该项；具体用法见示例。 | `(arg: TransferCanMove) => Observable` | - | +| `[nzTargetKeys]` | 显示在右侧框数据的 key 集合 | `string[]` | - | | `(nzChange)` | 选项在两栏之间转移时的回调函数 | `EventEmitter` | - | | `(nzSearchChange)` | 搜索框内容时改变时的回调函数 | `EventEmitter` | - | | `(nzSelectChange)` | 选中项发生改变时的回调函数 | `EventEmitter` | - | @@ -77,3 +79,13 @@ import { NzTransferModule } from 'ng-zorro-antd'; | --- | --- | --- | --- | | direction | 数据方向 | `'left'｜'right'` | - | | value | 搜索关键词 | `string` | - | + +#### nzRenderList + +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| `direction` | 渲染列表的方向 | `'left'｜'right'` | - | +| `disabled` | 是否禁用列表 | `boolean` | - | +| `items` | 过滤后的数据 | `TransferItem[]` | - | +| `onItemSelect` | 勾选条目 | `(item: TransferItem) => void` | - | +| `onItemSelectAll` | 勾选一组条目 | `(selected: boolean) => void` | - | diff --git a/components/transfer/interface.ts b/components/transfer/interface.ts index 841bed37380..0467b9b08d4 100644 --- a/components/transfer/interface.ts +++ b/components/transfer/interface.ts @@ -6,34 +6,36 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ +export type TransferDirection = 'left' | 'right'; + export interface TransferItem { title: string; - direction?: 'left' | 'right'; + direction?: TransferDirection; disabled?: boolean; checked?: boolean; - _hiden?: boolean; + hide?: boolean; // tslint:disable-next-line:no-any [key: string]: any; } export interface TransferCanMove { - direction: string; + direction: TransferDirection; list: TransferItem[]; } export interface TransferChange { - from: string; - to: string; + from: TransferDirection; + to: TransferDirection; list: TransferItem[]; } export interface TransferSearchChange { - direction: string; + direction: TransferDirection; value: string; } export interface TransferSelectChange { - direction: string; + direction: TransferDirection; checked: boolean; list: TransferItem[]; item?: TransferItem; diff --git a/components/transfer/nz-transfer-list.component.html b/components/transfer/nz-transfer-list.component.html index 3bc8566945b..629bb848f0f 100644 --- a/components/transfer/nz-transfer-list.component.html +++ b/components/transfer/nz-transfer-list.component.html @@ -1,5 +1,22 @@ + +
    +
    +
  • + +
    • +
    +
+
+ +
+
- @@ -17,21 +34,18 @@ [disabled]="disabled" [value]="filter">
-
    -
    -
  • - -
    • + +
    +
    -
-
- -
+
diff --git a/components/transfer/nz-transfer-list.component.ts b/components/transfer/nz-transfer-list.component.ts index 3953181fa3f..661df41a66a 100644 --- a/components/transfer/nz-transfer-list.component.ts +++ b/components/transfer/nz-transfer-list.component.ts @@ -39,6 +39,7 @@ export class NzTransferListComponent implements OnChanges, OnInit { @Input() direction = ''; @Input() titleText = ''; + @Input() showSelectAll = true; @Input() dataSource: TransferItem[] = []; @@ -51,6 +52,7 @@ export class NzTransferListComponent implements OnChanges, OnInit { @Input() notFoundContent: string; @Input() filterOption: (inputValue: string, item: TransferItem) => boolean; + @Input() renderList: TemplateRef; @Input() render: TemplateRef; @Input() footer: TemplateRef; @@ -84,21 +86,30 @@ export class NzTransferListComponent implements OnChanges, OnInit { shownCount: 0 }; - onHandleSelectAll(status: boolean): void { + onItemSelect = (item: TransferItem) => { + if (this.disabled || item.disabled) { + return; + } + item.checked = !item.checked; + this.updateCheckStatus(); + this.handleSelect.emit(item); + }; + + onItemSelectAll = (status: boolean) => { this.dataSource.forEach(item => { - if (!item.disabled && !item._hiden) { + if (!item.disabled && !item.hide) { item.checked = status; } }); this.updateCheckStatus(); this.handleSelectAll.emit(status); - } + }; private updateCheckStatus(): void { const validCount = this.dataSource.filter(w => !w.disabled).length; this.stat.checkCount = this.dataSource.filter(w => w.checked && !w.disabled).length; - this.stat.shownCount = this.dataSource.filter(w => !w._hiden).length; + this.stat.shownCount = this.dataSource.filter(w => !w.hide).length; this.stat.checkAll = validCount > 0 && validCount === this.stat.checkCount; this.stat.checkHalf = this.stat.checkCount > 0 && !this.stat.checkAll; } @@ -110,9 +121,9 @@ export class NzTransferListComponent implements OnChanges, OnInit { handleFilter(value: string): void { this.filter = value; this.dataSource.forEach(item => { - item._hiden = value.length > 0 && !this.matchFilter(value, item); + item.hide = value.length > 0 && !this.matchFilter(value, item); }); - this.stat.shownCount = this.dataSource.filter(w => !w._hiden).length; + this.stat.shownCount = this.dataSource.filter(w => !w.hide).length; this.filterChange.emit({ direction: this.direction, value }); } @@ -149,13 +160,4 @@ export class NzTransferListComponent implements OnChanges, OnInit { this.updateCheckStatus(); this.cdr.markForCheck(); } - - _handleSelect(item: TransferItem): void { - if (this.disabled || item.disabled) { - return; - } - item.checked = !item.checked; - this.updateCheckStatus(); - this.handleSelect.emit(item); - } } diff --git a/components/transfer/nz-transfer.component.html b/components/transfer/nz-transfer.component.html index 9392e07476a..d8382e752ef 100644 --- a/components/transfer/nz-transfer.component.html +++ b/components/transfer/nz-transfer.component.html @@ -1,9 +1,11 @@ (); @@ -62,9 +70,11 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { @Input() nzTitles: string[] = ['', '']; @Input() nzOperations: string[] = []; @Input() nzListStyle: object; + @Input() @InputBoolean() nzShowSelectAll = true; @Input() nzItemUnit: string; @Input() nzItemsUnit: string; @Input() nzCanMove: (arg: TransferCanMove) => Observable = (arg: TransferCanMove) => of(arg.list); + @Input() nzRenderList: Array | null> = [null, null]; @Input() nzRender: TemplateRef; @Input() nzFooter: TemplateRef; @Input() @InputBoolean() nzShowSearch = false; @@ -92,8 +102,10 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { this.rightDataSource = []; this.nzDataSource.forEach(record => { if (record.direction === 'right') { + record.direction = 'right'; this.rightDataSource.push(record); } else { + record.direction = 'left'; this.leftDataSource.push(record); } }); @@ -109,13 +121,13 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { handleLeftSelect = (item: TransferItem) => this.handleSelect('left', !!item.checked, item); handleRightSelect = (item: TransferItem) => this.handleSelect('right', !!item.checked, item); - handleSelect(direction: 'left' | 'right', checked: boolean, item?: TransferItem): void { + handleSelect(direction: TransferDirection, checked: boolean, item?: TransferItem): void { const list = this.getCheckedData(direction); this.updateOperationStatus(direction, list.length); this.nzSelectChange.emit({ direction, checked, list, item }); } - handleFilterChange(ret: { direction: string; value: string }): void { + handleFilterChange(ret: { direction: TransferDirection; value: string }): void { this.nzSearchChange.emit(ret); } @@ -134,7 +146,7 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { moveToLeft = () => this.moveTo('left'); moveToRight = () => this.moveTo('right'); - moveTo(direction: string): void { + moveTo(direction: TransferDirection): void { const oppositeDirection = direction === 'left' ? 'right' : 'left'; this.updateOperationStatus(oppositeDirection, 0); const datasource = direction === 'left' ? this.rightDataSource : this.leftDataSource; @@ -145,13 +157,14 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { ); } - private truthMoveTo(direction: string, list: TransferItem[]): void { + private truthMoveTo(direction: TransferDirection, list: TransferItem[]): void { const oppositeDirection = direction === 'left' ? 'right' : 'left'; const datasource = direction === 'left' ? this.rightDataSource : this.leftDataSource; const targetDatasource = direction === 'left' ? this.leftDataSource : this.rightDataSource; for (const item of list) { item.checked = false; - item._hiden = false; + item.hide = false; + item.direction = direction; datasource.splice(datasource.indexOf(item), 1); } targetDatasource.splice(0, 0, ...list); @@ -169,12 +182,21 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { constructor( private cdr: ChangeDetectorRef, private i18n: NzI18nService, - renderer: Renderer2, - elementRef: ElementRef + private nzUpdateHostClassService: NzUpdateHostClassService, + private elementRef: ElementRef, + renderer: Renderer2 ) { renderer.addClass(elementRef.nativeElement, 'ant-transfer'); } + private setClassMap(): void { + const prefixCls = 'ant-transfer'; + this.nzUpdateHostClassService.updateHostClass(this.elementRef.nativeElement, { + [`${prefixCls}-disabled`]: this.nzDisabled, + [`${prefixCls}-customize-list`]: this.nzRenderList.some(i => !!i) + }); + } + private markForCheckAllList(): void { if (!this.lists) { return; @@ -187,10 +209,12 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { this.locale = this.i18n.getLocaleData('Transfer'); this.markForCheckAllList(); }); + this.setClassMap(); } ngOnChanges(changes: SimpleChanges): void { - if ('nzDataSource' in changes) { + this.setClassMap(); + if (changes.nzDataSource || changes.nzTargetKeys) { this.splitDataSource(); this.updateOperationStatus('left'); this.updateOperationStatus('right'); diff --git a/components/transfer/transfer.spec.ts b/components/transfer/transfer.spec.ts index 88cf62c6b68..f19ee602906 100644 --- a/components/transfer/transfer.spec.ts +++ b/components/transfer/transfer.spec.ts @@ -1,5 +1,5 @@ // tslint:disable:no-any no-parameter-reassignment -import { Component, DebugElement, Injector, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { Component, DebugElement, Injector, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; import { fakeAsync, tick, ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -10,7 +10,7 @@ import { NzIconTestModule } from 'ng-zorro-antd/icon/testing'; import en_US from '../i18n/languages/en_US'; import { NzI18nService } from '../i18n/nz-i18n.service'; import { NzTransferComponent, NzTransferModule } from './index'; -import { TransferCanMove, TransferItem } from './interface'; +import { TransferCanMove, TransferDirection, TransferItem } from './interface'; const COUNT = 21; const LEFTCOUNT = 2; @@ -75,7 +75,7 @@ describe('transfer', () => { pageObject.checkItem('left', 0).search('left', '1'); pageObject.rightBtn.click(); fixture.detectChanges(); - expect(instance.comp.rightDataSource.filter(w => !w._hiden).length).toBe(COUNT - LEFTCOUNT + 1); + expect(instance.comp.rightDataSource.filter(w => !w.hide).length).toBe(COUNT - LEFTCOUNT + 1); }); it('should be custom filter option', () => { @@ -197,6 +197,21 @@ describe('transfer', () => { }); }); + it('#nzShowSelectAll', () => { + const cls = `[data-direction="left"] .ant-transfer-list-header .ant-checkbox`; + expect(dl.queryAll(By.css(cls)).length).toBe(1); + instance.nzShowSelectAll = false; + fixture.detectChanges(); + expect(dl.queryAll(By.css(cls)).length).toBe(0); + }); + + it('#nzRenderList', () => { + instance.nzRenderList = [ instance.renderListTpl, instance.renderListTpl ]; + fixture.detectChanges(); + expect(dl.queryAll(By.css('.ant-transfer-customize-list')).length).toBe(1); + expect(dl.queryAll(By.css('.transfer-renderList')).length).toBe(2); + }); + it('should be uncheck all when two verification error', () => { instance.canMove = (arg: TransferCanMove): Observable => { return of(arg.list).pipe( @@ -306,7 +321,7 @@ describe('transfer', () => { return dl.query(By.css('[data-direction="right"]')).nativeElement as HTMLElement; } - transfer(direction: 'left' | 'right', index: number | number[]): this { + transfer(direction: TransferDirection, index: number | number[]): this { if (!Array.isArray(index)) { index = [index]; } @@ -317,7 +332,7 @@ describe('transfer', () => { } checkItem( - direction: 'left' | 'right', + direction: TransferDirection, index: number | number[], cls: string = '.ant-transfer-list-content-item label' ): this { @@ -333,7 +348,7 @@ describe('transfer', () => { return this; } - search(direction: 'left' | 'right', value: string): this { + search(direction: TransferDirection, value: string): this { const ipt = (direction === 'left' ? this.leftList : this.rightList).querySelector( '.ant-transfer-list-search' ) as HTMLInputElement; @@ -360,6 +375,8 @@ describe('transfer', () => { { (nzSelectChange)="select($event)" (nzChange)="change($event)" > - - - + +

renderList

+ + + + `, styleUrls: ['./style/index.less'], encapsulation: ViewEncapsulation.None }) class TestTransferComponent implements OnInit { @ViewChild('comp', { static: false }) comp: NzTransferComponent; + @ViewChild('renderList', { static: false }) renderListTpl: TemplateRef; nzDataSource: any[] = []; + nzRenderList: Array | null> = [null, null]; nzDisabled = false; + nzShowSelectAll = true; nzTitles = ['Source', 'Target']; nzOperations = ['to right', 'to left']; nzItemUnit = 'item'; @@ -410,7 +433,7 @@ class TestTransferComponent implements OnInit { key: string; title: string; description: string; - direction: string; + direction: TransferDirection; icon: string; disabled: boolean; }> = []; @@ -419,7 +442,7 @@ class TestTransferComponent implements OnInit { key: i.toString(), title: `content${i + 1}`, description: `description of content${i + 1}`, - direction: i >= LEFTCOUNT ? 'right' : '', + direction: i >= LEFTCOUNT ? 'right' : 'left', icon: `frown-o`, disabled: i === 20 }); @@ -443,16 +466,16 @@ class TestTransferComponent implements OnInit { }) class TestTransferCustomRenderComponent implements OnInit { @ViewChild('comp', { static: false }) comp: NzTransferComponent; - nzDataSource: Array<{ key: string; title: string; description: string; direction: string; icon: string }> = []; + nzDataSource: Array<{ key: string; title: string; description: string; direction: TransferDirection; icon: string }> = []; ngOnInit(): void { - const ret: Array<{ key: string; title: string; description: string; direction: string; icon: string }> = []; + const ret: Array<{ key: string; title: string; description: string; direction: TransferDirection; icon: string }> = []; for (let i = 0; i < COUNT; i++) { ret.push({ key: i.toString(), title: `content${i + 1}`, description: `description of content${i + 1}`, - direction: i >= LEFTCOUNT ? 'right' : '', + direction: i >= LEFTCOUNT ? 'right' : 'left', icon: `frown-o` }); }