fix: fixes for bottom-navigation and tabs

nativescript-community · Jan 18, 2021 · 89fb903 · 89fb903
1 parent ea44b7e
commit 89fb903
Show file tree

Hide file tree

Showing 20 changed files with 406 additions and 260 deletions.
diff --git a/src/bottom-navigation/angular/index.ts b/src/bottom-navigation/angular/index.ts
@@ -0,0 +1,14 @@
+import { Directive, NgModule } from '@angular/core';
+import { registerElement } from '@nativescript/angular';
+import { BottomNavigation } from '@nativescript-community/ui-material-bottomnavigation';
+
+@Directive({ selector: 'MDBottomNavigation' })
+export class MaterialBottomNavigationDirective {}
+
+@NgModule({
+    declarations: [MaterialBottomNavigationDirective],
+    exports: [MaterialBottomNavigationDirective]
+})
+export class NativeScriptMaterialBottomNavigationModule {}
+
+registerElement('MDBottomNavigation', () => BottomNavigation);
diff --git a/src/bottom-navigation/angular/package.json b/src/bottom-navigation/angular/package.json
@@ -0,0 +1,18 @@
+{
+	"name": "@nativescript-community/ui-material-bottomnavigation-angular",
+	"main": "index.js",
+	"ngPackage": {
+		"dest":"../../../packages/bottomnavigation/angular",
+		"lib": {
+			"entryFile": "index.ts",
+			"umdModuleIds": {
+				"@nativescript/core": "ns-core",
+				"@nativescript/angular": "ns-angular",
+				"@nativescript-community/ui-material-bottomnavigation": "ns-material-bottomnavigation"
+			}
+		},
+		"whitelistedNonPeerDependencies": [
+			"."
+		]
+	}
+}
diff --git a/src/bottom-navigation/angular/tsconfig.json b/src/bottom-navigation/angular/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "extends": "../../../tsconfig.json",
+    "compilerOptions": {
+        "rootDir": "./",
+        "paths": {
+            "tns-core-modules": ["./node_modules/@nativescript/core"],
+            "tns-core-modules/*": ["./node_modules/@nativescript/core/*"],
+            "@nativescript-community/ui-material-core": ["packages/core/index"],
+            "@nativescript-community/ui-material-core/*": ["packages/core/*"],
+            "@nativescript-community/ui-material-bottomnavigation": ["packages/bottomnavigation/index"],
+            "@nativescript-community/ui-material-bottomnavigation/*": ["packages/bottomnavigation/*"]
+        }
+    },
+    "include": ["./**/*.ts", "../../../references.d.ts", "../../references.d.ts"],
+    "angularCompilerOptions": {
+        "enableIvy": true
+    }
+}
diff --git a/src/bottom-navigation/index.android.ts b/src/bottom-navigation/index.android.ts
@@ -6,6 +6,7 @@ import { TabStripItem } from '@nativescript-community/ui-material-core/tab-navig
 // Requires
 import { Application, CSSType, Color, Font, Frame, ImageSource, Utils, View, getIconSpecSize } from '@nativescript/core';
 import { TextTransform, getTransformedText } from '@nativescript/core/ui/text-base';
+export { TabContentItem, TabStrip, TabStripItem };
 
 // TODO: Impl trace
 // import { Trace } from "../../../trace";
@@ -344,19 +345,21 @@ export class BottomNavigation extends TabNavigationBase {
 
         iterateIndexRange(newIndex, offsideItems, lastIndex, (i) => toLoad.push(i));
 
-        items.forEach((item, i) => {
-            const indexOfI = toLoad.indexOf(i);
-            if (indexOfI < 0) {
-                toUnload.push(i);
-            }
-        });
+        if (this.unloadOnTabChange) {
+            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);
-            }
-        });
+            toUnload.forEach((index) => {
+                const item = items[index];
+                if (items[index]) {
+                    item.unloadView(item.content);
+                }
+            });
+        }
 
         const newItem = items[newIndex];
         const selectedView = newItem && newItem.content;
@@ -417,11 +420,10 @@ export class BottomNavigation extends TabNavigationBase {
             this.setTabStripItems(null);
         }
 
