chore: support hide preview button when is non-image url

NG-ZORRO · Dec 29, 2018 · ff9c326 · ff9c326
1 parent ba8eb2d
commit ff9c326
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 4 deletions.
diff --git a/components/upload/demo/picture-card.ts b/components/upload/demo/picture-card.ts
@@ -10,6 +10,7 @@ import { NzMessageService, UploadFile } from 'ng-zorro-antd';
       nzListType="picture-card"
       [(nzFileList)]="fileList"
       [nzShowButton]="fileList.length < 3"
+      [nzShowUploadList]="showUploadList"
       [nzPreview]="handlePreview">
         <i nz-icon type="plus"></i>
         <div class="ant-upload-text">Upload</div>
@@ -35,6 +36,11 @@ import { NzMessageService, UploadFile } from 'ng-zorro-antd';
   ]
 })
 export class NzDemoUploadPictureCardComponent {
+  showUploadList = {
+    showPreviewIcon: true,
+    showRemoveIcon : true,
+    hidePreviewIconInNonImage: true
+  };
   fileList = [
     {
       uid: -1,

diff --git a/components/upload/interface.ts b/components/upload/interface.ts
@@ -42,6 +42,7 @@ export interface UploadChangeParam {
 export interface ShowUploadListInterface {
   showRemoveIcon?: boolean;
   showPreviewIcon?: boolean;
+  hidePreviewIconInNonImage?: boolean;
 }
 
 export interface ZipButtonOptions {

diff --git a/components/upload/nz-upload-list.component.html b/components/upload/nz-upload-list.component.html
@@ -38,7 +38,7 @@
   </div>
   <ng-container *ngIf="listType === 'picture-card' && file.status !== 'uploading'; else close">
     <span class="ant-upload-list-item-actions">
-      <a *ngIf="icons.showPreviewIcon" [href]="file.thumbUrl || file.url"
+      <a *ngIf="showPreview(file)" [href]="file.thumbUrl || file.url"
         target="_blank" rel="noopener noreferrer"
         title="{{ locale.previewFile }}"
         [ngStyle]="!(file.url || file.thumbUrl) && {'opacity': .5, 'pointer-events': 'none'}"

diff --git a/components/upload/nz-upload-list.component.ts b/components/upload/nz-upload-list.component.ts
@@ -100,7 +100,6 @@ export class NzUploadListComponent implements OnChanges {
   private previewFile(file: File | Blob, callback: (dataUrl: string) => void): void {
     if (file.type && this.imageTypes.indexOf(file.type) === -1) {
       callback('');
-      return ;
     }
     const reader = new FileReader();
     // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
@@ -131,6 +130,14 @@ export class NzUploadListComponent implements OnChanges {
       });
   }
 
+  showPreview(file: UploadFile): boolean {
+    const { showPreviewIcon, hidePreviewIconInNonImage } = this.icons;
+    if (!showPreviewIcon) {
+      return false;
+    }
+    return this.isImageUrl(file) ? true : !hidePreviewIconInNonImage;
+  }
+
   handlePreview(file: UploadFile, e: Event): void {
     if (!this.onPreview) {
       return;

diff --git a/components/upload/nz-upload.component.ts b/components/upload/nz-upload.component.ts
@@ -114,7 +114,8 @@ export class NzUploadComponent implements OnInit, OnChanges, OnDestroy {
     if (typeof this.nzShowUploadList === 'boolean' && this.nzShowUploadList) {
       this.nzShowUploadList = {
         showPreviewIcon: true,
-        showRemoveIcon : true
+        showRemoveIcon : true,
+        hidePreviewIconInNonImage: false
       };
     }
     // filters

diff --git a/components/upload/upload.spec.ts b/components/upload/upload.spec.ts
@@ -691,6 +691,36 @@ describe('upload', () => {
         expect(actions.length).toBe(0);
         expect(instance._onRemove).toBe(false);
       });
+      it('should be hide preview when is invalid image url', fakeAsync(() => {
+        instance.icons = {
+          showPreviewIcon: true,
+          showRemoveIcon: true,
+          hidePreviewIconInNonImage: false
+        };
+        instance.items = [
+          { url: '1.pdf' }
+        ];
+        fixture.detectChanges();
+        tick();
+        fixture.detectChanges();
+        const actions = dl.queryAll(By.css('.ant-upload-list-item-actions a'));
+        expect(actions.length).toBe(1);
+      }));
+      it('should be hide preview when is invalid image url', fakeAsync(() => {
+        instance.icons = {
+          showPreviewIcon: true,
+          showRemoveIcon: true,
+          hidePreviewIconInNonImage: true
+        };
+        instance.items = [
+          { url: '1.pdf' }
+        ];
+        fixture.detectChanges();
+        tick();
+        fixture.detectChanges();
+        const actions = dl.queryAll(By.css('.ant-upload-list-item-actions a'));
+        expect(actions.length).toBe(0);
+      }));
     });
 
     describe('[onPreview]', () => {
@@ -803,7 +833,9 @@ describe('upload', () => {
         expect(instance.items[0].thumbUrl).toBe('1');
       });
       it('should be ingore thumb when is invalid image data', () => {
-        spyOn(window as any, 'FileReader').and.returnValue(new MockFR());
+        const mockFR = new MockFR();
+        mockFR.result = '';
+        spyOn(window as any, 'FileReader').and.returnValue(mockFR);
         instance.listType = 'picture';
         instance.items = [ { originFileObj: new File([''], '1.pdf', { type: 'pdf' }), thumbUrl: undefined } ];
         fixture.detectChanges();