diff --git a/components/transfer/demo/basic.ts b/components/transfer/demo/basic.ts index 411a03b3586..0c6a30e3f82 100644 --- a/components/transfer/demo/basic.ts +++ b/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: ` +
+ +
` }) export class NzDemoTransferBasicComponent implements OnInit { // tslint:disable-next-line:no-any list: any[] = []; + disabled = false; ngOnInit(): void { for (let i = 0; i < 20; i++) { diff --git a/components/transfer/demo/search.ts b/components/transfer/demo/search.ts index 3694fa94ec9..5cddcb46c28 100644 --- a/components/transfer/demo/search.ts +++ b/components/transfer/demo/search.ts @@ -6,17 +6,22 @@ import { NzMessageService } from 'ng-zorro-antd'; template: ` +
+ +
` }) export class NzDemoTransferSearchComponent implements OnInit { // tslint:disable-next-line:no-any list: any[] = []; + disabled = false; ngOnInit(): void { for (let i = 0; i < 20; i++) { diff --git a/components/transfer/doc/index.en-US.md b/components/transfer/doc/index.en-US.md index 193230708a2..937bb78f716 100644 --- a/components/transfer/doc/index.en-US.md +++ b/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 | | diff --git a/components/transfer/doc/index.zh-CN.md b/components/transfer/doc/index.zh-CN.md index ba2875bad9e..2204ba82c5a 100644 --- a/components/transfer/doc/index.zh-CN.md +++ b/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 | | diff --git a/components/transfer/nz-transfer-list.component.html b/components/transfer/nz-transfer-list.component.html index b8deb787191..a841cdf89f5 100644 --- a/components/transfer/nz-transfer-list.component.html +++ b/components/transfer/nz-transfer-list.component.html @@ -1,6 +1,6 @@
-
    -
  • -
  • + diff --git a/components/transfer/nz-transfer-list.component.ts b/components/transfer/nz-transfer-list.component.ts index a955ead2c31..c08206188cd 100644 --- a/components/transfer/nz-transfer-list.component.ts +++ b/components/transfer/nz-transfer-list.component.ts @@ -1,20 +1,19 @@ 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'; @@ -22,12 +21,12 @@ import { TransferItem } from './interface'; 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 = 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; diff --git a/components/transfer/nz-transfer-search.component.html b/components/transfer/nz-transfer-search.component.html index c16634929e9..3b68a8f26bd 100644 --- a/components/transfer/nz-transfer-search.component.html +++ b/components/transfer/nz-transfer-search.component.html @@ -1,5 +1,5 @@ - + diff --git a/components/transfer/nz-transfer-search.component.ts b/components/transfer/nz-transfer-search.component.ts index 37e21f65258..a9cb72e5247 100644 --- a/components/transfer/nz-transfer-search.component.ts +++ b/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(); @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(); + } + } diff --git a/components/transfer/nz-transfer.component.html b/components/transfer/nz-transfer.component.html index ed4cfc505fb..44513e56ac9 100644 --- a/components/transfer/nz-transfer.component.html +++ b/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)">
    - -
    @@ -28,6 +29,7 @@ [filterOption]="nzFilterOption" (filterChange)="handleFilterChange($event)" [render]="nzRender" + [disabled]="nzDisabled" [showSearch]="nzShowSearch" [searchPlaceholder]="nzSearchPlaceholder || locale.searchPlaceholder" [notFoundContent]="nzNotFoundContent || locale.notFoundContent" diff --git a/components/transfer/nz-transfer.component.ts b/components/transfer/nz-transfer.component.ts index bc8d028ae61..0623dfc0991 100644 --- a/components/transfer/nz-transfer.component.ts +++ b/components/transfer/nz-transfer.component.ts @@ -1,43 +1,53 @@ import { + ChangeDetectionStrategy, + ChangeDetectorRef, Component, - ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, + QueryList, SimpleChanges, - TemplateRef + TemplateRef, + ViewChildren, + ViewEncapsulation } from '@angular/core'; import { of, Observable, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { toBoolean } from '../core/util/convert'; +import { InputBoolean } from '../core/util/convert'; import { NzI18nService } from '../i18n/nz-i18n.service'; import { TransferCanMove, TransferChange, TransferItem, TransferSearchChange, TransferSelectChange } from './interface'; +import { NzTransferListComponent } from './nz-transfer-list.component'; @Component({ selector : 'nz-transfer', preserveWhitespaces: false, templateUrl : './nz-transfer.component.html', host : { - '[class.ant-transfer]': 'true' - } + '[class.ant-transfer]': 'true', + '[class.ant-transfer-disabled]': 'nzDisabled' + }, + encapsulation : ViewEncapsulation.None, + changeDetection : ChangeDetectionStrategy.OnPush }) export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { private unsubscribe$ = new Subject(); + @ViewChildren(NzTransferListComponent) + private lists !: QueryList; // tslint:disable-next-line:no-any locale: any = {}; - private _showSearch = false; leftFilter = ''; rightFilter = ''; - // region: fields + // #region fields + @Input() @InputBoolean() nzDisabled = false; @Input() nzDataSource: TransferItem[] = []; @Input() nzTitles: string[] = [ '', '' ]; @Input() nzOperations: string[] = []; @@ -47,17 +57,7 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { @Input() nzCanMove: (arg: TransferCanMove) => Observable = (arg: TransferCanMove) => of(arg.list); @Input() nzRender: TemplateRef; @Input() nzFooter: TemplateRef; - - // search - @Input() - set nzShowSearch(value: boolean) { - this._showSearch = toBoolean(value); - } - - get nzShowSearch(): boolean { - return this._showSearch; - } - + @Input() @InputBoolean() nzShowSearch = false; @Input() nzFilterOption: (inputValue: string, item: TransferItem) => boolean; @Input() nzSearchPlaceholder: string; @Input() nzNotFoundContent: string; @@ -67,9 +67,9 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { @Output() readonly nzSearchChange: EventEmitter = new EventEmitter(); @Output() readonly nzSelectChange: EventEmitter = new EventEmitter(); - // endregion + // #endregion - // region: process data + // #region process data // left leftDataSource: TransferItem[] = []; @@ -109,9 +109,9 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { this.nzSearchChange.emit(ret); } - // endregion + // #endregion - // region: operation + // #region operation leftActive = false; rightActive = false; @@ -150,15 +150,26 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { to : direction, list }); + this.markForCheckAllList(); } - // endregion + // #endregion - constructor(private i18n: NzI18nService, private el: ElementRef) { + constructor(private cdr: ChangeDetectorRef, private i18n: NzI18nService) { + } + + private markForCheckAllList(): void { + if (!this.lists) { + return ; + } + this.lists.forEach(i => i.markForCheck()); } ngOnInit(): void { - this.i18n.localeChange.pipe(takeUntil(this.unsubscribe$)).subscribe(() => this.locale = this.i18n.getLocaleData('Transfer')); + this.i18n.localeChange.pipe(takeUntil(this.unsubscribe$)).subscribe(() => { + this.locale = this.i18n.getLocaleData('Transfer'); + this.markForCheckAllList(); + }); } ngOnChanges(changes: SimpleChanges): void { @@ -166,6 +177,8 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { this.splitDataSource(); this.updateOperationStatus('left'); this.updateOperationStatus('right'); + this.cdr.detectChanges(); + this.markForCheckAllList(); } } diff --git a/components/transfer/transfer.spec.ts b/components/transfer/transfer.spec.ts index c2aefa0c0ff..dd5271606f3 100644 --- a/components/transfer/transfer.spec.ts +++ b/components/transfer/transfer.spec.ts @@ -123,6 +123,36 @@ describe('transfer', () => { expect(instance.comp.rightDataSource.filter(w => w.checked).length).toBe(0); }); + describe('#nzDisabled', () => { + it('should working', () => { + instance.nzDisabled = true; + fixture.detectChanges(); + expect(dl.queryAll(By.css('.ant-transfer-disabled')).length).toBe(1); + // All operation buttons muse be disabled + expect(dl.queryAll(By.css('.ant-transfer-operation .ant-btn[disabled]')).length).toBe(2); + // All search input muse be disabled + expect(dl.queryAll(By.css('.ant-input-disabled')).length).toBe(2); + // All item muse be disabled + expect(dl.queryAll(By.css('.ant-transfer-list-content-item-disabled')).length).toBe(COUNT); + // All checkbox (include 2 checkall) muse be disabled + expect(dl.queryAll(By.css('.ant-checkbox-disabled')).length).toBe(COUNT + 2); + }); + it('should be disabled clear', () => { + pageObject.expectLeft(LEFTCOUNT).search('left', '1'); + expect(pageObject.leftList.querySelectorAll('.ant-transfer-list-content-item').length).toBe(1); + instance.nzDisabled = true; + fixture.detectChanges(); + (pageObject.leftList.querySelector('.ant-transfer-list-search-action') as HTMLElement).click(); + fixture.detectChanges(); + expect(pageObject.leftList.querySelectorAll('.ant-transfer-list-content-item').length).toBe(1); + }); + it('should be disabled check all when search result is empty', () => { + pageObject.expectLeft(LEFTCOUNT).search('left', '模拟'); + const selectorPath = '[data-direction="left"] .ant-transfer-list-header .ant-checkbox-disabled'; + expect(pageObject.leftList.querySelectorAll(selectorPath).length).toBe(1); + }); + }); + it('should be uncheck all when two verification error', () => { instance.canMove = (arg: TransferCanMove): Observable => { return of(arg.list).pipe(map(() => { @@ -269,6 +299,7 @@ describe('transfer', () => { template : ` { class TestTransferComponent implements OnInit { @ViewChild('comp') comp: NzTransferComponent; nzDataSource: any[] = []; + nzDisabled = false; nzTitles = [ 'Source', 'Target' ]; nzOperations = [ 'to right', 'to left' ]; nzItemUnit = 'item';