refactor: sync zorro 9.3.0 (#993)

ng-alain · Jul 10, 2020 · 228ef9f · 228ef9f
1 parent a4e1d09
commit 228ef9f
Show file tree

Hide file tree

Showing 17 changed files with 159 additions and 95 deletions.
diff --git a/package.json b/package.json
@@ -68,7 +68,7 @@
     "file-saver": "^2.0.2",
     "marked": "^1.1.0",
     "ng-github-button": "^9.0.0",
-    "ng-zorro-antd": "^9.2.2",
+    "ng-zorro-antd": "^9.3.0",
     "ngx-color": "^5.1.3",
     "ngx-countdown": "^9.0.1",
     "ngx-highlight-js": "^9.0.0",

diff --git a/packages/abc/ellipsis/ellipsis.component.html b/packages/abc/ellipsis/ellipsis.component.html
@@ -1,6 +1,6 @@
 <div (cdkObserveContent)="refresh()" #orgEl style="display: none;"><ng-content></ng-content></div>
 <ng-template #tooltipTpl let-con>
-  <span *ngIf="tooltip; else con" nz-tooltip [nzTooltipTitle]="titleTpl" [nzOverlayStyle]="{ 'overflow-wrap': 'break-word', 'word-wrap': 'break-word' }">
+  <span *ngIf="tooltip; else con" nz-tooltip [nzTooltipTitle]="titleTpl" [nzTooltipOverlayStyle]="{ 'overflow-wrap': 'break-word', 'word-wrap': 'break-word' }">
     <ng-container *ngTemplateOutlet="con"></ng-container>
     <ng-template #titleTpl><div [innerHTML]="orgHtml"></div></ng-template>
   </span>

diff --git a/packages/abc/qr/qr.component.ts b/packages/abc/qr/qr.component.ts
@@ -20,7 +20,7 @@ import { QROptions } from './qr.types';
 @Component({
   selector: 'qr',
   exportAs: 'qr',
-  template: ` <img style="max-width: 100%; max-height: 100%;" [src]="dataURL" /> `,
+  template: ` <img *ngIf="dataURL" style="max-width: 100%; max-height: 100%;" [src]="dataURL" /> `,
   host: {
     '[style.display]': `'inline-block'`,
     '[style.height.px]': 'size',

diff --git a/packages/abc/st/st.component.html b/packages/abc/st/st.component.html
@@ -87,11 +87,11 @@
 >
   <thead class="st__head">
     <tr *ngFor="let row of _headers; let rowFirst = first">
-      <th *ngIf="rowFirst && expand" nzWidth="50px" [rowspan]="_headers.length"></th>
+      <th *ngIf="rowFirst && expand" nzWidth="50px" [rowSpan]="_headers.length"></th>
       <th
         *ngFor="let h of row; let index = index"
-        [colspan]="h.colSpan"
-        [rowspan]="h.rowSpan"
+        [colSpan]="h.colSpan"
+        [rowSpan]="h.rowSpan"
         [nzWidth]="h.column.width"
         [nzLeft]="!!h.column._left"
         [nzRight]="!!h.column._right"

diff --git a/packages/abc/xlsx/demo/import.md b/packages/abc/xlsx/demo/import.md
@@ -14,27 +14,36 @@ title:
 Import Excel and output JSON, support File, URL.
 
 ```ts
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { XlsxService } from '@delon/abc/xlsx';
 
 @Component({
   selector: 'app-demo',
   template: `
     <button nz-button (click)="url()">Via Url</button>
     <input type="file" (change)="change($event)" multiple="false" class="ml-sm" />
-    <p class="mt-sm">result: {{data | json}}</p>
-    `,
+    <p class="mt-sm">result: {{ data | json }}</p>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DemoComponent {
-  constructor(private xlsx: XlsxService) {}
   data: any;
+
+  constructor(private xlsx: XlsxService, private cdr: ChangeDetectorRef) {}
+
   url() {
-    this.xlsx.import(`./assets/demo.xlsx`).then(res => this.data = res);
+    this.xlsx.import(`./assets/demo.xlsx`).then(res => {
+      this.data = res;
+      this.cdr.detectChanges();
+    });
   }
 
   change(e: Event) {
     const node = e.target as HTMLInputElement;
-    this.xlsx.import(node.files![0]).then(res => this.data = res);
+    this.xlsx.import(node.files![0]).then(res => {
+      this.data = res;
+      this.cdr.detectChanges();
+    });
     node.value = '';
   }
 }

diff --git a/packages/abc/xlsx/xlsx.service.ts b/packages/abc/xlsx/xlsx.service.ts
@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, NgZone } from '@angular/core';
 import { AlainConfigService, AlainXlsxConfig, LazyResult, LazyService } from '@delon/util';
 import { saveAs } from 'file-saver';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
@@ -10,7 +10,7 @@ declare var XLSX: any;
 @Injectable({ providedIn: 'root' })
 export class XlsxService {
   private cog: AlainXlsxConfig;
-  constructor(private http: HttpClient, private lazy: LazyService, configSrv: AlainConfigService) {
+  constructor(private http: HttpClient, private lazy: LazyService, configSrv: AlainConfigService, private ngZone: NgZone) {
     this.cog = configSrv.merge('xlsx', {
       url: '//cdn.bootcss.com/xlsx/0.15.6/xlsx.full.min.js',
       modules: [],
@@ -21,11 +21,14 @@ export class XlsxService {
     return typeof XLSX !== 'undefined' ? Promise.resolve([]) : this.lazy.load([this.cog.url!].concat(this.cog.modules!));
   }
 
-  private read(wb: NzSafeAny): { [key: string]: NzSafeAny[][] } {
+  private read(data: NzSafeAny, options: { type: 'array' | 'binary' }): { [key: string]: NzSafeAny[][] } {
     const ret: NzSafeAny = {};
-    wb.SheetNames.forEach((name: string) => {
-      const sheet: NzSafeAny = wb.Sheets[name];
-      ret[name] = XLSX.utils.sheet_to_json(sheet, { header: 1 });
+    this.ngZone.runOutsideAngular(() => {
+      const wb = XLSX.read(data, options);
+      wb.SheetNames.forEach((name: string) => {
+        const sheet: NzSafeAny = wb.Sheets[name];
+        ret[name] = XLSX.utils.sheet_to_json(sheet, { header: 1 });
+      });
     });
     return ret;
   }
@@ -45,8 +48,7 @@ export class XlsxService {
           if (typeof fileOrUrl === 'string') {
             this.http.request('GET', fileOrUrl, { responseType: 'arraybuffer' }).subscribe(
               (res: ArrayBuffer) => {
-                const wb = XLSX.read(new Uint8Array(res), { type: 'array' });
-                resolve(this.read(wb));
+                this.ngZone.run(() => resolve(this.read(new Uint8Array(res), { type: 'array' })));
               },
               (err: any) => {
                 reject(err);
@@ -57,8 +59,7 @@ export class XlsxService {
           // from file
           const reader: FileReader = new FileReader();
           reader.onload = (e: any) => {
-            const wb: any = XLSX.read(e.target.result, { type: 'binary' });
-            resolve(this.read(wb));
+            this.ngZone.run(() => resolve(this.read(e.target.result, { type: 'binary' })));
           };
           reader[rABS](fileOrUrl);
         })
@@ -69,26 +70,28 @@ export class XlsxService {
   /** 导出 */
   export(options: XlsxExportOptions): Promise<void> {
     return this.init().then(() => {
-      const wb: any = XLSX.utils.book_new();
-      if (Array.isArray(options.sheets)) {
-        (options.sheets as XlsxExportSheet[]).forEach((value: XlsxExportSheet, index: number) => {
-          const ws: any = XLSX.utils.aoa_to_sheet(value.data);
-          XLSX.utils.book_append_sheet(wb, ws, value.name || `Sheet${index + 1}`);
-        });
-      } else {
-        wb.SheetNames = Object.keys(options.sheets);
-        wb.Sheets = options.sheets;
-      }
+      this.ngZone.runOutsideAngular(() => {
+        const wb: any = XLSX.utils.book_new();
+        if (Array.isArray(options.sheets)) {
+          (options.sheets as XlsxExportSheet[]).forEach((value: XlsxExportSheet, index: number) => {
+            const ws: any = XLSX.utils.aoa_to_sheet(value.data);
+            XLSX.utils.book_append_sheet(wb, ws, value.name || `Sheet${index + 1}`);
+          });
+        } else {
+          wb.SheetNames = Object.keys(options.sheets);
+          wb.Sheets = options.sheets;
+        }
 
-      if (options.callback) options.callback(wb);
+        if (options.callback) options.callback(wb);
 
-      const wbout: ArrayBuffer = XLSX.write(wb, {
-        bookType: 'xlsx',
-        bookSST: false,
-        type: 'array',
-        ...options.opts,
+        const wbout: ArrayBuffer = XLSX.write(wb, {
+          bookType: 'xlsx',
+          bookSST: false,
+          type: 'array',
+          ...options.opts,
+        });
+        saveAs(new Blob([wbout], { type: 'application/octet-stream' }), options.filename || 'export.xlsx');
       });
-      saveAs(new Blob([wbout], { type: 'application/octet-stream' }), options.filename || 'export.xlsx');
     });
   }
 }
diff --git a/packages/abc/zip/demo/read.md b/packages/abc/zip/demo/read.md
@@ -6,32 +6,35 @@ title: 解压
 读取Zip文件信息（含内容），支持 File、URL 形式
 
 ```ts
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { ZipService } from '@delon/abc/zip';
 
 @Component({
   selector: 'app-demo',
   template: `
-  <button nz-button (click)="url()">Via Url</button>
-  <input type="file" (change)="change($event)" multiple="false" class="ml-sm" />
-  <ol>
-    <li *ngFor="let i of data">{{i | json}}</li>
-  </ol>
-  `
+    <button nz-button (click)="url()">Via Url</button>
+    <input type="file" (change)="change($event)" multiple="false" class="ml-sm" />
+    <ol>
+      <li *ngFor="let i of data">{{ i | json }}</li>
+    </ol>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DemoComponent {
-  constructor(private zip: ZipService) {}
   data: any;
 
+  constructor(private zip: ZipService, private cdr: ChangeDetectorRef) {}
+
   private format(data: any) {
     const files = data.files;
     this.data = Object.keys(files).map(key => {
       return {
         name: key,
         dir: files[key].dir,
-        date: files[key].date
+        date: files[key].date,
       };
     });
+    this.cdr.detectChanges();
   }
 
   url() {

diff --git a/packages/abc/zip/zip.service.ts b/packages/abc/zip/zip.service.ts
@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, NgZone } from '@angular/core';
 import { AlainConfigService, AlainZipConfig, LazyResult, LazyService } from '@delon/util';
 import { saveAs } from 'file-saver';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
@@ -11,7 +11,7 @@ declare var JSZip: any;
 export class ZipService {
   private cog: AlainZipConfig;
 
-  constructor(private http: HttpClient, private lazy: LazyService, configSrv: AlainConfigService) {
+  constructor(private http: HttpClient, private lazy: LazyService, configSrv: AlainConfigService, private ngZone: NgZone) {
     this.cog = configSrv.merge('zip', {
       url: '//cdn.bootcss.com/jszip/3.3.0/jszip.min.js',
       utils: [],
@@ -29,25 +29,30 @@ export class ZipService {
   /** 解压 */
   read(fileOrUrl: File | string, options?: any): Promise<any> {
     return new Promise<any>((resolve, reject) => {
+      const resolveCallback = (data: NzSafeAny) => {
+        this.ngZone.run(() => resolve(data));
+      };
       this.init().then(() => {
-        // from url
-        if (typeof fileOrUrl === 'string') {
-          this.http.request('GET', fileOrUrl, { responseType: 'arraybuffer' }).subscribe(
-            (res: ArrayBuffer) => {
-              JSZip.loadAsync(res, options).then((ret: NzSafeAny) => resolve(ret));
-            },
-            (err: any) => {
-              reject(err);
-            },
-          );
-          return;
-        }
-        // from file
-        const reader: FileReader = new FileReader();
-        reader.onload = (e: any) => {
-          JSZip.loadAsync(e.target.result, options).then((ret: NzSafeAny) => resolve(ret));
-        };
-        reader.readAsBinaryString(fileOrUrl as File);
+        this.ngZone.runOutsideAngular(() => {
+          // from url
+          if (typeof fileOrUrl === 'string') {
+            this.http.request('GET', fileOrUrl, { responseType: 'arraybuffer' }).subscribe(
+              (res: ArrayBuffer) => {
+                JSZip.loadAsync(res, options).then((ret: NzSafeAny) => resolveCallback(ret));
+              },
+              (err: any) => {
+                reject(err);
+              },
+            );
+            return;
+          }
+          // from file
+          const reader: FileReader = new FileReader();
+          reader.onload = (e: any) => {
+            JSZip.loadAsync(e.target.result, options).then((ret: NzSafeAny) => resolveCallback(ret));
+          };
+          reader.readAsBinaryString(fileOrUrl as File);
+        });
       });
     });
   }

diff --git a/packages/form/src/sf-item-wrap.component.html b/packages/form/src/sf-item-wrap.component.html
@@ -10,10 +10,10 @@
           [nzTooltipTitle]="oh.text"
           [nzTooltipPlacement]="oh.placement"
           [nzTooltipTrigger]="oh.trigger"
-          [nzOverlayClassName]="oh.overlayClassName"
-          [nzOverlayStyle]="oh.overlayStyle"
-          [nzMouseEnterDelay]="oh.mouseEnterDelay"
-          [nzMouseLeaveDelay]="oh.mouseLeaveDelay"
+          [nzTooltipOverlayClassName]="oh.overlayClassName"
+          [nzTooltipOverlayStyle]="oh.overlayStyle"
+          [nzTooltipMouseEnterDelay]="oh.mouseEnterDelay"
+          [nzTooltipMouseLeaveDelay]="oh.mouseLeaveDelay"
           nz-icon
           [nzType]="oh.icon"
         ></i>

diff --git a/packages/form/src/widgets/array/array.widget.html b/packages/form/src/widgets/array/array.widget.html
@@ -10,10 +10,10 @@
           [nzTooltipTitle]="oh.text"
           [nzTooltipPlacement]="oh.placement"
           [nzTooltipTrigger]="oh.trigger"
-          [nzOverlayClassName]="oh.overlayClassName"
-          [nzOverlayStyle]="oh.overlayStyle"
-          [nzMouseEnterDelay]="oh.mouseEnterDelay"
-          [nzMouseLeaveDelay]="oh.mouseLeaveDelay"
+          [nzTooltipOverlayClassName]="oh.overlayClassName"
+          [nzTooltipOverlayStyle]="oh.overlayStyle"
+          [nzTooltipMouseEnterDelay]="oh.mouseEnterDelay"
+          [nzTooltipMouseLeaveDelay]="oh.mouseLeaveDelay"
           nz-icon
           [nzType]="oh.icon"
         ></i>

diff --git a/packages/form/src/widgets/checkbox/checkbox.widget.html b/packages/form/src/widgets/checkbox/checkbox.widget.html
@@ -21,10 +21,10 @@
           [nzTooltipTitle]="oh.text"
           [nzTooltipPlacement]="oh.placement"
           [nzTooltipTrigger]="oh.trigger"
-          [nzOverlayClassName]="oh.overlayClassName"
-          [nzOverlayStyle]="oh.overlayStyle"
-          [nzMouseEnterDelay]="oh.mouseEnterDelay"
-          [nzMouseLeaveDelay]="oh.mouseLeaveDelay"
+          [nzTooltipOverlayClassName]="oh.overlayClassName"
+          [nzTooltipOverlayStyle]="oh.overlayStyle"
+          [nzTooltipMouseEnterDelay]="oh.mouseEnterDelay"
+          [nzTooltipMouseLeaveDelay]="oh.mouseLeaveDelay"
           nz-icon
           [nzType]="oh.icon"
         ></i>

diff --git a/src/app/layout/header/header.component.html b/src/app/layout/header/header.component.html
@@ -52,7 +52,7 @@
   nz-icon
   nzType="menu"
   nz-popover
-  nzOverlayClassName="popover-menu"
+  nzTooltipOverlayClassName="popover-menu"
   nzPopoverPlacement="bottomRight"
   [nzPopoverContent]="menu"
   nzPopoverTrigger="click"