From eb1ed3e4eccdfffe53d8320243b325f48541a788 Mon Sep 17 00:00:00 2001 From: Vasil Chimev Date: Wed, 10 Jul 2019 17:37:45 +0300 Subject: [PATCH] refactor(bottom-navigation): strip item creation (#7477) * feat(ios-tabs): tab bar item appearance Implements https://github.com/NativeScript/NativeScript/issues/7436 and https://github.com/NativeScript/nativescript-angular/issues/1884. * refactor(ios-tabs): move _hasImage and _hasTitle properties * feat(ios-bottom-navigation): create tab bar from image nad label Implements https://github.com/NativeScript/nativescript-angular/issues/1893 for iOS. * feat(android-bottom-navigation): create tab item spec from image and label Implements https://github.com/NativeScript/nativescript-angular/issues/1893 for Android. * chore: remove console.logs --- .../bottom-navigation.android.ts | 31 ++++++++++--------- .../bottom-navigation.ios.ts | 26 ++++++++++------ tns-core-modules/ui/tabs/tabs.ios.ts | 5 --- 3 files changed, 34 insertions(+), 28 deletions(-) diff --git a/tns-core-modules/ui/bottom-navigation/bottom-navigation.android.ts b/tns-core-modules/ui/bottom-navigation/bottom-navigation.android.ts index 07c6308b5..484c3ee44 100644 --- a/tns-core-modules/ui/bottom-navigation/bottom-navigation.android.ts +++ b/tns-core-modules/ui/bottom-navigation/bottom-navigation.android.ts @@ -12,6 +12,8 @@ import { CSSType, Color } from "../core/view"; import { Frame, View } from "../frame"; import { RESOURCE_PREFIX, ad, layout } from "../../utils/utils"; import { fromFileOrResource } from "../../image-source"; +import * as application from "../../application"; + // TODO: Impl trace // import { isEnabled as traceEnabled, write as traceWrite } from "../../../trace"; @@ -159,34 +161,35 @@ function initializeNativeClasses() { } function createTabItemSpec(tabStripItem: TabStripItem): org.nativescript.widgets.TabItemSpec { - const result = new org.nativescript.widgets.TabItemSpec(); - result.title = tabStripItem.title; + let iconSource; + const tabItemSpec = new org.nativescript.widgets.TabItemSpec(); - if (tabStripItem.backgroundColor instanceof Color) { - result.backgroundColor = tabStripItem.backgroundColor.android; - } + // Image and Label children of TabStripItem + // take priority over its `iconSource` and `title` properties + iconSource = tabStripItem.image ? tabStripItem.image.src : tabStripItem.iconSource; + tabItemSpec.title = tabStripItem.label ? tabStripItem.label.text : tabStripItem.title; - if (tabStripItem.iconSource) { - if (tabStripItem.iconSource.indexOf(RESOURCE_PREFIX) === 0) { - result.iconId = ad.resources.getDrawableId(tabStripItem.iconSource.substr(RESOURCE_PREFIX.length)); - if (result.iconId === 0) { + if (iconSource) { + if (iconSource.indexOf(RESOURCE_PREFIX) === 0) { + tabItemSpec.iconId = ad.resources.getDrawableId(iconSource.substr(RESOURCE_PREFIX.length)); + if (tabItemSpec.iconId === 0) { // TODO: - // traceMissingIcon(tabStripItem.iconSource); + // traceMissingIcon(iconSource); } } else { const is = fromFileOrResource(tabStripItem.iconSource); if (is) { // TODO: Make this native call that accepts string so that we don't load Bitmap in JS. // tslint:disable-next-line:deprecation - result.iconDrawable = new android.graphics.drawable.BitmapDrawable(is.android); + tabItemSpec.iconDrawable = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), is.android); } else { // TODO: - // traceMissingIcon(tabStripItem.iconSource); + // traceMissingIcon(iconSource); } } } - return result; + return tabItemSpec; } function setElevation(grid: org.nativescript.widgets.GridLayout, bottomNavigationBar: org.nativescript.widgets.BottomNavigationBar) { @@ -471,7 +474,7 @@ export class BottomNavigation extends TabNavigationBase { } this._currentFragment = fragment; - + const tabItems = this.items; const tabItem = tabItems ? tabItems[position] : null; if (tabItem) { diff --git a/tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts b/tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts index 16a54aad8..75691d633 100644 --- a/tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts +++ b/tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts @@ -1,4 +1,4 @@ -// Types +// Types import { TabContentItem } from "../tab-navigation-base/tab-content-item"; import { TabStripItem } from "../tab-navigation-base/tab-strip-item"; import { TextTransform } from "../text-base"; @@ -500,15 +500,9 @@ export class BottomNavigation extends TabNavigationBase { items.forEach((item, i) => { const controller = this.getViewController(item); - let icon = null; - let title = ""; - if (this.tabStrip && this.tabStrip.items && this.tabStrip.items[i]) { const tabStripItem = this.tabStrip.items[i]; - icon = this._getIcon(tabStripItem.iconSource); - title = tabStripItem.title; - - const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag((title || ""), icon, i); + const tabBarItem = this.createTabBarItem(tabStripItem, i); updateTitleAndIconPositions(tabStripItem, tabBarItem, controller); applyStatesToItem(tabBarItem, states); @@ -528,6 +522,20 @@ export class BottomNavigation extends TabNavigationBase { this._ios.moreNavigationController.delegate = this._moreNavigationControllerDelegate; } + private createTabBarItem(item: TabStripItem, index: number): UITabBarItem { + let image: UIImage; + let title: string; + + // Image and Label children of TabStripItem + // take priority over its `iconSource` and `title` properties + image = item.image ? this._getIcon(item.image.src) : this._getIcon(item.iconSource); + title = item.label ? item.label.text : item.title; + + const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(title, image, index); + + return tabBarItem; + } + private _getIconRenderingMode(): UIImageRenderingMode { return UIImageRenderingMode.AlwaysOriginal; } @@ -632,4 +640,4 @@ function applyStatesToItem(item: UITabBarItem, states: TabStates) { item.setTitleTextAttributesForState(states.normalState, UIControlState.Normal); item.setTitleTextAttributesForState(states.selectedState, UIControlState.Selected); -} \ No newline at end of file +} diff --git a/tns-core-modules/ui/tabs/tabs.ios.ts b/tns-core-modules/ui/tabs/tabs.ios.ts index c96249f6e..aa77c2a14 100644 --- a/tns-core-modules/ui/tabs/tabs.ios.ts +++ b/tns-core-modules/ui/tabs/tabs.ios.ts @@ -345,8 +345,6 @@ class UIPageViewControllerDelegateImpl extends NSObject implements UIPageViewCon // } else { // owner.selectedIndex++; // } - console.log("test"); - // } public pageViewControllerDidFinishAnimatingPreviousViewControllersTransitionCompleted(pageViewController: UIPageViewController, didFinishAnimating: boolean, previousViewControllers: NSArray, transitionCompleted: boolean): void { @@ -364,9 +362,6 @@ class UIPageViewControllerDelegateImpl extends NSObject implements UIPageViewCon owner.selectedIndex = nextViewControllerIndex; owner._canSelectItem = true; } - - console.log("test"); - // } }