feat(TabStrip): add itemTap event (#7711)

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

@@ -1 +1 @@
-<Frame defaultPage="main-page" />
+<Frame defaultPage="main-page" />

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

@@ -24,7 +24,7 @@ application.on("uncaughtError", args => {
     }
 });
 
-application.on(application.launchEvent, function(args: application.LaunchEventData) {
+application.on(application.launchEvent, function (args: application.LaunchEventData) {
     if (args.android) {
         // For Android applications, args.android is an android.content.Intent class.
         console.log("### Launched application with: " + args.android + ".");
@@ -34,7 +34,7 @@ application.on(application.launchEvent, function(args: application.LaunchEventDa
     }
 });
 
-application.on(application.suspendEvent, function(args: application.ApplicationEventData) {
+application.on(application.suspendEvent, function (args: application.ApplicationEventData) {
     if (args.android) {
         // For Android applications, args.android is an android activity class.
         console.log("#" + ++countSuspend + "# SuspendEvent Activity: " + args.android);
@@ -44,7 +44,7 @@ application.on(application.suspendEvent, function(args: application.ApplicationE
     }
 });
 
-application.on(application.resumeEvent, function(args: application.ApplicationEventData) {
+application.on(application.resumeEvent, function (args: application.ApplicationEventData) {
     if (args.android) {
         // For Android applications, args.android is an android activity class.
         console.log("#" + ++countResume + "# ResumeEvent Activity: " + args.android);
@@ -54,7 +54,7 @@ application.on(application.resumeEvent, function(args: application.ApplicationEv
     }
 });
 
-application.on(application.exitEvent, function(args: application.ApplicationEventData) {
+application.on(application.exitEvent, function (args: application.ApplicationEventData) {
     if (args.android) {
         // For Android applications, args.android is an android activity class.
         console.log("### ExitEvent Activity: " + args.android);
@@ -64,7 +64,7 @@ application.on(application.exitEvent, function(args: application.ApplicationEven
     }
 });
 
-application.on(application.lowMemoryEvent, function(args: application.ApplicationEventData) {
+application.on(application.lowMemoryEvent, function (args: application.ApplicationEventData) {
     if (args.android) {
         // For Android applications, args.android is an android activity class.
         console.log("### LowMemoryEvent Activity: " + args.android);
@@ -74,14 +74,14 @@ application.on(application.lowMemoryEvent, function(args: application.Applicatio
     }
 });
 
-application.on(application.uncaughtErrorEvent, function(args: application.UnhandledErrorEventData) {
+application.on(application.uncaughtErrorEvent, function (args: application.UnhandledErrorEventData) {
     console.log("### NativeScriptError: " + args.error);
     console.log("### nativeException: " + (<any>args.error).nativeException);
     console.log("### stackTrace: " + (<any>args.error).stackTrace);
     console.log("### stack: " + args.error.stack);
 });
 
-application.on(application.discardedErrorEvent, function(args: application.DiscardedErrorEventData) {
+application.on(application.discardedErrorEvent, function (args: application.DiscardedErrorEventData) {
     console.log("### [Discarded] NativeScriptError: " + args.error);
     console.log("### [Discarded] nativeException: " + (<any>args.error).nativeException);
     console.log("### [Discarded] stackTrace: " + (<any>args.error).stackTrace);
@@ -89,6 +89,8 @@ application.on(application.discardedErrorEvent, function(args: application.Disca
 });
 
 application.setCssFileName("app.css");
-
 application._start({ moduleName: "main-page" });
+
+// TODO: investigate tab-view -> tabviewcss test crash
+// TODO: investigate css -> layouts border overlap failure
 // application.run({ moduleName: "app-root" });

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

@@ -0,0 +1,42 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { Page } from "tns-core-modules/ui/page";
+import { Tabs, SelectedIndexChangedEventData } from "tns-core-modules/ui/tabs";
+
+export function goToFirst(args: EventData) {
+  console.log("---> goToFirst");
+  const page = <Page>(<any>args.object).page;
+  const bottomNav = <Tabs>page.getViewById("bottomNav");
+  bottomNav.selectedIndex = 0;
+}
+
+export function goToSecond(args: EventData) {
+  console.log("---> goToSecond");
+  const page = <Page>(<any>args.object).page;
+  const bottomNav = <Tabs>page.getViewById("bottomNav");
+  bottomNav.selectedIndex = 1;
+}
+
+export function goToThird(args: EventData) {
+  console.log("---> goToThird");
+  const page = <Page>(<any>args.object).page;
+  const bottomNav = <Tabs>page.getViewById("bottomNav");
+  bottomNav.selectedIndex = 2;
+}
+
+export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
+  console.log("---> onSelectedIndexChanged", args.eventName);
+  console.log("---> oldIndex", args.oldIndex);
+  console.log("---> newIndex", args.newIndex);
+}
+
+export function onFirstTabStripItemTap(args: EventData) {
+  console.log("---> onFirstTabStripItemTap", args.eventName);
+}
+
+export function onSecondTabStripItemTap(args: EventData) {
+  console.log("---> onSecondTabStripItemTap", args.eventName);
+}
+
+export function onThirdTabStripItemTap(args: EventData) {
+  console.log("---> onThirdTabStripItemTap", args.eventName);
+}

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

@@ -0,0 +1,36 @@
+<Page>
+
+  <BottomNavigation id="bottomNav" selectedIndexChanged="onSelectedIndexChanged">
+
+    <TabStrip>
+      <TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
+      <TabStripItem tap="onSecondTabStripItemTap">
+        <Label text="Second" />
+      </TabStripItem>
+      <TabStripItem title="First" tap="onThirdTabStripItemTap">
+        <Label text="Third" />
+      </TabStripItem>
+    </TabStrip>
+
+    <TabContentItem>
+      <StackLayout>
+        <Label text="First View" backgroundColor="red" />
+        <Button tap="goToSecond" text="go to second" />
+      </StackLayout>
+    </TabContentItem>
+    <TabContentItem>
+      <StackLayout>
+        <Label text="Second View" backgroundColor="green" />
+        <Button tap="goToThird" text="go to thrid" />
+      </StackLayout>
+    </TabContentItem>
+    <TabContentItem>
+      <StackLayout>
+        <Label text="First View" backgroundColor="blue" />
+        <Button tap="goToFirst" text="go to first" />
+      </StackLayout>
+    </TabContentItem>
+
+  </BottomNavigation>
+
+</Page>

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

@@ -0,0 +1,14 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { Button } from "tns-core-modules/ui/button/button";
+
+export function goToSecond(args: EventData) {
+  console.log("---> goToSecond Page");
+  const button = <Button>args.object;
+  button.page.frame.navigate("bottom-navigation/second-page");
+}
+
+export function goBack(args: EventData) {
+  console.log("---> goBack");
+  const button = <Button>args.object;
+  button.page.frame.goBack();
+}

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

@@ -0,0 +1,7 @@
+<Page backgroundColor="lightgreen" actionBarHidden="true">
+  <StackLayout>
+    <Label text="First Page"  />
+    <Button tap="goToSecond" text="go to second page" />
+    <Button tap="goBack" text="go to back" />
+  </StackLayout>
+</Page>

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

@@ -15,6 +15,7 @@ export function loadExamples() {
     examples.set("issue-5470", "bottom-navigation/issue-5470-page");
     examples.set("background-color", "bottom-navigation/background-color-page");
     examples.set("color", "bottom-navigation/color-page");
+    examples.set("events", "bottom-navigation/events-page");
     examples.set("font", "bottom-navigation/font-page");
     examples.set("text-transform", "bottom-navigation/text-transform-page");
     examples.set("icon-title-placement", "bottom-navigation/icon-title-placement-page");
@@ -24,6 +25,7 @@ export function loadExamples() {
     examples.set("fancy-fonts", "bottom-navigation/fancy-fonts-page");
     examples.set("css-text-transform", "bottom-navigation/bottom-navigation-css-page");
     examples.set("custom-tabstrip", "bottom-navigation/custom-tabstrip-page");
+    examples.set("reselect", "bottom-navigation/reselect-page");
 
     return examples;
 }

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

@@ -0,0 +1,61 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { Frame } from "tns-core-modules/ui/frame/frame";
+import { Page } from "tns-core-modules/ui/page";
+import {
+  TabStripItemEventData, SelectedIndexChangedEventData, BottomNavigation, TabStrip,
+} from "tns-core-modules/ui/bottom-navigation";
+
+export function goToFirst(args: EventData) {
+  console.log("---> goToFirst");
+  const page = <Page>(<any>args.object).page;
+  const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
+  bottomNav.selectedIndex = 0;
+}
+
+export function goToSecond(args: EventData) {
+  console.log("---> goToSecond");
+  const page = <Page>(<any>args.object).page;
+  const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
+  bottomNav.selectedIndex = 1;
+}
+
+export function goToThird(args: EventData) {
+  console.log("---> goToThird");
+  const page = <Page>(<any>args.object).page;
+  const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
+  bottomNav.selectedIndex = 2;
+}
+
+export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
+  console.log("---> onSelectedIndexChanged", args.eventName);
+  console.log("---> oldIndex", args.oldIndex);
+  console.log("---> newIndex", args.newIndex);
+}
+
+export function onItemTap(args: TabStripItemEventData) {
+  console.log("---> onItemTap", args.eventName);
+  console.log("---> onItemTap", args.index);
+  console.log("---> onItemTap", args.object);
+
+  const tabStrip = <TabStrip>args.object;
+  const page = <Page>tabStrip.page;
+  const frame = <Frame>page.getViewById("frame");
+  const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
+
+  console.log("---> onItemTap selectedIndex", bottomNav.selectedIndex);
+  if (bottomNav.selectedIndex === args.index && frame.canGoBack()) {
+    frame.goBack();
+  }
+}
+
+export function onFirstTabStripItemTap(args: EventData) {
+  console.log("---> onFirstTabStripItemTap", args.eventName);
+}
+
+export function onSecondTabStripItemTap(args: EventData) {
+  console.log("---> onSecondTabStripItemTap", args.eventName);
+}
+
+export function onThirdTabStripItemTap(args: EventData) {
+  console.log("---> onThirdTabStripItemTap", args.eventName);
+}

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

@@ -0,0 +1,37 @@
+<Page>
+
+  <BottomNavigation id="bottomNav" selectedIndexChanged="onSelectedIndexChanged">
+
+    <TabStrip itemTap="onItemTap">
+      <TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
+      <TabStripItem tap="onSecondTabStripItemTap">
+        <Label text="Second" />
+      </TabStripItem>
+      <TabStripItem title="First" tap="onThirdTabStripItemTap">
+        <Label text="Third" />
+      </TabStripItem>
+    </TabStrip>
+
+    <TabContentItem>
+      <StackLayout>
+        <Label text="First View" backgroundColor="red" id="label" />
+        <Button tap="goToSecond" text="go to second item" id="button" />
+        <Frame defaultPage="bottom-navigation/first-page" id="frame" />
+      </StackLayout>
+    </TabContentItem>
+    <TabContentItem>
+      <StackLayout>
+        <Label text="Second Content Item" backgroundColor="lightgreen" />
+        <Button tap="goToThird" text="go to thrid item" />
+      </StackLayout>
+    </TabContentItem>
+    <TabContentItem>
+      <StackLayout>
+        <Label text="First Content Item" backgroundColor="lightblue" />
+        <Button tap="goToFirst" text="go to first item" />
+      </StackLayout>
+    </TabContentItem>
+
+  </BottomNavigation>
+
+</Page>

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

@@ -0,0 +1,14 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { Button } from "tns-core-modules/ui/button/button";
+
+export function goToFirst(args: EventData) {
+  console.log("---> goToFirst Page");
+  const button = <Button>args.object;
+  button.page.frame.navigate("bottom-navigation/first-page");
+}
+
+export function goBack(args: EventData) {
+  console.log("---> goBack");
+  const button = <Button>args.object;
+  button.page.frame.goBack();
+}

e2e/ui-tests-app/app/bottom-navigation/second-page.xml

@@ -0,0 +1,7 @@
+<Page backgroundColor="lightblue" actionBarHidden="true">
+  <StackLayout>
+    <Label text="Second Page"  />
+    <Button tap="goToFirst" text="go to first page" />
+    <Button tap="goBack" text="go back" />
+  </StackLayout>
+</Page>

e2e/ui-tests-app/app/tabs/default-page.xml

@@ -86,4 +86,4 @@
       <Label text="Second Tab" />
     </TabStripItem>
   </BottomNavigationBar> -->
-</Page>
+</Page>

e2e/ui-tests-app/app/tabs/events-page.ts

@@ -0,0 +1,42 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { Page } from "tns-core-modules/ui/page";
+import { Tabs, SelectedIndexChangedEventData } from "tns-core-modules/ui/tabs";
+
+export function goToFirst(args: EventData) {
+  console.log("---> goToFirst");
+  const page = <Page>(<any>args.object).page;
+  const tabsNav = <Tabs>page.getViewById("tabsNav");
+  tabsNav.selectedIndex = 0;
+}
+
+export function goToSecond(args: EventData) {
+  console.log("---> goToSecond");
+  const page = <Page>(<any>args.object).page;
+  const tabsNav = <Tabs>page.getViewById("tabsNav");
+  tabsNav.selectedIndex = 1;
+}
+
+export function goToThird(args: EventData) {
+  console.log("---> goToThird");
+  const page = <Page>(<any>args.object).page;
+  const tabsNav = <Tabs>page.getViewById("tabsNav");
+  tabsNav.selectedIndex = 2;
+}
+
+export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
+  console.log("---> onSelectedIndexChanged", args.eventName);
+  console.log("---> oldIndex", args.oldIndex);
+  console.log("---> newIndex", args.newIndex);
+}
+
+export function onFirstTabStripItemTap(args: EventData) {
+  console.log("---> onFirstTabStripItemTap", args.eventName);
+}
+
+export function onSecondTabStripItemTap(args: EventData) {
+  console.log("---> onSecondTabStripItemTap", args.eventName);
+}
+
+export function onThirdTabStripItemTap(args: EventData) {
+  console.log("---> onThirdTabStripItemTap", args.eventName);
+}

e2e/ui-tests-app/app/tabs/events-page.xml

@@ -0,0 +1,36 @@
+<Page>
+
+  <Tabs id="tabsNav" selectedIndexChanged="onSelectedIndexChanged">
+
+    <TabStrip>
+      <TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
+      <TabStripItem tap="onSecondTabStripItemTap">
+        <Label text="Second" />
+      </TabStripItem>
+      <TabStripItem title="First" tap="onThirdTabStripItemTap">
+        <Label text="Third" />
+      </TabStripItem>
+    </TabStrip>
+
+    <TabContentItem>
+      <StackLayout>
+        <Label text="First View" backgroundColor="red" />
+        <Button tap="goToSecond" text="go to second" />
+      </StackLayout>
+    </TabContentItem>
+    <TabContentItem>
+      <StackLayout>
+        <Label text="Second View" backgroundColor="green" />
+        <Button tap="goToThird" text="go to thrid" />
+      </StackLayout>
+    </TabContentItem>
+    <TabContentItem>
+      <StackLayout>
+        <Label text="First View" backgroundColor="blue" />
+        <Button tap="goToFirst" text="go to first" />
+      </StackLayout>
+    </TabContentItem>
+
+  </Tabs>
+
+</Page>

e2e/ui-tests-app/app/tabs/first-page.ts

@@ -0,0 +1,14 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { Button } from "tns-core-modules/ui/button/button";
+
+export function goToSecond(args: EventData) {
+  console.log("---> goToSecond Page");
+  const button = <Button>args.object;
+  button.page.frame.navigate("tabs/second-page");
+}
+
+export function goBack(args: EventData) {
+  console.log("---> goBack");
+  const button = <Button>args.object;
+  button.page.frame.goBack();
+}

e2e/ui-tests-app/app/tabs/first-page.xml

@@ -0,0 +1,7 @@
+<Page backgroundColor="lightgreen" actionBarHidden="true">
+  <StackLayout>
+    <Label text="First Page"  />
+    <Button tap="goToSecond" text="go to second page" />
+    <Button tap="goBack" text="go to back" />
+  </StackLayout>
+</Page>

e2e/ui-tests-app/app/tabs/main-page.ts

@@ -16,6 +16,7 @@ export function loadExamples() {
     examples.set("issue-5470", "tabs/issue-5470-page");
     examples.set("background-color", "tabs/background-color-page");
     examples.set("color", "tabs/color-page");
+    examples.set("events", "tabs/events-page");
     examples.set("font", "tabs/font-page");
     examples.set("text-transform", "tabs/text-transform-page");
     examples.set("highlight-color", "tabs/highlight-color-page");
@@ -24,6 +25,7 @@ export function loadExamples() {
     examples.set("swipe-disabled", "tabs/swipe-disabled-page");
     examples.set("strip-item", "tabs/tab-strip-item-page");
     examples.set("strip-items", "tabs/tab-strip-items-page");
+    examples.set("reselect", "tabs/reselect-page");
     examples.set("tabs-position", "tabs/tabs-position-page");
     examples.set("tabs-binding", "tabs/tabs-binding-page");
     examples.set("font-icons", "tabs/font-icons-page");

e2e/ui-tests-app/app/tabs/reselect-page.ts

@@ -0,0 +1,73 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { Frame } from "tns-core-modules/ui/frame/frame";
+import { Page } from "tns-core-modules/ui/page";
+import {
+  TabStripItemEventData, SelectedIndexChangedEventData, Tabs, TabStrip //, TabStripItem
+} from "tns-core-modules/ui/tabs";
+
+export function goToFirst(args: EventData) {
+  console.log("---> goToFirst");
+  const page = <Page>(<any>args.object).page;
+  const tabsNav = <Tabs>page.getViewById("tabsNav");
+  tabsNav.selectedIndex = 0;
+}
+
+export function goToSecond(args: EventData) {
+  console.log("---> goToSecond");
+  const page = <Page>(<any>args.object).page;
+  const tabsNav = <Tabs>page.getViewById("tabsNav");
+  tabsNav.selectedIndex = 1;
+}
+
+export function goToThird(args: EventData) {
+  console.log("---> goToThird");
+  const page = <Page>(<any>args.object).page;
+  const tabsNav = <Tabs>page.getViewById("tabsNav");
+  tabsNav.selectedIndex = 2;
+}
+
+export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
+  console.log("---> onSelectedIndexChanged", args.eventName);
+  console.log("---> oldIndex", args.oldIndex);
+  console.log("---> newIndex", args.newIndex);
+}
+
+export function onItemTap(args: TabStripItemEventData) {
+  console.log("---> onItemTap", args.eventName);
+  console.log("---> onItemTap", args.index);
+  console.log("---> onItemTap", args.object);
+
+  const tabStrip = <TabStrip>args.object;
+  const page = <Page>tabStrip.page;
+  const frame = <Frame>page.getViewById("frame");
+  const tabs = <Tabs>page.getViewById("tabsNav");
+
+  console.log("---> onItemTap selectedIndex", tabs.selectedIndex);
+  if (tabs.selectedIndex === args.index && frame.canGoBack()) {
+    frame.goBack();
+  }
+}
+
+export function onFirstTabStripItemTap(args: EventData) {
+  console.log("---> onFirstTabStripItemTap", args.eventName);
+  // console.log("---> onFirstTabStripItemTap", args.eventName);
+  // console.log("---> onFirstTabStripItemTap", args.object);
+  // const tabStripItem = <TabStripItem>args.object;
+
+  // const page = tabStripItem.page;
+  // const frame = <Frame>page.getViewById("frame");
+  // const tabs = <Tabs>page.getViewById("tabsNav");
+  // console.log("---> tabs.selectedIndex", tabs.selectedIndex);
+
+  // if (tabs.selectedIndex === 0 && frame.canGoBack()) {
+  //   frame.goBack();
+  // }
+}
+
+export function onSecondTabStripItemTap(args: EventData) {
+  console.log("---> onSecondTabStripItemTap", args.eventName);
+}
+
+export function onThirdTabStripItemTap(args: EventData) {
+  console.log("---> onThirdTabStripItemTap", args.eventName);
+}

e2e/ui-tests-app/app/tabs/reselect-page.xml

@@ -0,0 +1,37 @@
+<Page>
+
+  <Tabs id="tabsNav" selectedIndexChanged="onSelectedIndexChanged">
+
+    <TabStrip itemTap="onItemTap">
+      <TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
+      <TabStripItem tap="onSecondTabStripItemTap">
+        <Label text="Second" />
+      </TabStripItem>
+      <TabStripItem title="First" tap="onThirdTabStripItemTap">
+        <Label text="Third" />
+      </TabStripItem>
+    </TabStrip>
+
+    <TabContentItem>
+      <StackLayout>
+        <Label text="First View" backgroundColor="red" id="label" />
+        <Button tap="goToSecond" text="go to second item" id="button" />
+        <Frame defaultPage="tabs/first-page" id="frame" />
+      </StackLayout>
+    </TabContentItem>
+    <TabContentItem>
+      <StackLayout>
+        <Label text="Second Content Item" backgroundColor="lightgreen" />
+        <Button tap="goToThird" text="go to thrid item" />
+      </StackLayout>
+    </TabContentItem>
+    <TabContentItem>
+      <StackLayout>
+        <Label text="First Content Item" backgroundColor="lightblue" />
+        <Button tap="goToFirst" text="go to first item" />
+      </StackLayout>
+    </TabContentItem>
+
+  </Tabs>
+
+</Page>

e2e/ui-tests-app/app/tabs/second-page.ts

@@ -0,0 +1,14 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { Button } from "tns-core-modules/ui/button/button";
+
+export function goToFirst(args: EventData) {
+  console.log("---> goToFirst Page");
+  const button = <Button>args.object;
+  button.page.frame.navigate("tabs/first-page");
+}
+
+export function goBack(args: EventData) {
+  console.log("---> goBack");
+  const button = <Button>args.object;
+  button.page.frame.goBack();
+}

e2e/ui-tests-app/app/tabs/second-page.xml

@@ -0,0 +1,7 @@
+<Page backgroundColor="lightblue" actionBarHidden="true">
+  <StackLayout>
+    <Label text="Second Page"  />
+    <Button tap="goToFirst" text="go to first page" />
+    <Button tap="goBack" text="go back" />
+  </StackLayout>
+</Page>