refactor(module:popupservice): popup refactor (#531)

components/action-sheet/action-sheet-options.provider.ts

@@ -12,6 +12,7 @@ export class ActionSheetOptions {
   transitionName?: string = 'am-slide-up';
   maskTransitionName?: string = 'am-fade';
   locale?;
+  close?: () => void;
 }
 
 @Injectable()

components/action-sheet/action-sheet-ref.class.ts

@@ -0,0 +1,10 @@
+import { Observable } from 'rxjs';
+
+import { ActionSheetComponent } from './action-sheet.component';
+
+export abstract class ActionSheetRef<T = any, R = any> {
+  abstract close(result?: R): void;
+  abstract destroy(result?: R): void;
+  abstract getElement(): HTMLElement;
+  abstract getInstance(): ActionSheetComponent;
+}

components/action-sheet/action-sheet.component.spec.ts

@@ -2,7 +2,7 @@ import { Component, ViewChild } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { async, ComponentFixture, TestBed, fakeAsync, flush } from '@angular/core/testing';
 import { ActionSheetComponent } from './action-sheet.component';
-import { ActionSheet, ActionSheetModule, ButtonModule } from '../..';
+import { ActionSheet, ActionSheetModule, ButtonModule, ActionSheetRef } from '../..';
 import { NgZorroAntdMobilePipesModule } from '../pipes/ng-zorro-antd-mobile.pipes.module';
 import { Overlay } from '@angular/cdk/overlay';
 import { en_US } from '../locale-provider/locale';
@@ -102,17 +102,6 @@ describe('ActionSheetComponent', () => {
     flush();
   }));
 
-  it('should close work', fakeAsync(() => {
-    const button = buttons[1].nativeElement;
-    button.click();
-    fixture.detectChanges();
-    flush();
-    actionSheetEle = document.getElementsByTagName('actionsheet')[1];
-    actionSheetEle.querySelector('.am-action-sheet-share-list-item').click();
-    fixture.detectChanges();
-    flush();
-  }));
-
   it('should create', () => {
     expect(component).toBeTruthy();
   });
