mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
feat(TabStrip): add itemTap event (#7711)
This commit is contained in:
committed by
Manol Donev
parent
caca2b82a2
commit
55c9cc9072
@@ -1 +1 @@
|
||||
<Frame defaultPage="main-page" />
|
||||
<Frame defaultPage="main-page" />
|
||||
|
||||
@@ -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" });
|
||||
|
||||
42
e2e/ui-tests-app/app/bottom-navigation/events-page.ts
Normal file
42
e2e/ui-tests-app/app/bottom-navigation/events-page.ts
Normal file
@@ -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);
|
||||
}
|
||||
36
e2e/ui-tests-app/app/bottom-navigation/events-page.xml
Normal file
36
e2e/ui-tests-app/app/bottom-navigation/events-page.xml
Normal file
@@ -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>
|
||||
14
e2e/ui-tests-app/app/bottom-navigation/first-page.ts
Normal file
14
e2e/ui-tests-app/app/bottom-navigation/first-page.ts
Normal file
@@ -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();
|
||||
}
|
||||
7
e2e/ui-tests-app/app/bottom-navigation/first-page.xml
Normal file
7
e2e/ui-tests-app/app/bottom-navigation/first-page.xml
Normal file
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
61
e2e/ui-tests-app/app/bottom-navigation/reselect-page.ts
Normal file
61
e2e/ui-tests-app/app/bottom-navigation/reselect-page.ts
Normal file
@@ -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);
|
||||
}
|
||||
37
e2e/ui-tests-app/app/bottom-navigation/reselect-page.xml
Normal file
37
e2e/ui-tests-app/app/bottom-navigation/reselect-page.xml
Normal file
@@ -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>
|
||||
14
e2e/ui-tests-app/app/bottom-navigation/second-page.ts
Normal file
14
e2e/ui-tests-app/app/bottom-navigation/second-page.ts
Normal file
@@ -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();
|
||||
}
|
||||
7
e2e/ui-tests-app/app/bottom-navigation/second-page.xml
Normal file
7
e2e/ui-tests-app/app/bottom-navigation/second-page.xml
Normal file
@@ -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>
|
||||
@@ -86,4 +86,4 @@
|
||||
<Label text="Second Tab" />
|
||||
</TabStripItem>
|
||||
</BottomNavigationBar> -->
|
||||
</Page>
|
||||
</Page>
|
||||
|
||||
42
e2e/ui-tests-app/app/tabs/events-page.ts
Normal file
42
e2e/ui-tests-app/app/tabs/events-page.ts
Normal file
@@ -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);
|
||||
}
|
||||
36
e2e/ui-tests-app/app/tabs/events-page.xml
Normal file
36
e2e/ui-tests-app/app/tabs/events-page.xml
Normal file
@@ -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>
|
||||
14
e2e/ui-tests-app/app/tabs/first-page.ts
Normal file
14
e2e/ui-tests-app/app/tabs/first-page.ts
Normal file
@@ -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();
|
||||
}
|
||||
7
e2e/ui-tests-app/app/tabs/first-page.xml
Normal file
7
e2e/ui-tests-app/app/tabs/first-page.xml
Normal file
@@ -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>
|
||||
@@ -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");
|
||||
|
||||
73
e2e/ui-tests-app/app/tabs/reselect-page.ts
Normal file
73
e2e/ui-tests-app/app/tabs/reselect-page.ts
Normal file
@@ -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);
|
||||
}
|
||||
37
e2e/ui-tests-app/app/tabs/reselect-page.xml
Normal file
37
e2e/ui-tests-app/app/tabs/reselect-page.xml
Normal file
@@ -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>
|
||||
14
e2e/ui-tests-app/app/tabs/second-page.ts
Normal file
14
e2e/ui-tests-app/app/tabs/second-page.ts
Normal file
@@ -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();
|
||||
}
|
||||
7
e2e/ui-tests-app/app/tabs/second-page.xml
Normal file
7
e2e/ui-tests-app/app/tabs/second-page.xml
Normal file
@@ -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>
|
||||
@@ -1,27 +0,0 @@
|
||||
import * as pages from "tns-core-modules/ui/page";
|
||||
import * as frame from "tns-core-modules/ui/frame";
|
||||
import * as stackModule from "tns-core-modules/ui/layouts/stack-layout";
|
||||
import * as button from "tns-core-modules/ui/button";
|
||||
import * as text from "tns-core-modules/ui/text-field";
|
||||
|
||||
export function createPage() {
|
||||
var page = new pages.Page();
|
||||
var stack = new stackModule.StackLayout();
|
||||
|
||||
var btn = new button.Button();
|
||||
btn.text = "Page B new activity";
|
||||
btn.on(button.Button.tapEvent, function () {
|
||||
var nextPage = "tests/pages/navigation/pageB-new-activity";
|
||||
frame.topmost().navigate(nextPage);
|
||||
});
|
||||
stack.addChild(btn);
|
||||
|
||||
var txt = new text.TextField();
|
||||
txt.text = "text new A";
|
||||
stack.addChild(txt);
|
||||
|
||||
page.content = stack;
|
||||
|
||||
return page;
|
||||
}
|
||||
//export var Page = page;
|
||||
@@ -1,56 +0,0 @@
|
||||
import * as pages from "tns-core-modules/ui/page";
|
||||
import * as frame from "tns-core-modules/ui/frame";
|
||||
import * as stackModule from "tns-core-modules/ui/layouts/stack-layout";
|
||||
import * as button from "tns-core-modules/ui/button";
|
||||
import * as text from "tns-core-modules/ui/text-field";
|
||||
import * as color from "tns-core-modules/color";
|
||||
import * as list from "tns-core-modules/ui/list-view";
|
||||
|
||||
export function createPage() {
|
||||
var page = new pages.Page();
|
||||
var stack = new stackModule.StackLayout();
|
||||
stack.style.backgroundColor = new color.Color("#FF8833FF");
|
||||
|
||||
var btn = new button.Button();
|
||||
btn.text = "Page B";
|
||||
btn.on(button.Button.tapEvent, function () {
|
||||
var nextPage = "tests/pages/navigation/pageB";
|
||||
frame.topmost().navigate(nextPage);
|
||||
});
|
||||
stack.addChild(btn);
|
||||
|
||||
var btnActivity = new button.Button();
|
||||
btnActivity.text = "start activity";
|
||||
btnActivity.on(button.Button.tapEvent, function () {
|
||||
var newPage = "tests/pages/navigation/pageA-new-activity";
|
||||
|
||||
var newFrame = new frame.Frame();
|
||||
newFrame.navigate(newPage);
|
||||
});
|
||||
stack.addChild(btnActivity);
|
||||
|
||||
var txt = new text.TextField();
|
||||
txt.text = "text A";
|
||||
stack.addChild(txt);
|
||||
|
||||
var lv = new list.ListView();
|
||||
var data = [];
|
||||
for (var i = 0; i < 100; i++) {
|
||||
data[i] = "here is item " + i;
|
||||
}
|
||||
lv.height = 200;
|
||||
lv.items = data;
|
||||
lv.on(list.ListView.itemLoadingEvent, (args: list.ItemEventData) => {
|
||||
var btn = <button.Button> args.view;
|
||||
if (!btn) {
|
||||
btn = new button.Button();
|
||||
args.view = btn;
|
||||
}
|
||||
btn.text = data[args.index];
|
||||
});
|
||||
stack.addChild(lv);
|
||||
|
||||
page.content = stack;
|
||||
|
||||
return page;
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import * as pages from "tns-core-modules/ui/page";
|
||||
import * as frame from "tns-core-modules/ui/frame";
|
||||
import * as stackModule from "tns-core-modules/ui/layouts/stack-layout";
|
||||
import * as button from "tns-core-modules/ui/button";
|
||||
import * as text from "tns-core-modules/ui/text-field";
|
||||
|
||||
export function createPage() {
|
||||
var page = new pages.Page();
|
||||
var stack = new stackModule.StackLayout();
|
||||
|
||||
var btn = new button.Button();
|
||||
btn.text = "Page C new activity";
|
||||
btn.on(button.Button.tapEvent, function () {
|
||||
var nextPage = "tests/pages/navigation/pageC-new-activity";
|
||||
frame.topmost().navigate(nextPage);
|
||||
});
|
||||
stack.addChild(btn);
|
||||
|
||||
var backBtn = new button.Button();
|
||||
backBtn.text = "BACK";
|
||||
backBtn.on(button.Button.tapEvent, function () {
|
||||
frame.topmost().goBack();
|
||||
});
|
||||
stack.addChild(backBtn);
|
||||
|
||||
var txt = new text.TextField();
|
||||
txt.text = "text new B";
|
||||
stack.addChild(txt);
|
||||
|
||||
page.content = stack;
|
||||
|
||||
return page;
|
||||
}
|
||||
//export var Page = page;
|
||||
@@ -1,58 +0,0 @@
|
||||
import * as pages from "tns-core-modules/ui/page";
|
||||
import * as frame from "tns-core-modules/ui/frame";
|
||||
import * as stackModule from "tns-core-modules/ui/layouts/stack-layout";
|
||||
import * as button from "tns-core-modules/ui/button";
|
||||
import * as text from "tns-core-modules/ui/text-field";
|
||||
import * as color from "tns-core-modules/color";
|
||||
import * as scroll from "tns-core-modules/ui/scroll-view";
|
||||
|
||||
export function createPage() {
|
||||
var page = new pages.Page();
|
||||
var stack = new stackModule.StackLayout();
|
||||
stack.style.backgroundColor = new color.Color("#FFFFFF00");
|
||||
|
||||
var btn = new button.Button();
|
||||
btn.text = "Page C";
|
||||
btn.on(button.Button.tapEvent, function () {
|
||||
var nextPage = "tests/pages/navigation/pageC";
|
||||
frame.topmost().navigate(nextPage);
|
||||
});
|
||||
stack.addChild(btn);
|
||||
|
||||
var btnActivity = new button.Button();
|
||||
btnActivity.text = "start activity";
|
||||
btnActivity.on(button.Button.tapEvent, function () {
|
||||
var newFrame = new frame.Frame();
|
||||
var newPage = "tests/pages/navigation/pageA-new-activity";
|
||||
newFrame.navigate(newPage);
|
||||
});
|
||||
stack.addChild(btnActivity);
|
||||
|
||||
var backBtn = new button.Button();
|
||||
backBtn.text = "BACK";
|
||||
backBtn.on(button.Button.tapEvent, function () {
|
||||
frame.topmost().goBack();
|
||||
});
|
||||
stack.addChild(backBtn);
|
||||
|
||||
var txt = new text.TextField();
|
||||
txt.text = "text B";
|
||||
stack.addChild(txt);
|
||||
|
||||
var sv = new scroll.ScrollView();
|
||||
sv.height = 200;
|
||||
stack.addChild(sv);
|
||||
|
||||
var content = new stackModule.StackLayout();
|
||||
sv.content = content;
|
||||
for (var i = 0; i < 50; i++) {
|
||||
var b = new button.Button();
|
||||
b.text = "button " + i;
|
||||
content.addChild(b);
|
||||
}
|
||||
|
||||
page.content = stack;
|
||||
|
||||
return page;
|
||||
}
|
||||
//export var Page = page;
|
||||
@@ -1,34 +0,0 @@
|
||||
import * as pages from "tns-core-modules/ui/page";
|
||||
import * as frame from "tns-core-modules/ui/frame";
|
||||
import * as stackModule from "tns-core-modules/ui/layouts/stack-layout";
|
||||
import * as button from "tns-core-modules/ui/button";
|
||||
import * as text from "tns-core-modules/ui/text-field";
|
||||
|
||||
export function createPage() {
|
||||
var page = new pages.Page();
|
||||
var stack = new stackModule.StackLayout();
|
||||
|
||||
var btn = new button.Button();
|
||||
btn.text = "Page A ???";
|
||||
btn.on(button.Button.tapEvent, function () {
|
||||
var newPage = "tests/pages/navigation/pageA";
|
||||
frame.topmost().navigate(newPage);
|
||||
});
|
||||
stack.addChild(btn);
|
||||
|
||||
var backBtn = new button.Button();
|
||||
backBtn.text = "BACK";
|
||||
backBtn.on(button.Button.tapEvent, function () {
|
||||
frame.topmost().goBack();
|
||||
});
|
||||
stack.addChild(backBtn);
|
||||
|
||||
var txt = new text.TextField();
|
||||
txt.text = "text new C";
|
||||
stack.addChild(txt);
|
||||
|
||||
page.content = stack;
|
||||
|
||||
return page;
|
||||
}
|
||||
//export var Page = page;
|
||||
@@ -1,43 +0,0 @@
|
||||
import * as pages from "tns-core-modules/ui/page";
|
||||
import * as frame from "tns-core-modules/ui/frame";
|
||||
import * as stackModule from "tns-core-modules/ui/layouts/stack-layout";
|
||||
import * as button from "tns-core-modules/ui/button";
|
||||
import * as text from "tns-core-modules/ui/text-field";
|
||||
|
||||
export function createPage() {
|
||||
var page = new pages.Page();
|
||||
var stack = new stackModule.StackLayout();
|
||||
|
||||
var newActivity = new button.Button();
|
||||
newActivity.text = "start activity";
|
||||
newActivity.on(button.Button.tapEvent, function () {
|
||||
var newFrame = new frame.Frame();
|
||||
var newPage = "tests/pages/navigation/pageA-new-activity";
|
||||
newFrame.navigate(newPage);
|
||||
});
|
||||
stack.addChild(newActivity);
|
||||
|
||||
var btn = new button.Button();
|
||||
btn.text = "Page A ???";
|
||||
btn.on(button.Button.tapEvent, function () {
|
||||
var nextPage = "tests/pages/navigation/pageA";
|
||||
frame.topmost().navigate(nextPage);
|
||||
});
|
||||
stack.addChild(btn);
|
||||
|
||||
var backBtn = new button.Button();
|
||||
backBtn.text = "BACK";
|
||||
backBtn.on(button.Button.tapEvent, function () {
|
||||
frame.topmost().goBack();
|
||||
});
|
||||
stack.addChild(backBtn);
|
||||
|
||||
var txt = new text.TextField();
|
||||
txt.text = "text C";
|
||||
stack.addChild(txt);
|
||||
|
||||
page.content = stack;
|
||||
|
||||
return page;
|
||||
}
|
||||
//export var Page = page;
|
||||
@@ -1,20 +1,20 @@
|
||||
// Types
|
||||
import { TabContentItem } from "../tab-navigation-base/tab-content-item";
|
||||
import { TabStrip } from "../tab-navigation-base/tab-strip";
|
||||
import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
|
||||
import { TabContentItem } from "../tab-navigation-base/tab-content-item";
|
||||
import { TextTransform } from "../text-base";
|
||||
|
||||
// Requires
|
||||
import {
|
||||
TabNavigationBase, getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty
|
||||
} from "../tab-navigation-base/tab-navigation-base";
|
||||
import { Font } from "../styling/font";
|
||||
import { getTransformedText } from "../text-base";
|
||||
import { CSSType, Color } from "../core/view";
|
||||
import { Frame, View } from "../frame";
|
||||
import { RESOURCE_PREFIX, ad, layout, isFontIconURI } from "../../utils/utils";
|
||||
import { fromFileOrResource, fromFontIconCode, ImageSource } from "../../image-source";
|
||||
import * as application from "../../application";
|
||||
import { fromFileOrResource, fromFontIconCode, ImageSource } from "../../image-source";
|
||||
import { ad, isFontIconURI, layout, RESOURCE_PREFIX } from "../../utils/utils";
|
||||
import { Color, CSSType } from "../core/view";
|
||||
import { Frame, View } from "../frame";
|
||||
import { Font } from "../styling/font";
|
||||
import {
|
||||
getIconSpecSize, itemsProperty, selectedIndexProperty, TabNavigationBase, tabStripProperty
|
||||
} from "../tab-navigation-base/tab-navigation-base";
|
||||
import { getTransformedText } from "../text-base";
|
||||
|
||||
// TODO: Impl trace
|
||||
// import { isEnabled as traceEnabled, write as traceWrite } from "../../../trace";
|
||||
@@ -126,10 +126,12 @@ function initializeNativeClasses() {
|
||||
return false;
|
||||
}
|
||||
|
||||
const tabStripItems = owner.tabStrip && owner.tabStrip.items;
|
||||
const tabStrip = owner.tabStrip;
|
||||
const tabStripItems = tabStrip && tabStrip.items;
|
||||
|
||||
if (position >= 0 && tabStripItems[position]) {
|
||||
tabStripItems[position]._emit(TabStripItem.tapEvent);
|
||||
tabStrip.notify({ eventName: TabStrip.itemTapEvent, object: tabStrip, index: position });
|
||||
}
|
||||
|
||||
if (!owner.items[position]) {
|
||||
@@ -271,7 +273,7 @@ export class BottomNavigation extends TabNavigationBase {
|
||||
|
||||
this._bottomNavigationBar = (<any>nativeView).bottomNavigationBar;
|
||||
(<any>this._bottomNavigationBar).owner = this;
|
||||
|
||||
|
||||
if (this.tabStrip) {
|
||||
this.tabStrip.setNativeView(this._bottomNavigationBar);
|
||||
}
|
||||
@@ -504,37 +506,37 @@ export class BottomNavigation extends TabNavigationBase {
|
||||
|
||||
private createTabItemSpec(tabStripItem: TabStripItem): org.nativescript.widgets.TabItemSpec {
|
||||
const tabItemSpec = new org.nativescript.widgets.TabItemSpec();
|
||||
|
||||
|
||||
if (tabStripItem.isLoaded) {
|
||||
const titleLabel = tabStripItem.label;
|
||||
let title = titleLabel.text;
|
||||
|
||||
|
||||
// TEXT-TRANSFORM
|
||||
const textTransform = titleLabel.style.textTransform;
|
||||
if (textTransform) {
|
||||
title = getTransformedText(title, textTransform);
|
||||
}
|
||||
tabItemSpec.title = title;
|
||||
|
||||
|
||||
// BACKGROUND-COLOR
|
||||
const backgroundColor = tabStripItem.style.backgroundColor;
|
||||
if (backgroundColor) {
|
||||
tabItemSpec.backgroundColor = backgroundColor.android;
|
||||
}
|
||||
|
||||
|
||||
// COLOR
|
||||
const color = titleLabel.style.color;
|
||||
if (color) {
|
||||
tabItemSpec.color = color.android;
|
||||
}
|
||||
|
||||
|
||||
// FONT
|
||||
const fontInternal = titleLabel.style.fontInternal;
|
||||
if (fontInternal) {
|
||||
tabItemSpec.fontSize = fontInternal.fontSize;
|
||||
tabItemSpec.typeFace = fontInternal.getAndroidTypeface();
|
||||
}
|
||||
|
||||
|
||||
// ICON
|
||||
const iconSource = tabStripItem.image && tabStripItem.image.src;
|
||||
if (iconSource) {
|
||||
@@ -546,7 +548,7 @@ export class BottomNavigation extends TabNavigationBase {
|
||||
}
|
||||
} else {
|
||||
const icon = this.getIcon(tabStripItem);
|
||||
|
||||
|
||||
if (icon) {
|
||||
// TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
|
||||
// tslint:disable-next-line:deprecation
|
||||
@@ -558,13 +560,13 @@ export class BottomNavigation extends TabNavigationBase {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return tabItemSpec;
|
||||
}
|
||||
|
||||
private getIcon(tabStripItem: TabStripItem): android.graphics.drawable.BitmapDrawable {
|
||||
const iconSource = tabStripItem.image && tabStripItem.image.src;
|
||||
|
||||
|
||||
let is: ImageSource;
|
||||
if (isFontIconURI(iconSource)) {
|
||||
const fontIconCode = iconSource.split("//")[1];
|
||||
@@ -575,35 +577,35 @@ export class BottomNavigation extends TabNavigationBase {
|
||||
} else {
|
||||
is = fromFileOrResource(iconSource);
|
||||
}
|
||||
|
||||
|
||||
let imageDrawable: android.graphics.drawable.BitmapDrawable;
|
||||
if (is && is.android) {
|
||||
let image = is.android;
|
||||
|
||||
|
||||
if (this.tabStrip && this.tabStrip.isIconSizeFixed) {
|
||||
image = this.getFixedSizeIcon(image);
|
||||
}
|
||||
|
||||
|
||||
imageDrawable = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), image);
|
||||
} else {
|
||||
// TODO
|
||||
// traceMissingIcon(iconSource);
|
||||
}
|
||||
|
||||
|
||||
return imageDrawable;
|
||||
}
|
||||
|
||||
|
||||
private getFixedSizeIcon(image: android.graphics.Bitmap): android.graphics.Bitmap {
|
||||
const inWidth = image.getWidth();
|
||||
const inHeight = image.getHeight();
|
||||
|
||||
|
||||
const iconSpecSize = getIconSpecSize({ width: inWidth, height: inHeight });
|
||||
|
||||
|
||||
const widthPixels = iconSpecSize.width * layout.getDisplayDensity();
|
||||
const heightPixels = iconSpecSize.height * layout.getDisplayDensity();
|
||||
|
||||
|
||||
const scaledImage = android.graphics.Bitmap.createScaledBitmap(image, widthPixels, heightPixels, true);
|
||||
|
||||
|
||||
return scaledImage;
|
||||
}
|
||||
|
||||
@@ -660,7 +662,7 @@ export class BottomNavigation extends TabNavigationBase {
|
||||
}
|
||||
|
||||
public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform): void {
|
||||
const titleLabel = tabStripItem.label;
|
||||
const titleLabel = tabStripItem.label;
|
||||
const title = getTransformedText(titleLabel.text, value);
|
||||
tabStripItem.nativeViewProtected.setText(title);
|
||||
}
|
||||
|
||||
@@ -1,21 +1,22 @@
|
||||
// Types
|
||||
import { TabStrip } from "../tab-navigation-base/tab-strip";
|
||||
import { TabContentItem } from "../tab-navigation-base/tab-content-item";
|
||||
import { TabStrip } from "../tab-navigation-base/tab-strip";
|
||||
import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
|
||||
import { TextTransform } from "../text-base";
|
||||
|
||||
//Requires
|
||||
import {
|
||||
TabNavigationBase, getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty
|
||||
} from "../tab-navigation-base/tab-navigation-base";
|
||||
import { Font } from "../styling/font";
|
||||
import { getTransformedText } from "../text-base";
|
||||
import { Frame } from "../frame";
|
||||
import { ios as iosView, View, CSSType } from "../core/view";
|
||||
import { ios as iosUtils, layout, isFontIconURI } from "../../utils/utils";
|
||||
import { device } from "../../platform";
|
||||
// Requires
|
||||
import { Color } from "../../color";
|
||||
import { fromFileOrResource, fromFontIconCode, ImageSource } from "../../image-source";
|
||||
import { device } from "../../platform";
|
||||
import { ios as iosUtils, isFontIconURI, layout } from "../../utils/utils";
|
||||
import { CSSType, ios as iosView, View } from "../core/view";
|
||||
import { Frame } from "../frame";
|
||||
import { Font } from "../styling/font";
|
||||
import {
|
||||
getIconSpecSize, itemsProperty, selectedIndexProperty, TabNavigationBase, tabStripProperty
|
||||
} from "../tab-navigation-base/tab-navigation-base";
|
||||
import { getTransformedText } from "../text-base";
|
||||
|
||||
// TODO:
|
||||
// import { profile } from "../../profiling";
|
||||
|
||||
@@ -107,9 +108,12 @@ class UITabBarControllerDelegateImpl extends NSObject implements UITabBarControl
|
||||
if (tabBarController.viewControllers) {
|
||||
const position = tabBarController.viewControllers.indexOfObject(viewController);
|
||||
if (position !== NSNotFound) {
|
||||
const tabStripItems = owner.tabStrip && owner.tabStrip.items;
|
||||
const tabStrip = owner.tabStrip;
|
||||
const tabStripItems = tabStrip && tabStrip.items;
|
||||
|
||||
if (tabStripItems && tabStripItems[position]) {
|
||||
tabStripItems[position]._emit(TabStripItem.tapEvent);
|
||||
tabStrip.notify({ eventName: TabStrip.itemTapEvent, object: tabStrip, index: position });
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -555,7 +559,7 @@ export class BottomNavigation extends TabNavigationBase {
|
||||
|
||||
if (is && is.ios) {
|
||||
image = is.ios;
|
||||
|
||||
|
||||
if (this.tabStrip && this.tabStrip.isIconSizeFixed) {
|
||||
image = this.getFixedSizeIcon(image);
|
||||
}
|
||||
@@ -575,7 +579,7 @@ export class BottomNavigation extends TabNavigationBase {
|
||||
private getFixedSizeIcon(image: UIImage): UIImage {
|
||||
const inWidth = image.size.width;
|
||||
const inHeight = image.size.height;
|
||||
|
||||
|
||||
const iconSpecSize = getIconSpecSize({ width: inWidth, height: inHeight });
|
||||
|
||||
const widthPts = iconSpecSize.width;
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
* @module "ui/tab-navigation/tab-strip"
|
||||
*/ /** */
|
||||
|
||||
import { View, Property } from "../../core/view";
|
||||
import { Color } from "../../../color";
|
||||
import { EventData, Property, View } from "../../core/view";
|
||||
import { TabStripItem } from "../tab-strip-item";
|
||||
|
||||
/**
|
||||
@@ -36,6 +36,34 @@ export class TabStrip extends View {
|
||||
* @private
|
||||
*/
|
||||
_hasTitle: boolean;
|
||||
|
||||
/**
|
||||
* String value used when hooking to itemTap event.
|
||||
*/
|
||||
public static itemTapEvent: string;
|
||||
|
||||
/**
|
||||
* A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
|
||||
* @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change").
|
||||
* @param callback - Callback function which will be executed when event is raised.
|
||||
* @param thisArg - An optional parameter which will be used as `this` context for callback execution.
|
||||
*/
|
||||
on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
|
||||
|
||||
/**
|
||||
* Raised when an TabStripItem is tapped.
|
||||
*/
|
||||
on(event: "itemTap", callback: (args: TabStripItemEventData) => void, thisArg?: any);
|
||||
}
|
||||
|
||||
/**
|
||||
* Event data containing information for the TabStripItem's index.
|
||||
*/
|
||||
export interface TabStripItemEventData extends EventData {
|
||||
/**
|
||||
* The index of the TabStripItem.
|
||||
*/
|
||||
index: number;
|
||||
}
|
||||
|
||||
export const iosIconRenderingModeProperty: Property<TabStrip, "automatic" | "alwaysOriginal" | "alwaysTemplate">;
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
// Types
|
||||
import { TabStrip as TabStripDefinition } from ".";
|
||||
import { TabStripItem } from "../tab-strip-item";
|
||||
import { TabNavigationBase } from "../tab-navigation-base";
|
||||
// Types
|
||||
import { Color } from "../../../color";
|
||||
import { ViewBase, AddArrayFromBuilder, AddChildFromBuilder } from "../../core/view";
|
||||
import { AddArrayFromBuilder, AddChildFromBuilder, EventData, ViewBase } from "../../core/view";
|
||||
import { TabNavigationBase } from "../tab-navigation-base";
|
||||
import { TabStripItem } from "../tab-strip-item";
|
||||
import { TabStripItemEventData, TabStrip as TabStripDefinition } from "./";
|
||||
|
||||
// Requires
|
||||
import {
|
||||
View, Property, CSSType, backgroundColorProperty, backgroundInternalProperty,
|
||||
colorProperty, fontInternalProperty, booleanConverter
|
||||
import {
|
||||
backgroundColorProperty, backgroundInternalProperty, booleanConverter,
|
||||
colorProperty, CSSType, fontInternalProperty, Property, View
|
||||
} from "../../core/view";
|
||||
import { textTransformProperty } from "../../text-base";
|
||||
|
||||
@@ -20,6 +20,7 @@ export const highlightColorProperty = new Property<TabStrip, Color>({ name: "hig
|
||||
|
||||
@CSSType("TabStrip")
|
||||
export class TabStrip extends View implements TabStripDefinition, AddChildFromBuilder, AddArrayFromBuilder {
|
||||
public static itemTapEvent = "itemTap";
|
||||
public items: TabStripItem[];
|
||||
public isIconSizeFixed: boolean;
|
||||
public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
|
||||
@@ -89,7 +90,7 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
|
||||
}
|
||||
[colorProperty.setNative](value: Color) {
|
||||
const parent = <TabNavigationBase>this.parent;
|
||||
|
||||
|
||||
return parent && parent.setTabBarColor(value);
|
||||
}
|
||||
|
||||
@@ -100,7 +101,7 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
|
||||
}
|
||||
[fontInternalProperty.setNative](value: any) {
|
||||
const parent = <TabNavigationBase>this.parent;
|
||||
|
||||
|
||||
return parent && parent.setTabBarFontInternal(value);
|
||||
}
|
||||
|
||||
@@ -111,7 +112,7 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
|
||||
}
|
||||
[textTransformProperty.setNative](value: any) {
|
||||
const parent = <TabNavigationBase>this.parent;
|
||||
|
||||
|
||||
return parent && parent.setTabBarTextTransform(value);
|
||||
}
|
||||
|
||||
@@ -122,11 +123,16 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
|
||||
}
|
||||
[highlightColorProperty.setNative](value: number | Color) {
|
||||
const parent = <TabNavigationBase>this.parent;
|
||||
|
||||
|
||||
return parent && parent.setTabBarHighlightColor(value);
|
||||
}
|
||||
}
|
||||
|
||||
export interface TabStrip {
|
||||
on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
|
||||
on(event: "itemTap", callback: (args: TabStripItemEventData) => void, thisArg?: any);
|
||||
}
|
||||
|
||||
export const itemsProperty = new Property<TabStrip, TabStripItem[]>({
|
||||
name: "items", valueChanged: (target, oldValue, newValue) => {
|
||||
target.onItemsChanged(oldValue, newValue);
|
||||
|
||||
@@ -5,15 +5,17 @@ import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
|
||||
import { TextTransform } from "../text-base";
|
||||
|
||||
// Requires
|
||||
import { getIconSpecSize, selectedIndexProperty, itemsProperty, tabStripProperty } from "../tab-navigation-base/tab-navigation-base";
|
||||
import { TabsBase, swipeEnabledProperty, offscreenTabLimitProperty } from "./tabs-common";
|
||||
import { Font } from "../styling/font";
|
||||
import { getTransformedText } from "../text-base";
|
||||
import { Frame } from "../frame";
|
||||
import { Color } from "../core/view";
|
||||
import { fromFileOrResource, fromFontIconCode, ImageSource } from "../../image-source";
|
||||
import { RESOURCE_PREFIX, ad, layout, isFontIconURI } from "../../utils/utils";
|
||||
import * as application from "../../application";
|
||||
import { fromFileOrResource, fromFontIconCode, ImageSource } from "../../image-source";
|
||||
import { ad, isFontIconURI, layout, RESOURCE_PREFIX } from "../../utils/utils";
|
||||
import { Color } from "../core/view";
|
||||
import { Frame } from "../frame";
|
||||
import { Font } from "../styling/font";
|
||||
import {
|
||||
getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty
|
||||
} from "../tab-navigation-base/tab-navigation-base";
|
||||
import { getTransformedText } from "../text-base";
|
||||
import { offscreenTabLimitProperty, swipeEnabledProperty, TabsBase } from "./tabs-common";
|
||||
|
||||
export * from "./tabs-common";
|
||||
|
||||
@@ -265,10 +267,12 @@ function initializeNativeClasses() {
|
||||
return false;
|
||||
}
|
||||
|
||||
const tabStripItems = owner.tabStrip && owner.tabStrip.items;
|
||||
const tabStrip = owner.tabStrip;
|
||||
const tabStripItems = tabStrip && tabStrip.items;
|
||||
|
||||
if (position >= 0 && tabStripItems[position]) {
|
||||
tabStripItems[position]._emit(TabStripItem.tapEvent);
|
||||
tabStrip.notify({ eventName: TabStrip.itemTapEvent, object: tabStrip, index: position });
|
||||
}
|
||||
|
||||
if (!owner.items[position]) {
|
||||
@@ -577,37 +581,37 @@ export class Tabs extends TabsBase {
|
||||
|
||||
private createTabItemSpec(tabStripItem: TabStripItem): org.nativescript.widgets.TabItemSpec {
|
||||
const tabItemSpec = new org.nativescript.widgets.TabItemSpec();
|
||||
|
||||
|
||||
if (tabStripItem.isLoaded) {
|
||||
const nestedLabel = tabStripItem.label;
|
||||
let title = nestedLabel.text;
|
||||
|
||||
|
||||
// TEXT-TRANSFORM
|
||||
const textTransform = nestedLabel.style.textTransform;
|
||||
if (textTransform) {
|
||||
title = getTransformedText(title, textTransform);
|
||||
}
|
||||
tabItemSpec.title = title;
|
||||
|
||||
|
||||
// BACKGROUND-COLOR
|
||||
const backgroundColor = tabStripItem.style.backgroundColor;
|
||||
if (backgroundColor) {
|
||||
tabItemSpec.backgroundColor = backgroundColor.android;
|
||||
}
|
||||
|
||||
|
||||
// COLOR
|
||||
const color = nestedLabel.style.color;
|
||||
if (color) {
|
||||
tabItemSpec.color = color.android;
|
||||
}
|
||||
|
||||
|
||||
// FONT
|
||||
const fontInternal = nestedLabel.style.fontInternal;
|
||||
if (fontInternal) {
|
||||
tabItemSpec.fontSize = fontInternal.fontSize;
|
||||
tabItemSpec.typeFace = fontInternal.getAndroidTypeface();
|
||||
}
|
||||
|
||||
|
||||
// ICON
|
||||
const iconSource = tabStripItem.image && tabStripItem.image.src;
|
||||
if (iconSource) {
|
||||
@@ -619,7 +623,7 @@ export class Tabs extends TabsBase {
|
||||
}
|
||||
} else {
|
||||
const icon = this.getIcon(tabStripItem);
|
||||
|
||||
|
||||
if (icon) {
|
||||
// TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
|
||||
// tslint:disable-next-line:deprecation
|
||||
@@ -631,13 +635,13 @@ export class Tabs extends TabsBase {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return tabItemSpec;
|
||||
}
|
||||
|
||||
|
||||
private getIcon(tabStripItem: TabStripItem): android.graphics.drawable.BitmapDrawable {
|
||||
const iconSource = tabStripItem.image && tabStripItem.image.src;
|
||||
|
||||
|
||||
let is: ImageSource;
|
||||
if (isFontIconURI(iconSource)) {
|
||||
const fontIconCode = iconSource.split("//")[1];
|
||||
@@ -648,35 +652,35 @@ export class Tabs extends TabsBase {
|
||||
} else {
|
||||
is = fromFileOrResource(iconSource);
|
||||
}
|
||||
|
||||
|
||||
let imageDrawable: android.graphics.drawable.BitmapDrawable;
|
||||
if (is && is.android) {
|
||||
let image = is.android;
|
||||
|
||||
|
||||
if (this.tabStrip && this.tabStrip.isIconSizeFixed) {
|
||||
image = this.getFixedSizeIcon(image);
|
||||
}
|
||||
|
||||
|
||||
imageDrawable = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), image);
|
||||
} else {
|
||||
// TODO
|
||||
// traceMissingIcon(iconSource);
|
||||
}
|
||||
|
||||
|
||||
return imageDrawable;
|
||||
}
|
||||
|
||||
|
||||
private getFixedSizeIcon(image: android.graphics.Bitmap): android.graphics.Bitmap {
|
||||
const inWidth = image.getWidth();
|
||||
const inHeight = image.getHeight();
|
||||
|
||||
|
||||
const iconSpecSize = getIconSpecSize({ width: inWidth, height: inHeight });
|
||||
|
||||
const widthPixels = iconSpecSize.width * layout.getDisplayDensity();
|
||||
const heightPixels = iconSpecSize.height * layout.getDisplayDensity();
|
||||
|
||||
|
||||
const scaledImage = android.graphics.Bitmap.createScaledBitmap(image, widthPixels, heightPixels, true);
|
||||
|
||||
|
||||
return scaledImage;
|
||||
}
|
||||
|
||||
@@ -772,7 +776,7 @@ export class Tabs extends TabsBase {
|
||||
}
|
||||
|
||||
public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform): void {
|
||||
const nestedLabel = tabStripItem.label;
|
||||
const nestedLabel = tabStripItem.label;
|
||||
const title = getTransformedText(nestedLabel.text, value);
|
||||
tabStripItem.nativeViewProtected.setText(title);
|
||||
}
|
||||
|
||||
@@ -1,19 +1,20 @@
|
||||
// Types
|
||||
import { TabContentItem } from "../tab-navigation-base/tab-content-item";
|
||||
import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
|
||||
import { TabStrip } from "../tab-navigation-base/tab-strip";
|
||||
import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
|
||||
import { TextTransform } from "../text-base";
|
||||
|
||||
// Requires
|
||||
import { getIconSpecSize, selectedIndexProperty, itemsProperty, tabStripProperty } from "../tab-navigation-base/tab-navigation-base";
|
||||
import { TabsBase, swipeEnabledProperty } from "./tabs-common";
|
||||
import { Font } from "../styling/font";
|
||||
import { Frame } from "../frame";
|
||||
import { ios as iosView, View } from "../core/view";
|
||||
import { Color } from "../../color";
|
||||
import { ios as iosUtils, layout, isFontIconURI } from "../../utils/utils";
|
||||
// import { device } from "../../platform";
|
||||
import { fromFileOrResource, fromFontIconCode, ImageSource } from "../../image-source";
|
||||
import { ios as iosUtils, isFontIconURI, layout } from "../../utils/utils";
|
||||
import { ios as iosView, View } from "../core/view";
|
||||
import { Frame } from "../frame";
|
||||
import { Font } from "../styling/font";
|
||||
import {
|
||||
getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty
|
||||
} from "../tab-navigation-base/tab-navigation-base";
|
||||
import { swipeEnabledProperty, TabsBase } from "./tabs-common";
|
||||
|
||||
// TODO
|
||||
// import { profile } from "../../profiling";
|
||||
@@ -44,9 +45,12 @@ class MDCTabBarDelegateImpl extends NSObject implements MDCTabBarDelegate {
|
||||
owner._canSelectItem = false;
|
||||
}
|
||||
|
||||
const tabStripItems = owner.tabStrip && owner.tabStrip.items;
|
||||
const tabStrip = owner.tabStrip;
|
||||
const tabStripItems = tabStrip && tabStrip.items;
|
||||
|
||||
if (tabStripItems && tabStripItems[selectedIndex]) {
|
||||
tabStripItems[selectedIndex]._emit(TabStripItem.tapEvent);
|
||||
tabStrip.notify({ eventName: TabStrip.itemTapEvent, object: tabStrip, index: selectedIndex });
|
||||
}
|
||||
|
||||
return shouldSelectItem;
|
||||
@@ -856,7 +860,7 @@ export class Tabs extends TabsBase {
|
||||
if (!this.tabStrip._hasImage) {
|
||||
this.tabStrip._hasImage = !!image;
|
||||
}
|
||||
|
||||
|
||||
if (!this.tabStrip._hasTitle) {
|
||||
this.tabStrip._hasTitle = !!title;
|
||||
}
|
||||
@@ -907,7 +911,7 @@ export class Tabs extends TabsBase {
|
||||
|
||||
if (is && is.ios) {
|
||||
image = is.ios;
|
||||
|
||||
|
||||
if (this.tabStrip && this.tabStrip.isIconSizeFixed) {
|
||||
image = this.getFixedSizeIcon(image);
|
||||
}
|
||||
@@ -927,7 +931,7 @@ export class Tabs extends TabsBase {
|
||||
private getFixedSizeIcon(image: UIImage): UIImage {
|
||||
const inWidth = image.size.width;
|
||||
const inHeight = image.size.height;
|
||||
|
||||
|
||||
const iconSpecSize = getIconSpecSize({ width: inWidth, height: inHeight });
|
||||
|
||||
const widthPts = iconSpecSize.width;
|
||||
|
||||
Reference in New Issue
Block a user