diff --git a/components/transfer/demo/table-transfer.ts b/components/transfer/demo/table-transfer.ts index b3e1a970d73..11b78323ee2 100644 --- a/components/transfer/demo/table-transfer.ts +++ b/components/transfer/demo/table-transfer.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { TransferItem } from 'ng-zorro-antd/transfer'; +import { TransferChange, TransferItem } from 'ng-zorro-antd/transfer'; @Component({ selector: 'nz-demo-transfer-table-transfer', @@ -22,7 +22,7 @@ import { TransferItem } from 'ng-zorro-antd/transfer'; let-onItemSelectAll="onItemSelectAll" let-onItemSelect="onItemSelect" > - + (this.list[idx].direction = 'right')); } - convertItems(items: TransferItem[]): TransferItem[] { - return items.filter(i => !i.hide); - } - - select(ret: {}): void { + select(ret: TransferChange): void { console.log('nzSelectChange', ret); } - change(ret: {}): void { + change(ret: TransferChange): void { console.log('nzChange', ret); + const listKeys = ret.list.map(l => l.key); + const hasOwnKey = (e: TransferItem) => e.hasOwnProperty('key'); + this.list = this.list.map(e => { + if (listKeys.includes(e.key) && hasOwnKey(e)) { + if (ret.to === 'left') { + delete e.hide; + } else if (ret.to === 'right') { + e.hide = false; + } + } + return e; + }); } } diff --git a/components/transfer/nz-transfer.component.ts b/components/transfer/nz-transfer.component.ts index 41deaf295f5..0db05d6d87b 100644 --- a/components/transfer/nz-transfer.component.ts +++ b/components/transfer/nz-transfer.component.ts @@ -28,7 +28,7 @@ import { import { Observable, of, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { InputBoolean, NzUpdateHostClassService } from 'ng-zorro-antd/core'; +import { InputBoolean, NzUpdateHostClassService, toArray } from 'ng-zorro-antd/core'; import { NzI18nService } from 'ng-zorro-antd/i18n'; import { TransferCanMove, TransferChange, TransferDirection, TransferItem, TransferSearchChange, TransferSelectChange } from './interface'; @@ -74,6 +74,7 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { @Input() nzFilterOption: (inputValue: string, item: TransferItem) => boolean; @Input() nzSearchPlaceholder: string; @Input() nzNotFoundContent: string; + @Input() nzTargetKeys: string[] = []; // events @Output() readonly nzChange = new EventEmitter(); @@ -104,7 +105,7 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { }); } - private getCheckedData(direction: string): TransferItem[] { + private getCheckedData(direction: TransferDirection): TransferItem[] { return this[direction === 'left' ? 'leftDataSource' : 'rightDataSource'].filter(w => w.checked); } @@ -131,7 +132,7 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { leftActive = false; rightActive = false; - private updateOperationStatus(direction: string, count?: number): void { + private updateOperationStatus(direction: TransferDirection, count?: number): void { this[direction === 'right' ? 'leftActive' : 'rightActive'] = (typeof count === 'undefined' ? this.getCheckedData(direction).filter(w => !w.disabled).length : count) > 0; } @@ -201,6 +202,17 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { this.lists.forEach(i => i.markForCheck()); } + private handleNzTargetKeys(): void { + const keys = toArray(this.nzTargetKeys); + const hasOwnKey = (e: TransferItem) => e.hasOwnProperty('key'); + this.leftDataSource.forEach(e => { + if (hasOwnKey(e) && keys.indexOf(e.key) !== -1 && !e.disabled) { + e.checked = true; + } + }); + this.moveToRight(); + } + ngOnInit(): void { this.i18n.localeChange.pipe(takeUntil(this.unsubscribe$)).subscribe(() => { this.locale = this.i18n.getLocaleData('Transfer'); @@ -211,13 +223,16 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { ngOnChanges(changes: SimpleChanges): void { this.setClassMap(); - if (changes.nzDataSource || changes.nzTargetKeys) { + if (changes.nzDataSource) { this.splitDataSource(); this.updateOperationStatus('left'); this.updateOperationStatus('right'); this.cdr.detectChanges(); this.markForCheckAllList(); } + if (changes.nzTargetKeys) { + this.handleNzTargetKeys(); + } } ngOnDestroy(): void { diff --git a/components/transfer/transfer.spec.ts b/components/transfer/transfer.spec.ts index f0694301438..3183509aab7 100644 --- a/components/transfer/transfer.spec.ts +++ b/components/transfer/transfer.spec.ts @@ -35,6 +35,20 @@ describe('transfer', () => { }); describe('[default]', () => { + it('should be from left to right when via nzTargetKeys property', () => { + instance.nzTargetKeys = ['0', '1']; + fixture.detectChanges(); + + const leftKeys = instance.comp.leftDataSource.map(e => e.key); + const rightKeys = instance.comp.rightDataSource.map(e => e.key); + + expect(rightKeys).toContain('0'); + expect(leftKeys).not.toContain('0'); + + expect(rightKeys).toContain('1'); + expect(leftKeys).not.toContain('1'); + }); + it('should be from left to right', () => { pageObject .expectLeft(LEFTCOUNT) @@ -383,6 +397,7 @@ describe('transfer', () => { [nzNotFoundContent]="nzNotFoundContent" [nzCanMove]="canMove" [nzFooter]="footer" + [nzTargetKeys]="nzTargetKeys" (nzSearchChange)="search($event)" (nzSelectChange)="select($event)" (nzChange)="change($event)" @@ -406,6 +421,7 @@ class TestTransferComponent implements OnInit { nzDisabled = false; nzShowSelectAll = true; nzTitles = ['Source', 'Target']; + nzTargetKeys: string[] = []; nzOperations = ['to right', 'to left']; nzItemUnit = 'item'; nzItemsUnit = 'items';