@@ -162,7 +151,7 @@ export class TestActionSheetBasicComponent {
 
   showActionSheet = message => {
     const BUTTONS = ['Operation1', 'Operation2', 'Operation2', 'Delete', 'Cancel'];
-    ActionSheet.showActionSheetWithOptions(
+    const ref: ActionSheetRef = this._actionSheet.showActionSheetWithOptions(
       {
         options: BUTTONS,
         cancelButtonIndex: BUTTONS.length - 1,
@@ -176,10 +165,12 @@ export class TestActionSheetBasicComponent {
         console.log(buttonIndex);
       }
     );
+    ref.getInstance();
+    ref.getElement();
   }
 
   showShareActionSheet = () => {
-    ActionSheet.showShareActionSheetWithOptions(
+    this._actionSheet.showShareActionSheetWithOptions(
       {
         options: this.dataList,
         title: 'action-title',
@@ -195,7 +186,7 @@ export class TestActionSheetBasicComponent {
 
   showShareActionSheetMulpitleLine = () => {
     const data = [[...this.dataList1, this.dataList1[2]], [this.dataList1[3], this.dataList1[4]]];
-    ActionSheet.showShareActionSheetWithOptions(
+    this._actionSheet.showShareActionSheetWithOptions(
       {
         options: data,
         message: 'I am description, description, description'

components/action-sheet/action-sheet.component.ts

@@ -1,16 +1,26 @@
-import { Component, TemplateRef, ViewEncapsulation, HostListener, OnInit, OnDestroy } from '@angular/core';
-import { Subject } from 'rxjs';
+import {
+  OnInit,
+  Component,
+  OnDestroy,
+  ElementRef,
+  TemplateRef,
+  ViewEncapsulation
+} from '@angular/core';
+import { Subject, Observable } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { LocaleProviderService } from '../locale-provider/locale-provider.service';
+import { ActionSheetRef } from './action-sheet-ref.class';
 @Component({
   selector: 'ActionSheet',
   templateUrl: './action-sheet.component.html',
   encapsulation: ViewEncapsulation.None
 })
-export class ActionSheetComponent implements OnInit, OnDestroy {
+export class ActionSheetComponent<T = any, R = any> extends ActionSheetRef<T, R> implements OnInit, OnDestroy {
   unsubscribe$ = new Subject<void>();
   option: any;
-  constructor(private localeProviderService: LocaleProviderService) {}
+  constructor(private localeProviderService: LocaleProviderService, public elementRef: ElementRef) {
+    super();
+  }
 
   ngOnInit() {
     this.localeProvider();
@@ -53,6 +63,24 @@ export class ActionSheetComponent implements OnInit, OnDestroy {
     return false;
   }
 
+  getInstance(): ActionSheetComponent {
+    return this;
+  }
+
+  getElement(): HTMLElement {
+    return this.elementRef && this.elementRef.nativeElement;
+  }
+
+  close(): void {
+    if (this.option.close) {
+      this.option.close();
+    }
+  }
+
+  destroy(): void {
+    this.close();
+  }
+
   ngOnDestroy() {
     this.unsubscribe$.next();
     this.unsubscribe$.complete();

components/action-sheet/action-sheet.service.ts

@@ -15,14 +15,14 @@ function noop() {}
   providedIn: 'root'
 })
 export class ActionSheetService extends PopupService {
-  static compRef: ComponentRef<any> = null;
-  static _actionSheetCompFactory: ComponentFactory<ActionSheetComponent> = null;
-  static appRef: ApplicationRef = null;
-  static comRef: ComponentRef<ActionSheetComponent> = null;
+  compRef: ComponentRef<any> = null;
+  _actionSheetCompFactory: ComponentFactory<ActionSheetComponent> = null;
+  appRef: ApplicationRef = null;
+  comRef: ComponentRef<ActionSheetComponent> = null;
 
-  static instance = null;
+  instance = null;
 
-  static _initConfig(config: ActionSheetOptions, options: Object = {}): ActionSheetOptions {
+  _initConfig(config: ActionSheetOptions, options: Object = {}): ActionSheetOptions {
     const props: ActionSheetOptions = new ActionSheetOptions();
     const optionalParams: string[] = [
       'prefixCls',
@@ -36,12 +36,14 @@ export class ActionSheetService extends PopupService {
       'transitionName',
       'maskTransitionName',
       'options',
-      'locale'
+      'locale',
+      'close'
     ];
+    const self = this;
     config = Object.assign(options, config, {
       close: (): void => {
         if (config.maskClosable) {
-          ActionSheetService.closeWithAnimation(config.transitionName, config.maskTransitionName);
+          self.closeWithAnimation(config.transitionName, config.maskTransitionName);
         }
       }
     });
@@ -53,14 +55,13 @@ export class ActionSheetService extends PopupService {
     return props;
   }
 
-  static _open(props: ActionSheetOptions) {
-    setTimeout(() => {
-      ActionSheetService.comRef = ActionSheetService.showPopup('ActionSheetComponent', ActionSheetComponent);
-      ActionSheetService.comRef.instance.option = props;
-    }, 0);
+  _open(props: ActionSheetOptions) {
+    this.comRef =  this.showPopup(ActionSheetComponent);
+    this.comRef.instance.option = props;
+    return this.comRef && this.comRef.instance;
   }
 
-  static createActionSheet(
+  createActionSheet(
     flag: string,
     config: ActionSheetWithOptions | ShareActionSheetWithOptions,
     callback: ActionCallBack
@@ -70,39 +71,40 @@ export class ActionSheetService extends PopupService {
     options.transitionName = `${transitionName}-enter ${transitionName}-enter-active`;
     const maskTransitionName = config.maskTransitionName ? config.maskTransitionName : options.maskTransitionName;
     options.maskTransitionName = `${maskTransitionName}-enter ${maskTransitionName}-enter-active`;
-    const props = ActionSheetService._initConfig(config, options);
-    Object.assign(props, { onPress: cb }, { flag: flag }, { maskClose: props.maskClosable ? cb : () => {} });
+    const props = this._initConfig(config, options);
+    Object.assign(props, { onPress: cb }, { flag: flag }, { maskClose: props.maskClosable ? cb : () => {}});
+    const self = this;
     function cb(index: any, rowIndex = 0, event) {
       event.stopPropagation();
       const res = callback(index, rowIndex);
       if (res && res.then) {
         res.then(() => {
-          ActionSheetService.closeWithAnimation(transitionName, maskTransitionName);
+          self.closeWithAnimation(transitionName, maskTransitionName);
         });
       } else {
-        ActionSheetService.closeWithAnimation(transitionName, maskTransitionName);
+        self.closeWithAnimation(transitionName, maskTransitionName);
       }
     }
-    return ActionSheetService._open(props);
+    return this._open(props);
   }
 
-  static closeWithAnimation(transitionName, maskTransitionName) {
-    ActionSheetService.comRef.instance.option.transitionName = `${transitionName}-leave ${transitionName}-leave-active`;
-    ActionSheetService.comRef.instance.option.maskTransitionName = `${maskTransitionName}-leave ${maskTransitionName}-leave-active`;
+  closeWithAnimation(transitionName, maskTransitionName) {
+    this.comRef.instance.option.transitionName = `${transitionName}-leave ${transitionName}-leave-active`;
+    this.comRef.instance.option.maskTransitionName = `${maskTransitionName}-leave ${maskTransitionName}-leave-active`;
     setTimeout(() => {
-      ActionSheetService.close();
+      this.close();
     }, 200);
   }
 
-  static showActionSheetWithOptions(config: ActionSheetWithOptions, callback: ActionCallBack = noop) {
-    ActionSheetService.createActionSheet(NORMAL, config, callback);
+  showActionSheetWithOptions(config: ActionSheetWithOptions, callback: ActionCallBack = noop) {
+   return this.createActionSheet(NORMAL, config, callback);
   }
 
-  static showShareActionSheetWithOptions(config: ShareActionSheetWithOptions, callback: ActionCallBack = noop) {
-    ActionSheetService.createActionSheet(SHARE, config, callback);
+  showShareActionSheetWithOptions(config: ShareActionSheetWithOptions, callback: ActionCallBack = noop) {
+    return this.createActionSheet(SHARE, config, callback);
   }
 
-  static close() {
-    ActionSheetService.hidePopup('ActionSheetComponent');
+  close() {
+    this.hidePopup();
   }
 }

components/action-sheet/demo/basic.ts

@@ -33,7 +33,7 @@ export class DemoActionSheetBasicComponent {
 
   showActionSheet = message => {
     const BUTTONS = ['Operation1', 'Operation2', 'Operation2', 'Delete', 'Cancel'];
-    ActionSheetService.showActionSheetWithOptions(
+    this._actionSheet.showActionSheetWithOptions(
       {
         options: BUTTONS,
         cancelButtonIndex: BUTTONS.length - 1,
@@ -49,7 +49,7 @@ export class DemoActionSheetBasicComponent {
   }
 
   showShareActionSheet = () => {
-    ActionSheetService.showShareActionSheetWithOptions(
+    this._actionSheet.showShareActionSheetWithOptions(
       {
         options: this.dataList,
         message: 'I am description, description, description',
@@ -66,7 +66,7 @@ export class DemoActionSheetBasicComponent {
 
   showShareActionSheetMulpitleLine = () => {
     const data = [[...this.dataList, this.dataList[2]], [this.dataList[3], this.dataList[4]]];
-    ActionSheetService.showShareActionSheetWithOptions(
+    this._actionSheet.showShareActionSheetWithOptions(
       {
         options: data,
         message: 'I am description, description, description',

components/action-sheet/doc/index.en-US.md

@@ -15,7 +15,7 @@ The modal box pops up from the bottom, providing more than two actions related t
 
 ## API
 
-#### static showActionSheetWithOptions(options: Object, callback: Function)
+#### showActionSheetWithOptions(options: Object, callback: Function)
 
 Display a action sheet. The `options` object must contain one or more of:
 
@@ -28,7 +28,7 @@ Display a action sheet. The `options` object must contain one or more of:
 
 The `callback` function support returns Promise 
 
-#### static showShareActionSheetWithOptions(options: Object, callback: Function)
+#### showShareActionSheetWithOptions(options: Object, callback: Function)
 
 Display shareable action sheet. The `options` object must contain one or more of:
 
@@ -42,7 +42,7 @@ Display shareable action sheet. The `options` object must contain one or more of
 
 The `callback` function support returns Promise 
 
-#### static showShareActionSheetWithOptions(options: Object, failureCallback: Function, successCallback: Function)
+#### showShareActionSheetWithOptions(options: Object, failureCallback: Function, successCallback: Function)
 
 
 Display shareable action sheet.
@@ -56,4 +56,39 @@ Display shareable action sheet.
   - failureCallback(error): callback is called if share failed;
   - successCallback(completed, method): callback is called if share successed;
 
-#### static close() - programmatically close.
+#### close() - programmatically close.
+
+call ActionSheetService.showShareActionSheetWithOptions(options?).close()` can close Operation ActionSheet outside anywhere as you wish.
+
+
+```ts
+constructor(actionSheet: ActionSheetService) {
+  const ref: ActionSheetService = actionSheet.showShareActionSheetWithOptions(
+      {
+        options: this.dataList,
+        title: 'action-title',
+        message: 'I am description, description, description'
+      },
+      buttonIndex => {
+        return new Promise(resolve => {
+          setTimeout(resolve, 1000);
+        });
+      }
+    );
+  ref.close(); // Or ref.destroy(); This dialog will be destroyed directly
+}
+```
+
+#### ActionSheetRef
+
+> ActionSheetRef object is used to control dialogs and communicate with inside content
+
+The dialog created by the service method `ActionSheetService.xxx()` will return a `ActionSheetRef` object that is used to manipulate the dialog , This object has the following methods:
+
+| Method | Description |
+|----|----|
+| afterOpen                 | Same as AfterOpen but of type Observable<void> |
+| afterClose | Same as AfterClose, but of type Observable<result:any> |
+| close()                   | Close (hide) the dialog. <i>Note: When used for a dialog created as a service, this method will destroy the dialog directly (as with the destroy method)</i> |
+| destroy()                 | Destroy the dialog. <i>Note: Used only for dialogs created by the service (non-service created dialogs, this method only hides the dialog)</i> |
+| getContentComponent()  | Gets the Component instance in the contents of the dialog for `Content`. <i> Note: When the dialog is not initialized (`ngOnInit` is not executed), this function will return `undefined`</i> |