tab-view done

tns-core-modules/ui/tab-view/tab-view-common.ts

@@ -73,25 +73,7 @@ export class TabViewBase extends View implements TabViewDefinition, AddArrayFrom
         }
     }
 
-    public _updateSelectedIndexOnItemsPropertyChanged(newItems) {
-        if (trace.enabled) {
-            trace.write("TabView._updateSelectedIndexOnItemsPropertyChanged(" + newItems + ");", traceCategory);
-        }
-        let newItemsCount = 0;
-        if (newItems) {
-            newItemsCount = newItems.length;
-        }
-
-        if (newItemsCount === 0) {
-            this.selectedIndex = undefined;
-        }
-        else if (this.selectedIndex < 0 || this.selectedIndex >= newItemsCount) {
-            this.selectedIndex = 0;
-        }
-    }
-
     public _removeTabs(oldItems: Array<TabViewItemDefinition>) {
-
         for (let i = 0, length = oldItems.length; i < length; i++) {
             let oldItem = oldItems[i];
 
@@ -123,14 +105,8 @@ export class TabViewBase extends View implements TabViewDefinition, AddArrayFrom
     }
 
     get _selectedView(): View {
-        let items = this.items;
         let selectedIndex = this.selectedIndex;
-
+        return selectedIndex > -1 ? this.items[selectedIndex].view : null;
-        if (!items || items.length === 0 || selectedIndex < (items.length - 1)) {
-            return undefined;
-        }
-
-        return items[selectedIndex].view;
     }
 
     get _childrenCount(): number {
@@ -168,15 +144,6 @@ export class TabViewBase extends View implements TabViewDefinition, AddArrayFrom
         }
     }
 
-    public _getAndroidTabView(): org.nativescript.widgets.TabLayout {
-        // Android specific
-        return undefined;
-    }
-
-    public _updateIOSTabBarColorsAndFonts(): void {
-        // iOS sepcific
-    }
-
     public onItemsPropertyChanged(oldValue: TabViewItemDefinition[], newValue: TabViewItemDefinition[]) {
         this.previousItems = oldValue;
     }

tns-core-modules/ui/tab-view/tab-view.android.ts

