feat(module:transfer): support setting status (#7475)

* feat(module:transfer): support setting status

* feat(module:transfer): add tests

Author: simplejason

components/transfer/demo/module

@@ -5,6 +5,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzTableModule } from 'ng-zorro-antd/table';
 import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzTreeModule } from 'ng-zorro-antd/tree';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
 
 export const moduleList = [
   NzTransferModule,
@@ -13,5 +14,6 @@ export const moduleList = [
   NzIconModule,
   NzTableModule,
   NzTagModule,
-  NzTreeModule
+  NzTreeModule,
+  NzSpaceModule
 ];

components/transfer/demo/status.md

@@ -0,0 +1,14 @@
+---
+order: 7
+title:
+  zh-CN: 自定义状态
+  en-US: Status
+---
+
+## zh-CN
+
+使用 `nzStatus` 为 Transfer 添加状态，可选 `error` 或者 `warning`。
+
+## en-US
+
+Add status to Transfer with `nzStatus`, which could be `error` or `warning`.

components/transfer/demo/status.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-transfer-status',
+  template: `
+    <nz-space nzDirection="vertical">
+      <nz-transfer *nzSpaceItem [nzDataSource]="[]" nzStatus="error"></nz-transfer>
+      <nz-transfer *nzSpaceItem [nzDataSource]="[]" nzStatus="warning" nzShowSearch></nz-transfer>
+    </nz-space>
+  `
+})
+export class NzDemoTransferStatusComponent {}

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

@@ -41,6 +41,7 @@ import { NzTransferModule } from 'ng-zorro-antd/transfer';
 | `[nzCanMove]` | A function to determine what items should be moved (by default all checked items are moved). 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[]` | - |
+| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
 | `(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

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

components/transfer/transfer.component.ts

@@ -8,6 +8,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  ElementRef,
   EventEmitter,
   Input,
   OnChanges,
@@ -16,6 +17,7 @@ import {
   Optional,
   Output,
   QueryList,
+  Renderer2,
   SimpleChanges,
   TemplateRef,
   ViewChildren,
@@ -24,8 +26,8 @@ import {
 import { Observable, of, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
-import { BooleanInput, NgStyleInterface, NzSafeAny } from 'ng-zorro-antd/core/types';
-import { InputBoolean, toArray } from 'ng-zorro-antd/core/util';
+import { BooleanInput, NgClassInterface, NgStyleInterface, NzSafeAny, NzStatus } from 'ng-zorro-antd/core/types';
+import { getStatusClassNames, InputBoolean, toArray } from 'ng-zorro-antd/core/util';
 import { NzI18nService, NzTransferI18nInterface } from 'ng-zorro-antd/i18n';
 
 import {
@@ -161,6 +163,11 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy {
   rightFilter = '';
   dir: Direction = 'ltr';
 
+  // status
+  prefixCls: string = 'ant-transfer';
+  statusCls: NgClassInterface = {};
+  hasFeedback: boolean = false;
+
   // #region fields
 
   @Input() @InputBoolean() nzDisabled = false;
@@ -181,6 +188,7 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy {
   @Input() nzNotFoundContent?: string;
   @Input() nzTargetKeys: string[] = [];
   @Input() nzSelectedKeys: string[] = [];
+  @Input() nzStatus?: NzStatus;
 
   // events
   @Output() readonly nzChange = new EventEmitter<TransferChange>();
@@ -286,6 +294,8 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy {
   constructor(
     private cdr: ChangeDetectorRef,
     private i18n: NzI18nService,
+    private elementRef: ElementRef<HTMLElement>,
+    private renderer: Renderer2,
     @Optional() private directionality: Directionality
   ) {}
 
@@ -333,23 +343,39 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes.nzDataSource) {
+    const { nzStatus, nzDataSource, nzTargetKeys, nzSelectedKeys } = changes;
+    if (nzDataSource) {
       this.splitDataSource();
       this.updateOperationStatus('left');
       this.updateOperationStatus('right');
       this.cdr.detectChanges();
       this.markForCheckAllList();
     }
-    if (changes.nzTargetKeys) {
+    if (nzTargetKeys) {
       this.handleNzTargetKeys();
     }
-    if (changes.nzSelectedKeys) {
+    if (nzSelectedKeys) {
       this.handleNzSelectedKeys();
     }
+    if (nzStatus) {
+      this.setStatusStyles();
+    }
   }
 
   ngOnDestroy(): void {
     this.unsubscribe$.next();
     this.unsubscribe$.complete();
   }
+
+  private setStatusStyles(): void {
+    // render status if nzStatus is set
+    this.statusCls = getStatusClassNames(this.prefixCls, this.nzStatus, this.hasFeedback);
+    Object.keys(this.statusCls).forEach(status => {
+      if (this.statusCls[status]) {
+        this.renderer.addClass(this.elementRef.nativeElement, status);
+      } else {
+        this.renderer.removeClass(this.elementRef.nativeElement, status);
+      }
+    });
+  }
 }

components/transfer/transfer.spec.ts

@@ -16,6 +16,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Observable, of } from 'rxjs';
 import { map } from 'rxjs/operators';
 
+import { NzStatus } from 'ng-zorro-antd/core/types';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 
 import en_US from '../i18n/languages/en_US';
@@ -30,7 +31,11 @@ const DISABLED = 1;
 describe('transfer', () => {
   let injector: Injector;
   let fixture: ComponentFixture<
-    TestTransferComponent | TestTransferCustomRenderComponent | Test996Component | NzTestTransferRtlComponent
+    | TestTransferComponent
+    | TestTransferCustomRenderComponent
+    | Test996Component
+    | NzTestTransferRtlComponent
+    | NzTestTransferStatusComponent
   >;
   let dl: DebugElement;
   let instance: TestTransferComponent;
@@ -42,7 +47,8 @@ describe('transfer', () => {
         TestTransferComponent,
         TestTransferCustomRenderComponent,
         Test996Component,
-        NzTestTransferRtlComponent
+        NzTestTransferRtlComponent,
+        NzTestTransferStatusComponent
       ]
     });
     fixture = TestBed.createComponent(TestTransferComponent);
@@ -374,6 +380,31 @@ describe('transfer', () => {
     }));
   });
 
+  describe('transfer status', () => {
+    let componentElement: HTMLElement;
+    let testComponent: NzTestTransferStatusComponent;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(NzTestTransferStatusComponent);
+      componentElement = fixture.debugElement.query(By.directive(NzTransferComponent)).nativeElement;
+      fixture.detectChanges();
+      testComponent = fixture.debugElement.componentInstance;
+    });
+
+    it('should className correct with nzStatus', () => {
+      fixture.detectChanges();
+      expect(componentElement.className).toContain('ant-transfer-status-error');
+
+      testComponent.status = 'warning';
+      fixture.detectChanges();
+      expect(componentElement.className).toContain('ant-transfer-status-warning');
+
+      testComponent.status = '';
+      fixture.detectChanges();
+      expect(componentElement.className).not.toContain('ant-transfer-status-warning');
+    });
+  });
+
   class TransferPageObject {
     [key: string]: any;
 
@@ -610,3 +641,10 @@ export class NzTestTransferRtlComponent {
   @ViewChild(Dir) dir!: Dir;
   direction = 'rtl';
 }
+
+@Component({
+  template: ` <nz-transfer [nzDataSource]="[]" [nzStatus]="status"></nz-transfer> `
+})
+export class NzTestTransferStatusComponent {
+  status: NzStatus = 'error';
+}