-        const fragmentToDetach = this._currentFragment;
-        if (fragmentToDetach) {
-            this.destroyItem((fragmentToDetach as any).index, fragmentToDetach);
-            this.removeFragment(fragmentToDetach);
-        }
+        this.items.forEach((item, i) => {
+            item.unloadView(item.content);
+        });
+        this.disposeTabFragments();
     }
 
     public disposeNativeView() {
@@ -495,7 +497,12 @@ export class BottomNavigation extends TabNavigationBase {
 
         const fragmentToDetach = this._currentFragment;
         if (fragmentToDetach) {
-            this.destroyItem((fragmentToDetach as any).index, fragmentToDetach);
+            console.log('unloadOnTabChange', this.unloadOnTabChange);
+            if (this.unloadOnTabChange) {
+                this.destroyItem((fragmentToDetach as any).index, fragmentToDetach);
+            } else {
+                this.hideFragment(fragmentToDetach as any);
+            }
         }
 
         const fragment = this.instantiateItem(this._contentView, index);
@@ -532,6 +539,9 @@ export class BottomNavigation extends TabNavigationBase {
             if (fragment != null) {
                 fragment.setMenuVisibility(true);
                 fragment.setUserVisibleHint(true);
+                if (!this.unloadOnTabChange) {
+                    this.showFragment(fragment);
+                }
             }
 
             this._currentFragment = fragment;
@@ -545,19 +555,73 @@ export class BottomNavigation extends TabNavigationBase {
             }
         }
     }
-
     private destroyItem(position: number, fragment: androidx.fragment.app.Fragment): void {
         if (fragment) {
             this.removeFragment(fragment);
             if (this._currentFragment === fragment) {
                 this._currentFragment = null;
             }
         }
-
         if (this.items && this.items[position]) {
             this.items[position].canBeLoaded = false;
         }
     }
+    private hideFragment(fragment: androidx.fragment.app.Fragment, fragmentManager?: any) {
+        if (!fragmentManager) {
+            fragmentManager = this._getFragmentManager();
+        }
+        if (fragment) {
+            if (!fragment.isAdded() || fragment.isRemoving()) {
+                // ignore
+                return;
+            } else {
+                const fragmentExitTransition = fragment.getExitTransition();
+                if (fragmentExitTransition && fragmentExitTransition instanceof org.nativescript.widgets.CustomTransition) {
+                    fragmentExitTransition.setResetOnTransitionEnd(true);
+                }
+                if (fragment && fragment.isAdded() && !fragment.isRemoving()) {
+                    const pfm = (fragment as any).getParentFragmentManager ? (fragment as any).getParentFragmentManager() : null;
+                    if (pfm && !pfm.isDestroyed()) {
+                        try {
+                            if (pfm.isStateSaved()) {
+                                pfm.beginTransaction().hide(fragment).commitNowAllowingStateLoss();
+                            } else {
+                                pfm.beginTransaction().hide(fragment).commitNow();
+                            }
+                        } catch (e) {}
+                    }
+                }
+            }
+        }
+    }
+    private showFragment(fragment: androidx.fragment.app.Fragment, fragmentManager?: any) {
+        if (!fragmentManager) {
+            fragmentManager = this._getFragmentManager();
+        }
+        if (fragment) {
+            if (!fragment.isAdded() || fragment.isRemoving()) {
+                // ignore
+                return;
+            } else {
+                const fragmentExitTransition = fragment.getExitTransition();
+                if (fragmentExitTransition && fragmentExitTransition instanceof org.nativescript.widgets.CustomTransition) {
+                    fragmentExitTransition.setResetOnTransitionEnd(true);
+                }
+                if (fragment && fragment.isAdded() && !fragment.isRemoving()) {
+                    const pfm = (fragment as any).getParentFragmentManager ? (fragment as any).getParentFragmentManager() : null;
+                    if (pfm && !pfm.isDestroyed()) {
+                        try {
+                            if (pfm.isStateSaved()) {
+                                pfm.beginTransaction().show(fragment).commitNowAllowingStateLoss();
+                            } else {
+                                pfm.beginTransaction().show(fragment).commitNow();
+                            }
+                        } catch (e) {}
+                    }
+                }
+            }
+        }
+    }
     private removeFragment(fragment: androidx.fragment.app.Fragment, fragmentManager?: any) {
         if (!fragmentManager) {
             fragmentManager = this._getFragmentManager();

diff --git a/src/bottom-navigation/index.d.ts b/src/bottom-navigation/index.d.ts
@@ -2,7 +2,9 @@
 import { TabNavigationBase } from '@nativescript-community/ui-material-core/tab-navigation-base/tab-navigation-base';
 import { TabStrip } from '@nativescript-community/ui-material-core/tab-navigation-base/tab-strip';
 import { CoercibleProperty, EventData, Property } from '@nativescript/core';
+import { TabStripItem } from '@nativescript-community/ui-material-core/tab-navigation-base/tab-strip-item';
 
+export { TabContentItem, TabStrip, TabStripItem };
 /**
  * Defines the data for the TabView.selectedIndexChanged event.
  */

diff --git a/src/bottom-navigation/index.ios.ts b/src/bottom-navigation/index.ios.ts
@@ -5,9 +5,10 @@ import { TabStrip } from '@nativescript-community/ui-material-core/tab-navigatio
 import { TabStripItem } from '@nativescript-community/ui-material-core/tab-navigation-base/tab-strip-item';
 // Types
 // Requires
-import { Application, CSSType, Color, Device, Font, Frame, IOSHelper, ImageSource, Utils, View, getIconSpecSize } from '@nativescript/core';
+import { CSSType, Color, Device, Font, Frame, IOSHelper, ImageSource, Utils, View, getIconSpecSize } from '@nativescript/core';
 import { TextTransform, getTransformedText } from '@nativescript/core/ui/text-base';
 import { iOSNativeHelper } from '@nativescript/core/utils';
+export { TabContentItem, TabStrip, TabStripItem };
 
 // TODO:
 // import { profile } from "../../profiling";
@@ -79,10 +80,14 @@ class UITabBarControllerImpl extends UITabBarController {
 
         if (majorVersion >= 13) {
             const owner = this._owner.get();
-            if (owner && this.traitCollection.hasDifferentColorAppearanceComparedToTraitCollection && this.traitCollection.hasDifferentColorAppearanceComparedToTraitCollection(previousTraitCollection)) {
+            if (
+                owner &&
+                this.traitCollection.hasDifferentColorAppearanceComparedToTraitCollection &&
+                this.traitCollection.hasDifferentColorAppearanceComparedToTraitCollection(previousTraitCollection)
+            ) {
                 owner.notify({
                     eventName: IOSHelper.traitCollectionColorAppearanceChangedEvent,
-                    object: owner,
+                    object: owner
                 });
             }
         }
@@ -125,7 +130,7 @@ class UITabBarControllerDelegateImpl extends NSObject implements UITabBarControl
                         tabStrip.notify({
                             eventName: TabStrip.itemTapEvent,
                             object: tabStrip,
-                            index: position,
+                            index: position
                         });
                     }
                 }
@@ -230,7 +235,7 @@ function updateTitleAndIconPositions(tabStripItem: TabStripItem, tabBarItem: UIT
         if (isIconAboveTitle) {
             tabBarItem.titlePositionAdjustment = {
                 horizontal: 0,
-                vertical: -20,
+                vertical: -20
             };
         } else {
             tabBarItem.titlePositionAdjustment = { horizontal: 0, vertical: 0 };
@@ -243,14 +248,14 @@ function updateTitleAndIconPositions(tabStripItem: TabStripItem, tabBarItem: UIT
                 top: 6,
                 left: 0,
                 bottom: -6,
-                right: 0,
+                right: 0
             });
         } else {
             tabBarItem.imageInsets = new UIEdgeInsets({
                 top: 0,
                 left: 0,
                 bottom: 0,
-                right: 0,
+                right: 0
             });
         }
     }
@@ -303,14 +308,19 @@ export class BottomNavigation extends TabNavigationBase {
         }
 
         this._ios.delegate = this._delegate;
+        this.onSelectedIndexChanged(selectedIndex, selectedIndex);
     }
 
     public onUnloaded() {
         this._ios.delegate = null;
         this._ios.moreNavigationController.delegate = null;
         super.onUnloaded();
+        this.items.forEach((item, i) => {
+            item.unloadView(item.content);
+        });
     }
 
+    // @ts-ignore
     get ios(): UITabBarController {
         return this._ios;
     }
@@ -328,11 +338,12 @@ export class BottomNavigation extends TabNavigationBase {
         if (!items) {
             return;
         }
-
-        const oldItem = items[oldIndex];
-        if (oldItem) {
-            oldItem.canBeLoaded = false;
-            oldItem.unloadView(oldItem.content);
+        if (this.unloadOnTabChange) {
+            const oldItem = items[oldIndex];
+            if (oldItem) {
+                oldItem.canBeLoaded = false;
+                oldItem.unloadView(oldItem.content);
+            }
         }
 
         const newItem = items[newIndex];
@@ -704,7 +715,7 @@ export class BottomNavigation extends TabNavigationBase {
 
         const iconSpecSize = getIconSpecSize({
             width: inWidth,
-            height: inHeight,
+            height: inHeight
         });
 
         const widthPts = iconSpecSize.width;
@@ -743,7 +754,6 @@ export class BottomNavigation extends TabNavigationBase {
         // if (Trace.isEnabled()) {
         //     Trace.write("TabView._onSelectedIndexPropertyChangedSetNativeValue(" + value + ")", Trace.categories.Debug);
         // }
-
         if (value > -1) {
             (this._ios as any)._willSelectViewController = this._ios.viewControllers[value];
             this._ios.selectedIndex = value;

diff --git a/src/bottom-navigation/vue/component.ts b/src/bottom-navigation/vue/component.ts
@@ -0,0 +1,28 @@
+export default {
+    model: {
+        prop: 'selectedIndex',
+        event: 'selectedIndexChange'
+    },
+
+    render(h) {
+        return h(
+            'NativeMDBottomNavigation',
+            {
+                on: this.$listeners,
+                attrs: this.$attrs
+            },
+            this.$slots.default
+        );
+    },
+
+    methods: {
+        registerTabStrip(tabStrip) {
+            this.$el.setAttribute('tabStrip', tabStrip);
+        },
+        registerTabContentItem(tabContentItem) {
+            const items = this.$el.nativeView.items || [];
+
+            this.$el.setAttribute('items', items.concat([tabContentItem]));
+        }
+    }
+};
diff --git a/src/bottom-navigation/vue/index.ts b/src/bottom-navigation/vue/index.ts
@@ -0,0 +1,21 @@
+import { BottomNavigation, TabContentItem, TabStrip, TabStripItem } from '../';
+
+let installed = false;
+
+export default {
+    install(Vue) {
+        if (!installed) {
+            installed = true;
+            Vue.registerElement('MDBottomNavigation', () => BottomNavigation, {
+                model: {
+                    prop: 'selectedIndex',
+                    event: 'selectedIndexChange'
+                },
+                component: require('./component').default
+            });
+            Vue.registerElement('MDTabContentItem', () => TabContentItem, {});
+            Vue.registerElement('MDTabStripItem', () => TabStripItem, {});
+            Vue.registerElement('MDTabStrip', () => TabStrip, {});
+        }
+    }
+};
diff --git a/src/core/tab-navigation-base/tab-content-item/tab-content-item-common.ts b/src/core/tab-navigation-base/tab-content-item/tab-content-item-common.ts
@@ -5,7 +5,7 @@ import { TabNavigationBase } from '../tab-navigation-base';
 
 export const traceCategory = 'TabView';
 
-@CSSType('TabContentItem')
+@CSSType('MDTabContentItem')
 export abstract class TabContentItemBase extends ContentView implements TabContentItemDefinition, AddChildFromBuilder {
     public eachChild(callback: (child: View) => boolean) {
         if (this.content) {