From 9cfa127d46427a0286d5b0840b51627289675203 Mon Sep 17 00:00:00 2001 From: Marcus Williams Date: Fri, 1 Feb 2019 19:35:52 +0000 Subject: [PATCH 1/7] =?UTF-8?q?feat(modal):=20add=20=E2=80=98ios=20present?= =?UTF-8?q?ationStyle=E2=80=99=20option=20to=20ModalDialogParams=20feat(mo?= =?UTF-8?q?dal):=20expose=20current/future=20core=20options=20via=20ModalD?= =?UTF-8?q?ialogParams?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nativescript-angular/directives/dialogs.ts | 67 +++++++++------------- 1 file changed, 28 insertions(+), 39 deletions(-) diff --git a/nativescript-angular/directives/dialogs.ts b/nativescript-angular/directives/dialogs.ts index 7c8b45739..3c700777d 100644 --- a/nativescript-angular/directives/dialogs.ts +++ b/nativescript-angular/directives/dialogs.ts @@ -7,6 +7,7 @@ import { ReflectiveInjector, Type, ViewContainerRef, + ElementRef, } from "@angular/core"; import { NSLocationStrategy } from "../router/ns-location-strategy"; @@ -17,15 +18,15 @@ import { AppHostView } from "../app-host-view"; import { DetachedLoader } from "../common/detached-loader"; import { PageFactory, PAGE_FACTORY } from "../platform-providers"; import { once } from "../common/utils"; -import { topmost, Frame } from "tns-core-modules/ui/frame"; +import { topmost, Frame, ShowModalOptions } from "tns-core-modules/ui/frame"; -export interface ModalDialogOptions { +export type BaseShowModalOptions = Pick>; + +export interface ModalDialogOptions extends BaseShowModalOptions { context?: any; - fullscreen?: boolean; - animated?: boolean; - stretched?: boolean; viewContainerRef?: ViewContainerRef; moduleRef?: NgModuleRef; + sourceView?: ElementRef; } export class ModalDialogParams { @@ -35,13 +36,10 @@ export class ModalDialogParams { } } -interface ShowDialogOptions { +interface ShowDialogOptions extends BaseShowModalOptions { containerRef: ViewContainerRef; context: any; doneCallback; - fullscreen: boolean; - animated: boolean; - stretched: boolean; pageFactory: PageFactory; parentView: ViewBase; resolver: ComponentFactoryResolver; @@ -54,16 +52,19 @@ export class ModalDialogService { } public showModal(type: Type, - { viewContainerRef, moduleRef, context, fullscreen, animated, stretched }: ModalDialogOptions + options: ModalDialogOptions ): Promise { - if (!viewContainerRef) { + if (!options.viewContainerRef) { throw new Error( "No viewContainerRef: " + "Make sure you pass viewContainerRef in ModalDialogOptions." ); } - let parentView = viewContainerRef.element.nativeElement; + let parentView = options.viewContainerRef.element.nativeElement; + if (options.sourceView) { + parentView = options.sourceView.nativeElement; + } if (parentView instanceof AppHostView && parentView.ngAppRoot) { parentView = parentView.ngAppRoot; } @@ -75,11 +76,11 @@ export class ModalDialogService { parentView = parentView._ngDialogRoot; } - const pageFactory: PageFactory = viewContainerRef.injector.get(PAGE_FACTORY); + const pageFactory: PageFactory = options.viewContainerRef.injector.get(PAGE_FACTORY); // resolve from particular module (moduleRef) // or from same module as parentView (viewContainerRef) - const componentContainer = moduleRef || viewContainerRef; + const componentContainer = options.moduleRef || options.viewContainerRef; const resolver = componentContainer.injector.get(ComponentFactoryResolver); let frame = parentView; @@ -93,16 +94,14 @@ export class ModalDialogService { setTimeout(() => { try { this._showDialog({ - containerRef: viewContainerRef, - context, + ...options, + containerRef: options.viewContainerRef, + context: options.context, doneCallback: resolve, - fullscreen, - animated, - stretched, pageFactory, parentView, resolver, - type, + type }); } catch (err) { reject(err); @@ -111,23 +110,12 @@ export class ModalDialogService { }); } - private _showDialog({ - containerRef, - context, - doneCallback, - fullscreen, - animated, - stretched, - pageFactory, - parentView, - resolver, - type, - }: ShowDialogOptions): void { + private _showDialog(options: ShowDialogOptions): void { let componentView: View; let detachedLoaderRef: ComponentRef; const closeCallback = once((...args) => { - doneCallback.apply(undefined, args); + options.doneCallback.apply(undefined, args); if (componentView) { componentView.closeModal(); this.location._closeModalNavigation(); @@ -136,15 +124,15 @@ export class ModalDialogService { } }); - const modalParams = new ModalDialogParams(context, closeCallback); + const modalParams = new ModalDialogParams(options.context, closeCallback); const providers = ReflectiveInjector.resolve([ { provide: ModalDialogParams, useValue: modalParams }, ]); - const childInjector = ReflectiveInjector.fromResolvedProviders(providers, containerRef.parentInjector); - const detachedFactory = resolver.resolveComponentFactory(DetachedLoader); - detachedLoaderRef = containerRef.createComponent(detachedFactory, -1, childInjector, null); - detachedLoaderRef.instance.loadComponent(type).then((compRef) => { + const childInjector = ReflectiveInjector.fromResolvedProviders(providers, options.containerRef.parentInjector); + const detachedFactory = options.resolver.resolveComponentFactory(DetachedLoader); + detachedLoaderRef = options.containerRef.createComponent(detachedFactory, -1, childInjector, null); + detachedLoaderRef.instance.loadComponent(options.type).then((compRef) => { const detachedProxy = compRef.location.nativeElement; if (detachedProxy.getChildrenCount() > 1) { @@ -157,9 +145,10 @@ export class ModalDialogService { (componentView.parent).removeChild(componentView); } + // TODO: remove cast after https://github.com/NativeScript/NativeScript/pull/5734 // is in a published version of tns-core-modules. - (parentView).showModal(componentView, context, closeCallback, fullscreen, animated, stretched); + (options.parentView).showModal(componentView, { ...options, closeCallback }); }); } } From a4282ffb8dd7f332f465cacbe8c36182489e61fe Mon Sep 17 00:00:00 2001 From: VladimirAmiorkov Date: Mon, 25 Mar 2019 10:03:47 +0200 Subject: [PATCH 2/7] chore: remove object cast as it is not needed --- nativescript-angular/directives/dialogs.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/nativescript-angular/directives/dialogs.ts b/nativescript-angular/directives/dialogs.ts index 3c700777d..fbdecb34d 100644 --- a/nativescript-angular/directives/dialogs.ts +++ b/nativescript-angular/directives/dialogs.ts @@ -148,7 +148,7 @@ export class ModalDialogService { // TODO: remove cast after https://github.com/NativeScript/NativeScript/pull/5734 // is in a published version of tns-core-modules. - (options.parentView).showModal(componentView, { ...options, closeCallback }); + options.parentView.showModal(componentView, { ...options, closeCallback }); }); } } From c9dc82681bb16631fc9c41f2ea4515fa2b82c44b Mon Sep 17 00:00:00 2001 From: VladimirAmiorkov Date: Mon, 25 Mar 2019 10:17:38 +0200 Subject: [PATCH 3/7] chore: add example that shows "popover" mode for modal service --- .../navigation/basic.navigation.component.ts | 38 +++++++++++++------ e2e/modal-navigation-ng/package.json | 1 + e2e/modal-navigation-ng/references.d.ts | 1 + 3 files changed, 29 insertions(+), 11 deletions(-) create mode 100644 e2e/modal-navigation-ng/references.d.ts diff --git a/e2e/modal-navigation-ng/app/navigation/basic.navigation.component.ts b/e2e/modal-navigation-ng/app/navigation/basic.navigation.component.ts index 54c818612..64e2f6070 100644 --- a/e2e/modal-navigation-ng/app/navigation/basic.navigation.component.ts +++ b/e2e/modal-navigation-ng/app/navigation/basic.navigation.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewContainerRef, Input } from "@angular/core"; +import { Component, ViewContainerRef, Input, ViewChild } from "@angular/core"; import { Router, NavigationEnd } from "@angular/router"; import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs"; import { ModalComponent } from "../modal/modal.component"; @@ -16,12 +16,14 @@ import { ModalViewComponent } from "~/modal-shared/modal-view.component"; - + + ` }) export class BasicsNavigationComponent { + @ViewChild("popoverButtonComp") popoverButtonComp; @Input() col: number; constructor( private modal: ModalDialogService, @@ -29,7 +31,7 @@ export class BasicsNavigationComponent { private vcf: ViewContainerRef, private viewContainerRefService: ViewContainerRefService) { } - + onModalNoFrame() { const options: ModalDialogOptions = { context: { @@ -74,14 +76,28 @@ export class BasicsNavigationComponent { onRootModalTap(): void { const options: ModalDialogOptions = { - viewContainerRef: this.viewContainerRefService.root, - context: {}, - fullscreen: true + viewContainerRef: this.viewContainerRefService.root, + context: {}, + fullscreen: true }; - + this.modal.showModal(ModalViewComponent, options) - .then((result: string) => { - console.log(result); - }); - } + .then((result: string) => { + console.log(result); + }); + } + + onPopoverModal() { + const options: ModalDialogOptions = { + viewContainerRef: this.viewContainerRefService.root, + context: {}, + ios: { + presentationStyle: UIModalPresentationStyle.Popover + }, + sourceView: this.popoverButtonComp + }; + + this.modal.showModal(ModalViewComponent, options) + .then((result: string) => { console.log(result);}); + } } diff --git a/e2e/modal-navigation-ng/package.json b/e2e/modal-navigation-ng/package.json index 444d4b4ee..fc6209dc9 100644 --- a/e2e/modal-navigation-ng/package.json +++ b/e2e/modal-navigation-ng/package.json @@ -46,6 +46,7 @@ "nativescript-dev-appium": "next", "nativescript-dev-typescript": "next", "nativescript-dev-webpack": "next", + "tns-platform-declarations": "next", "typescript": "~3.1.1" }, "scripts": { diff --git a/e2e/modal-navigation-ng/references.d.ts b/e2e/modal-navigation-ng/references.d.ts new file mode 100644 index 000000000..b945d69c5 --- /dev/null +++ b/e2e/modal-navigation-ng/references.d.ts @@ -0,0 +1 @@ +/// \ No newline at end of file From 0e90cc382ac5a67f61a23ac4eef936eb007d0f66 Mon Sep 17 00:00:00 2001 From: VladimirAmiorkov Date: Tue, 26 Mar 2019 11:10:44 +0200 Subject: [PATCH 4/7] chore: remove old todo comment --- nativescript-angular/directives/dialogs.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/nativescript-angular/directives/dialogs.ts b/nativescript-angular/directives/dialogs.ts index fbdecb34d..17ad11289 100644 --- a/nativescript-angular/directives/dialogs.ts +++ b/nativescript-angular/directives/dialogs.ts @@ -145,9 +145,6 @@ export class ModalDialogService { (componentView.parent).removeChild(componentView); } - - // TODO: remove cast after https://github.com/NativeScript/NativeScript/pull/5734 - // is in a published version of tns-core-modules. options.parentView.showModal(componentView, { ...options, closeCallback }); }); } From 2ce80074937b9b73e999fdf08fe0d9c2cd7370e1 Mon Sep 17 00:00:00 2001 From: VladimirAmiorkov Date: Wed, 27 Mar 2019 15:44:01 +0200 Subject: [PATCH 5/7] chore(list-view): change the import to be from the base module chore(list-view): rename the new options API and change its type --- nativescript-angular/directives/dialogs.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/nativescript-angular/directives/dialogs.ts b/nativescript-angular/directives/dialogs.ts index 17ad11289..f5905f059 100644 --- a/nativescript-angular/directives/dialogs.ts +++ b/nativescript-angular/directives/dialogs.ts @@ -18,7 +18,8 @@ import { AppHostView } from "../app-host-view"; import { DetachedLoader } from "../common/detached-loader"; import { PageFactory, PAGE_FACTORY } from "../platform-providers"; import { once } from "../common/utils"; -import { topmost, Frame, ShowModalOptions } from "tns-core-modules/ui/frame"; +import { topmost, Frame } from "tns-core-modules/ui/frame"; +import { ShowModalOptions } from "tns-core-modules/ui/core/view"; export type BaseShowModalOptions = Pick>; @@ -26,7 +27,7 @@ export interface ModalDialogOptions extends BaseShowModalOptions { context?: any; viewContainerRef?: ViewContainerRef; moduleRef?: NgModuleRef; - sourceView?: ElementRef; + target?: View; } export class ModalDialogParams { @@ -62,9 +63,10 @@ export class ModalDialogService { } let parentView = options.viewContainerRef.element.nativeElement; - if (options.sourceView) { - parentView = options.sourceView.nativeElement; + if (options.target) { + parentView = options.target; } + if (parentView instanceof AppHostView && parentView.ngAppRoot) { parentView = parentView.ngAppRoot; } From cb7da864ead226c777d85c6652862f329e7d3893 Mon Sep 17 00:00:00 2001 From: VladimirAmiorkov Date: Wed, 27 Mar 2019 16:00:53 +0200 Subject: [PATCH 6/7] chore: update "pop over modal" example with new API --- .../app/navigation/basic.navigation.component.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/e2e/modal-navigation-ng/app/navigation/basic.navigation.component.ts b/e2e/modal-navigation-ng/app/navigation/basic.navigation.component.ts index 64e2f6070..ad0cd0031 100644 --- a/e2e/modal-navigation-ng/app/navigation/basic.navigation.component.ts +++ b/e2e/modal-navigation-ng/app/navigation/basic.navigation.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewContainerRef, Input, ViewChild } from "@angular/core"; +import { Component, ViewContainerRef, Input, ViewChild, ElementRef } from "@angular/core"; import { Router, NavigationEnd } from "@angular/router"; import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs"; import { ModalComponent } from "../modal/modal.component"; @@ -16,14 +16,14 @@ import { ModalViewComponent } from "~/modal-shared/modal-view.component"; - - + + ` }) export class BasicsNavigationComponent { - @ViewChild("popoverButtonComp") popoverButtonComp; + @ViewChild("popoverButtonComp") popoverButtonComp: ElementRef; @Input() col: number; constructor( private modal: ModalDialogService, @@ -94,7 +94,7 @@ export class BasicsNavigationComponent { ios: { presentationStyle: UIModalPresentationStyle.Popover }, - sourceView: this.popoverButtonComp + target: this.popoverButtonComp.nativeElement }; this.modal.showModal(ModalViewComponent, options) From 3feada8485161dfef3ef301f88c2718b0fe88cd4 Mon Sep 17 00:00:00 2001 From: VladimirAmiorkov Date: Wed, 27 Mar 2019 16:04:24 +0200 Subject: [PATCH 7/7] chore: fix tslint error --- nativescript-angular/directives/dialogs.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/nativescript-angular/directives/dialogs.ts b/nativescript-angular/directives/dialogs.ts index f5905f059..51363c032 100644 --- a/nativescript-angular/directives/dialogs.ts +++ b/nativescript-angular/directives/dialogs.ts @@ -6,8 +6,7 @@ import { NgModuleRef, ReflectiveInjector, Type, - ViewContainerRef, - ElementRef, + ViewContainerRef } from "@angular/core"; import { NSLocationStrategy } from "../router/ns-location-strategy";