Skip to content

Commit 685ddca

Browse files
elena-pelena-p
authored
Merge branch 'master' into sis0k0/remove-short-imports-resolution
2 parents e1b6e20 + 9dfc569 commit 685ddca

File tree

4 files changed

+56
-51
lines changed

4 files changed

+56
-51
lines changed

‎e2e/modal-navigation-ng/app/navigation/basic.navigation.component.ts‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, ViewContainerRef, Input } from "@angular/core";
1+
import { Component, ViewContainerRef, Input, ViewChild, ElementRef } from "@angular/core";
22
import { Router, NavigationEnd } from "@angular/router";
33
import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
44
import { ModalComponent } from "../modal/modal.component";
@@ -17,19 +17,21 @@ import { ModalViewComponent } from "~/modal-shared/modal-view.component";
1717
<Button text="Show Modal Page With Frame" (tap)="onModalFrame()" textAlignment="left"></Button>
1818
<Button text="Show Shared Modal" (tap)="onRootModalTap()" textAlignment="left"></Button>
1919
<Button text="Show Dialog" (tap)="onShowDialog()" textAlignment="left"></Button>
20+
<Button #popoverButtonComp text="Show 'popover' modal" (tap)="onPopoverModal()" textAlignment="left"></Button>
2021
</StackLayout>`
2122
})
2223

2324
export class BasicsNavigationComponent {
2425

26+
@ViewChild("popoverButtonComp") popoverButtonComp: ElementRef;
2527
@Input() col: number;
2628
constructor(
2729
private modal: ModalDialogService,
2830
private router: Router,
2931
private vcf: ViewContainerRef,
3032
private viewContainerRefService: ViewContainerRefService) {
3133
}
32-
34+
3335
onModalNoFrame() {
3436
const options: ModalDialogOptions = {
3537
context: {
@@ -74,14 +76,28 @@ export class BasicsNavigationComponent {
7476

7577
onRootModalTap(): void {
7678
const options: ModalDialogOptions = {
77-
viewContainerRef: this.viewContainerRefService.root,
78-
context: {},
79-
fullscreen: true
79+
viewContainerRef: this.viewContainerRefService.root,
80+
context: {},
81+
fullscreen: true
8082
};
81-
83+
8284
this.modal.showModal(ModalViewComponent, options)
83-
.then((result: string) => {
84-
console.log(result);
85-
});
86-
}
85+
.then((result: string) => {
86+
console.log(result);
87+
});
88+
}
89+
90+
onPopoverModal() {
91+
const options: ModalDialogOptions = {
92+
viewContainerRef: this.viewContainerRefService.root,
93+
context: {},
94+
ios: {
95+
presentationStyle: UIModalPresentationStyle.Popover
96+
},
97+
target: this.popoverButtonComp.nativeElement
98+
};
99+
100+
this.modal.showModal(ModalViewComponent, options)
101+
.then((result: string) => { console.log(result);});
102+
}
87103
}

‎e2e/modal-navigation-ng/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
"nativescript-dev-appium": "next",
4747
"nativescript-dev-typescript": "next",
4848
"nativescript-dev-webpack": "next",
49+
"tns-platform-declarations": "next",
4950
"typescript": "~3.1.1"
5051
},
5152
"scripts": {

‎e2e/modal-navigation-ng/references.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference path="./node_modules/tns-platform-declarations/ios.d.ts" />

‎nativescript-angular/directives/dialogs.ts‎

Lines changed: 28 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
NgModuleRef,
77
ReflectiveInjector,
88
Type,
9-
ViewContainerRef,
9+
ViewContainerRef
1010
} from "@angular/core";
1111

1212
import { NSLocationStrategy } from "../router/ns-location-strategy";
@@ -18,14 +18,15 @@ import { DetachedLoader } from "../common/detached-loader";
1818
import { PageFactory, PAGE_FACTORY } from "../platform-providers";
1919
import { once } from "../common/utils";
2020
import { topmost, Frame } from "tns-core-modules/ui/frame";
21+
import { ShowModalOptions } from "tns-core-modules/ui/core/view";
2122

22-
export interface ModalDialogOptions {
23+
export type BaseShowModalOptions = Pick<ShowModalOptions, Exclude<keyof ShowModalOptions, "closeCallback" | "context">>;
24+
25+
export interface ModalDialogOptions extends BaseShowModalOptions {
2326
context?: any;
24-
fullscreen?: boolean;
25-
animated?: boolean;
26-
stretched?: boolean;
2727
viewContainerRef?: ViewContainerRef;
2828
moduleRef?: NgModuleRef<any>;
29+
target?: View;
2930
}
3031

3132
export class ModalDialogParams {
@@ -35,13 +36,10 @@ export class ModalDialogParams {
3536
}
3637
}
3738

38-
interface ShowDialogOptions {
39+
interface ShowDialogOptions extends BaseShowModalOptions {
3940
containerRef: ViewContainerRef;
4041
context: any;
4142
doneCallback;
42-
fullscreen: boolean;
43-
animated: boolean;
44-
stretched: boolean;
4543
pageFactory: PageFactory;
4644
parentView: ViewBase;
4745
resolver: ComponentFactoryResolver;
@@ -54,16 +52,20 @@ export class ModalDialogService {
5452
}
5553

5654
public showModal(type: Type<any>,
57-
{ viewContainerRef, moduleRef, context, fullscreen, animated, stretched }: ModalDialogOptions
55+
options: ModalDialogOptions
5856
): Promise<any> {
59-
if (!viewContainerRef) {
57+
if (!options.viewContainerRef) {
6058
throw new Error(
6159
"No viewContainerRef: " +
6260
"Make sure you pass viewContainerRef in ModalDialogOptions."
6361
);
6462
}
6563

66-
let parentView = viewContainerRef.element.nativeElement;
64+
let parentView = options.viewContainerRef.element.nativeElement;
65+
if (options.target) {
66+
parentView = options.target;
67+
}
68+
6769
if (parentView instanceof AppHostView && parentView.ngAppRoot) {
6870
parentView = parentView.ngAppRoot;
6971
}
@@ -75,11 +77,11 @@ export class ModalDialogService {
7577
parentView = parentView._ngDialogRoot;
7678
}
7779

78-
const pageFactory: PageFactory = viewContainerRef.injector.get(PAGE_FACTORY);
80+
const pageFactory: PageFactory = options.viewContainerRef.injector.get(PAGE_FACTORY);
7981

8082
// resolve from particular module (moduleRef)
8183
// or from same module as parentView (viewContainerRef)
82-
const componentContainer = moduleRef || viewContainerRef;
84+
const componentContainer = options.moduleRef || options.viewContainerRef;
8385
const resolver = componentContainer.injector.get(ComponentFactoryResolver);
8486

8587
let frame = parentView;
@@ -93,16 +95,14 @@ export class ModalDialogService {
9395
setTimeout(() => {
9496
try {
9597
this._showDialog({
96-
containerRef: viewContainerRef,
97-
context,
98+
...options,
99+
containerRef: options.viewContainerRef,
100+
context: options.context,
98101
doneCallback: resolve,
99-
fullscreen,
100-
animated,
101-
stretched,
102102
pageFactory,
103103
parentView,
104104
resolver,
105-
type,
105+
type
106106
});
107107
} catch (err) {
108108
reject(err);
@@ -111,23 +111,12 @@ export class ModalDialogService {
111111
});
112112
}
113113

114-
private _showDialog({
115-
containerRef,
116-
context,
117-
doneCallback,
118-
fullscreen,
119-
animated,
120-
stretched,
121-
pageFactory,
122-
parentView,
123-
resolver,
124-
type,
125-
}: ShowDialogOptions): void {
114+
private _showDialog(options: ShowDialogOptions): void {
126115
let componentView: View;
127116
let detachedLoaderRef: ComponentRef<DetachedLoader>;
128117

129118
const closeCallback = once((...args) => {
130-
doneCallback.apply(undefined, args);
119+
options.doneCallback.apply(undefined, args);
131120
if (componentView) {
132121
componentView.closeModal();
133122
this.location._closeModalNavigation();
@@ -136,15 +125,15 @@ export class ModalDialogService {
136125
}
137126
});
138127

139-
const modalParams = new ModalDialogParams(context, closeCallback);
128+
const modalParams = new ModalDialogParams(options.context, closeCallback);
140129
const providers = ReflectiveInjector.resolve([
141130
{ provide: ModalDialogParams, useValue: modalParams },
142131
]);
143132

144-
const childInjector = ReflectiveInjector.fromResolvedProviders(providers, containerRef.parentInjector);
145-
const detachedFactory = resolver.resolveComponentFactory(DetachedLoader);
146-
detachedLoaderRef = containerRef.createComponent(detachedFactory, -1, childInjector, null);
147-
detachedLoaderRef.instance.loadComponent(type).then((compRef) => {
133+
const childInjector = ReflectiveInjector.fromResolvedProviders(providers, options.containerRef.parentInjector);
134+
const detachedFactory = options.resolver.resolveComponentFactory(DetachedLoader);
135+
detachedLoaderRef = options.containerRef.createComponent(detachedFactory, -1, childInjector, null);
136+
detachedLoaderRef.instance.loadComponent(options.type).then((compRef) => {
148137
const detachedProxy = <ProxyViewContainer>compRef.location.nativeElement;
149138

150139
if (detachedProxy.getChildrenCount() > 1) {
@@ -157,9 +146,7 @@ export class ModalDialogService {
157146
(<any>componentView.parent).removeChild(componentView);
158147
}
159148

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

0 commit comments

Comments
 (0)