feat(module:upload): add nzFileListRender property (#5204)

close #4875
NG-ZORRO · Jun 16, 2020 · ce5574a · ce5574a
1 parent 80a4709
commit ce5574a
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 1 deletion.
diff --git a/components/upload/doc/index.en-US.md b/components/upload/doc/index.en-US.md
@@ -53,6 +53,7 @@ import { NzUploadModule } from 'ng-zorro-antd/upload';
 | `[nzDownload]`   | Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB. | `(file: NzUploadFile) => void` | Jump to new TAB |
 | `[nzTransformFile]`   | Customize transform file before request  | `(file: NzUploadFile) => NzUploadTransformFileType` | -  |
 | `[nzIconRender]`   | Custom show icon  | `TemplateRef<void>` | -  |
+| `[nzFileListRender]`   | Custom file list | `TemplateRef<{ $implicit: UploadFile[] }>` | -  |
 
 #### nzChange
 

diff --git a/components/upload/doc/index.zh-CN.md b/components/upload/doc/index.zh-CN.md
@@ -54,6 +54,7 @@ import { NzUploadModule } from 'ng-zorro-antd/upload';
 | `[nzDownload]`   | 点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页 | `(file: NzUploadFile) => void` | 跳转新标签页 |
 | `[nzTransformFile]`   | 在上传之前转换文件。支持返回一个 Observable 对象  | `(file: NzUploadFile) => NzUploadTransformFileType` | -  |
 | `[nzIconRender]`   | 自定义显示 icon  | `TemplateRef<void>` | -  |
+| `[nzFileListRender]`   | 自定义显示整个列表 | `TemplateRef<{ $implicit: UploadFile[] }>` | -  |
 
 #### nzChange
 

diff --git a/components/upload/upload.component.html b/components/upload/upload.component.html
@@ -1,5 +1,6 @@
 <ng-template #list>
   <nz-upload-list
+    *ngIf="!nzFileListRender"
     #listComp
     [style.display]="nzShowUploadList ? '' : 'none'"
     [locale]="locale"
@@ -12,6 +13,11 @@
     [onRemove]="onRemove"
     [onDownload]="nzDownload"
   ></nz-upload-list>
+  <ng-container *ngIf="nzFileListRender">
+    <ng-container
+      *ngTemplateOutlet="nzFileListRender; context: { $implicit: nzFileList }"
+    ></ng-container>
+  </ng-container>
 </ng-template>
 <ng-template #con><ng-content></ng-content></ng-template>
 <ng-template #btn>

diff --git a/components/upload/upload.component.ts b/components/upload/upload.component.ts
@@ -108,6 +108,7 @@ export class NzUploadComponent implements OnInit, OnChanges, OnDestroy {
   @Input() nzTransformFile?: (file: NzUploadFile) => NzUploadTransformFileType;
   @Input() nzDownload?: (file: NzUploadFile) => void;
   @Input() nzIconRender: TemplateRef<NzSafeAny> | null = null;
+  @Input() nzFileListRender: TemplateRef<void> | null = null;
 
   @Output() readonly nzChange: EventEmitter<NzUploadChangeParam> = new EventEmitter<NzUploadChangeParam>();
   @Output() readonly nzFileListChange: EventEmitter<NzUploadFile[]> = new EventEmitter<NzUploadFile[]>();
@@ -267,7 +268,7 @@ export class NzUploadComponent implements OnInit, OnChanges, OnDestroy {
 
   private detectChangesList(): void {
     this.cdr.detectChanges();
-    this.listComp.detectChanges();
+    this.listComp?.detectChanges();
   }
 
   onRemove = (file: NzUploadFile): void => {

diff --git a/components/upload/upload.spec.ts b/components/upload/upload.spec.ts
@@ -668,6 +668,21 @@ describe('upload', () => {
         expect(el != null).toBe(true);
         expect((el.nativeElement as HTMLElement).textContent).toBe('asdf');
       });
+
+      it('#nzFileListRender', () => {
+        instance.nzFileList = [
+          {
+            uid: 1,
+            name: 'xxx.png',
+            status: 'uploading'
+          } as any
+        ];
+        instance.nzFileListRender = instance.fileListRender;
+        fixture.detectChanges();
+        const el = pageObject.getByCss(`.fileListRender`);
+        expect(el != null).toBe(true);
+        expect((el.nativeElement as HTMLElement).textContent).toBe('asdf');
+      });
     });
 
     describe('CORS', () => {
@@ -1333,6 +1348,7 @@ describe('upload', () => {
       [nzDirectory]="directory"
       [nzTransformFile]="nzTransformFile"
       [nzIconRender]="nzIconRender"
+      [nzFileListRender]="nzFileListRender"
       (nzFileListChange)="nzFileListChange($event)"
       (nzChange)="nzChange($event)"
     >
@@ -1341,11 +1357,15 @@ describe('upload', () => {
     <ng-template #customnzIconRender>
       <span class="customnzIconRender">asdf</span>
     </ng-template>
+    <ng-template #fileListRender>
+      <span class="fileListRender">asdf</span>
+    </ng-template>
   `
 })
 class TestUploadComponent {
   @ViewChild('upload', { static: false }) comp!: NzUploadComponent;
   @ViewChild('customnzIconRender', { static: false }) customnzIconRender!: TemplateRef<void>;
+  @ViewChild('fileListRender', { static: false }) fileListRender!: TemplateRef<void>;
   show = true;
   nzType: NzUploadType = 'select';
   nzLimit = 0;
@@ -1374,6 +1394,7 @@ class TestUploadComponent {
   nzWithCredentials = false;
   nzTransformFile!: (file: NzUploadFile) => NzUploadTransformFileType;
   nzIconRender: TemplateRef<void> | null = null;
+  nzFileListRender: TemplateRef<void> | null = null;
   _onPreview = false;
   onPreview = (): void => {
     this._onPreview = true;