feat(tab-content-view): change tabContentItem to View (#7629)

This commit is contained in:
Alexander Djenkov
2019-08-15 11:08:19 +03:00
committed by Martin Yankov
parent acc3436d9f
commit 72ca461f59
16 changed files with 111 additions and 113 deletions

View File

@ -52,7 +52,7 @@ export class BottomNavigationViewModel extends Observable {
const gridlayout = new GridLayout();
label.text = "Content Item " + index;
gridlayout.addChild(label);
contentItem.view = gridlayout;
contentItem.content = gridlayout;
return contentItem;
}

View File

@ -53,7 +53,7 @@ export class TabsBindingNavigationViewModel extends Observable {
const gridlayout = new GridLayout();
label.text = "Content Item " + index;
gridlayout.addChild(label);
contentItem.view = gridlayout;
contentItem.content = gridlayout;
return contentItem;
}

View File

@ -23,7 +23,7 @@ function _createContentItems(count: number): Array<TabContentItem> {
const label = new Label();
label.text = "Tab " + i;
const tabEntry = new TabContentItem();
tabEntry.view = label;
tabEntry.content = label;
items.push(tabEntry);
}
@ -101,12 +101,12 @@ export function testBackNavigationToTabViewWithNestedFramesShouldWork() {
let items = Array<TabContentItem>();
let tabViewitem = new TabContentItem();
// tabViewitem.title = "Item1";
tabViewitem.view = _createFrameView();
tabViewitem.content = _createFrameView();
items.push(tabViewitem);
let tabViewitem2 = new TabContentItem();
// tabViewitem2.title = "Item2";
tabViewitem2.view = _createFrameView();
tabViewitem2.content = _createFrameView();
items.push(tabViewitem2);
tabView.items = items;
@ -145,7 +145,7 @@ export function testWhenNavigatingBackToANonCachedPageContainingATabViewWithALis
let items = Array<TabContentItem>();
let tabViewitem = new TabContentItem();
// tabViewitem.title = "List";
tabViewitem.view = _createListView();
tabViewitem.content = _createListView();
items.push(tabViewitem);
let label = new Label();
@ -155,7 +155,7 @@ export function testWhenNavigatingBackToANonCachedPageContainingATabViewWithALis
aboutLayout.addChild(label);
tabViewitem = new TabContentItem();
// tabViewitem.title = "About";
tabViewitem.view = aboutLayout;
tabViewitem.content = aboutLayout;
items.push(tabViewitem);
tabView.items = items;
@ -184,7 +184,7 @@ export function testWhenNavigatingBackToANonCachedPageContainingATabViewWithALis
TKUnit.waitUntilReady(() => topFrame.currentPage === rootPage);
TKUnit.assert(tabView.items[0].view instanceof ListView, "ListView should be created when navigating back to the main page.");
TKUnit.assert(tabView.items[0].content instanceof ListView, "ListView should be created when navigating back to the main page.");
}
function tabViewIsFullyLoaded(tabView: BottomNavigation): boolean {
@ -232,8 +232,8 @@ export function testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBack() {
}
tabView.items.forEach((item, i) => {
item.view.on("loaded", createLoadedFor(i));
item.view.on("unloaded", createUnloadedFor(i));
item.content.on("loaded", createLoadedFor(i));
item.content.on("unloaded", createUnloadedFor(i));
});
const tabViewPage = new Page();
@ -252,8 +252,8 @@ export function testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBack() {
TKUnit.assertEqual(topFrame.currentPage, tabViewPage);
for (let i = 0; i < itemCount; i++) {
tabView.items[i].view.off("loaded");
tabView.items[i].view.off("unloaded");
tabView.items[i].content.off("loaded");
tabView.items[i].content.off("unloaded");
}
helper.goBack();
@ -267,7 +267,7 @@ export function testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBack() {
function _clickTheFirstButtonInTheListViewNatively(tabView: BottomNavigation) {
if (tabView.android) {
const androidListView = <android.widget.ListView>tabView.items[0].view.nativeView;
const androidListView = <android.widget.ListView>tabView.items[0].content.nativeView;
// var viewPager: android.support.v4.view.ViewPager = (<any>tabView)._viewPager;
// var androidListView = <android.widget.ListView>viewPager.getChildAt(0);
var stackLayout = <org.nativescript.widgets.StackLayout>androidListView.getChildAt(0);

View File

@ -47,7 +47,7 @@ function createFrame(i: number, page: Page) {
function createTabItem(i: number, frame: Frame) {
const tabEntry = new TabContentItem();
// tabEntry.title = "Tab " + i;
tabEntry.view = frame;
tabEntry.content = frame;
tabEntry["index"] = i;
return tabEntry;

View File

@ -27,7 +27,7 @@ export class BottomNavigationTest extends UITest<BottomNavigation> {
const label = new Label();
label.text = "Tab " + i;
const tabEntry = new TabContentItem();
tabEntry.view = label;
tabEntry.content = label;
items.push(tabEntry);
}
@ -208,7 +208,7 @@ export class BottomNavigationTest extends UITest<BottomNavigation> {
TKUnit.assertThrows(() => {
let item = new TabContentItem();
// item.title = "Tab 0";
item.view = undefined;
item.content = undefined;
tabView.items = [item];
}, "Binding TabNavigation to a TabItem with undefined view should throw.");
@ -221,7 +221,7 @@ export class BottomNavigationTest extends UITest<BottomNavigation> {
TKUnit.assertThrows(() => {
let item = new TabContentItem();
// item.title = "Tab 0";
item.view = null;
item.content = null;
tabView.items = [item];
}, "Binding TabNavigation to a TabItem with null view should throw.");

View File

@ -23,7 +23,7 @@ function _createContentItems(count: number): Array<TabContentItem> {
const label = new Label();
label.text = "Tab " + i;
const tabEntry = new TabContentItem();
tabEntry.view = label;
tabEntry.content = label;
items.push(tabEntry);
}
@ -101,12 +101,12 @@ export function testBackNavigationToTabViewWithNestedFramesShouldWork() {
let items = Array<TabContentItem>();
let tabViewitem = new TabContentItem();
// tabViewitem.title = "Item1";
tabViewitem.view = _createFrameView();
tabViewitem.content = _createFrameView();
items.push(tabViewitem);
let tabViewitem2 = new TabContentItem();
// tabViewitem2.title = "Item2";
tabViewitem2.view = _createFrameView();
tabViewitem2.content = _createFrameView();
items.push(tabViewitem2);
tabView.items = items;
@ -145,7 +145,7 @@ export function testWhenNavigatingBackToANonCachedPageContainingATabViewWithALis
let items = Array<TabContentItem>();
let tabViewitem = new TabContentItem();
// tabViewitem.title = "List";
tabViewitem.view = _createListView();
tabViewitem.content = _createListView();
items.push(tabViewitem);
let label = new Label();
@ -155,7 +155,7 @@ export function testWhenNavigatingBackToANonCachedPageContainingATabViewWithALis
aboutLayout.addChild(label);
tabViewitem = new TabContentItem();
// tabViewitem.title = "About";
tabViewitem.view = aboutLayout;
tabViewitem.content = aboutLayout;
items.push(tabViewitem);
tabView.items = items;
@ -184,7 +184,7 @@ export function testWhenNavigatingBackToANonCachedPageContainingATabViewWithALis
TKUnit.waitUntilReady(() => topFrame.currentPage === rootPage);
TKUnit.assert(tabView.items[0].view instanceof ListView, "ListView should be created when navigating back to the main page.");
TKUnit.assert(tabView.items[0].content instanceof ListView, "ListView should be created when navigating back to the main page.");
}
function tabViewIsFullyLoaded(tabView: Tabs): boolean {
@ -232,8 +232,8 @@ export function testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBack() {
}
tabView.items.forEach((item, i) => {
item.view.on("loaded", createLoadedFor(i));
item.view.on("unloaded", createUnloadedFor(i));
item.content.on("loaded", createLoadedFor(i));
item.content.on("unloaded", createUnloadedFor(i));
});
const tabViewPage = new Page();
@ -252,8 +252,8 @@ export function testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBack() {
TKUnit.assertEqual(topFrame.currentPage, tabViewPage);
for (let i = 0; i < itemCount; i++) {
tabView.items[i].view.off("loaded");
tabView.items[i].view.off("unloaded");
tabView.items[i].content.off("loaded");
tabView.items[i].content.off("unloaded");
}
helper.goBack();
@ -267,7 +267,7 @@ export function testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBack() {
function _clickTheFirstButtonInTheListViewNatively(tabView: Tabs) {
if (tabView.android) {
const androidListView = <android.widget.ListView>tabView.items[0].view.nativeView;
const androidListView = <android.widget.ListView>tabView.items[0].content.nativeView;
// var viewPager: android.support.v4.view.ViewPager = (<any>tabView)._viewPager;
// var androidListView = <android.widget.ListView>viewPager.getChildAt(0);
var stackLayout = <org.nativescript.widgets.StackLayout>androidListView.getChildAt(0);

View File

@ -35,7 +35,7 @@ function createFrame(i: number, page: Page) {
function createTabItem(i: number, frame: Frame) {
const tabEntry = new TabContentItem();
// tabEntry.title = "Tab " + i;
tabEntry.view = frame;
tabEntry.content = frame;
tabEntry["index"] = i;
return tabEntry;

View File

@ -27,7 +27,7 @@ export class TabsTest extends UITest<Tabs> {
const label = new Label();
label.text = "Tab " + i;
const tabEntry = new TabContentItem();
tabEntry.view = label;
tabEntry.content = label;
items.push(tabEntry);
}
@ -210,7 +210,7 @@ export class TabsTest extends UITest<Tabs> {
TKUnit.assertThrows(() => {
let item = new TabContentItem();
// item.title = "Tab 0";
item.view = undefined;
item.content = undefined;
tabView.items = [item];
}, "Binding TabNavigation to a TabItem with undefined view should throw.");
@ -223,7 +223,7 @@ export class TabsTest extends UITest<Tabs> {
TKUnit.assertThrows(() => {
let item = new TabContentItem();
// item.title = "Tab 0";
item.view = null;
item.content = null;
tabView.items = [item];
}, "Binding TabNavigation to a TabItem with null view should throw.");

View File

@ -85,7 +85,7 @@ function initializeNativeClasses() {
public onCreateView(inflater: android.view.LayoutInflater, container: android.view.ViewGroup, savedInstanceState: android.os.Bundle): android.view.View {
const tabItem = this.tab.items[this.index];
return tabItem.view.nativeViewProtected;
return tabItem.nativeViewProtected;
}
}
@ -211,11 +211,10 @@ function createTabItemSpec(tabStripItem: TabStripItem): org.nativescript.widgets
return tabItemSpec;
}
function setElevation(grid: org.nativescript.widgets.GridLayout, bottomNavigationBar: org.nativescript.widgets.BottomNavigationBar) {
function setElevation(bottomNavigationBar: org.nativescript.widgets.BottomNavigationBar) {
const compat = <any>androidx.core.view.ViewCompat;
if (compat.setElevation) {
const val = DEFAULT_ELEVATION * layout.getDisplayDensity();
compat.setElevation(grid, val);
compat.setElevation(bottomNavigationBar, val);
}
}
@ -288,7 +287,7 @@ export class BottomNavigation extends TabNavigationBase {
nativeView.addView(bottomNavigationBar);
(<any>nativeView).bottomNavigationBar = bottomNavigationBar;
setElevation(nativeView, bottomNavigationBar);
setElevation(bottomNavigationBar);
const primaryColor = ad.resources.getPaletteColor(PRIMARY_COLOR, context);
if (primaryColor) {
@ -341,12 +340,12 @@ export class BottomNavigation extends TabNavigationBase {
toUnload.forEach(index => {
const item = items[index];
if (items[index]) {
item.unloadView(item.view);
item.unloadView(item.content);
}
});
const newItem = items[newIndex];
const selectedView = newItem && newItem.view;
const selectedView = newItem && newItem.content;
if (selectedView instanceof Frame) {
selectedView._pushInFrameStackRecursive();
}
@ -354,7 +353,7 @@ export class BottomNavigation extends TabNavigationBase {
toLoad.forEach(index => {
const item = items[index];
if (this.isLoaded && items[index]) {
item.loadView(item.view);
item.loadView(item.content);
}
});
}

View File

@ -260,7 +260,7 @@ export class BottomNavigation extends TabNavigationBase {
super.onLoaded();
const selectedIndex = this.selectedIndex;
const selectedView = this.items && this.items[selectedIndex] && this.items[selectedIndex].view;
const selectedView = this.items && this.items[selectedIndex] && this.items[selectedIndex].content;
if (selectedView instanceof Frame) {
selectedView._pushInFrameStackRecursive();
}
@ -295,18 +295,18 @@ export class BottomNavigation extends TabNavigationBase {
const oldItem = items[oldIndex];
if (oldItem) {
oldItem.canBeLoaded = false;
oldItem.unloadView(oldItem.view);
oldItem.unloadView(oldItem.content);
}
const newItem = items[newIndex];
if (newItem && this.isLoaded) {
const selectedView = items[newIndex].view;
const selectedView = items[newIndex].content;
if (selectedView instanceof Frame) {
selectedView._pushInFrameStackRecursive();
}
newItem.canBeLoaded = true;
newItem.loadView(newItem.view);
newItem.loadView(newItem.content);
}
super.onSelectedIndexChanged(oldIndex, newIndex);
@ -463,7 +463,7 @@ export class BottomNavigation extends TabNavigationBase {
}
private getViewController(item: TabContentItem): UIViewController {
let newController: UIViewController = item.view ? item.view.viewController : null;
let newController: UIViewController = item.content ? item.content.viewController : null;
if (newController) {
(<any>item).setViewController(newController, newController.view);
@ -471,17 +471,17 @@ export class BottomNavigation extends TabNavigationBase {
return newController;
}
if (item.view.ios instanceof UIViewController) {
newController = item.view.ios;
if (item.content.ios instanceof UIViewController) {
newController = item.content.ios;
(<any>item).setViewController(newController, newController.view);
} else if (item.view.ios && item.view.ios.controller instanceof UIViewController) {
newController = item.view.ios.controller;
} else if (item.content.ios && item.content.ios.controller instanceof UIViewController) {
newController = item.content.ios.controller;
(<any>item).setViewController(newController, newController.view);
} else {
newController = iosView.UILayoutViewController.initWithOwner(new WeakRef(item.view)) as UIViewController;
newController.view.addSubview(item.view.nativeViewProtected);
item.view.viewController = newController;
(<any>item).setViewController(newController, item.view.nativeViewProtected);
newController = iosView.UILayoutViewController.initWithOwner(new WeakRef(item.content)) as UIViewController;
newController.view.addSubview(item.content.nativeViewProtected);
item.content.viewController = newController;
(<any>item).setViewController(newController, item.content.nativeViewProtected);
}
return newController;

View File

@ -5,38 +5,15 @@ import { TabNavigationBase } from "../tab-navigation-base";
// Requires
import { View, ViewBase, CSSType } from "../../core/view";
import { ContentView } from "../../content-view";
export const traceCategory = "TabView";
@CSSType("TabContentItem")
export abstract class TabContentItemBase extends ViewBase implements TabContentItemDefinition, AddChildFromBuilder {
private _view: View;
export abstract class TabContentItemBase extends ContentView implements TabContentItemDefinition, AddChildFromBuilder {
public _addChildFromBuilder(name: string, value: any): void {
if (value instanceof View) {
this.view = value;
}
}
// TODO: Should we rename this to content? Or even better - inherit ContentView???
get view(): View {
return this._view;
}
set view(value: View) {
if (this._view !== value) {
if (this._view) {
throw new Error("Changing the view of an already loaded TabContentItem is not currently supported.");
}
this._view = value;
this._addView(value);
}
}
public eachChild(callback: (child: ViewBase) => boolean) {
const view = this._view;
if (view) {
callback(view);
public eachChild(callback: (child: View) => boolean) {
if (this.content) {
callback(this.content);
}
}

View File

@ -1,15 +1,16 @@
// Types
import { TabContentItem as TabContentItemDefinition } from ".";
import { TabNavigationBase } from "../tab-navigation-base";
import { GridLayout } from "../../layouts/grid-layout";
// Requires
import { TabContentItemBase, traceCategory } from "./tab-content-item-common";
import { traceEnabled, traceWrite, traceMessageType } from "../../core/view";
import { View, traceWrite, traceMessageType } from "../../core/view";
export * from "./tab-content-item-common";
export class TabContentItem extends TabContentItemBase {
public nativeViewProtected: android.widget.TextView;
public nativeViewProtected: org.nativescript.widgets.GridLayout;
public tabItemSpec: org.nativescript.widgets.TabItemSpec;
public index: number;
@ -17,6 +18,27 @@ export class TabContentItem extends TabContentItemBase {
return true;
}
public createNativeView() {
const layout = new org.nativescript.widgets.GridLayout(this._context);
layout.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.star));
return layout;
}
public initNativeView(): void {
super.initNativeView();
this.nativeViewProtected.setBackgroundColor(-1); // White color.
}
public _addViewToNativeVisualTree(child: View, atIndex?: number): boolean {
// Set the row property for the child
if (this.nativeViewProtected && child.nativeViewProtected) {
GridLayout.setRow(child, 0);
}
return super._addViewToNativeVisualTree(child, atIndex);
}
public disposeNativeView(): void {
super.disposeNativeView();
(<TabContentItemDefinition>this).canBeLoaded = false;

View File

@ -4,16 +4,12 @@
*/ /** */
import { View, ViewBase } from "../../core/view";
import { ContentView } from "../../content-view";
/**
* Represents a tab navigation content entry.
*/
export class TabContentItem extends ViewBase {
/**
* Gets or sets the view of the TabViewItem.
*/
public view: View;
export class TabContentItem extends ContentView {
/**
* @private
*/

View File

@ -45,7 +45,7 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
get _selectedView(): View {
let selectedIndex = this.selectedIndex;
return selectedIndex > -1 ? this.items[selectedIndex].view : null;
return selectedIndex > -1 ? this.items[selectedIndex].content : null;
}
get _childrenCount(): number {
@ -72,7 +72,7 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
const items = this.items;
if (items) {
items.forEach((item, i) => {
callback(item.view);
callback(item.content);
});
}
}
@ -84,8 +84,8 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
if (newItems) {
newItems.forEach(item => {
if (!item.view) {
throw new Error(`TabContentItem must have a view.`);
if (!item.content) {
throw new Error(`TabContentItem must have a content (view).`);
}
this._addView(item);

View File

@ -82,7 +82,7 @@ function initializeNativeClasses() {
public onCreateView(inflater: android.view.LayoutInflater, container: android.view.ViewGroup, savedInstanceState: android.os.Bundle): android.view.View {
const tabItem = this.tab.items[this.index];
return tabItem.view.nativeViewProtected;
return tabItem.nativeViewProtected;
}
}
@ -337,11 +337,15 @@ function getDefaultAccentColor(context: android.content.Context): number {
return defaultAccentColor;
}
function setElevation(grid: org.nativescript.widgets.GridLayout, tabsBar: org.nativescript.widgets.TabsBar) {
function setElevation(grid: org.nativescript.widgets.GridLayout, tabsBar: org.nativescript.widgets.TabsBar, tabsPosition: string) {
const compat = <any>androidx.core.view.ViewCompat;
if (compat.setElevation) {
const val = DEFAULT_ELEVATION * layout.getDisplayDensity();
if (tabsPosition === "top") {
compat.setElevation(grid, val);
}
compat.setElevation(tabsBar, val);
}
}
@ -422,7 +426,7 @@ export class Tabs extends TabsBase {
nativeView.addView(tabsBar);
(<any>nativeView).tabsBar = tabsBar;
setElevation(nativeView, tabsBar);
setElevation(nativeView, tabsBar, this.tabsPosition);
if (accentColor) {
tabsBar.setSelectedIndicatorColors([accentColor]);
@ -471,12 +475,12 @@ export class Tabs extends TabsBase {
toUnload.forEach(index => {
const item = items[index];
if (items[index]) {
item.unloadView(item.view);
item.unloadView(item.content);
}
});
const newItem = items[newIndex];
const selectedView = newItem && newItem.view;
const selectedView = newItem && newItem.content;
if (selectedView instanceof Frame) {
(<Frame>selectedView)._pushInFrameStackRecursive();
}
@ -484,7 +488,7 @@ export class Tabs extends TabsBase {
toLoad.forEach(index => {
const item = items[index];
if (this.isLoaded && items[index]) {
item.loadView(item.view);
item.loadView(item.content);
}
});
}

View File

@ -520,7 +520,7 @@ export class Tabs extends TabsBase {
super.onLoaded();
const selectedIndex = this.selectedIndex;
const selectedView = this.items && this.items[selectedIndex] && this.items[selectedIndex].view;
const selectedView = this.items && this.items[selectedIndex] && this.items[selectedIndex].content;
if (selectedView instanceof Frame) {
(<Frame>selectedView)._pushInFrameStackRecursive();
}
@ -599,12 +599,12 @@ export class Tabs extends TabsBase {
toUnload.forEach(index => {
const item = items[index];
if (items[index]) {
item.unloadView(item.view);
item.unloadView(item.content);
}
});
const newItem = items[newIndex];
const selectedView = newItem && newItem.view;
const selectedView = newItem && newItem.content;
if (selectedView instanceof Frame) {
selectedView._pushInFrameStackRecursive();
}
@ -612,7 +612,7 @@ export class Tabs extends TabsBase {
toLoad.forEach(index => {
const item = items[index];
if (this.isLoaded && items[index]) {
item.loadView(item.view);
item.loadView(item.content);
}
});
}
@ -687,7 +687,7 @@ export class Tabs extends TabsBase {
// }
public getViewController(item: TabContentItem): UIViewController {
let newController: UIViewController = item.view ? item.view.viewController : null;
let newController: UIViewController = item.content ? item.content.viewController : null;
if (newController) {
(<any>item).setViewController(newController, newController.view);
@ -695,17 +695,17 @@ export class Tabs extends TabsBase {
return newController;
}
if (item.view.ios instanceof UIViewController) {
newController = item.view.ios;
if (item.content.ios instanceof UIViewController) {
newController = item.content.ios;
(<any>item).setViewController(newController, newController.view);
} else if (item.view.ios && item.view.ios.controller instanceof UIViewController) {
newController = item.view.ios.controller;
} else if (item.content.ios && item.content.ios.controller instanceof UIViewController) {
newController = item.content.ios.controller;
(<any>item).setViewController(newController, newController.view);
} else {
newController = iosView.UILayoutViewController.initWithOwner(new WeakRef(item.view)) as UIViewController;
newController.view.addSubview(item.view.nativeViewProtected);
item.view.viewController = newController;
(<any>item).setViewController(newController, item.view.nativeViewProtected);
newController = iosView.UILayoutViewController.initWithOwner(new WeakRef(item.content)) as UIViewController;
newController.view.addSubview(item.content.nativeViewProtected);
item.content.viewController = newController;
(<any>item).setViewController(newController, item.content.nativeViewProtected);
}
return newController;