chore: addimg tabbable component android

nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts

@@ -6,15 +6,10 @@ import { TextTransform } from "../text-base";
 
 // Requires
 import * as application from "../../application";
-import { ImageSource } from "../../image-source";
-import { ad, isFontIconURI, layout, RESOURCE_PREFIX } from "../../utils/utils";
+import { ad, layout } 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";
+import {  View } from "../frame";
+import { TabbableComponent } from "../tabbable-component/tabbable-component.android";
 
 // TODO: Impl trace
 // import { isEnabled as traceEnabled, write as traceWrite } from "../../../trace";
@@ -36,11 +31,6 @@ let BottomNavigationBar: any;
 let AttachStateChangeListener: any;
 let appResources: android.content.res.Resources;
 
-class IconInfo {
-    drawable: android.graphics.drawable.BitmapDrawable;
-    height: number;
-}
-
 function makeFragmentName(viewId: number, id: number): string {
     return "android:bottomnavigation:" + viewId + ":" + id;
 }
@@ -239,29 +229,16 @@ function setElevation(bottomNavigationBar: org.nativescript.widgets.BottomNaviga
 
 export const tabs = new Array<WeakRef<BottomNavigation>>();
 
-function iterateIndexRange(index: number, eps: number, lastIndex: number, callback: (i) => void) {
-    const rangeStart = Math.max(0, index - eps);
-    const rangeEnd = Math.min(index + eps, lastIndex);
-    for (let i = rangeStart; i <= rangeEnd; i++) {
-        callback(i);
-    }
-}
-
 @CSSType("BottomNavigation")
-export class BottomNavigation extends TabNavigationBase {
+export class BottomNavigation extends TabbableComponent {
     private _contentView: org.nativescript.widgets.ContentLayout;
-    private _contentViewId: number = -1;
-    private _bottomNavigationBar: org.nativescript.widgets.BottomNavigationBar;
     private _currentFragment: androidx.fragment.app.Fragment;
     private _currentTransaction: androidx.fragment.app.FragmentTransaction;
     private _attachedToWindow = false;
-    public _originalBackground: any;
-    private _textTransform: TextTransform = "none";
-    private _selectedItemColor: Color;
-    private _unSelectedItemColor: Color;
 
     constructor() {
         super();
+        this._textTransform = "none";
         tabs.push(new WeakRef(this));
     }
 
@@ -269,24 +246,16 @@ export class BottomNavigation extends TabNavigationBase {
         return true;
     }
 
-    public onItemsChanged(oldItems: TabContentItem[], newItems: TabContentItem[]): void {
-        super.onItemsChanged(oldItems, newItems);
+    public getBottomNavigationBar(): org.nativescript.widgets.BottomNavigationBar {
+        return <org.nativescript.widgets.BottomNavigationBar>this.nativeBar;
+    }
 
-        if (oldItems) {
-            oldItems.forEach((item: TabContentItem, i, arr) => {
-                (<any>item).index = 0;
-                (<any>item).tabItemSpec = null;
-                item.setNativeView(null);
-            });
-        }
+    protected setNativeItems(items: Array<org.nativescript.widgets.TabItemSpec>) {
+        this.getBottomNavigationBar().setItems(items);
     }
 
     public createNativeView() {
         initializeNativeClasses();
-        // if (traceEnabled()) {
-        //     traceWrite("BottomNavigation._createUI(" + this + ");", traceCategory);
-        // }
-
         const context: android.content.Context = this._context;
         const nativeView = new org.nativescript.widgets.GridLayout(context);
 
@@ -322,83 +291,40 @@ export class BottomNavigation extends TabNavigationBase {
     public initNativeView(): void {
         super.initNativeView();
 
-        if (this._contentViewId < 0) {
-            this._contentViewId = android.view.View.generateViewId();
-        }
+        this.nativeViewProtected.addOnAttachStateChangeListener(AttachStateChangeListener);
+        this.nativeViewProtected[ownerSymbol] = this;
 
-        const nativeView: any = this.nativeViewProtected;
-
-        nativeView.addOnAttachStateChangeListener(AttachStateChangeListener);
-        nativeView[ownerSymbol] = this;
-
-        this._contentView = (<any>nativeView).contentView;
+        this._contentView = (<any>this.nativeViewProtected).contentView;
         this._contentView.setId(this._contentViewId);
 
-        this._bottomNavigationBar = (<any>nativeView).bottomNavigationBar;
-        (<any>this._bottomNavigationBar).owner = this;
-
         if (this.tabStrip) {
-            this.tabStrip.setNativeView(this._bottomNavigationBar);
+            this.tabStrip.setNativeView(this.nativeBar);
         }
     }
 
-    public _loadUnloadTabItems(newIndex: number) {
-        const items = this.items;
-        const lastIndex = this.items.length - 1;
-        const offsideItems = 0;
-
-        let toUnload = [];
-        let toLoad = [];
-
-        iterateIndexRange(newIndex, offsideItems, lastIndex, (i) => toLoad.push(i));
-
-        items.forEach((item, i) => {
-            const indexOfI = toLoad.indexOf(i);
-            if (indexOfI < 0) {
-                toUnload.push(i);
-            }
-        });
-
-        toUnload.forEach(index => {
-            const item = items[index];
-            if (items[index]) {
-                item.unloadView(item.content);
-            }
-        });
-
-        const newItem = items[newIndex];
-        const selectedView = newItem && newItem.content;
-        if (selectedView instanceof Frame) {
-            selectedView._pushInFrameStackRecursive();
-        }
-
-        toLoad.forEach(index => {
-            const item = items[index];
-            if (this.isLoaded && items[index]) {
-                item.loadView(item.content);
-            }
-        });
-    }
-
     public onLoaded(): void {
         super.onLoaded();
 
-        if (this._originalBackground) {
-            this.backgroundColor = null;
-            this.backgroundColor = this._originalBackground;
-            this._originalBackground = null;
-        }
-
         if (this.tabStrip) {
             this.setTabStripItems(this.tabStrip.items);
         } else {
             // manually set the visibility, so that the grid layout remeasures
-            this._bottomNavigationBar.setVisibility(android.view.View.GONE);
+            this.nativeBar.setVisibility(android.view.View.GONE);
         }
 
         this.changeTab(this.selectedIndex);
     }
 
+    public onUnloaded(): void {
+        super.onUnloaded();
+
+        const fragmentToDetach = this._currentFragment;
+        if (fragmentToDetach) {
+            this.destroyItem((<any>fragmentToDetach).index, fragmentToDetach);
+            this.commitCurrentTransaction();
+        }
+    }
+
     _onAttachedToWindow(): void {
         super._onAttachedToWindow();
 
@@ -418,23 +344,9 @@ export class BottomNavigation extends TabNavigationBase {
         this._attachedToWindow = false;
     }
 
-    public onUnloaded(): void {
-        super.onUnloaded();
-
-        if (this.tabStrip) {
-            this.setTabStripItems(null);
-        }
-
-        const fragmentToDetach = this._currentFragment;
-        if (fragmentToDetach) {
-            this.destroyItem((<any>fragmentToDetach).index, fragmentToDetach);
-            this.commitCurrentTransaction();
-        }
-    }
-
     public disposeNativeView() {
-        this._bottomNavigationBar.setItems(null);
-        this._bottomNavigationBar = null;
+        this.setNativeItems(null);
+        this.nativeBar = null;
 
         this.nativeViewProtected.removeOnAttachStateChangeListener(AttachStateChangeListener);
         this.nativeViewProtected[ownerSymbol] = null;
@@ -442,26 +354,6 @@ export class BottomNavigation extends TabNavigationBase {
         super.disposeNativeView();
     }
 
-    public _onRootViewReset(): void {
-        super._onRootViewReset();
-
-        // call this AFTER the super call to ensure descendants apply their rootview-reset logic first
-        // i.e. in a scenario with tab frames let the frames cleanup their fragments first, and then
-        // cleanup the tab fragments to avoid
-        // android.content.res.Resources$NotFoundException: Unable to find resource ID #0xfffffff6
-        this.disposeTabFragments();
-    }
-
-    private disposeTabFragments(): void {
-        const fragmentManager = this._getFragmentManager();
-        const transaction = fragmentManager.beginTransaction();
-        for (let fragment of (<Array<any>>fragmentManager.getFragments().toArray())) {
-            transaction.remove(fragment);
-        }
-
-        transaction.commitNowAllowingStateLoss();
-    }
-
     private get currentTransaction(): androidx.fragment.app.FragmentTransaction {
         if (!this._currentTransaction) {
             const fragmentManager = this._getFragmentManager();
@@ -555,344 +447,11 @@ export class BottomNavigation extends TabNavigationBase {
         }
     }
 
-    private setTabStripItems(items: Array<TabStripItem>) {
-        if (!this.tabStrip || !items) {
-            this._bottomNavigationBar.setItems(null);
-
-            return;
-        }
-
-        const tabItems = new Array<org.nativescript.widgets.TabItemSpec>();
-        items.forEach((tabStripItem, i, arr) => {
-            tabStripItem._index = i;
-            if (items[i]) {
-                const tabItemSpec = this.createTabItemSpec(items[i]);
-                tabItems.push(tabItemSpec);
-            }
-        });
-
-        this._bottomNavigationBar.setItems(tabItems);
-
-        items.forEach((item, i, arr) => {
-            const textView = this._bottomNavigationBar.getTextViewForItemAt(i);
-            item.setNativeView(textView);
-            this._setItemColor(item);
-        });
-    }
-
-    private getItemLabelTextTransform(tabStripItem: TabStripItem): TextTransform {
-        const nestedLabel = tabStripItem.label;
-        let textTransform: TextTransform = null;
-        if (nestedLabel && nestedLabel.style.textTransform !== "initial") {
-            textTransform = nestedLabel.style.textTransform;
-        } else if (tabStripItem.style.textTransform !== "initial") {
-            textTransform = tabStripItem.style.textTransform;
-        }
-
-        return textTransform || this._textTransform;
-    }
-
-    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 = this.getItemLabelTextTransform(tabStripItem);
-            title = getTransformedText(title, textTransform);
-            tabItemSpec.title = title;
-
-            // BACKGROUND-COLOR
-            const backgroundColor = tabStripItem.style.backgroundColor;
-            tabItemSpec.backgroundColor = backgroundColor ? backgroundColor.android : this.getTabBarBackgroundArgbColor();
-
-            // COLOR
-            let itemColor = this.selectedIndex === tabStripItem._index ? this._selectedItemColor : this._unSelectedItemColor;
-            const color = itemColor || titleLabel.style.color;
-            tabItemSpec.color = 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) {
-                const iconInfo = this.getIconInfo(tabStripItem, itemColor);
-
-                if (iconInfo) {
-                    // TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
-                    // tslint:disable-next-line:deprecation
-                    tabItemSpec.iconDrawable = iconInfo.drawable;
-                    tabItemSpec.imageHeight = iconInfo.height;
-                } else {
-                    // TODO:
-                    // traceMissingIcon(iconSource);
-                }
-            }
-        }
-
-        return tabItemSpec;
-    }
-
-    private getOriginalIcon(tabStripItem: TabStripItem, color?: Color): android.graphics.Bitmap {
-        const iconSource = tabStripItem.image && tabStripItem.image.src;
-        if (!iconSource) {
-            return null;
-        }
-
-        let is: ImageSource;
-        if (isFontIconURI(iconSource)) {
-            const fontIconCode = iconSource.split("//")[1];
-            const target = tabStripItem.image ? tabStripItem.image : tabStripItem;
-            const font = target.style.fontInternal;
-            if (!color) {
-                color = target.style.color;
-            }
-            is = ImageSource.fromFontIconCodeSync(fontIconCode, font, color);
-        } else {
-            is = ImageSource.fromFileOrResourceSync(iconSource);
-        }
-
-        return is && is.android;
-    }
-
-    private getDrawableInfo(image: android.graphics.Bitmap): IconInfo {
-        if (image) {
-            if (this.tabStrip && this.tabStrip.isIconSizeFixed) {
-                image = this.getFixedSizeIcon(image);
-            }
-
-            let imageDrawable = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), image);
-
-            return {
-                drawable: imageDrawable,
-                height: image.getHeight()
-            };
-        }
-
-        return new IconInfo();
-    }
-
-    private getIconInfo(tabStripItem: TabStripItem, color?: Color): IconInfo {
-        let originalIcon = this.getOriginalIcon(tabStripItem, color);
-
-        return this.getDrawableInfo(originalIcon);
-    }
-
-    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;
-    }
-
-    public updateAndroidItemAt(index: number, spec: org.nativescript.widgets.TabItemSpec) {
-        this._bottomNavigationBar.updateItemAt(index, spec);
-    }
-
-    public getTabBarBackgroundColor(): android.graphics.drawable.Drawable {
-        return this._bottomNavigationBar.getBackground();
-    }
-
-    public setTabBarBackgroundColor(value: android.graphics.drawable.Drawable | Color): void {
-        if (value instanceof Color) {
-            this._bottomNavigationBar.setBackgroundColor(value.android);
-        } else {
-            this._bottomNavigationBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources()));
-        }
-
-        this.updateTabStripItems();
-    }
-
-    private updateTabStripItems(): void {
-        this.tabStrip.items.forEach((tabStripItem: TabStripItem) => {
-            if (tabStripItem.nativeView) {
-                const tabItemSpec = this.createTabItemSpec(tabStripItem);
-                this.updateAndroidItemAt(tabStripItem._index, tabItemSpec);
-            }
-        });
-    }
-
-    public _setItemsColors(items: Array<TabStripItem>): void {
-        items.forEach((item) => {
-            if (item.nativeView) {
-                this._setItemColor(item);
-            }
-        });
-    }
-
-    public getTabBarSelectedItemColor(): Color {
-        return this._selectedItemColor;
-    }
-
-    public setTabBarSelectedItemColor(value: Color) {
-        this._selectedItemColor = value;
-        this._setItemsColors(this.tabStrip.items);
-    }
-
-    public getTabBarUnSelectedItemColor(): Color {
-        return this._unSelectedItemColor;
-    }
-
-    public setTabBarUnSelectedItemColor(value: Color) {
-        this._unSelectedItemColor = value;
-        this._setItemsColors(this.tabStrip.items);
-    }
-
-    private updateItem(tabStripItem: TabStripItem): void {
-        // TODO: Should figure out a way to do it directly with the the nativeView
-        const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
-        const tabItemSpec = this.createTabItemSpec(tabStripItem);
-        this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
-    }
-
-    public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {
-        this.updateItem(tabStripItem);
-    }
-
-    public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: android.graphics.drawable.Drawable | Color): void {
-        this.updateItem(tabStripItem);
-    }
-
-    public _setItemColor(tabStripItem: TabStripItem) {
-        const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor;
-        if (!itemColor) {
-            return;
-        }
-
-        // set label color
-        tabStripItem.nativeViewProtected.setTextColor(itemColor.android);
-
-        // set icon color
-        this.setIconColor(tabStripItem, itemColor);
-    }
-
-    private setIconColor(tabStripItem: TabStripItem, color?: Color) {
-        const tabBarItem = this._bottomNavigationBar.getViewForItemAt(tabStripItem._index);
-
-        const drawableInfo = this.getIconInfo(tabStripItem, color);
-        const imgView = <android.widget.ImageView>tabBarItem.getChildAt(0);
-        imgView.setImageDrawable(drawableInfo.drawable);
-        if (color) {
-            imgView.setColorFilter(color.android);
-        }
-    }
-
-    public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void {
-        const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor;
-        if (itemColor) {
-            // the itemColor is set through the selectedItemColor and unSelectedItemColor properties
-            // so it does not respect the css color
-            return;
-        }
-
-        const androidColor = value instanceof Color ? value.android : value;
-        tabStripItem.nativeViewProtected.setTextColor(androidColor);
-    }
-
-    public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void {
-        const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor;
-        if (itemColor) {
-            // the itemColor is set through the selectedItemColor and unSelectedItemColor properties
-            // so it does not respect the css color
-            return;
-        }
-
-        this.setIconColor(tabStripItem);
-    }
-
-    public setTabBarIconSource(tabStripItem: TabStripItem, value: number | Color): void {
-        this.updateItem(tabStripItem);
-    }
-
-    public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
-        if (value.fontSize) {
-            tabStripItem.nativeViewProtected.setTextSize(value.fontSize);
-        }
-
-        tabStripItem.nativeViewProtected.setTypeface(value.getAndroidTypeface());
-    }
-
-    public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform): void {
-        const titleLabel = tabStripItem.label;
-        const title = getTransformedText(titleLabel.text, value);
-        tabStripItem.nativeViewProtected.setText(title);
-    }
-
-    public getTabBarTextTransform(): TextTransform {
-        return this._textTransform;
-    }
-
-    public setTabBarTextTransform(value: TextTransform): void {
-        let items = this.tabStrip && this.tabStrip.items;
-        if (items) {
-            items.forEach((tabStripItem) => {
-                if (tabStripItem.label && tabStripItem.nativeViewProtected) {
-                    const nestedLabel = tabStripItem.label;
-                    const title = getTransformedText(nestedLabel.text, value);
-                    tabStripItem.nativeViewProtected.setText(title);
-                }
-            });
-        }
-        this._textTransform = value;
-    }
-
-    [selectedIndexProperty.setNative](value: number) {
-        // const smoothScroll = false;
-
-        // if (traceEnabled()) {
-        //     traceWrite("TabView this._viewPager.setCurrentItem(" + value + ", " + smoothScroll + ");", traceCategory);
-        // }
-
+    protected setSelectedItem(value: number) {
         if (this.tabStrip) {
-            this._bottomNavigationBar.setSelectedPosition(value);
+            this.getBottomNavigationBar().setSelectedPosition(value);
         } else {
             this.changeTab(value);
         }
     }
-
-    [itemsProperty.getDefault](): TabContentItem[] {
-        return null;
-    }
-    [itemsProperty.setNative](value: TabContentItem[]) {
-        if (value) {
-            value.forEach((item: TabContentItem, i) => {
-                (<any>item).index = i;
-            });
-        }
-
-        selectedIndexProperty.coerce(this);
-    }
-
-    [tabStripProperty.getDefault](): TabStrip {
-        return null;
-    }
-    [tabStripProperty.setNative](value: TabStrip) {
-        const items = this.tabStrip ? this.tabStrip.items : null;
-        this.setTabStripItems(items);
-    }
-}
-
-function tryCloneDrawable(value: android.graphics.drawable.Drawable, resources: android.content.res.Resources): android.graphics.drawable.Drawable {
-    if (value) {
-        const constantState = value.getConstantState();
-        if (constantState) {
-            return constantState.newDrawable(resources);
-        }
-    }
-
-    return value;
 }

nativescript-core/ui/bottom-navigation/bottom-navigation.d.ts

@@ -3,7 +3,7 @@
  * @module "ui/tab-navigation/bottom-navigation"
  */ /** */
 
-import { TabNavigationBase } from "../tab-navigation-base/tab-navigation-base";
+import { TabbableComponent } from "../tabbable-component";
 import { TabContentItem } from "../tab-navigation-base/tab-content-item";
 import { TabStrip } from "../tab-navigation-base/tab-strip";
 import { Property, CoercibleProperty, EventData } from "../core/view";
@@ -31,7 +31,7 @@ export interface SelectedIndexChangedEventData extends EventData {
 /**
  * Represents a tab navigation widget with static tabs at the bottom.
  */
-export class BottomNavigation extends TabNavigationBase {
+export class BottomNavigation extends TabbableComponent {
     /**
      * Gets or sets the items of the BottomNavigation.
      */