refactor(module:transfer): sync to antd 4.0

components/transfer/demo/basic.ts

@@ -9,6 +9,7 @@ import { TransferItem } from 'ng-zorro-antd/transfer';
       [nzDisabled]="disabled"
       [nzTitles]="['Source', 'Target']"
       (nzSelectChange)="select($event)"
+      [nzSelectedKeys]="['0', '2']"
       (nzChange)="change($event)"
     >
     </nz-transfer>

components/transfer/doc/index.en-US.md

@@ -38,6 +38,7 @@ import { NzTransferModule } from 'ng-zorro-antd/transfer';
 | `[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<TransferItem[]>` | - |
+| `[nzSelectedKeys]` | Set which items should be selected | `string[]` | - |
 | `[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<TransferChange>` | - |
 | `(nzSearchChange)` | A callback function which is executed when search field are changed | `EventEmitter<TransferSearchChange>` | - |

components/transfer/doc/index.zh-CN.md

@@ -40,6 +40,7 @@ import { NzTransferModule } from 'ng-zorro-antd/transfer';
 | `[nzSearchPlaceholder]` | 搜索框的默认值 | `string` | `'请输入搜索内容'` |
 | `[nzNotFoundContent]` | 当列表为空时显示的内容 | `string` | `'列表为空'` |
 | `[nzCanMove]` | 穿梭时二次校验。**注意：** 穿梭组件内部始终只保留一份数据，二次校验过程中需取消穿梭项则直接删除该项；具体用法见示例。 | `(arg: TransferCanMove) => Observable<TransferItem[]>` | - |
+| `[nzSelectedKeys]` | 设置哪些项应该被选中 | `string[]` | - |
 | `[nzTargetKeys]` | 显示在右侧框数据的 key 集合 | `string[]` | - |
 | `(nzChange)` | 选项在两栏之间转移时的回调函数 | `EventEmitter<TransferChange>` | - |
 | `(nzSearchChange)` | 搜索框内容时改变时的回调函数 | `EventEmitter<TransferSearchChange>` | - |

components/transfer/public-api.ts

@@ -7,7 +7,7 @@
  */
 
 export * from './interface';
-export { NzTransferListComponent } from './nz-transfer-list.component';
-export { NzTransferSearchComponent } from './nz-transfer-search.component';
-export { NzTransferComponent } from './nz-transfer.component';
-export { NzTransferModule } from './nz-transfer.module';
+export { NzTransferListComponent } from './transfer-list.component';
+export { NzTransferSearchComponent } from './transfer-search.component';
+export { NzTransferComponent } from './transfer.component';
+export { NzTransferModule } from './transfer.module';

components/transfer/nz-transfer-list.component.ts → components/transfer/transfer-list.component.ts

@@ -23,7 +23,87 @@ import { TransferItem } from './interface';
   selector: 'nz-transfer-list',
   exportAs: 'nzTransferList',
   preserveWhitespaces: false,
-  templateUrl: './nz-transfer-list.component.html',
+  template: `
+    <ng-template #defaultRenderList>
+      <ul *ngIf="stat.shownCount > 0" class="ant-transfer-list-content">
+        <div class="LazyLoad" *ngFor="let item of dataSource">
+          <li
+            *ngIf="!item.hide"
+            (click)="onItemSelect(item)"
+            class="ant-transfer-list-content-item"
+            [ngClass]="{ 'ant-transfer-list-content-item-disabled': disabled || item.disabled }"
+          >
+            <label
+              nz-checkbox
+              [nzChecked]="item.checked"
+              (nzCheckedChange)="onItemSelect(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>
+        </div>
+      </ul>
+      <div *ngIf="stat.shownCount === 0" class="ant-transfer-list-body-not-found">
+        <nz-embed-empty [nzComponentName]="'transfer'" [specificContent]="notFoundContent"></nz-embed-empty>
+      </div>
+    </ng-template>
+    <div class="ant-transfer-list-header">
+      <label
+        *ngIf="showSelectAll"
+        nz-checkbox
+        [nzChecked]="stat.checkAll"
+        (nzCheckedChange)="onItemSelectAll($event)"
+        [nzIndeterminate]="stat.checkHalf"
+        [nzDisabled]="stat.shownCount == 0 || disabled"
+      >
+      </label>
+      <span class="ant-transfer-list-header-selected">
+        <span
+          >{{ (stat.checkCount > 0 ? stat.checkCount + '/' : '') + stat.shownCount }}
+          {{ dataSource.length > 1 ? itemsUnit : itemUnit }}</span
+        >
+        <span *ngIf="titleText" class="ant-transfer-list-header-title">{{ titleText }}</span>
+      </span>
+    </div>
+    <div
+      class="{{ showSearch ? 'ant-transfer-list-body ant-transfer-list-body-with-search' : 'ant-transfer-list-body' }}"
+      [ngClass]="{ 'ant-transfer__nodata': stat.shownCount === 0 }"
+    >
+      <div *ngIf="showSearch" class="ant-transfer-list-body-search-wrapper">
+        <div
+          nz-transfer-search
+          (valueChanged)="handleFilter($event)"
+          (valueClear)="handleClear()"
+          [placeholder]="searchPlaceholder"
+          [disabled]="disabled"
+          [value]="filter"
+        ></div>
+      </div>
+      <ng-container *ngIf="renderList; else defaultRenderList">
+        <div class="ant-transfer-list-body-customize-wrapper">
+          <ng-container
+            *ngTemplateOutlet="
+              renderList;
+              context: {
+                $implicit: dataSource,
+                direction: direction,
+                disabled: disabled,
+                onItemSelectAll: onItemSelectAll,
+                onItemSelect: onItemSelect,
+                stat: stat
+              }
+            "
+          ></ng-container>
+        </div>
+      </ng-container>
+    </div>
+    <div *ngIf="footer" class="ant-transfer-list-footer">
+      <ng-template [ngTemplateOutlet]="footer" [ngTemplateOutletContext]="{ $implicit: direction }"></ng-template>
+    </div>
+  `,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {

components/transfer/nz-transfer-search.component.ts → components/transfer/transfer-search.component.ts

@@ -21,7 +21,22 @@ import {
   selector: '[nz-transfer-search]',
   exportAs: 'nzTransferSearch',
   preserveWhitespaces: false,
-  templateUrl: './nz-transfer-search.component.html',
+  template: `
+    <input
+      [(ngModel)]="value"
+      (ngModelChange)="_handle()"
+      [disabled]="disabled"
+      [placeholder]="placeholder"
+      class="ant-input ant-transfer-list-search"
+      [ngClass]="{ 'ant-input-disabled': disabled }"
+    />
+    <a *ngIf="value && value.length > 0; else def" class="ant-transfer-list-search-action" (click)="_clear()">
+      <i nz-icon nzType="close-circle"></i>
+    </a>
+    <ng-template #def>
+      <span class="ant-transfer-list-search-action"><i nz-icon nzType="search"></i></span>
+    </ng-template>
+  `,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })