clear nativeView field. (#3418)

moved some native setters from TabView to TabViewItem.
shorthand properties converters now accounts for unsetValue.
better formatting for test duration.

tests/app/TKUnit.ts

@@ -49,7 +49,7 @@ export var write = function write(message: string, type?: number) {
 
 var runTest = function (testInfo: TestInfoEntry) {
     let start = time();
-    let duration;
+    let duration: number;
     try {
         if (testInfo.instance) {
             testInfo.testFunc.apply(testInfo.instance);
@@ -59,7 +59,7 @@ var runTest = function (testInfo: TestInfoEntry) {
         }
 
         if (testInfo.isTest) {
-            duration = time() - start;
+            duration = (time() - start).toFixed(2);
             testInfo.duration = duration;
             write(`--- [${testInfo.testName}] OK, duration: ${duration}`, trace.messageType.info);
             testInfo.isPassed = true;
@@ -67,7 +67,7 @@ var runTest = function (testInfo: TestInfoEntry) {
     }
     catch (e) {
         if (testInfo.isTest) {
-            duration = time() - start;
+            duration = (time() - start).toFixed(2);
             testInfo.duration = duration;
             write(`--- [${testInfo.testName}] FAILED: ${e.message}, Stack: ${e.stack}, duration: ${duration}`, trace.messageType.error);
             testInfo.isPassed = false;

tests/app/testRunner.ts

@@ -210,7 +210,7 @@ function startLog(): void {
 function log(): void {
     let testsName: string = this.name;
     let duration = TKUnit.time() - this.start;
-    TKUnit.write(testsName + " COMPLETED for " + duration + " BACKSTACK DEPTH: " + topmost().backStack.length, messageType.info);
+    TKUnit.write(testsName + " COMPLETED for " + duration.toFixed(2) + " BACKSTACK DEPTH: " + topmost().backStack.length, messageType.info);
 }
 
 let testsSelector: string
@@ -243,7 +243,7 @@ export var runAll = function (testSelector?: string) {
         }
     }
 
-    console.log("TESTS: " + singleModuleName + " " + singleTestName);
+    console.log("TESTS: " + singleModuleName ? singleModuleName : "" + " " + singleTestName ? singleTestName : "");
 
     var totalSuccess = 0;
     var totalFailed: Array<TKUnit.TestFailure> = [];

tns-core-modules/ui/core/view-base.ts

@@ -492,7 +492,9 @@ export class ViewBase extends Observable implements ViewBaseDefinition {
             this.parent._addViewToNativeVisualTree(this, atIndex);
         }
 
+        if (this.nativeView) {
             applyNativeSetters(this);
+        }
 
         this.eachChild((child) => {
             child._setupUI(context);
@@ -510,8 +512,10 @@ export class ViewBase extends Observable implements ViewBaseDefinition {
             return true;
         });
 
+        if (this.nativeView) {
             // TODO: rename and implement this as resetNativeSetters
             resetStyleProperties(this.style);
+        }
 
         if (this.parent) {
             this.parent._removeViewFromNativeVisualTree(this);

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

@@ -4,7 +4,7 @@ import { Animation, AnimationPromise } from "ui/animation";
 import { Source } from "utils/debug";
 import { Background } from "ui/styling/background";
 import {
-    ViewBase, getEventOrGestureName, EventData, Style,
+    ViewBase, getEventOrGestureName, EventData, Style, unsetValue,
     Property, CssProperty, ShorthandProperty, InheritedCssProperty,
     gestureFromString, isIOS, traceEnabled, traceWrite, traceCategories, printUnregisteredProperties, makeParser, makeValidator
 } from "./view-base";
@@ -1295,7 +1295,7 @@ function parseThickness(value: string): Thickness {
 }
 
 function convertToMargins(this: void, value: string | PercentLength): [CssProperty<any, any>, any][] {
-    if (typeof value === "string" && value !== "auto"){
+    if (typeof value === "string" && value !== "auto") {
         let thickness = parseThickness(value);
         return [
             [marginTopProperty, PercentLength.parse(thickness.top)],
@@ -1315,7 +1315,7 @@ function convertToMargins(this: void, value: string | PercentLength): [CssProper
 }
 
 function convertToPaddings(this: void, value: string | Length): [CssProperty<any, any>, any][] {
-    if (typeof value === "string" && value !== "auto"){
+    if (typeof value === "string" && value !== "auto") {
         let thickness = parseThickness(value);
         return [
             [paddingTopProperty, Length.parse(thickness.top)],
@@ -1406,10 +1406,10 @@ function transformConverter(value: string): Object {
 }
 
 function convertToTransform(value: string): [CssProperty<any, any>, any][] {
-    let newTransform = transformConverter(value);
+    let newTransform = value == unsetValue ? { "none": "none" } : transformConverter(value);
     let array = [];
     let values: Array<string>;
-    for (var transform in newTransform) {
+    for (let transform in newTransform) {
         switch (transform) {
             case "scaleX":
                 array.push([scaleXProperty, parseFloat(newTransform[transform])]);
@@ -1690,7 +1690,7 @@ const borderWidthProperty = new ShorthandProperty<Style, string | Length>({
     getter: function (this: Style) {
         if (this.borderTopWidth === this.borderRightWidth &&
             this.borderTopWidth === this.borderBottomWidth &&
-            this.borderTopWidth === this.borderLeftWidth){
+            this.borderTopWidth === this.borderLeftWidth) {
             return this.borderTopWidth;
         }
         else {
@@ -1698,7 +1698,7 @@ const borderWidthProperty = new ShorthandProperty<Style, string | Length>({
         }
     },
     converter: function (value) {
-        if (typeof value === "string" && value !== "auto"){
+        if (typeof value === "string" && value !== "auto") {
             let borderWidths = parseThickness(value);
             return [
                 [borderTopWidthProperty, borderWidths.top],
@@ -1795,7 +1795,7 @@ const borderRadiusProperty = new ShorthandProperty<Style, string | number>({
         return `${this.borderTopLeftRadius} ${this.borderTopRightRadius} ${this.borderBottomRightRadius} ${this.borderBottomLeftRadius}`;
     },
     converter: function (value) {
-        if (typeof value === "string"){
+        if (typeof value === "string") {
             let borderRadius = parseThickness(value);
             return [
                 [borderTopLeftRadiusProperty, borderRadius.top],
@@ -1950,6 +1950,14 @@ const fontProperty = new ShorthandProperty<Style, string>({
         return `${this.fontStyle} ${this.fontWeight} ${this.fontSize} ${this.fontFamily}`;
     },
     converter: function (value) {
+        if (value == unsetValue) {
+            return [
+                [fontStyleProperty, unsetValue],
+                [fontWeightProperty, unsetValue],
+                [fontSizeProperty, unsetValue],
+                [fontFamilyProperty, unsetValue]
+            ];
+        } else {
             let font = parseFont(value);
             let fontSize = fontSizeConverter(font.fontSize);
 
@@ -1958,7 +1966,8 @@ const fontProperty = new ShorthandProperty<Style, string>({
                 [fontWeightProperty, font.fontWeight],
                 [fontSizeProperty, fontSize],
                 [fontFamilyProperty, font.fontFamily]
-        ]
+            ];
+        }
     }
 })
 fontProperty.register(Style);

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

@@ -120,6 +120,7 @@ export class View extends ViewCommon {
         }
 
         this[ANDROID] = undefined;
+        this.nativeView = undefined;
     }
 
     get _nativeView(): android.view.View {

tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout-common.ts

@@ -1,4 +1,4 @@
-import { LayoutBase, View, Style, CssProperty, isIOS, ShorthandProperty, makeValidator, makeParser} from "ui/layouts/layout-base";
+import { LayoutBase, View, Style, CssProperty, isIOS, ShorthandProperty, makeValidator, makeParser, unsetValue } from "ui/layouts/layout-base";
 
 export * from "ui/layouts/layout-base";
 
@@ -316,6 +316,10 @@ const flexFlowProperty = new ShorthandProperty<Style, string>({
     },
     converter: function (value: string) {
         const properties: [CssProperty<any, any>, any][] = [];
+        if (value == unsetValue) {
+            properties.push([flexDirectionProperty, value]);
+            properties.push([flexWrapProperty, value]);
+        } else {
             const trimmed = value && value.trim();
             if (trimmed) {
                 const values = trimmed.split(/\s+/);
@@ -326,7 +330,8 @@ const flexFlowProperty = new ShorthandProperty<Style, string>({
                     properties.push([flexWrapProperty, FlexWrap.parse(values[1])]);
                 }
             }
-        return properties;;
+        }
+        return properties;
     }
 })
 flexFlowProperty.register(Style);
@@ -339,6 +344,10 @@ const flexProperty = new ShorthandProperty<Style, string>({
     },
     converter: function (value: string) {
         const properties: [CssProperty<any, any>, any][] = [];
+        if (value == unsetValue) {
+            properties.push([flexGrowProperty, value]);
+            properties.push([flexShrinkProperty, value]);
+        } else {
             const trimmed = value && value.trim();
             if (trimmed) {
                 const values = trimmed.split(/\s+/);
@@ -377,6 +386,7 @@ const flexProperty = new ShorthandProperty<Style, string>({
                 //     properties.push({ property: flexBasisProperty, value: FlexBasis.parse(values[2])})
                 // }
             }
+        }
         return properties;
 
     }

tns-core-modules/ui/segmented-bar/segmented-bar.android.ts

@@ -50,11 +50,13 @@ export class SegmentedBarItem extends SegmentedBarItemBase {
 
     public setNativeView(textView: android.widget.TextView): void {
         this._textView = textView;
+        if (textView) {
             applyNativeSetters(this);
             if (this.titleDirty) {
                 this._update();
             }
         }
+    }
 
     private titleDirty: boolean;
     public _update(): void {
@@ -67,7 +69,7 @@ export class SegmentedBarItem extends SegmentedBarItemBase {
         //     titleTextView.setText(this.title || "");
         // }
 
-        let tv = this._textView;
+        const tv = this._textView;
         if (tv) {
             let title = this.title;
             title = (title === null || title === undefined) ? "" : title;
@@ -98,7 +100,7 @@ export class SegmentedBarItem extends SegmentedBarItemBase {
         if (value instanceof Font) {
             // Set value
             textView.setTypeface(value.getAndroidTypeface());
-            if (value.fontSize !== undefined){
+            if (value.fontSize !== undefined) {
                 textView.setTextSize(value.fontSize);
             }
         }
@@ -247,7 +249,7 @@ export class SegmentedBar extends SegmentedBarBase {
         const newItems = value;
         let tabHost = this._android;
         if (newItems) {
-            newItems.forEach((item, i,arr) => this.insertTab(item, i));
+            newItems.forEach((item, i, arr) => this.insertTab(item, i));
 
             if (this.selectedIndex < 0) {
                 this.selectedIndex = tabHost.getCurrentTab();

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

@@ -2,7 +2,8 @@ import {
     TabViewBase, TabViewItemBase, itemsProperty, selectedIndexProperty,
     tabTextColorProperty, tabBackgroundColorProperty, selectedTabTextColorProperty,
     androidSelectedTabHighlightColorProperty, androidOffscreenTabLimitProperty,
-    fontInternalProperty, traceCategory, View, layout, Color, Font, traceEnabled, traceWrite
+    fontInternalProperty, traceCategory, View, layout, Color, Font, traceEnabled, traceWrite,
+    applyNativeSetters
 } from "./tab-view-common"
 import { textTransformProperty, TextTransform, getTransformedText } from "ui/text-base";
 import { fromFileOrResource } from "image-source";
@@ -16,11 +17,74 @@ const PRIMARY_COLOR = "colorPrimary";
 const DEFAULT_ELEVATION = 4;
 
 export class TabViewItem extends TabViewItemBase {
+    public nativeView: android.widget.TextView;
+    public tabItemSpec: org.nativescript.widgets.TabItemSpec;
+    public index: number;
 
-    public _update() {
+    public setNativeView(textView: android.widget.TextView): void {
-        const parent = <TabView>this.parent;
+        this.nativeView = textView;
-        if (parent) {
+        if (textView) {
-            parent._updateTabForItem(this);
+            applyNativeSetters(this);
+        }
+    }
+
+    public _update(): void {
+        const tv = this.nativeView;
+        if (tv) {
+            const tabLayout = <org.nativescript.widgets.TabLayout>tv.getParent();
+            tabLayout.updateItemAt(this.index, this.tabItemSpec);
+        }
+    }
+
+    get [fontInternalProperty.native](): { typeface: android.graphics.Typeface, fontSize: number } {
+        const tv = this.nativeView;
+        return {
+            typeface: tv.getTypeface(),
+            fontSize: tv.getTextSize()
+        };
+    }
+    set [fontInternalProperty.native](value: Font | { typeface: android.graphics.Typeface, fontSize: number }) {
+        let typeface: android.graphics.Typeface;
+        let isFont: boolean;
+        const fontSize = value.fontSize;
+        if (value instanceof Font) {
+            isFont = true;
+            typeface = value.getAndroidTypeface();
+        }
+        else {
+            typeface = value.typeface;
+        }
+
+        const tv = this.nativeView;
+        tv.setTypeface(typeface);
+
+        if (isFont) {
+            if (fontSize !== undefined) {
+                tv.setTextSize(fontSize);
+            }
+        }
+        else {
+            tv.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, fontSize);
+        }
+    }
+
+    get [textTransformProperty.native](): TextTransform {
+        return "none";
+    }
+    set [textTransformProperty.native](value: TextTransform) {
+        const tv = this.nativeView;
+        const result = getTransformedText(this.title, value);
+        tv.setText(result);
+    }
+
+    get [tabTextColorProperty.native](): android.content.res.ColorStateList {
+        return this.nativeView.getTextColors();
+    }
+    set [tabTextColorProperty.native](value: android.content.res.ColorStateList | Color) {
+        if (value instanceof Color) {
+            this.nativeView.setTextColor(value.android);
+        } else {
+            this.nativeView.setTextColor(value);
         }
     }
 }
@@ -171,6 +235,25 @@ function ensurePageChangedListenerClass() {
     PageChangedListenerClass = PageChangedListener;
 }
 
+function createTabItemSpec(item: TabViewItem): org.nativescript.widgets.TabItemSpec {
+    let result = new org.nativescript.widgets.TabItemSpec();
+    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 {
+            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);
+            }
+        }
+    }
+
+    return result;
+}
+
 export class TabView extends TabViewBase {
     private _grid: org.nativescript.widgets.GridLayout;
     private _tabLayout: org.nativescript.widgets.TabLayout;
@@ -184,6 +267,18 @@ export class TabView extends TabViewBase {
         return this._grid;
     }
 
+    public onItemsChanged(oldItems: TabViewItem[], newItems: TabViewItem[]): void {
+        super.onItemsChanged(oldItems, newItems);
+        
+        if (oldItems) {
+            oldItems.forEach((item: TabViewItem, i, arr) => {
+                item.index = 0;
+                item.tabItemSpec = null;
+                item.setNativeView(null);
+            });
+        }
+    }
+
     public _createNativeView() {
         if (traceEnabled) {
             traceWrite("TabView._createUI(" + this + ");", traceCategory);
@@ -245,8 +340,11 @@ export class TabView extends TabViewBase {
         }
 
         const tabItems = new Array<org.nativescript.widgets.TabItemSpec>();
-        items.forEach((item, idx, arr) => {
+        items.forEach((item, i, arr) => {
-            tabItems.push(this.createTabItem(item));
+            const tabItemSpec = createTabItemSpec(item);
+            item.index = i;
+            item.tabItemSpec = tabItemSpec;
+            tabItems.push(tabItemSpec);
         });
 
         ensurePagerAdapterClass();
@@ -254,49 +352,17 @@ export class TabView extends TabViewBase {
         this._pagerAdapter = new PagerAdapterClass(this, items);
         this._viewPager.setAdapter(this._pagerAdapter);
 
-        this._tabLayout.setItems(tabItems, this._viewPager);
+        const tabLayout = this._tabLayout;
+        tabLayout.setItems(tabItems, this._viewPager);
+        items.forEach((item, i, arr) => {
+            const tv = tabLayout.getTextViewForItemAt(i);
+            item.setNativeView(tv);
+        });
 
         let selectedIndex = this.selectedIndex;
         if (selectedIndex < 0) {
             this.selectedIndex = this._viewPager.getCurrentItem();
         }
-//<<<<<<< HEAD
-//=======
-
-//        this._updateSelectedIndexOnItemsPropertyChanged(data.newValue);
-        
-        // Style properties such as fonts need to re-applied on the newwly created native TextViews
-//        this.style._syncNativeProperties();
-//>>>>>>> ae68368... Fixed: Setting `setTypeface()` to null object
-    }
-
-    public _updateTabForItem(item: TabViewItem) {
-        let items = this.items;
-        if (items && items.length > 0) {
-            let index = this.items.indexOf(item);
-            if (index >= 0) {
-                this._tabLayout.updateItemAt(index, this.createTabItem(item));
-            }
-        }
-    }
-
-    private createTabItem(item: TabViewItem): org.nativescript.widgets.TabItemSpec {
-        let result = new org.nativescript.widgets.TabItemSpec();
-        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 {
-                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);
-                }
-            }
-        }
-
-        return result;
     }
 
     get [androidOffscreenTabLimitProperty.native](): number {
@@ -316,21 +382,13 @@ export class TabView extends TabViewBase {
         this._viewPager.setCurrentItem(value, true);
     }
 
-    get [itemsProperty.native](): TabViewItemBase[] {
+    get [itemsProperty.native](): TabViewItem[] {
         return null;
     }
-    set [itemsProperty.native](value: TabViewItemBase[]) {
+    set [itemsProperty.native](value: TabViewItem[]) {
         this.setAdapter(value);
     }
 
-    get [tabTextColorProperty.native](): number {
-        return this._tabLayout.getTabTextColor();
-    }
-    set [tabTextColorProperty.native](value: number | Color) {
-        let color = value instanceof Color ? value.android : value;
-        this._tabLayout.setTabTextColor(color);
-    }
-
     get [tabBackgroundColorProperty.native](): android.graphics.drawable.Drawable {
         return this._tabLayout.getBackground();
     }
@@ -359,71 +417,4 @@ export class TabView extends TabViewBase {
         let color = value instanceof Color ? value.android : value;
         tabLayout.setSelectedIndicatorColors([color]);
     }
-
-    // TODO: Move this to TabViewItem
-    get [fontInternalProperty.native](): { typeface: android.graphics.Typeface, fontSize: number } {
-        let items = this.items;
-        if (items && items.length > 0) {
-            let tabLayout = this._tabLayout;
-            let tv = tabLayout.getTextViewForItemAt(0);
-            return {
-                typeface: tv.getTypeface(),
-                fontSize: tv.getTextSize()
-            };
-        }
-
-        return {
-            typeface: undefined,
-            fontSize: undefined
-        };
-    }
-    set [fontInternalProperty.native](value: Font | { typeface: android.graphics.Typeface, fontSize: number }) {
-        let typeface: android.graphics.Typeface;
-        let fontSize = value.fontSize;
-        let isFont: boolean;
-        if (value instanceof Font) {
-            isFont = true;
-            typeface = value.getAndroidTypeface();
-        } 
-        else {
-            typeface = value.typeface;
-        }
-
-        let items = this.items;
-        if (items && items.length > 0) {
-            let tabLayout = this._tabLayout;
-
-            for (let i = 0, length = items.length; i < length; i++) {
-                let tv = tabLayout.getTextViewForItemAt(i);
-                tv.setTypeface(typeface);
-
-                if (isFont) {
-                    if (fontSize !== undefined){
-                        tv.setTextSize(fontSize);
-                    }
-                }
-                else {
-                    tv.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, fontSize);
-                }
-            }
-        }
-    }
-
-    // TODO: Move this to TabViewItem
-    get [textTransformProperty.native](): TextTransform {
-        return "none";
-    }
-    set [textTransformProperty.native](value: TextTransform) {
-        let tabLayout = this._tabLayout;
-        let items = this.items;
-        if (!items) {
-            return;
-        }
-
-        for (let i = 0, count = items.length; i < count; i++) {
-            const textView = tabLayout.getTextViewForItemAt(i);
-            const result = getTransformedText(items[i].title, value);
-            textView.setText(result);
-        }
-    }
 }