From 7b30835c9a1e6f2412becca756a42e785d69a1ef Mon Sep 17 00:00:00 2001 From: cipchk Date: Wed, 28 Nov 2018 18:40:52 +0800 Subject: [PATCH 1/3] refactor(module:transfer): refactor transfer - feat: add nzDisabled property - need verify design details, https://github.com/ant-design/ant-design/issues/13330 --- components/transfer/demo/basic.ts | 6 +- components/transfer/doc/index.en-US.md | 1 + components/transfer/doc/index.zh-CN.md | 1 + .../transfer/nz-transfer-list.component.html | 7 ++- .../transfer/nz-transfer-list.component.ts | 57 ++++++----------- .../transfer/nz-transfer-search.component.ts | 5 +- .../transfer/nz-transfer.component.html | 6 +- components/transfer/nz-transfer.component.ts | 61 +++++++++++-------- components/transfer/transfer.spec.ts | 14 +++++ 9 files changed, 88 insertions(+), 70 deletions(-) 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/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..45b2a908023 100644 --- a/components/transfer/nz-transfer-list.component.html +++ b/components/transfer/nz-transfer-list.component.html @@ -1,6 +1,6 @@
{{ (stat.checkCount > 0 ? stat.checkCount + '/' : '') + stat.shownCount }} {{ dataSource.length > 1 ? itemsUnit : itemUnit }} @@ -18,8 +18,9 @@
    -
  • -
  • + diff --git a/components/transfer/nz-transfer-list.component.ts b/components/transfer/nz-transfer-list.component.ts index a955ead2c31..0fd86adfbc4 100644 --- a/components/transfer/nz-transfer-list.component.ts +++ b/components/transfer/nz-transfer-list.component.ts @@ -1,11 +1,10 @@ import { + ChangeDetectionStrategy, + ChangeDetectorRef, Component, - DoCheck, ElementRef, EventEmitter, Input, - IterableDiffer, - IterableDiffers, OnChanges, OnInit, Output, @@ -14,7 +13,6 @@ import { } from '@angular/core'; import { NzUpdateHostClassService } from '../core/services/update-host-class.service'; -import { toBoolean } from '../core/util/convert'; import { TransferItem } from './interface'; @@ -22,12 +20,11 @@ import { TransferItem } from './interface'; selector : 'nz-transfer-list', preserveWhitespaces: false, providers : [ NzUpdateHostClassService ], - templateUrl : './nz-transfer-list.component.html' + templateUrl : './nz-transfer-list.component.html', + 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 +34,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 +48,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 +62,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 +92,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 +116,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 +131,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.ts b/components/transfer/nz-transfer-search.component.ts index 37e21f65258..0285cb71c2c 100644 --- a/components/transfer/nz-transfer-search.component.ts +++ b/components/transfer/nz-transfer-search.component.ts @@ -1,9 +1,10 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ selector : '[nz-transfer-search]', preserveWhitespaces: false, - templateUrl : './nz-transfer-search.component.html' + templateUrl : './nz-transfer-search.component.html', + changeDetection : ChangeDetectionStrategy.OnPush }) export class NzTransferSearchComponent { 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..5449b4e3fa7 100644 --- a/components/transfer/nz-transfer.component.ts +++ b/components/transfer/nz-transfer.component.ts @@ -1,43 +1,51 @@ import { + ChangeDetectionStrategy, + ChangeDetectorRef, Component, - ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, + QueryList, SimpleChanges, - TemplateRef + TemplateRef, + ViewChildren } 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' + }, + 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 +55,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 +65,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 +107,9 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy { this.nzSearchChange.emit(ret); } - // endregion + // #endregion - // region: operation + // #region operation leftActive = false; rightActive = false; @@ -150,15 +148,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 +175,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..eec6a7f68f5 100644 --- a/components/transfer/transfer.spec.ts +++ b/components/transfer/transfer.spec.ts @@ -123,6 +123,18 @@ describe('transfer', () => { expect(instance.comp.rightDataSource.filter(w => w.checked).length).toBe(0); }); + it('shoudl be disabled', () => { + 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 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 uncheck all when two verification error', () => { instance.canMove = (arg: TransferCanMove): Observable => { return of(arg.list).pipe(map(() => { @@ -269,6 +281,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'; From 402ccc4e9a931a683820e6d8789b4a35a9683f7b Mon Sep 17 00:00:00 2001 From: cipchk Date: Thu, 29 Nov 2018 09:32:30 +0800 Subject: [PATCH 2/3] chore: search muse be disabled --- components/transfer/demo/search.ts | 5 +++ .../transfer/nz-transfer-list.component.html | 7 ++-- .../nz-transfer-search.component.html | 4 +- .../transfer/nz-transfer-search.component.ts | 14 ++++++- components/transfer/transfer.spec.ts | 38 ++++++++++++++----- 5 files changed, 51 insertions(+), 17 deletions(-) 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/nz-transfer-list.component.html b/components/transfer/nz-transfer-list.component.html index 45b2a908023..a841cdf89f5 100644 --- a/components/transfer/nz-transfer-list.component.html +++ b/components/transfer/nz-transfer-list.component.html @@ -1,6 +1,6 @@
    -
    • -