Skip to content

Commit 1b1226a

Browse files
ADjenkovADjenkov
authored
fix(dialogs): properly handle shared modal when using TabView as a root (#1610)
* fix(dialogs): properly handle shared modal when using TabView as a root * fix(dialogs): properly handle shared modal when using TabView as a root * chore: modal init * chore: loaded home * feat(location-strategy): introduce path property to Outlet. Match the path to Outlet when search in the UrlTree for the given Outlet
1 parent 2689411 commit 1b1226a

24 files changed

+709
-378
lines changed

‎e2e/modal-navigation-ng/app/app.android.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
Button{
2+
font-size: 8;
3+
margin: 0px;
4+
padding: 0px;
5+
height: 40;
6+
}
7+
8+
TextView {
9+
font-size: 10;
10+
margin: 0px;
11+
padding: 0px;
12+
}

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

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,47 @@ import { NSLocationStrategy } from "nativescript-angular/router/ns-location-stra
44

55
import { ViewContainerRefService } from "./shared/ViewContainerRefService";
66

7+
import { AppModule } from "./app.module";
8+
import { ModalDialogOptions, ModalDialogService } from "nativescript-angular";
9+
import { ModalViewComponent } from "./modal-shared/modal-view.component";
10+
711
@Component({
8-
selector: "ns-app",
9-
templateUrl: "app.component.html",
12+
selector: "ns-app",
13+
templateUrl: "app.component.html"
1014
})
11-
1215
export class AppComponent {
13-
constructor(
14-
router: Router,
15-
location: NSLocationStrategy,
16-
private _vcRef: ViewContainerRef,
17-
private _viewContainerRefService: ViewContainerRefService) {
18-
router.events.subscribe(e => {
19-
if (e instanceof NavigationEnd) {
20-
console.log("[ROUTER]: " + e.toString());
21-
console.log(location.toString());
22-
}
23-
});
16+
constructor(
17+
router: Router,
18+
location: NSLocationStrategy,
19+
private modal: ModalDialogService,
20+
private _vcRef: ViewContainerRef,
21+
private _viewContainerRefService: ViewContainerRefService) {
22+
router.events.subscribe(e => {
23+
if (e instanceof NavigationEnd) {
24+
console.log("[ROUTER]: " + e.toString());
25+
console.log(location.toString());
26+
}
27+
});
28+
29+
this._viewContainerRefService.root = this._vcRef;
30+
}
2431

25-
this._viewContainerRefService.root = this._vcRef;
32+
ngOnInit() {
33+
if (AppModule.root === "page-router-modal") {
34+
this.onRootModalTap();
35+
console.log("Page modal page from frame root");
2636
}
37+
}
38+
39+
onRootModalTap(): void {
40+
const options: ModalDialogOptions = {
41+
viewContainerRef: this._viewContainerRefService.root,
42+
context: {},
43+
fullscreen: true
44+
};
45+
46+
this.modal.showModal(ModalViewComponent, options).then((result: string) => {
47+
console.log(result);
48+
});
49+
}
2750
}

‎e2e/modal-navigation-ng/app/app.module.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { TabComponent } from "./tab.component";
77
import { LayoutComponent } from "./layout.component";
88

99
import { HomeComponent } from "./home/home.component";
10+
import { RootSectionComponent } from "./navigation/root.section.component";
11+
import { BasicsNavigationComponent } from "./navigation/basic.navigation.component";
1012
import { SecondComponent } from "./second/second.component";
1113
import { ModalSecondComponent } from "./modal-second/modal-second.component";
1214
import { ModalComponent } from "./modal/modal.component";
@@ -44,6 +46,8 @@ traceEnable();
4446
NamedRouterComponent,
4547
TabComponent,
4648
LayoutComponent,
49+
RootSectionComponent,
50+
BasicsNavigationComponent,
4751
HomeComponent,
4852
SecondComponent,
4953
ModalComponent,
@@ -78,9 +82,13 @@ export class AppModule {
7882
static bootstrapRootComponent() {
7983
const options = {
8084
'page-router': AppComponent,
85+
'page-router-modal': AppComponent,
8186
'named-page-router': NamedRouterComponent,
87+
'named-page-router-modal': NamedRouterComponent,
8288
'tab': TabComponent,
83-
'layout': LayoutComponent
89+
'tab-modal': TabComponent,
90+
'layout': LayoutComponent,
91+
'layout-modal': LayoutComponent,
8492
};
8593

8694
const component = options[AppModule.root];

‎e2e/modal-navigation-ng/app/app.routing.ts‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,13 @@ const routesLayout: Routes = [
116116
path: "modal", component: ModalComponent, children: [
117117
{ path: "nested-frame-modal", component: NestedModalComponent }]
118118
},
119-
{ path: "modal-second", component: ModalSecondComponent }
119+
{ path: "modal-second", component: ModalSecondComponent },
120+
{
121+
path: "modal-shared", component: ModalViewContentComponent, outlet: "modalOutlet"
122+
},
123+
{
124+
path: "modal-shared-second-host", component: ModalSharedSecondComponent
125+
}
120126
]
121127

122128
@NgModule({
@@ -125,13 +131,13 @@ const routesLayout: Routes = [
125131
})
126132
export class AppRoutingModule {
127133
constructor(private router: Router) {
128-
if (AppModule.root === "page-router") {
134+
if (AppModule.root === "page-router" || AppModule.root === "page-router-modal") {
129135
this.router.resetConfig(routes);
130-
} else if (AppModule.root === "layout") {
136+
} else if (AppModule.root === "layout" || AppModule.root === "layout-modal") {
131137
this.router.resetConfig(routesLayout);
132-
} else if (AppModule.root === "named-page-router") {
138+
} else if (AppModule.root === "named-page-router" || AppModule.root === "named-page-router-modal") {
133139
this.router.resetConfig(namedOutletRoutes);
134-
} else {
140+
} else if(AppModule.root === "tab" || AppModule.root === "tab-modal"){
135141
this.router.resetConfig(routesTab);
136142
}
137143
}

‎e2e/modal-navigation-ng/app/home/home.component.html‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,13 @@
22
<Label text="Home Component" automationText="Home Component"></Label>
33
</ActionBar>
44

5-
<GridLayout rows="auto" columns="auto, *" >
6-
<StackLayout id="home-page" row="0" col="0" borderColor="yellowgreen" borderWidth="1" borderRadius="5" padding="2">
7-
<TextView text="Reset root" editable="false" ></TextView>
8-
<Button text="Reset Named Frame Root View" (tap)="onNamedFrameRootViewReset()" textAlignment="left" ></Button>
9-
<Button text="Reset Frame Root View" (tap)="onFrameRootViewReset()" textAlignment="left" ></Button>
10-
<Button text="Reset Tab Root View" (tap)="onTabRootViewReset()" textAlignment="left" ></Button>
11-
<Button text="Reset Layout Root View" automationText="Reset Layout Root View" (tap)="onLayoutRootViewReset()" textAlignment="left"></Button>
12-
</StackLayout>
5+
<GridLayout rows="auto, auto" columns="auto, *" >
6+
<root-section row="0" col="0" ></root-section>
137
<StackLayout id="home-page" row="0" col="1" borderColor="blue" borderWidth="1" borderRadius="5" marginLeft="2"
148
padding="2">
15-
<TextView text="Navigate to example" editable="false"></TextView>
16-
17-
<Button text="Show Modal Without Frame" (tap)="onModalNoFrame()" textAlignment="left"></Button>
18-
<Button text="Show Modal Page With Frame" (tap)="onModalFrame()" textAlignment="left"></Button>
9+
<basic-nav></basic-nav>
1910
<Button text="Navigate To Second Page" (tap)="onNavigateSecond()" textAlignment="left"></Button>
20-
<Button text="Show Dialog" (tap)="onShowDialog()" textAlignment="left"></Button>
21-
<Button text="show shared modal" (tap)="onRootModalTap()" textAlignment="left"></Button>
22-
<Button text="go to second (to open shared modal)" [nsRouterLink]="['/modal-shared-second-host']" textAlignment="left"></Button>
11+
<Button text="Navigate To Second Page Named Outlet" (tap)="onNavigateSecondWithOutlet()" textAlignment="left"></Button>
12+
<Button text="Go To Second (to open shared modal)" [nsRouterLink]="['/modal-shared-second-host']" textAlignment="left"></Button>
2313
</StackLayout>
2414
</GridLayout>

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

Lines changed: 16 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -12,93 +12,22 @@ import { confirm } from "tns-core-modules/ui/dialogs";
1212
import { AppModule } from "../app.module";
1313

1414
@Component({
15-
moduleId: module.id,
16-
selector: "home-page",
17-
templateUrl: "./home.component.html"
15+
moduleId: module.id,
16+
selector: "home-page",
17+
templateUrl: "./home.component.html"
1818
})
1919
export class HomeComponent {
20-
constructor(
21-
private modal: ModalDialogService,
22-
private vcRef: ViewContainerRef,
23-
private viewContainerRefService: ViewContainerRefService,
24-
private routerExtension: RouterExtensions) { }
25-
26-
onModalNoFrame() {
27-
const options: ModalDialogOptions = {
28-
context: {
29-
navigationVisibility: false
30-
},
31-
fullscreen: true,
32-
viewContainerRef: this.vcRef
33-
};
34-
35-
this.modal.showModal(ModalComponent, options).then((res: string) => {
36-
console.log("moda-no-frame closed");
37-
});
38-
}
39-
40-
onModalFrame() {
41-
const options: ModalDialogOptions = {
42-
context: {
43-
navigationVisibility: true,
44-
modalRoute: "modal"
45-
},
46-
fullscreen: true,
47-
viewContainerRef: this.vcRef
48-
};
49-
50-
this.modal.showModal(ModalRouterComponent, options).then((res: string) => {
51-
console.log("moda-frame closed");
52-
});
53-
}
54-
55-
onNavigateSecond() {
56-
this.routerExtension.navigate(["second"]);
57-
}
58-
59-
onFrameRootViewReset() {
60-
AppModule.root = "page-router";
61-
AppModule.platformRef._livesync();
62-
}
63-
64-
onNamedFrameRootViewReset() {
65-
AppModule.root = "named-page-router";
66-
AppModule.platformRef._livesync();
67-
}
68-
69-
onTabRootViewReset() {
70-
AppModule.root = "tab";
71-
AppModule.platformRef._livesync();
72-
}
73-
74-
onLayoutRootViewReset() {
75-
AppModule.root = "layout";
76-
AppModule.platformRef._livesync();
77-
}
78-
79-
onRootModalTap(): void {
80-
const options: ModalDialogOptions = {
81-
viewContainerRef: this.viewContainerRefService.root,
82-
context: {},
83-
fullscreen: true
84-
};
85-
86-
this.modal.showModal(ModalViewComponent, options)
87-
.then((result: string) => {
88-
console.log(result);
89-
});
90-
}
91-
92-
onShowDialog() {
93-
let options = {
94-
title: "Dialog",
95-
message: "Message",
96-
okButtonText: "Yes",
97-
cancelButtonText: "No"
98-
}
99-
100-
confirm(options).then((result: boolean) => {
101-
console.log(result);
102-
})
103-
}
20+
constructor(
21+
private modal: ModalDialogService,
22+
private vcRef: ViewContainerRef,
23+
private viewContainerRefService: ViewContainerRefService,
24+
private routerExtension: RouterExtensions) { }
25+
26+
onNavigateSecond() {
27+
this.routerExtension.navigate(["second"]);
28+
}
29+
30+
onNavigateSecondWithOutlet() {
31+
this.routerExtension.navigate([ { outlets: { namedRouter:["second"] } }]);
32+
}
10433
}

‎e2e/modal-navigation-ng/app/layout.component.html‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,4 @@
1-
<GridLayout rows="auto,auto" columns="auto, *">
2-
<Label text="Home Component" row="0" col="0" horizontalAlignment="center"></Label>
3-
<StackLayout id="home-page" row="1" col="0" borderColor="yellowgreen" borderWidth="1" borderRadius="5" padding="2">
4-
<TextView text="Reset root" editable="false"></TextView>
5-
<Button text="Reset Named Frame Root View" (tap)="onNamedFrameRootViewReset()" textAlignment="left"></Button>
6-
<Button text="Reset Frame Root View" (tap)="onFrameRootViewReset()" textAlignment="left"></Button>
7-
<Button text="Reset Tab Root View" (tap)="onTabRootViewReset()" textAlignment="left"></Button>
8-
<Button text="Reset Layout Root View" automationText="Reset Layout Root View" (tap)="onLayoutRootViewReset()"
9-
textAlignment="left"></Button>
10-
</StackLayout>
11-
<StackLayout id="home-page" row="1" col="1" borderColor="blue" borderWidth="1" borderRadius="5" marginLeft="2"
12-
padding="2">
13-
<TextView text="Navigate to example" editable="false"></TextView>
14-
15-
<Button text="Show Modal Without Frame" (tap)="onModalNoFrame()" textAlignment="left"></Button>
16-
<Button text="Show Modal Page With Frame" (tap)="onModalFrame()" textAlignment="left"></Button>
17-
<Button text="Show Dialog" (tap)="onShowDialog()" textAlignment="left"></Button>
18-
</StackLayout>
1+
<GridLayout columns="auto, *" automationText="Home Component" >
2+
<root-section></root-section>
3+
<basic-nav col="1" ></basic-nav>
194
</GridLayout>

0 commit comments

Comments
 (0)