Skip to content

Commit

Permalink
feat(modal): add ‘ios presentationStyle’ option to ModalDialogParams
Browse files Browse the repository at this point in the history 
feat(modal): expose current/future core options via ModalDialogParams
  • Loading branch information
Marcus Williams authored and VladimirAmiorkov committed Mar 25, 2019
1 parent 06bbcae commit 9cfa127
Showing 1 changed file with 28 additions and 39 deletions.
67 changes: 28 additions & 39 deletions nativescript-angular/directives/dialogs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
ReflectiveInjector,
Type,
ViewContainerRef,
ElementRef,
} from "@angular/core";

import { NSLocationStrategy } from "../router/ns-location-strategy";
Expand All @@ -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<ShowModalOptions, Exclude<keyof ShowModalOptions, "closeCallback" | "context">>;

export interface ModalDialogOptions extends BaseShowModalOptions {
context?: any;
fullscreen?: boolean;
animated?: boolean;
stretched?: boolean;
viewContainerRef?: ViewContainerRef;
moduleRef?: NgModuleRef<any>;
sourceView?: ElementRef;
}

export class ModalDialogParams {
Expand All @@ -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;
Expand All @@ -54,16 +52,19 @@ export class ModalDialogService {
}

public showModal(type: Type<any>,
{ viewContainerRef, moduleRef, context, fullscreen, animated, stretched }: ModalDialogOptions
options: ModalDialogOptions
): Promise<any> {
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;
}
Expand All @@ -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;
Expand All @@ -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);
Expand All @@ -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<DetachedLoader>;

const closeCallback = once((...args) => {
doneCallback.apply(undefined, args);
options.doneCallback.apply(undefined, args);
if (componentView) {
componentView.closeModal();
this.location._closeModalNavigation();
Expand All @@ -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 = <ProxyViewContainer>compRef.location.nativeElement;

if (detachedProxy.getChildrenCount() > 1) {
Expand All @@ -157,9 +145,10 @@ export class ModalDialogService {
(<any>componentView.parent).removeChild(componentView);
}


// TODO: remove <any> cast after https://github.com/NativeScript/NativeScript/pull/5734
// is in a published version of tns-core-modules.
(<any>parentView).showModal(componentView, context, closeCallback, fullscreen, animated, stretched);
(<any>options.parentView).showModal(componentView, { ...options, closeCallback });
});
}
}
Expand Down

4 comments on commit 9cfa127

@dottodot
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@VladimirAmiorkov The changelog for release 7.2.4 references the addition of this feature, but these changes are not in that release.

@VladimirAmiorkov
Copy link
Contributor

@VladimirAmiorkov VladimirAmiorkov commented on 9cfa127 May 21, 2019 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

HI @dottodot ,

The 7.2.4 version of nativescript-angular does contain the above changes. If you look at the dialogs.js file of the package you can see that row 44 contains the above change ( componentContainer = options.moduleRef || options.viewContainerRef )

@dottodot
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about sourceView? I get 'sourceView' does not exist in type 'ModalDialogOptions'

@dottodot
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nevermind worked it out now it has been change to target and a View i.e

target: this.modalButton.nativeElement

Please sign in to comment.