feat(module:transfer): support nzOneWay, nzPagination, nzSelectAllLabels, nzOperationStyle

components/i18n/nz-i18n.interface.ts

@@ -110,6 +110,12 @@ export interface NzTransferI18nInterface {
   searchPlaceholder?: string;
   itemUnit?: string;
   itemsUnit?: string;
+  remove?: string;
+  selectCurrent?: string;
+  removeCurrent?: string;
+  selectAll?: string;
+  removeAll?: string;
+  selectInvert?: string;
 }
 
 export interface NzUploadI18nInterface {

components/transfer/demo/basic.ts

@@ -6,13 +6,17 @@ import { TransferItem } from 'ng-zorro-antd/transfer';
   selector: 'nz-demo-transfer-basic',
   template: `
     <nz-transfer
+      #transfer
       [nzDataSource]="list"
       [nzDisabled]="disabled"
-      [nzTitles]="['Source', 'Target']"
+      [nzTitles]="['Source', titleTpl]"
       (nzSelectChange)="select($event)"
       [nzSelectedKeys]="['0', '2']"
       (nzChange)="change($event)"
     ></nz-transfer>
+    <ng-template #titleTpl let-dir>
+      <a (click)="selectAll()">全选所有</a>
+    </ng-template>
     <div style="margin-top: 8px;">
       <nz-switch [(ngModel)]="disabled" nzCheckedChildren="disabled" nzUnCheckedChildren="disabled"></nz-switch>
       <div></div>
@@ -32,7 +36,7 @@ export class NzDemoTransferBasicComponent implements OnInit {
       });
     }
 
-    [2, 3].forEach(idx => (this.list[idx].direction = 'right'));
+    [2, 3, 12, 13, 14].forEach(idx => (this.list[idx].direction = 'right'));
   }
 
   select(ret: {}): void {
@@ -42,4 +46,11 @@ export class NzDemoTransferBasicComponent implements OnInit {
   change(ret: {}): void {
     console.log('nzChange', ret);
   }
+
+  selectAll(): void {
+    this.list = [...this.list].map(i => {
+      if (i.direction === 'right') i.checked = true;
+      return i;
+    });
+  }
 }

components/transfer/demo/custom-select-all-labels.md

@@ -0,0 +1,15 @@
+---
+order: 99
+debug: true
+title:
+  zh-CN: 自定义全选文字
+  en-US: Custom Select All Labels
+---
+
+## zh-CN
+
+自定义穿梭框全选按钮的文字。
+
+## en-US
+
+Custom the labels for select all checkboxs.

components/transfer/demo/custom-select-all-labels.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+
+import { TransferItem } from 'ng-zorro-antd/transfer';
+
+@Component({
+  selector: 'nz-demo-transfer-custom-select-all-labels',
+  template: `
+    <nz-transfer
+      [nzDataSource]="list"
+      (nzSelectChange)="select($event)"
+      (nzChange)="change($event)"
+      [nzSelectAllLabels]="selectAllLabels"
+    ></nz-transfer>
+  `
+})
+export class NzDemoTransferCustomSelectAllLabelsComponent implements OnInit {
+  list: TransferItem[] = [];
+  disabled = false;
+
+  selectAllLabels = [
+    'Select All',
+    ({ selectedCount, totalCount }: { selectedCount: number; totalCount: number }) => `${selectedCount}/${totalCount}`
+  ];
+
+  ngOnInit(): void {
+    for (let i = 0; i < 20; i++) {
+      this.list.push({
+        key: i.toString(),
+        title: `content${i + 1}`,
+        disabled: i % 3 < 1
+      });
+    }
+
+    [2, 3, 12, 13, 14].forEach(idx => (this.list[idx].direction = 'right'));
+  }
+
+  select(ret: {}): void {
+    console.log('nzSelectChange', ret);
+  }
+
+  change(ret: {}): void {
+    console.log('nzChange', ret);
+  }
+}

components/transfer/demo/large-data.md

@@ -0,0 +1,14 @@
+---
+order: 4
+title:
+  zh-CN: 分页
+  en-US: Pagination
+---
+
+## zh-CN
+
+大数据下使用分页。
+
+## en-US
+
+large count of items with `nzPagination`.

components/transfer/demo/large-data.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+
+import { TransferItem } from 'ng-zorro-antd/transfer';
+
+@Component({
+  selector: 'nz-demo-transfer-large-data',
+  template: `
+    <nz-transfer
+      [nzDataSource]="list"
+      (nzSelectChange)="select($event)"
+      (nzChange)="change($event)"
+      [nzOneWay]="oneWay"
+      nzPagination
+    ></nz-transfer>
+    <div style="margin-top: 8px;">
+      <nz-switch [(ngModel)]="oneWay" nzCheckedChildren="oneWay" nzUnCheckedChildren="oneWay"></nz-switch>
+    </div>
+  `
+})
+export class NzDemoTransferLargeDataComponent implements OnInit {
+  list: TransferItem[] = [];
+  oneWay = false;
+
+  ngOnInit(): void {
+    for (let i = 0; i < 2000; i++) {
+      this.list.push({
+        key: i.toString(),
+        title: `content${i + 1}`,
+        disabled: i % 3 < 1
+      });
+    }
+
+    [2, 3, 12, 13, 14].forEach(idx => (this.list[idx].direction = 'right'));
+  }
+
+  select(ret: {}): void {
+    console.log('nzSelectChange', ret);
+  }
+
+  change(ret: {}): void {
+    console.log('nzChange', ret);
+  }
+}

components/transfer/demo/one-way.md

@@ -0,0 +1,14 @@
+---
+order: 0.1
+title:
+  zh-CN: 单向样式
+  en-US: One Way
+---
+
+## zh-CN
+
+通过 `nzOneWay` 将 Transfer 转为单向样式。
+
+## en-US
+
+Use `nzOneWay` to makes Transfer to one way style.

components/transfer/demo/one-way.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+
+import { TransferItem } from 'ng-zorro-antd/transfer';
+
+@Component({
+  selector: 'nz-demo-transfer-one-way',
+  template: `
+    <nz-transfer
+      [nzDataSource]="list"
+      (nzSelectChange)="select($event)"
+      (nzChange)="change($event)"
+      [nzOneWay]="oneWay"
+    ></nz-transfer>
+    <div style="margin-top: 8px;">
+      <nz-switch [(ngModel)]="oneWay" nzCheckedChildren="oneWay" nzUnCheckedChildren="oneWay"></nz-switch>
+    </div>
+  `
+})
+export class NzDemoTransferOneWayComponent implements OnInit {
+  list: TransferItem[] = [];
+  oneWay = true;
+
+  ngOnInit(): void {
+    for (let i = 0; i < 20; i++) {
+      this.list.push({
+        key: i.toString(),
+        title: `content${i + 1}`,
+        disabled: i % 3 < 1
+      });
+    }
+
+    [2, 3, 12, 13, 14].forEach(idx => (this.list[idx].direction = 'right'));
+  }
+
+  select(ret: {}): void {
+    console.log('nzSelectChange', ret);
+  }
+
+  change(ret: {}): void {
+    console.log('nzChange', ret);
+  }
+}

components/transfer/demo/table-transfer.ts

@@ -9,7 +9,6 @@ import { TransferChange, TransferItem, TransferSelectChange } from 'ng-zorro-ant
       [nzDataSource]="list"
       [nzDisabled]="disabled"
       [nzShowSearch]="showSearch"
-      [nzShowSelectAll]="false"
       [nzRenderList]="[renderList, renderList]"
       (nzSelectChange)="select($event)"
       (nzChange)="change($event)"

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

@@ -26,8 +26,10 @@ import { NzTransferModule } from 'ng-zorro-antd/transfer';
 | -------- | ----------- | ---- | ------- |
 | `[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[]` | `['', '']` |
+| `[nzTitles]` | A set of titles that are sorted from left to right. | `Array<TemplateRef<{ $implicit: 'left' \| 'right' }> \| string>` | `['', '']` |
+| `[nzSelectAllLabels]` | A set of customized labels for select all checkboxs on the header | `Array<string \| ((info: { selectedCount: number; totalCount: number }) => string) \| null>` | - |
 | `[nzOperations]` | A set of operations that are sorted from bottom to top. | `string[]` | `['', '']` |
+| `[nzOperationStyle]` | A custom CSS style used for rendering the operations column. equal `ngStyle` | `object` | - |
 | `[nzListStyle]` | A custom CSS style used for rendering the transfer columns. equal `ngStyle` | `object` | - |
 | `[nzItemUnit]` | single unit | `string` | `'item'` |
 | `[nzItemsUnit]` | multiple unit | `string` | `'items'` |
@@ -41,6 +43,8 @@ import { NzTransferModule } from 'ng-zorro-antd/transfer';
 | `[nzCanMove]` | Two verification when transfer choice box. please refer to the case. | `(arg: TransferCanMove) => Observable<TransferItem[]>` | - |
 | `[nzSelectedKeys]` | A set of keys of selected items. | `string[]` | - |
 | `[nzTargetKeys]` | A set of keys of elements that are listed on the right column. | `string[]` | - |
+| `[nzOneWay]` | Display as single direction style | `boolean` | `false` |
+| `[nzPagination]` | Use pagination. **Not work in `render` props** | `boolean \| TransferPaginationType` | `false` |
 | `(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>` | - |
 | `(nzSelectChange)` | A callback function which is executed when selected items are changed. | `EventEmitter<TransferSearchChange>` | - |

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

@@ -28,8 +28,10 @@ import { NzTransferModule } from 'ng-zorro-antd/transfer';
 | --- | --- | --- | --- |
 | `[nzDataSource]` | 数据源，其中若数据属性 `direction: 'right'` 将会被渲染到右边一栏中或使用 `nzTargetKeys` | `TransferItem[]` | `[]` |
 | `[nzDisabled]` | 是否禁用 | `boolean` | `false` |
-| `[nzTitles]` | 标题集合，顺序从左至右 | `string[]` | `['', '']` |
+| `[nzTitles]` | 标题集合，顺序从左至右 | `Array<TemplateRef<{ $implicit: 'left' \| 'right' }> \| string>` | `['', '']` |
+| `[nzSelectAllLabels]` | 自定义顶部多选框标题的集合，顺序从左至右 | `Array<string \| ((info: { selectedCount: number; totalCount: number }) => string) \| null>` | - |
 | `[nzOperations]` | 操作文案集合，顺序从下至上 | `string[]` | `['', '']` |
+| `[nzOperationStyle]` | 操作栏的自定义样式，等同 `ngStyle` | `object` | - |
 | `[nzListStyle]` | 两个穿梭框的自定义样式，等同 `ngStyle` | `object` | - |
 | `[nzItemUnit]` | 单数单位 | `string` | `'项目'` |
 | `[nzItemsUnit]` | 复数单位 | `string` | `'项目'` |
@@ -43,6 +45,8 @@ import { NzTransferModule } from 'ng-zorro-antd/transfer';
 | `[nzCanMove]` | 穿梭时二次校验。**注意：** 穿梭组件内部始终只保留一份数据，二次校验过程中需取消穿梭项则直接删除该项；具体用法见示例。 | `(arg: TransferCanMove) => Observable<TransferItem[]>` | - |
 | `[nzSelectedKeys]` | 设置被选中的 key 集合 | `string[]` | - |
 | `[nzTargetKeys]` | 显示在右侧框数据的 key 集合 | `string[]` | - |
+| `[nzOneWay]` | 展示为单向样式 | `boolean` | `false` |
+| `[nzPagination]` | 使用分页样式，**自定义渲染列表下无效** | `boolean \| TransferPaginationType` | `false` |
 | `(nzChange)` | 选项在两栏之间转移时的回调函数 | `EventEmitter<TransferChange>` | - |
 | `(nzSearchChange)` | 搜索框内容时改变时的回调函数 | `EventEmitter<TransferSearchChange>` | - |
 | `(nzSelectChange)` | 选中项发生改变时的回调函数 | `EventEmitter<TransferSearchChange>` | - |

components/transfer/interface.ts

@@ -25,6 +25,7 @@ export interface TransferChange {
   from: TransferDirection;
   to: TransferDirection;
   list: TransferItem[];
+  current: number;
 }
 
 export interface TransferSearchChange {
@@ -37,4 +38,9 @@ export interface TransferSelectChange {
   checked: boolean;
   list: TransferItem[];
   item?: TransferItem;
+  current?: number;
+}
+
+export interface TransferPaginationType {
+  pageSize?: number;
 }

components/transfer/public-api.ts

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