refactor(module: toast): toast refactor (#533)

NG-ZORRO · Aug 20, 2019 · 454b55c · 454b55c
1 parent 62c4d60
commit 454b55c
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 78 deletions.
diff --git a/components/action-sheet/demo/basic.ts b/components/action-sheet/demo/basic.ts
@@ -57,7 +57,7 @@ export class DemoActionSheetBasicComponent {
       },
       buttonIndex => {
         return new Promise(resolve => {
-          ToastService.info('closed after 1000ms');
+          this._toast.info('closed after 1000ms');
           setTimeout(resolve, 1000);
         });
       }

diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts
@@ -199,7 +199,7 @@ export class DatePickerComponent implements OnInit, OnDestroy, AfterViewInit {
   init() {
     if (!this.checkTime() && this.options.showErrorToast) {
       setTimeout(() => {
-        ToastService.fail(this.errorMessage, this.options.showErrorToastInterval);
+        this.toast.fail(this.errorMessage, this.options.showErrorToastInterval);
       }, 0);
     }
     this.initResult();

diff --git a/components/input-item/demo/basic.ts b/components/input-item/demo/basic.ts
@@ -179,7 +179,7 @@ export class DemoInputItemBasicComponent {
   constructor(private _toast: ToastService) {}
 
   inputErrorClick(e) {
-    ToastService.info('Please enter 11 digits');
+    this._toast.info('Please enter 11 digits');
   }
 
   inputChange(e) {

diff --git a/components/modal/demo/alert.ts b/components/modal/demo/alert.ts
@@ -51,7 +51,7 @@ export class DemoModalAlertComponent {
         text: 'Ok',
         onPress: () =>
           new Promise(resolve => {
-            ToastService.info('onPress Promise', 1000);
+            this._toast.info('onPress Promise', 1000);
             setTimeout(resolve, 1000);
           }),
         style: {

diff --git a/components/modal/demo/prompt.ts b/components/modal/demo/prompt.ts
@@ -31,7 +31,7 @@ export class DemoModalPromptComponent {
           text: 'Close',
           onPress: value =>
             new Promise(resolve => {
-              ToastService.info('onPress promise resolve', 1000);
+              this._toast.info('onPress promise resolve', 1000);
               setTimeout(() => {
                 resolve();
                 console.log(`value:${value}`);
@@ -42,7 +42,7 @@ export class DemoModalPromptComponent {
           text: 'Hold on',
           onPress: value =>
             new Promise((resolve, reject) => {
-              ToastService.info('onPress promise reject', 1000);
+              this._toast.info('onPress promise reject', 1000);
               setTimeout(() => {
                 // reject();
                 console.log(`value:${value}`);

diff --git a/components/toast/demo/basic.ts b/components/toast/demo/basic.ts
@@ -33,44 +33,44 @@ export class DemoToastBasicComponent {
   constructor(private _toast: ToastService) {}
 
   showToast() {
-    const toast = ToastService.show('This is a toast tips !!!', 0);
+    const toast = this._toast.show('This is a toast tips !!!', 0);
     setTimeout(() => {
-      ToastService.hide();
+      this._toast.hide();
     }, 3000);
   }
 
   showToastNoMask() {
-    const toast = ToastService.info('Toast without mask !!!', 4000, null, false);
+    const toast = this._toast.info('Toast without mask !!!', 4000, null, false);
   }
 
   showToastTop() {
-    const toast = ToastService.info('Toast position top', 4000, null, false, 'top');
+    const toast = this._toast.info('Toast position top', 4000, null, false, 'top');
   }
 
   showToastBottom() {
-    const toast = ToastService.info('Toast position top', 4000, null, false, 'bottom');
+    const toast = this._toast.info('Toast position top', 4000, null, false, 'bottom');
   }
 
   showCustomIcon(event) {
-    const toast = ToastService.info(event);
+    const toast = this._toast.info(event);
   }
 
   successToast() {
-    const toast = ToastService.success('Load success !!!', 3000, () => {
+    const toast = this._toast.success('Load success !!!', 3000, () => {
       console.log('success');
     });
   }
 
   failToast() {
-    const toast = ToastService.fail('Load failed !!!', 1000);
+    const toast = this._toast.fail('Load failed !!!', 1000);
   }
 
   offline() {
-    const toast = ToastService.offline('Network connection failed !!!', 1000);
+    const toast = this._toast.offline('Network connection failed !!!', 1000);
   }
 
   loadingToast() {
-    const toast = ToastService.loading('Loading...', 3000, () => {
+    const toast = this._toast.loading('Loading...', 3000, () => {
       console.log('Load complete !!!');
     });
   }

diff --git a/components/toast/doc/index.en-US.md b/components/toast/doc/index.en-US.md
@@ -13,13 +13,16 @@ A lightweight feedback or tips, used to display content that does not interrupt
 - Toast with Icon, 4-6 words is recommended.; Toast without Icon, the number of words should not exceed 14.
 
 
-## API
+## API USE
 
-- `ToastService.success(content, duration, onClose, mask)`
-- `ToastService.fail(content, duration, onClose, mask)`
-- `ToastService.info(content, duration, onClose, mask)`
-- `ToastService.loading(content, duration, onClose, mask)`
-- `ToastService.offline(content, duration, onClose, mask)`
+```ts
+constructor(private _toast: ToastService) {}
+```
+- `this._toast.success(content, duration, onClose, mask)`
+- `this._toast.fail(content, duration, onClose, mask)`
+- `this._toast.info(content, duration, onClose, mask)`
+- `this._toast.loading(content, duration, onClose, mask)`
+- `this._toast.offline(content, duration, onClose, mask)`
 
 The component provide several static methods：
 
@@ -35,4 +38,4 @@ Properties | Descrition | Type | Default
 
 Provides global configuration and global destroy methods:
 
-- `ToastService.hide()`
+- `this._toast.hide()`
diff --git a/components/toast/doc/index.zh-CN.md b/components/toast/doc/index.zh-CN.md
@@ -14,13 +14,15 @@ subtitle: 轻提示
 - 有 Icon 的 Toast，字数为 4-6 个；没有 Icon 的 Toast，字数不宜超过 14 个。
 
 
-## API
-
-- `ToastService.success(content, duration, onClose, mask)`
-- `ToastService.fail(content, duration, onClose, mask)`
-- `ToastService.info(content, duration, onClose, mask)`
-- `ToastService.loading(content, duration, onClose, mask)`
-- `ToastService.offline(content, duration, onClose, mask)`
+## API 调用
+```ts
+constructor(private _toast: ToastService) {}
+```
+- `this._toast.success(content, duration, onClose, mask)`
+- `this._toast.fail(content, duration, onClose, mask)`
+- `this._toast.info(content, duration, onClose, mask)`
+- `this._toast.loading(content, duration, onClose, mask)`
+- `this._toast.offline(content, duration, onClose, mask)`
 
 组件提供了五个静态方法，参数如下：
 
@@ -36,4 +38,4 @@ subtitle: 轻提示
 
 还提供了全局配置和全局销毁方法：
 
-- `ToastService.hide()`
+- `this._toast.hide()`
diff --git a/components/toast/toast.component.spec.ts b/components/toast/toast.component.spec.ts
@@ -184,22 +184,22 @@ export class TestToastComponent {
   constructor(private _toast: ToastService) {}
 
   showToast() {
-    const toast = ToastService.show('This is a toast tips !!!', 0, true, this.position);
+    this._toast.show('This is a toast tips !!!', 0, true, this.position);
     setTimeout(() => {
-      ToastService.hide();
+      this._toast.hide();
     }, 3000);
   }
 
   showToastNoMask() {
-    const toast = ToastService.info('Toast without mask !!!', 4000, null, false);
+    this._toast.info('Toast without mask !!!', 4000, null, false);
   }
 
   showCustomIcon(event) {
-    const toast = ToastService.info(event);
+    this._toast.info(event);
   }
 
   successToast() {
-    const toast = ToastService.success('Load success !!!', 3000, () => {
+    this._toast.success('Load success !!!', 3000, () => {
       this.onClose();
     });
   }
@@ -209,15 +209,15 @@ export class TestToastComponent {
   }
 
   failToast() {
-    const toast = ToastService.fail('Load failed !!!', 1000);
+    this._toast.fail('Load failed !!!', 1000);
   }
 
   offline() {
-    const toast = ToastService.offline('Network connection failed !!!', 1000);
+    this._toast.offline('Network connection failed !!!', 1000);
   }
 
   loadingToast() {
-    const toast = ToastService.loading('Loading...', 3000, () => {
+    this._toast.loading('Loading...', 3000, () => {
       console.log('Load complete !!!');
     });
   }

diff --git a/components/toast/toast.service.ts b/components/toast/toast.service.ts
@@ -3,7 +3,6 @@ import {
   ComponentRef,
   ComponentFactory,
   ApplicationRef,
-  Compiler,
   NgZone,
   ComponentFactoryResolver
 } from '@angular/core';
@@ -20,24 +19,23 @@ export interface ConfigInterface {
 })
 @Injectable()
 export class ToastService {
-  static timeout = null;
-  static _zone: NgZone = null;
-  static compRef: ComponentRef<any> = null;
-  static _toastCompFactory: ComponentFactory<ToastComponent> = null;
-  static _appRef: ApplicationRef = null;
+  timeout = null;
+  zone: NgZone = null;
+  compRef: ComponentRef<any> = null;
+  toastCompFactory: ComponentFactory<ToastComponent> = null;
+  appRef: ApplicationRef = null;
 
   constructor(
     private _appRef: ApplicationRef,
-    private _compiler: Compiler,
     private _cfr: ComponentFactoryResolver,
     private _zone: NgZone
   ) {
-    ToastService._zone = this._zone;
-    ToastService._appRef = this._appRef;
-    ToastService._toastCompFactory = this._cfr.resolveComponentFactory(ToastComponent);
+    this.zone = this._zone;
+    this.appRef = this._appRef;
+    this.toastCompFactory = this._cfr.resolveComponentFactory(ToastComponent);
   }
 
-  static _initConfig(config: Object, options: ToastOptions): Object {
+  _initConfig(config: Object, options: ToastOptions): Object {
     const props = {};
     const optionalParams: string[] = ['content', 'iconType', 'mask', 'position'];
 
@@ -62,34 +60,34 @@ export class ToastService {
     return props;
   }
 
-  static notice(config: ConfigInterface, type, timeInterval = 2000, onClose, mask = true, position = 'middle') {
+  notice(config: ConfigInterface, type, timeInterval = 2000, onClose, mask = true, position = 'middle') {
     // 如果已经存在，在没有遮罩层的情况下，会响应别的toast，需要清除原来的
-    if (ToastService.compRef) {
-      ToastService.hide();
+    if (this.compRef) {
+      this.hide();
     }
     const options: ToastOptions = new ToastOptions();
     options.iconType = type;
     options.mask = mask;
     options.position = position;
-    const props = ToastService._initConfig(config, options);
+    const props = this._initConfig(config, options);
 
     document.body.insertBefore(
-      document.createElement(ToastService._toastCompFactory.selector),
+      document.createElement(this.toastCompFactory.selector),
       document.body.firstChild
     );
     let instance: any;
     let subject: any;
 
-    ToastService.compRef = ToastService._appRef.bootstrap(ToastService._toastCompFactory);
-    instance = ToastService.compRef.instance;
+    this.compRef = this._appRef.bootstrap(this.toastCompFactory);
+    instance = this.compRef.instance;
     subject = instance.subject;
 
     if (timeInterval) {
-      ToastService.timeout = setTimeout(() => {
+      this.timeout = setTimeout(() => {
         if (onClose) {
           onClose();
         }
-        ToastService.hide();
+        this.hide();
       }, timeInterval);
     }
 
@@ -100,66 +98,66 @@ export class ToastService {
   /**
    * Open info dialog
    */
-  static info(content?: string, timeInterval?: number, onClose?: () => void, mask?: boolean, position?: string) {
+  info(content?: string, timeInterval?: number, onClose?: () => void, mask?: boolean, position?: string) {
     const config = Object.assign({
       iconType: 'info',
       content: content
     });
-    return ToastService.notice(config, 'info', timeInterval, onClose, mask, position);
+    return this.notice(config, 'info', timeInterval, onClose, mask, position);
   }
 
   /**
    * Open success dialog
    */
-  static success(content?: string, timeInterval?: number, onClose?: () => void, mask?: boolean, position?: string) {
+  success(content?: string, timeInterval?: number, onClose?: () => void, mask?: boolean, position?: string) {
     const config = Object.assign({
       iconType: 'success',
       content: content
     });
-    return ToastService.notice(config, 'success', timeInterval, onClose, mask, position);
+    return this.notice(config, 'success', timeInterval, onClose, mask, position);
   }
 
-  static show(content?: string, timeInterval?: number, mask?: boolean, position?: string) {
+  show(content?: string, timeInterval?: number, mask?: boolean, position?: string) {
     const config = Object.assign({
       iconType: 'info',
       content: content
     });
-    return ToastService.notice(config, 'info', timeInterval, () => {}, mask, position);
+    return this.notice(config, 'info', timeInterval, () => {}, mask, position);
   }
 
-  static fail(content?: string, timeInterval?: number, onClose?: () => void, mask?: boolean, position?: string) {
+  fail(content?: string, timeInterval?: number, onClose?: () => void, mask?: boolean, position?: string) {
     const config = Object.assign({
       iconType: 'fail',
       content: content
     });
-    return ToastService.notice(config, 'fail', timeInterval, onClose, mask, position);
+    return this.notice(config, 'fail', timeInterval, onClose, mask, position);
   }
 
-  static offline(content?: string, timeInterval?: number, onClose?: () => void, mask?: boolean, position?: string) {
+  offline(content?: string, timeInterval?: number, onClose?: () => void, mask?: boolean, position?: string) {
     const config = Object.assign({
       iconType: 'offline',
       content: content
     });
-    return ToastService.notice(config, 'offline', timeInterval, onClose, mask, position);
+    return this.notice(config, 'offline', timeInterval, onClose, mask, position);
   }
 
-  static loading(content?: string, timeInterval?: number, onClose?: () => void, mask?: boolean, position?: string) {
+  loading(content?: string, timeInterval?: number, onClose?: () => void, mask?: boolean, position?: string) {
     const config = Object.assign({
       iconType: 'loading',
       content: content
     });
-    return ToastService.notice(config, 'loading', timeInterval, onClose, mask, position);
+    return this.notice(config, 'loading', timeInterval, onClose, mask, position);
   }
 
-  static hide() {
-    if (ToastService.timeout) {
-      clearTimeout(ToastService.timeout);
+  hide() {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
     }
-    if (ToastService.compRef) {
-      ToastService._zone.run(() => {
-        ToastService.compRef.destroy();
+    if (this.compRef) {
+      this._zone.run(() => {
+        this.compRef.destroy();
       });
-      ToastService.compRef = null;
+      this.compRef = null;
     }
   }
 }