Merge pull request #253 from toverux/fix/angular-multi-modals

fix(bottomsheet): support multiple modal instances in the Angular service

Author: farfromrefug

src/bottomsheet/angular/bottomsheet.service.ts

@@ -1,52 +1,51 @@
 import { ComponentFactoryResolver, ComponentRef, Injectable, Injector, Type, ViewContainerRef } from '@angular/core';
+import type { BottomSheetOptions as MaterialBottomSheetOptions } from '@nativescript-community/ui-material-bottomsheet';
 import { AppHostView, DetachedLoader, once } from '@nativescript/angular';
-import { ProxyViewContainer } from '@nativescript/core';
+import { LayoutBase, ProxyViewContainer, View } from '@nativescript/core';
 import { Observable, Subject } from 'rxjs';
-import { filter, first, map } from 'rxjs/operators';
-import { BottomSheetOptions as MaterialBottomSheetOptions } from '@nativescript-community/ui-material-bottomsheet'; // ViewWithBottomSheetBase
 
-export type BaseShowBottomSheetOptions = Pick<MaterialBottomSheetOptions, Exclude<keyof MaterialBottomSheetOptions, 'closeCallback' | 'view'>>;
+export type BaseShowBottomSheetOptions = Omit<MaterialBottomSheetOptions, 'closeCallback' | 'view'>;
 
 export interface BottomSheetOptions extends BaseShowBottomSheetOptions {
     viewContainerRef?: ViewContainerRef;
 }
 
 export class BottomSheetParams {
-    context: any;
-    closeCallback: (...args) => void;
+    public constructor(public readonly context: any, public readonly closeCallback: (...args) => void) {}
+}
 
