Skip to content

Commit 55c9cc9

Browse files
vchimevmanoldonev
vchimev
authored and
manoldonev
committed
feat(TabStrip): add itemTap event (#7711)
1 parent caca2b8 commit 55c9cc9

33 files changed

Lines changed: 608 additions & 358 deletions

‎e2e/ui-tests-app/app/app-root.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<Frame defaultPage="main-page" />
1+
<Frame defaultPage="main-page" />

‎e2e/ui-tests-app/app/app.ts‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ application.on("uncaughtError", args => {
2424
}
2525
});
2626

27-
application.on(application.launchEvent, function(args: application.LaunchEventData) {
27+
application.on(application.launchEvent, function (args: application.LaunchEventData) {
2828
if (args.android) {
2929
// For Android applications, args.android is an android.content.Intent class.
3030
console.log("### Launched application with: " + args.android + ".");
@@ -34,7 +34,7 @@ application.on(application.launchEvent, function(args: application.LaunchEventDa
3434
}
3535
});
3636

37-
application.on(application.suspendEvent, function(args: application.ApplicationEventData) {
37+
application.on(application.suspendEvent, function (args: application.ApplicationEventData) {
3838
if (args.android) {
3939
// For Android applications, args.android is an android activity class.
4040
console.log("#" + ++countSuspend + "# SuspendEvent Activity: " + args.android);
@@ -44,7 +44,7 @@ application.on(application.suspendEvent, function(args: application.ApplicationE
4444
}
4545
});
4646

47-
application.on(application.resumeEvent, function(args: application.ApplicationEventData) {
47+
application.on(application.resumeEvent, function (args: application.ApplicationEventData) {
4848
if (args.android) {
4949
// For Android applications, args.android is an android activity class.
5050
console.log("#" + ++countResume + "# ResumeEvent Activity: " + args.android);
@@ -54,7 +54,7 @@ application.on(application.resumeEvent, function(args: application.ApplicationEv
5454
}
5555
});
5656

57-
application.on(application.exitEvent, function(args: application.ApplicationEventData) {
57+
application.on(application.exitEvent, function (args: application.ApplicationEventData) {
5858
if (args.android) {
5959
// For Android applications, args.android is an android activity class.
6060
console.log("### ExitEvent Activity: " + args.android);
@@ -64,7 +64,7 @@ application.on(application.exitEvent, function(args: application.ApplicationEven
6464
}
6565
});
6666

67-
application.on(application.lowMemoryEvent, function(args: application.ApplicationEventData) {
67+
application.on(application.lowMemoryEvent, function (args: application.ApplicationEventData) {
6868
if (args.android) {
6969
// For Android applications, args.android is an android activity class.
7070
console.log("### LowMemoryEvent Activity: " + args.android);
@@ -74,21 +74,23 @@ application.on(application.lowMemoryEvent, function(args: application.Applicatio
7474
}
7575
});
7676

77-
application.on(application.uncaughtErrorEvent, function(args: application.UnhandledErrorEventData) {
77+
application.on(application.uncaughtErrorEvent, function (args: application.UnhandledErrorEventData) {
7878
console.log("### NativeScriptError: " + args.error);
7979
console.log("### nativeException: " + (<any>args.error).nativeException);
8080
console.log("### stackTrace: " + (<any>args.error).stackTrace);
8181
console.log("### stack: " + args.error.stack);
8282
});
8383

84-
application.on(application.discardedErrorEvent, function(args: application.DiscardedErrorEventData) {
84+
application.on(application.discardedErrorEvent, function (args: application.DiscardedErrorEventData) {
8585
console.log("### [Discarded] NativeScriptError: " + args.error);
8686
console.log("### [Discarded] nativeException: " + (<any>args.error).nativeException);
8787
console.log("### [Discarded] stackTrace: " + (<any>args.error).stackTrace);
8888
console.log("### [Discarded] stack: " + args.error.stack);
8989
});
9090

9191
application.setCssFileName("app.css");
92-
9392
application._start({ moduleName: "main-page" });
93+
94+
// TODO: investigate tab-view -> tabviewcss test crash
95+
// TODO: investigate css -> layouts border overlap failure
9496
// application.run({ moduleName: "app-root" });

‎e2e/ui-tests-app/app/bottom-navigation/events-page.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { EventData } from "tns-core-modules/data/observable";
2+
import { Page } from "tns-core-modules/ui/page";
3+
import { Tabs, SelectedIndexChangedEventData } from "tns-core-modules/ui/tabs";
4+
5+
export function goToFirst(args: EventData) {
6+
console.log("---> goToFirst");
7+
const page = <Page>(<any>args.object).page;
8+
const bottomNav = <Tabs>page.getViewById("bottomNav");
9+
bottomNav.selectedIndex = 0;
10+
}
11+
12+
export function goToSecond(args: EventData) {
13+
console.log("---> goToSecond");
14+
const page = <Page>(<any>args.object).page;
15+
const bottomNav = <Tabs>page.getViewById("bottomNav");
16+
bottomNav.selectedIndex = 1;
17+
}
18+
19+
export function goToThird(args: EventData) {
20+
console.log("---> goToThird");
21+
const page = <Page>(<any>args.object).page;
22+
const bottomNav = <Tabs>page.getViewById("bottomNav");
23+
bottomNav.selectedIndex = 2;
24+
}
25+
26+
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
27+
console.log("---> onSelectedIndexChanged", args.eventName);
28+
console.log("---> oldIndex", args.oldIndex);
29+
console.log("---> newIndex", args.newIndex);
30+
}
31+
32+
export function onFirstTabStripItemTap(args: EventData) {
33+
console.log("---> onFirstTabStripItemTap", args.eventName);
34+
}
35+
36+
export function onSecondTabStripItemTap(args: EventData) {
37+
console.log("---> onSecondTabStripItemTap", args.eventName);
38+
}
39+
40+
export function onThirdTabStripItemTap(args: EventData) {
41+
console.log("---> onThirdTabStripItemTap", args.eventName);
42+
}

‎e2e/ui-tests-app/app/bottom-navigation/events-page.xml‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<Page>
2+
3+
<BottomNavigation id="bottomNav" selectedIndexChanged="onSelectedIndexChanged">
4+
5+
<TabStrip>
6+
<TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
7+
<TabStripItem tap="onSecondTabStripItemTap">
8+
<Label text="Second" />
9+
</TabStripItem>
10+
<TabStripItem title="First" tap="onThirdTabStripItemTap">
11+
<Label text="Third" />
12+
</TabStripItem>
13+
</TabStrip>
14+
15+
<TabContentItem>
16+
<StackLayout>
17+
<Label text="First View" backgroundColor="red" />
18+
<Button tap="goToSecond" text="go to second" />
19+
</StackLayout>
20+
</TabContentItem>
21+
<TabContentItem>
22+
<StackLayout>
23+
<Label text="Second View" backgroundColor="green" />
24+
<Button tap="goToThird" text="go to thrid" />
25+
</StackLayout>
26+
</TabContentItem>
27+
<TabContentItem>
28+
<StackLayout>
29+
<Label text="First View" backgroundColor="blue" />
30+
<Button tap="goToFirst" text="go to first" />
31+
</StackLayout>
32+
</TabContentItem>
33+
34+
</BottomNavigation>
35+
36+
</Page>

‎e2e/ui-tests-app/app/bottom-navigation/first-page.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { EventData } from "tns-core-modules/data/observable";
2+
import { Button } from "tns-core-modules/ui/button/button";
3+
4+
export function goToSecond(args: EventData) {
5+
console.log("---> goToSecond Page");
6+
const button = <Button>args.object;
7+
button.page.frame.navigate("bottom-navigation/second-page");
8+
}
9+
10+
export function goBack(args: EventData) {
11+
console.log("---> goBack");
12+
const button = <Button>args.object;
13+
button.page.frame.goBack();
14+
}

‎e2e/ui-tests-app/app/bottom-navigation/first-page.xml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<Page backgroundColor="lightgreen" actionBarHidden="true">
2+
<StackLayout>
3+
<Label text="First Page" />
4+
<Button tap="goToSecond" text="go to second page" />
5+
<Button tap="goBack" text="go to back" />
6+
</StackLayout>
7+
</Page>

‎e2e/ui-tests-app/app/bottom-navigation/main-page.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export function loadExamples() {
1515
examples.set("issue-5470", "bottom-navigation/issue-5470-page");
1616
examples.set("background-color", "bottom-navigation/background-color-page");
1717
examples.set("color", "bottom-navigation/color-page");
18+
examples.set("events", "bottom-navigation/events-page");
1819
examples.set("font", "bottom-navigation/font-page");
1920
examples.set("text-transform", "bottom-navigation/text-transform-page");
2021
examples.set("icon-title-placement", "bottom-navigation/icon-title-placement-page");
@@ -24,6 +25,7 @@ export function loadExamples() {
2425
examples.set("fancy-fonts", "bottom-navigation/fancy-fonts-page");
2526
examples.set("css-text-transform", "bottom-navigation/bottom-navigation-css-page");
2627
examples.set("custom-tabstrip", "bottom-navigation/custom-tabstrip-page");
28+
examples.set("reselect", "bottom-navigation/reselect-page");
2729

2830
return examples;
2931
}

‎e2e/ui-tests-app/app/bottom-navigation/reselect-page.ts‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { EventData } from "tns-core-modules/data/observable";
2+
import { Frame } from "tns-core-modules/ui/frame/frame";
3+
import { Page } from "tns-core-modules/ui/page";
4+
import {
5+
TabStripItemEventData, SelectedIndexChangedEventData, BottomNavigation, TabStrip,
6+
} from "tns-core-modules/ui/bottom-navigation";
7+
8+
export function goToFirst(args: EventData) {
9+
console.log("---> goToFirst");
10+
const page = <Page>(<any>args.object).page;
11+
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
12+
bottomNav.selectedIndex = 0;
13+
}
14+
15+
export function goToSecond(args: EventData) {
16+
console.log("---> goToSecond");
17+
const page = <Page>(<any>args.object).page;
18+
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
19+
bottomNav.selectedIndex = 1;
20+
}
21+
22+
export function goToThird(args: EventData) {
23+
console.log("---> goToThird");
24+
const page = <Page>(<any>args.object).page;
25+
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
26+
bottomNav.selectedIndex = 2;
27+
}
28+
29+
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
30+
console.log("---> onSelectedIndexChanged", args.eventName);
31+
console.log("---> oldIndex", args.oldIndex);
32+
console.log("---> newIndex", args.newIndex);
33+
}
34+
35+
export function onItemTap(args: TabStripItemEventData) {
36+
console.log("---> onItemTap", args.eventName);
37+
console.log("---> onItemTap", args.index);
38+
console.log("---> onItemTap", args.object);
39+
40+
const tabStrip = <TabStrip>args.object;
41+
const page = <Page>tabStrip.page;
42+
const frame = <Frame>page.getViewById("frame");
43+
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
44+
45+
console.log("---> onItemTap selectedIndex", bottomNav.selectedIndex);
46+
if (bottomNav.selectedIndex === args.index && frame.canGoBack()) {
47+
frame.goBack();
48+
}
49+
}
50+
51+
export function onFirstTabStripItemTap(args: EventData) {
52+
console.log("---> onFirstTabStripItemTap", args.eventName);
53+
}
54+
55+
export function onSecondTabStripItemTap(args: EventData) {
56+
console.log("---> onSecondTabStripItemTap", args.eventName);
57+
}
58+
59+
export function onThirdTabStripItemTap(args: EventData) {
60+
console.log("---> onThirdTabStripItemTap", args.eventName);
61+
}

‎e2e/ui-tests-app/app/bottom-navigation/reselect-page.xml‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<Page>
2+
3+
<BottomNavigation id="bottomNav" selectedIndexChanged="onSelectedIndexChanged">
4+
5+
<TabStrip itemTap="onItemTap">
6+
<TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
7+
<TabStripItem tap="onSecondTabStripItemTap">
8+
<Label text="Second" />
9+
</TabStripItem>
10+
<TabStripItem title="First" tap="onThirdTabStripItemTap">
11+
<Label text="Third" />
12+
</TabStripItem>
13+
</TabStrip>
14+
15+
<TabContentItem>
16+
<StackLayout>
17+
<Label text="First View" backgroundColor="red" id="label" />
18+
<Button tap="goToSecond" text="go to second item" id="button" />
19+
<Frame defaultPage="bottom-navigation/first-page" id="frame" />
20+
</StackLayout>
21+
</TabContentItem>
22+
<TabContentItem>
23+
<StackLayout>
24+
<Label text="Second Content Item" backgroundColor="lightgreen" />
25+
<Button tap="goToThird" text="go to thrid item" />
26+
</StackLayout>
27+
</TabContentItem>
28+
<TabContentItem>
29+
<StackLayout>
30+
<Label text="First Content Item" backgroundColor="lightblue" />
31+
<Button tap="goToFirst" text="go to first item" />
32+
</StackLayout>
33+
</TabContentItem>
34+
35+
</BottomNavigation>
36+
37+
</Page>

‎e2e/ui-tests-app/app/bottom-navigation/second-page.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { EventData } from "tns-core-modules/data/observable";
2+
import { Button } from "tns-core-modules/ui/button/button";
3+
4+
export function goToFirst(args: EventData) {
5+
console.log("---> goToFirst Page");
6+
const button = <Button>args.object;
7+
button.page.frame.navigate("bottom-navigation/first-page");
8+
}
9+
10+
export function goBack(args: EventData) {
11+
console.log("---> goBack");
12+
const button = <Button>args.object;
13+
button.page.frame.goBack();
14+
}

0 commit comments

Comments
 (0)