@@ -284,13 +284,12 @@ export class TabView extends TabViewBase {
         result.title = item.title;
 
         if (item.iconSource) {
-
             if (item.iconSource.indexOf(RESOURCE_PREFIX) === 0) {
                 result.iconId = ad.resources.getDrawableId(item.iconSource.substr(RESOURCE_PREFIX.length));
-            }
+            } else {
-            else {
                 let is = fromFileOrResource(item.iconSource);
                 if (is) {
+                    // TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
                     result.iconDrawable = new android.graphics.drawable.BitmapDrawable(is.android);
                 }
             }

tns-core-modules/ui/tab-view/tab-view.d.ts

@@ -134,11 +134,6 @@ declare module "ui/tab-view" {
          * Raised when the selected index changes.
          */
         on(event: "selectedIndexChanged", callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any);
-
-        //@private
-        _getAndroidTabView(): any /* org.nativescript.widgets.TabLayout */;
-        _updateIOSTabBarColorsAndFonts(): void;
-        //@endprivate
     }
 
         export const itemsProperty: Property<TabView, TabViewItem[]>;

tns-core-modules/ui/tab-view/tab-view.ios.ts

@@ -125,12 +125,13 @@ export class TabViewItem extends TabViewItemBase {
     public _update() {
         if (this._parent && this._controller) {
             const icon = this._parent._getIcon(this.iconSource);
-	    //TODO: Implement initWithSystemItem to support standard system icons
+            const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag((this.title), icon, this._parent.items.indexOf(this));
-            const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag((this.title || ""), icon, this._parent.items.indexOf(this));
             if (!icon) {
                 updateItemTitlePosition(tabBarItem);
             }
 
+            // TODO: Repeating code. Make TabViewItemBase - ViewBase and move the colorProperty on tabViewItem.
+            // Delete the repeating code.
             const states = getTitleAttributesForStates(this._parent);
             tabBarItem.setTitleTextAttributesForState(states.normalState, UIControlState.Normal);
             tabBarItem.setTitleTextAttributesForState(states.selectedState, UIControlState.Selected);
@@ -139,20 +140,6 @@ export class TabViewItem extends TabViewItemBase {
     }
 }
 
-function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    const tabView = <TabView>data.object;
-    tabView._updateIOSTabBarColorsAndFonts();
-}
-(<proxy.PropertyMetadata>common.TabView.selectedColorProperty.metadata).onSetNativeValue = selectedColorPropertyChanged;
-
-function tabsBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    const tabView = <TabView>data.object;
-    if (data.newValue instanceof color.Color) {
-        tabView.ios.tabBar.barTintColor = data.newValue.ios;
-    }
-}
-(<proxy.PropertyMetadata>common.TabView.tabsBackgroundColorProperty.metadata).onSetNativeValue = tabsBackgroundColorPropertyChanged;
-
 export class TabView extends TabViewBase {
     public _ios: UITabBarControllerImpl;
     private _delegate: UITabBarControllerDelegateImpl;
@@ -348,26 +335,6 @@ export class TabView extends TabViewBase {
         return image;
     }
 
-    public _onSelectedIndexPropertyChangedSetNativeValue(data: dependencyObservable.PropertyChangeData) {
-        super._onSelectedIndexPropertyChangedSetNativeValue(data);
-
-        var newIndex = data.newValue;
-        if (traceEnabled) {
-            traceWrite("TabView._onSelectedIndexPropertyChangedSetNativeValue(" + newIndex + ")", traceCategories.Debug);
-        }
-        if (types.isNullOrUndefined(newIndex)) {
-            return;
-        }
-
-        this._ios.selectedIndex = data.newValue;
-
-        // We will need to measure and arrange what became this._selectedView
-        this.requestLayout();
-
-        var args = { eventName: TabView.selectedIndexChangedEvent, object: this, oldIndex: data.oldValue, newIndex: data.newValue };
-        this.notify(args);
-    }
-
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
         const nativeView = this._nativeView;
         if (nativeView) {
@@ -421,58 +388,92 @@ export class TabView extends TabViewBase {
             (heightMode === layout.UNSPECIFIED) ? Number.POSITIVE_INFINITY : height));
     }
 
-    public _updateIOSTabBarColorsAndFonts(): void {
+    private _updateIOSTabBarColorsAndFonts(): void {
-        if (!this.items) {
+        const tabBar = this._ios.tabBar;
-            return;
-        }
-
-        const tabBar = this.ios.tabBar;
 
         tabBar.tintColor = this.selectedColor ? this.selectedColor.ios : null;
         const states = getTitleAttributesForStates(this);
 
-        for (let i = 0; i < tabBar.items.count; i++) {
+        for (let i = 0, count = tabBar.items.count; i < count; i++) {
-            const item = <UITabBarItem>tabBar.items[i];
+            const item = tabBar.items[i];
             item.setTitleTextAttributesForState(states.normalState, UIControlState.Normal);
             item.setTitleTextAttributesForState(states.selectedState, UIControlState.Selected);
         }
     }
 
-    public _updateIOSTabBarTextTransform(newValue: string): void {
+    private _onItemsPropertyChangedSetNativeValue() {
-        if (!this.items) {
+        let oldValue = <TabViewItem[]>this.previousItems;
-            return;
+        if (oldValue) {
+            this._removeTabs(oldValue);
         }
 
-        var tabBar = this.ios.tabBar;
+        let newValue = <TabViewItem[]>this.items;
-        for (let i = 0; i < tabBar.items.count; i++) {
+        if (newValue) {
-            let item = <UITabBarItem>tabBar.items[i];
+            this._addTabs(newValue);
-            if (types.isNullOrUndefined(newValue)){
-                // Reset to original
-                item.title = this.items[i].title;
-            }
-            else {
-                item.title = utils.ios.getTransformedText({text: this.items[i].title}, this.items[i].title, newValue);
-            }
         }
     }
+
+    get [selectedIndexProperty.native](): number {
+        return -1;
+    }
+    set [selectedIndexProperty.native](value: number) {
+        if (traceEnabled) {
+            traceWrite("TabView._onSelectedIndexPropertyChangedSetNativeValue(" + value + ")", traceCategories.Debug);
+        }
+
+        if (value > -1) {
+            this._ios.selectedIndex = value;
+        }
+
+        // We will need to measure and arrange what became this._selectedView
+        this.requestLayout();
+    }
+
+    get [itemsProperty.native](): TabViewItemBase[] {
+        return null;
+    }
+    set [itemsProperty.native](value: TabViewItemBase[]) {
+        this._onItemsPropertyChangedSetNativeValue();
+    }
+
+    get [colorProperty.native](): UIColor {
+        return null;
+    }
+    set [colorProperty.native](value: UIColor) {
+        this._updateIOSTabBarColorsAndFonts();
+    }
+
+    get [tabsBackgroundColorProperty.native](): UIColor {
+        return this._ios.tabBar.barTintColor;
+    }
+    set [tabsBackgroundColorProperty.native](value: UIColor | Color) {
+        this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
+    }
+
+    get [fontInternalProperty.native](): Font {
+        return null;
+    }
+    set [fontInternalProperty.native](value: Font) {
+        this._updateIOSTabBarColorsAndFonts();
+    }
 }
 
 function getTitleAttributesForStates(tabView: TabView): { normalState: any, selectedState: any } {
     const normalState = {};
-    if (tabView.tabTextColor instanceof Color) {
+    if (tabView.color instanceof Color) {
-        normalState[UITextAttributeTextColor] = tabView.tabTextColor.ios;
+        normalState[UITextAttributeTextColor] = tabView.color.ios;
     }
 
     const selectedState = {};
-    if (tabView.selectedTabTextColor instanceof Color) {
+    if (tabView.selectedColor instanceof Color) {
-        selectedState[UITextAttributeTextColor] = tabView.selectedTabTextColor.ios;
+        selectedState[UITextAttributeTextColor] = tabView.selectedColor.ios;
     }
     else {
         selectedState[UITextAttributeTextColor] = tabView.ios.tabBar.tintColor;
     }
 
     const defaultFont = UIFont.systemFontOfSize(10);
-    const font = (<any>tabView.style)._fontInternal.getUIFont(defaultFont);
+    const font = tabView.style.fontInternal.getUIFont(defaultFont);
     normalState[NSFontAttributeName] = font;
     selectedState[NSFontAttributeName] = font;
 
@@ -481,118 +482,3 @@ function getTitleAttributesForStates(tabView: TabView): { normalState: any, sele
         selectedState: selectedState
     };
 }
-
-export class TabViewStyler implements style.Styler {
-    // font
-    private static setFontInternalProperty(v: view.View, newValue: any, nativeValue?: any) {
-        var tab = <definition.TabView>v;
-        tab._updateIOSTabBarColorsAndFonts();
-    }
-
-    private static resetFontInternalProperty(v: view.View, nativeValue: any) {
-        var tab = <definition.TabView>v;
-        tab._updateIOSTabBarColorsAndFonts();
-    }
-
-    private static getNativeFontValue(v: view.View) {
-        var tab = <definition.TabView>v;
-
-        let currentFont;
-
-        if (tab.ios && tab.ios.items && tab.ios.items.length > 0) {
-            let currentAttrs = tab.ios.items[0].titleTextAttributesForState(UIControlState.Normal);
-            if (currentAttrs) {
-                currentFont = currentAttrs.objectForKey(NSFontAttributeName);
-            }
-        }
-
-        if (!currentFont) {
-            currentFont = UIFont.systemFontOfSize(getter(UIFont, UIFont.labelFontSize));
-        }
-
-        return currentFont;
-    }
-
-    // tab-text-color
-    private static setTabTextColorProperty(v: view.View, newValue: any) {
-        var tabView = <definition.TabView>v;
-        tabView._updateIOSTabBarColorsAndFonts();
-    }
-
-    private static resetTabTextColorProperty(v: view.View, nativeValue: any) {
-        var tabView = <definition.TabView>v;
-        tabView._updateIOSTabBarColorsAndFonts();
-    }
-
-    // tab-background-color
-    private static setTabBackgroundColorProperty(v: view.View, newValue: any) {
-        let tabView = <TabView>v;
-        tabView.ios.tabBar.barTintColor = newValue;
-    }
-
-    private static resetTabBackgroundColorProperty(v: view.View, nativeValue: any) {
-        let tabView = <TabView>v;
-        tabView.ios.tabBar.barTintColor = nativeValue;
-    }
-
-    private static getTabBackgroundColorProperty(v: view.View): any {
-        let tabView = <TabView>v;
-        return tabView.ios.tabBar.barTintColor;
-    }
-
-    // selected-tab-text-color
-    private static setSelectedTabTextColorProperty(v: view.View, newValue: any) {
-        var tabView = <definition.TabView>v;
-        tabView.ios.tabBar.tintColor = newValue;
-        tabView._updateIOSTabBarColorsAndFonts();
-    }
-
-    private static resetSelectedTabTextColorProperty(v: view.View, nativeValue: any) {
-        var tabView = <definition.TabView>v;
-        tabView.ios.tabBar.tintColor = nativeValue;
-        tabView._updateIOSTabBarColorsAndFonts();
-    }
-
-    private static getSelectedTabTextColorProperty(v: view.View) {
-        var tabView = <definition.TabView>v;
-        return tabView.ios.tabBar.tintColor;
-    }
-
-    // text-transform
-    private static setTextTransformProperty(v: view.View, newValue: any) {
-        var tabView = <TabView>v;
-        tabView._updateIOSTabBarTextTransform(newValue);
-    }
-
-    private static resetTextTransformProperty(v: view.View, nativeValue: any) {
-        var tabView = <TabView>v;
-        tabView._updateIOSTabBarTextTransform(nativeValue);
-    }
-
-    public static registerHandlers() {
-        style.registerHandler(style.fontInternalProperty, new style.StylePropertyChangedHandler(
-            TabViewStyler.setFontInternalProperty,
-            TabViewStyler.resetFontInternalProperty,
-            TabViewStyler.getNativeFontValue), "TabView");
-
-        style.registerHandler(style.tabTextColorProperty, new style.StylePropertyChangedHandler(
-            TabViewStyler.setTabTextColorProperty,
-            TabViewStyler.resetTabTextColorProperty), "TabView");
-        
-        style.registerHandler(style.tabBackgroundColorProperty, new style.StylePropertyChangedHandler(
-            TabViewStyler.setTabBackgroundColorProperty,
-            TabViewStyler.resetTabBackgroundColorProperty,
-            TabViewStyler.getTabBackgroundColorProperty), "TabView");
-
-        style.registerHandler(style.selectedTabTextColorProperty, new style.StylePropertyChangedHandler(
-            TabViewStyler.setSelectedTabTextColorProperty,
-            TabViewStyler.resetSelectedTabTextColorProperty,
-            TabViewStyler.getSelectedTabTextColorProperty), "TabView");
-
-        style.registerHandler(style.textTransformProperty, new style.StylePropertyChangedHandler(
-            TabViewStyler.setTextTransformProperty,
-            TabViewStyler.resetTextTransformProperty), "TabView");
-    }
-}
-
-TabViewStyler.registerHandlers();