-    constructor(context, closeCallback) {
-        this.context = context;
-        this.closeCallback = closeCallback;
-    }
+type ViewWithDialogRoot = View & { _ngDialogRoot?: View };
+
+interface SheetRef<TResult = unknown> {
+    detachedLoader?: ComponentRef<DetachedLoader>;
+    componentView?: View;
+    result: Subject<TResult>;
 }
 
 @Injectable({
     providedIn: 'root'
 })
 export class BottomSheetService {
-    private detachedLoader: ComponentRef<DetachedLoader>;
-    private componentView: any;//ViewWithBottomSheetBase;
-    private subject$: Subject<{ requestId: number; result: any }> = new Subject();
-    private currentId = 0;
-
-    show<T = any>(type: Type<any>, options: BottomSheetOptions): Observable<T> {
+    public show<TResult = any>(type: Type<any>, options: BottomSheetOptions): Observable<TResult> {
         return this.showWithCloseCallback(type, options).observable;
     }
 
-    showWithCloseCallback<T = any>(type: Type<any>, options: BottomSheetOptions): { observable: Observable<T>; closeCallback: () => void } {
+    public showWithCloseCallback<TResult = any>(type: Type<any>, options: BottomSheetOptions): { observable: Observable<TResult>; closeCallback: () => void } {
         if (!options.viewContainerRef) {
             throw new Error('No viewContainerRef: Make sure you pass viewContainerRef in BottomSheetOptions.');
         }
-        this.currentId++;
-        const requestId = this.currentId;
+
+        const sheetRef: SheetRef<TResult> = {
+            result: new Subject()
+        };
+
         const parentView = this.getParentView(options.viewContainerRef);
         const factoryResolver = this.getFactoryResolver(options.viewContainerRef);
-        const bottomSheetParams = this.getBottomSheetParams(options.context, requestId);
+        const bottomSheetParams = this.getBottomSheetParams(options.context, sheetRef);
 
-        this.detachedLoader = this.createDetachedLoader(factoryResolver, bottomSheetParams, options.viewContainerRef);
+        sheetRef.detachedLoader = this.createDetachedLoader(factoryResolver, bottomSheetParams, options.viewContainerRef);
 
-        this.loadComponent(type).then(componentView => {
+        this.loadComponent(type, sheetRef).then((componentView) => {
             parentView.showBottomSheet({
                 ...options,
                 ...bottomSheetParams,
@@ -55,17 +54,13 @@ export class BottomSheetService {
         });
 
         return {
-            observable: this.subject$.pipe(
-                filter(item => item && item.requestId === requestId),
-                map(item => item.result),
-                first()
-            ),
+            observable: sheetRef.result,
             closeCallback: bottomSheetParams.closeCallback
         };
     }
 
-    private getParentView(viewContainerRef: ViewContainerRef): any {//ViewWithBottomSheetBase {
-        let parentView = viewContainerRef.element.nativeElement;
+    private getParentView(viewContainerRef: ViewContainerRef): View {
+        let parentView = viewContainerRef.element.nativeElement as View;
 
         if (parentView instanceof AppHostView && parentView.ngAppRoot) {
             parentView = parentView.ngAppRoot;
@@ -74,8 +69,8 @@ export class BottomSheetService {
         // _ngDialogRoot is the first child of the previously detached proxy.
         // It should have 'viewController' (iOS) or '_dialogFragment' (Android) available for
         // presenting future bottomSheets views.
-        if (parentView._ngDialogRoot) {
-            parentView = parentView._ngDialogRoot;
+        if ((parentView as ViewWithDialogRoot)._ngDialogRoot) {
+            parentView = (parentView as ViewWithDialogRoot)._ngDialogRoot;
         }
 
         return parentView;
@@ -87,7 +82,7 @@ export class BottomSheetService {
         return componentContainer.injector.get(ComponentFactoryResolver);
     }
 
-    private createChildInjector(bottomSheetParams: BottomSheetParams, containerRef: ViewContainerRef) {
+    private createChildInjector(bottomSheetParams: BottomSheetParams, containerRef: ViewContainerRef): Injector {
         return Injector.create({
             providers: [
                 {
@@ -99,17 +94,21 @@ export class BottomSheetService {
         });
     }
 
-    private getBottomSheetParams(context: any, requestId: number) {
-        const closeCallback = once(args => {
-            this.subject$.next({ result: args, requestId });
+    private getBottomSheetParams(context: any, sheetRef: SheetRef): BottomSheetParams {
+        const closeCallback = once((args) => {
+            const { result, componentView, detachedLoader } = sheetRef;
+
+            result.next(args);
+            result.complete();
 
-            if (!this.componentView) {
-                return;
+            if (componentView) {
+                componentView.closeBottomSheet();
             }
 
-            this.componentView.closeBottomSheet();
-            this.detachedLoader.instance.detectChanges();
-            this.detachedLoader.destroy();
+            if (detachedLoader) {
+                detachedLoader.instance.detectChanges();
+                detachedLoader.destroy();
+            }
         });
 
         return new BottomSheetParams(context, closeCallback);
@@ -122,25 +121,26 @@ export class BottomSheetService {
         return viewContainerRef.createComponent(detachedLoaderFactory, 0, childInjector, null);
     }
 
-    private async loadComponent(type: Type<any>): Promise<any> {//ViewWithBottomSheetBase> {
+    private async loadComponent(type: Type<any>, sheetRef: SheetRef): Promise<View> {
         try {
-            const componentRef = await this.detachedLoader.instance.loadComponent(type);
+            const componentRef = await sheetRef.detachedLoader.instance.loadComponent(type);
             const detachedProxy = componentRef.location.nativeElement as ProxyViewContainer;
 
             if (detachedProxy.getChildrenCount() > 1) {
                 throw new Error('BottomSheet content has more than one root view.');
             }
 
-            this.componentView = detachedProxy.getChildAt(0) as any;//ViewWithBottomSheetBase;
+            sheetRef.componentView = detachedProxy.getChildAt(0);
 
-            if (this.componentView.parent) {
-                (this.componentView.parent)._ngDialogRoot = this.componentView;
-                (this.componentView.parent).removeChild(this.componentView);
+            if (sheetRef.componentView.parent instanceof LayoutBase) {
+                (sheetRef.componentView.parent as ViewWithDialogRoot)._ngDialogRoot = sheetRef.componentView;
+                sheetRef.componentView.parent.removeChild(sheetRef.componentView);
             }
 
-            return this.componentView;
-        } catch (e) {
-            console.error(e);
+            return sheetRef.componentView;
+        } catch (err) {
+            console.error(err);
+
             return null;
         }
     }