fix(module:transfer): fix invalid trigger checked event in blank area (…

…NG-ZORRO#3161) * fix(module:transfer): fix invalid trigger checked event in blank area - fix can't show no found * fix(module:transfer): fix forced to display when the original item is hidden close NG-ZORRO#3160 close NG-ZORRO#3159
Ricbet · Apr 9, 2020 · 0875f9a · 0875f9a
1 parent 25bfa6f
commit 0875f9a
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 19 deletions.
diff --git a/components/transfer/nz-transfer-list.component.html b/components/transfer/nz-transfer-list.component.html
@@ -17,18 +17,19 @@
       [disabled]="disabled"
       [value]="filter"></div>
   </div>
-  <ul class="ant-transfer-list-content">
-    <ng-container *ngFor="let item of dataSource">
-      <li *ngIf="!item._hiden"
+  <ul *ngIf="stat.shownCount > 0" class="ant-transfer-list-content">
+    <div class="LazyLoad" *ngFor="let item of dataSource">
+      <li *ngIf="!item._hiden" (click)="_handleSelect(item)"
         class="ant-transfer-list-content-item" [ngClass]="{'ant-transfer-list-content-item-disabled': disabled || item.disabled}">
-        <label nz-checkbox [nzChecked]="item.checked" (nzCheckedChange)="_handleSelect(item)" [nzDisabled]="disabled || item.disabled">
+        <label nz-checkbox [nzChecked]="item.checked" (nzCheckedChange)="_handleSelect(item)"
+          (click)="$event.stopPropagation()" [nzDisabled]="disabled || item.disabled">
           <ng-container *ngIf="!render; else renderContainer">{{ item.title }}</ng-container>
           <ng-template #renderContainer [ngTemplateOutlet]="render" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
         </label>
       </li>
-    </ng-container>
+    </div>
   </ul>
-  <div *ngIf="dataSource.length === 0" class="ant-transfer-list-body-not-found">
+  <div *ngIf="stat.shownCount === 0" class="ant-transfer-list-body-not-found">
     <nz-embed-empty [nzComponentName]="'transfer'" [specificContent]="notFoundContent"></nz-embed-empty>
   </div>
 </div>

diff --git a/components/transfer/nz-transfer.component.ts b/components/transfer/nz-transfer.component.ts
@@ -142,9 +142,10 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy {
     const targetDatasource = direction === 'left' ? this.leftDataSource : this.rightDataSource;
     for (const item of list) {
       item.checked = false;
-      targetDatasource.push(item);
+      item._hiden = false;
       datasource.splice(datasource.indexOf(item), 1);
     }
+    targetDatasource.splice(0, 0, ...list);
     this.updateOperationStatus(oppositeDirection);
     this.nzChange.emit({
       from: oppositeDirection,

diff --git a/components/transfer/transfer.spec.ts b/components/transfer/transfer.spec.ts
@@ -71,6 +71,13 @@ describe('transfer', () => {
       expect(pageObject.rightList.querySelectorAll('.ant-transfer-list-content-item').length).toBe(DISABLED);
     });
 
+    it('should be forced to display when the original item is hidden', () => {
+      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);
+    });
+
     it('should be custom filter option', () => {
       instance.nzFilterOption = (inputValue: string, item: any): boolean => {
         return item.description.indexOf(inputValue) > -1;
@@ -99,6 +106,12 @@ describe('transfer', () => {
       expect(instance.comp.leftDataSource.filter(w => w.checked).length).toBe(0);
     });
 
+    it('should be checkbox is toggle select by blank area', () => {
+      expect(instance.comp.leftDataSource.filter(w => w.checked).length).toBe(0);
+      pageObject.checkItem('left', 0, '.ant-transfer-list-content-item');
+      expect(instance.comp.leftDataSource.filter(w => w.checked).length).toBe(1);
+    });
+
     it('should be checkbox is disabled toggle select when setting disabled prop', () => {
       instance.nzDataSource = [{ title: `content`, disabled: true }];
       fixture.detectChanges();
@@ -131,26 +144,26 @@ describe('transfer', () => {
       it('should be the left and right list have data', () => {
         instance.nzDataSource = [{ title: `content0`, direction: 'right' }, { title: `content1` }];
         fixture.detectChanges();
-        expect(pageObject.rightList.querySelector('.ant-transfer-list-body-not-found')).toBeFalsy();
-        expect(pageObject.leftList.querySelector('.ant-transfer-list-body-not-found')).toBeFalsy();
+        expect(pageObject.rightList.querySelector('nz-embed-empty')).toBeFalsy();
+        expect(pageObject.leftList.querySelector('nz-embed-empty')).toBeFalsy();
       });
       it('should be the right list is no data', () => {
         instance.nzDataSource = [{ title: `content0` }, { title: `content1` }];
         fixture.detectChanges();
-        expect(pageObject.rightList.querySelector('.ant-transfer-list-body-not-found')).toBeTruthy();
-        expect(pageObject.leftList.querySelector('.ant-transfer-list-body-not-found')).toBeFalsy();
+        expect(pageObject.rightList.querySelector('nz-embed-empty')).toBeTruthy();
+        expect(pageObject.leftList.querySelector('nz-embed-empty')).toBeFalsy();
       });
       it('should be the left list is no data', () => {
         instance.nzDataSource = [{ title: `content0`, direction: 'right' }];
         fixture.detectChanges();
-        expect(pageObject.rightList.querySelector('.ant-transfer-list-body-not-found')).toBeFalsy();
-        expect(pageObject.leftList.querySelector('.ant-transfer-list-body-not-found')).toBeTruthy();
+        expect(pageObject.rightList.querySelector('nz-embed-empty')).toBeFalsy();
+        expect(pageObject.leftList.querySelector('nz-embed-empty')).toBeTruthy();
       });
       it('should be the left and right list is no data', () => {
         instance.nzDataSource = [];
         fixture.detectChanges();
-        expect(pageObject.rightList.querySelector('.ant-transfer-list-body-not-found')).toBeTruthy();
-        expect(pageObject.leftList.querySelector('.ant-transfer-list-body-not-found')).toBeTruthy();
+        expect(pageObject.rightList.querySelector('nz-embed-empty')).toBeTruthy();
+        expect(pageObject.leftList.querySelector('nz-embed-empty')).toBeTruthy();
       });
     });
 
@@ -303,13 +316,15 @@ describe('transfer', () => {
       return this;
     }
 
-    checkItem(direction: 'left' | 'right', index: number | number[]): this {
+    checkItem(
+      direction: 'left' | 'right',
+      index: number | number[],
+      cls: string = '.ant-transfer-list-content-item label'
+    ): this {
       if (!Array.isArray(index)) {
         index = [index];
       }
-      const items = (direction === 'left' ? this.leftList : this.rightList).querySelectorAll(
-        '.ant-transfer-list-content-item label'
-      );
+      const items = (direction === 'left' ? this.leftList : this.rightList).querySelectorAll(cls);
       for (const idx of index) {
         (items[idx] as HTMLElement).click();
         fixture.detectChanges();