refactor(module:transfer): refactor transfer (#2553)

* refactor(module:transfer): refactor transfer

- feat: add nzDisabled property
- need verify design details, ant-design/ant-design#13330

* chore: search muse be disabled

* chore: add encapsulation:ViewEncapsulation.None

ref #2381

components/transfer/demo/basic.ts

@@ -1,20 +1,24 @@
 import { Component, OnInit } from '@angular/core';
-import { NzMessageService } from 'ng-zorro-antd';
 
 @Component({
   selector: 'nz-demo-transfer-basic',
   template: `
     <nz-transfer
       [nzDataSource]="list"
+      [nzDisabled]="disabled"
       [nzTitles]="['Source', 'Target']"
       (nzSelectChange)="select($event)"
       (nzChange)="change($event)">
     </nz-transfer>
+  <div style="margin-top: 8px;">
+    <nz-switch [(ngModel)]="disabled" nzCheckedChildren="disabled" nzUnCheckedChildren="disabled"></nz-switch>
+  <div>
   `
 })
 export class NzDemoTransferBasicComponent implements OnInit {
   // tslint:disable-next-line:no-any
   list: any[] = [];
+  disabled = false;
 
   ngOnInit(): void {
     for (let i = 0; i < 20; i++) {

components/transfer/demo/search.ts

@@ -6,17 +6,22 @@ import { NzMessageService } from 'ng-zorro-antd';
   template: `
     <nz-transfer
       [nzDataSource]="list"
+      [nzDisabled]="disabled"
       nzShowSearch
       [nzFilterOption]="filterOption"
       (nzSearchChange)="search($event)"
       (nzSelectChange)="select($event)"
       (nzChange)="change($event)">
     </nz-transfer>
+    <div style="margin-top: 8px;">
+      <nz-switch [(ngModel)]="disabled" nzCheckedChildren="disabled" nzUnCheckedChildren="disabled"></nz-switch>
+    <div>
   `
 })
 export class NzDemoTransferSearchComponent implements OnInit {
   // tslint:disable-next-line:no-any
   list: any[] = [];
+  disabled = false;
 
   ngOnInit(): void {
     for (let i = 0; i < 20; i++) {

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

@@ -20,6 +20,7 @@ One or more elements can be selected from either column, one click on the proper
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | `[nzDataSource]` | Used for setting the source data. Except the elements whose keys are `direction: 'right'` prop. | TransferItem[] | [] |
+| `[nzDisabled]` | Whether disabled transfer | boolean | false |
 | `[nzTitles]` | A set of titles that are sorted from left to right. | string[] | ['', ''] |
 | `[nzOperations]` | A set of operations that are sorted from bottom to top. | string[] | ['', ''] |
 | `[nzListStyle]` | A custom CSS style used for rendering the transfer columns. equal `ngStyle` | object |  |

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

@@ -22,6 +22,7 @@ title: Transfer
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `[nzDataSource]` | 数据源，其中若数据属性 `direction: 'right'` 将会被渲染到右边一栏中 | TransferItem[] | [] |
+| `[nzDisabled]` | 是否禁用 | boolean | false |
 | `[nzTitles]` | 标题集合，顺序从左至右 | string[] | ['', ''] |
 | `[nzOperations]` | 操作文案集合，顺序从下至上 | string[] | ['', ''] |
 | `[nzListStyle]` | 两个穿梭框的自定义样式，等同 `ngStyle` | object |  |

components/transfer/nz-transfer-list.component.html

@@ -1,6 +1,6 @@
 <div class="ant-transfer-list-header">
-  <label nz-checkbox [ngModel]="stat.checkAll" (ngModelChange)="onHandleSelectAll($event)"
-    [nzIndeterminate]="stat.checkHalf">
+  <label nz-checkbox [nzChecked]="stat.checkAll" (nzCheckedChange)="onHandleSelectAll($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>
@@ -14,12 +14,14 @@
       (valueChanged)="handleFilter($event)"
       (valueClear)="handleClear()"
       [placeholder]="searchPlaceholder"
+      [disabled]="disabled"
       [value]="filter"></div>
   </div>
   <ul class="ant-transfer-list-content">
     <ng-container *ngFor="let item of dataSource">
-      <li *ngIf="!item._hiden" (click)="_handleSelect(item)" class="ant-transfer-list-content-item">
-        <label nz-checkbox [ngModel]="item.checked" [nzDisabled]="item.disabled">
+      <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" [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>

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

@@ -1,33 +1,32 @@
 import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
-  DoCheck,
   ElementRef,
   EventEmitter,
   Input,
-  IterableDiffer,
-  IterableDiffers,
   OnChanges,
   OnInit,
   Output,
   SimpleChanges,
-  TemplateRef
+  TemplateRef,
+  ViewEncapsulation
 } from '@angular/core';
 
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
-import { toBoolean } from '../core/util/convert';
 
 import { TransferItem } from './interface';
 
 @Component({
   selector           : 'nz-transfer-list',
   preserveWhitespaces: false,
   providers          : [ NzUpdateHostClassService ],
-  templateUrl        : './nz-transfer-list.component.html'
+  templateUrl        : './nz-transfer-list.component.html',
+  encapsulation      : ViewEncapsulation.None,
+  changeDetection    : ChangeDetectionStrategy.OnPush
 })
-export class NzTransferListComponent implements OnChanges, OnInit, DoCheck {
-  private _showSearch = false;
-
-  // region: fields
+export class NzTransferListComponent implements OnChanges, OnInit {
+  // #region fields
 
   @Input() direction = '';
   @Input() titleText = '';
@@ -37,17 +36,8 @@ export class NzTransferListComponent implements OnChanges, OnInit, DoCheck {
   @Input() itemUnit = '';
   @Input() itemsUnit = '';
   @Input() filter = '';
-
-  // search
-  @Input()
-  set showSearch(value: boolean) {
-    this._showSearch = toBoolean(value);
-  }
-
-  get showSearch(): boolean {
-    return this._showSearch;
-  }
-
+  @Input() disabled: boolean;
+  @Input() showSearch: boolean;
   @Input() searchPlaceholder: string;
   @Input() notFoundContent: string;
   @Input() filterOption: (inputValue: string, item: TransferItem) => boolean;
@@ -60,9 +50,9 @@ export class NzTransferListComponent implements OnChanges, OnInit, DoCheck {
   @Output() readonly handleSelect: EventEmitter<TransferItem> = new EventEmitter();
   @Output() readonly filterChange: EventEmitter<{ direction: string, value: string }> = new EventEmitter();
 
-  // endregion
+  // #endregion
 
-  // region: styles
+  // #region styles
 
   prefixCls = 'ant-transfer-list';
 
@@ -74,9 +64,9 @@ export class NzTransferListComponent implements OnChanges, OnInit, DoCheck {
     this.updateHostClassService.updateHostClass(this.el.nativeElement, classMap);
   }
 
-  // endregion
+  // #endregion
 
-  // region: select all
+  // #region select all
 
   stat = {
     checkAll  : false,
@@ -104,9 +94,9 @@ export class NzTransferListComponent implements OnChanges, OnInit, DoCheck {
     this.stat.checkHalf = this.stat.checkCount > 0 && !this.stat.checkAll;
   }
 
-  // endregion
+  // #endregion
 
-  // region: search
+  // #region search
 
   handleFilter(value: string): void {
     this.filter = value;
@@ -128,12 +118,9 @@ export class NzTransferListComponent implements OnChanges, OnInit, DoCheck {
     return item.title.includes(text);
   }
 
-  // endregion
-
-  listDiffer: IterableDiffer<{}>;
+  // #endregion
 
-  constructor(private el: ElementRef, private updateHostClassService: NzUpdateHostClassService, differs: IterableDiffers) {
-    this.listDiffer = differs.find([]).create(null);
+  constructor(private el: ElementRef, private updateHostClassService: NzUpdateHostClassService, private cdr: ChangeDetectorRef) {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -146,15 +133,13 @@ export class NzTransferListComponent implements OnChanges, OnInit, DoCheck {
     this.setClassMap();
   }
 
-  ngDoCheck(): void {
-    const change = this.listDiffer.diff(this.dataSource);
-    if (change) {
-      this.updateCheckStatus();
-    }
+  markForCheck(): void {
+    this.updateCheckStatus();
+    this.cdr.markForCheck();
   }
 
   _handleSelect(item: TransferItem): void {
-    if (item.disabled) {
+    if (this.disabled || item.disabled) {
       return;
     }
     item.checked = !item.checked;

components/transfer/nz-transfer-search.component.html

@@ -1,5 +1,5 @@
-<input nz-input [(ngModel)]="value" (ngModelChange)="_handle()"
-  [placeholder]="placeholder" class="ant-transfer-list-search">
+<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 type="close-circle"></i>
 </a>

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

@@ -1,29 +1,41 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector           : '[nz-transfer-search]',
   preserveWhitespaces: false,
-  templateUrl        : './nz-transfer-search.component.html'
+  templateUrl        : './nz-transfer-search.component.html',
+  encapsulation      : ViewEncapsulation.None,
+  changeDetection    : ChangeDetectionStrategy.OnPush
 })
-export class NzTransferSearchComponent {
+export class NzTransferSearchComponent implements OnChanges {
 
   // region: fields
 
   @Input() placeholder: string;
   @Input() value: string;
+  @Input() disabled: boolean;
 
   @Output() readonly valueChanged = new EventEmitter<string>();
   @Output() readonly valueClear = new EventEmitter();
 
   // endregion
 
+  constructor(private cdr: ChangeDetectorRef) {}
+
   _handle(): void {
     this.valueChanged.emit(this.value);
   }
 
   _clear(): void {
+    if (this.disabled) {
+      return ;
+    }
     this.value = '';
     this.valueClear.emit();
   }
 
+  ngOnChanges(): void {
+    this.cdr.detectChanges();
+  }
+
 }

components/transfer/nz-transfer.component.html

@@ -5,6 +5,7 @@
   [filterOption]="nzFilterOption"
   (filterChange)="handleFilterChange($event)"
   [render]="nzRender"
+  [disabled]="nzDisabled"
   [showSearch]="nzShowSearch"
   [searchPlaceholder]="nzSearchPlaceholder || locale.searchPlaceholder"
   [notFoundContent]="nzNotFoundContent || locale.notFoundContent"
@@ -14,10 +15,10 @@
   (handleSelect)="handleLeftSelect($event)"
   (handleSelectAll)="handleLeftSelectAll($event)"></nz-transfer-list>
 <div class="ant-transfer-operation">
-  <button nz-button (click)="moveToLeft()" [disabled]="!leftActive" [nzType]="'primary'" [nzSize]="'small'">
+  <button nz-button (click)="moveToLeft()" [disabled]="nzDisabled || !leftActive" [nzType]="'primary'" [nzSize]="'small'">
     <i nz-icon type="left"></i><span *ngIf="nzOperations[1]">{{ nzOperations[1] }}</span>
   </button>
-  <button nz-button (click)="moveToRight()" [disabled]="!rightActive" [nzType]="'primary'" [nzSize]="'small'">
+  <button nz-button (click)="moveToRight()" [disabled]="nzDisabled || !rightActive" [nzType]="'primary'" [nzSize]="'small'">
     <i nz-icon type="right"></i><span *ngIf="nzOperations[0]">{{ nzOperations[0] }}</span>
   </button>
 </div>
@@ -28,6 +29,7 @@
   [filterOption]="nzFilterOption"
   (filterChange)="handleFilterChange($event)"
   [render]="nzRender"
+  [disabled]="nzDisabled"
   [showSearch]="nzShowSearch"
   [searchPlaceholder]="nzSearchPlaceholder || locale.searchPlaceholder"
   [notFoundContent]="nzNotFoundContent || locale.notFoundContent"