fix(module:transfer): fix transfer nzTargetKeys property (#4670)

* fix(module:transfer): fix transfer nzTargetKeys property * fix(module:transfer): includes to indexOf close #4641 close #4360 close #4210
NG-ZORRO · Mar 15, 2020 · 31089a1 · 31089a1
1 parent 4530803
commit 31089a1
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 12 deletions.
diff --git 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"
       >
-        <nz-table #t [nzData]="convertItems(items)" nzSize="small">
+        <nz-table #t [nzData]="items" nzSize="small">
           <thead>
             <tr>
               <th
@@ -80,15 +80,23 @@ export class NzDemoTransferTableTransferComponent implements OnInit {
     [2, 3].forEach(idx => (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
@@ -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<TransferChange>();
@@ -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
@@ -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';