fix(snackbar): fixed view option and added anchorView #243

Author: farfromrefug

demo-vue/app/examples/SnackBar.vue

@@ -9,11 +9,11 @@
                     <StackLayout id="innerView" ref="innerView" backgroundColor="gray">
                         <MDButton id="show_snack" text="show snack" @tap="onTap" />
                         <MDButton id="show_snack_action" text="show snack action" @tap="onTap" />
-                        <MDButton id="show_snack_action_color" text="show snack action color" @tap="onTap" />
+                        <MDButton ref="show_snack_action_color" id="show_snack_action_color" text="show snack action color" @tap="onTap" />
                     </StackLayout>
                 <!-- </Page> -->
             <!-- </Frame> -->
-            <MDBottomNavigationBar row="1" activeColor="red">
+            <MDBottomNavigationBar row="1" activeColor="red" ref="bottomBar">
                 <MDBottomNavigationTab title="First" icon="res://ic_home" activeColor="green" />
                 <MDBottomNavigationTab title="Second" icon="res://ic_view_list" isSelectable="false" />
                 <MDBottomNavigationTab title="Third" icon="res://ic_menu" inactiveColor="brown" />
@@ -51,7 +51,7 @@ export default Vue.extend({
             console.log('onTap', objId, obj);
             switch (objId) {
                 case 'show_snack': {
-                    showSnack({ message: 'this is test snack!', textColor: 'yellow', view: this.$refs.innerView.nativeView });
+                    showSnack({ message: 'this is test snack!', textColor: 'yellow', anchorView: this.$refs.bottomBar.nativeView });
                     break;
                 }
                 case 'show_snack_action': {

src/snackbar/snackbar-common.ts

@@ -43,11 +43,16 @@ export interface SnackBarOptions {
     isRTL?: boolean;
 
     /**
-     * *Android Only*
      * The View to which the snackbar will be attached. Useful with modals.
      * Default to Frame.topmost().currentPage
      */
     view?: View;
+
+    /**
+     * The view you want to "anchor the snack above".
+     * The snackbar will appear above that view
+     */
+    anchorView?: View;
 }
 
 export enum DismissReasons {

src/snackbar/snackbar.android.ts

@@ -54,31 +54,28 @@ export class SnackBar extends SnackBarBase {
         }
         const page = attachView instanceof Page ? attachView : attachView.page;
         let nView = (page.nativeViewProtected as android.view.View).getParent();
-        if (page.hasActionBar) {
-            nView = nView.getParent();
-        }
         let nCoordinatorLayout: androidx.coordinatorlayout.widget.CoordinatorLayout = (page as any).nCoordinatorLayout;
         if (!nCoordinatorLayout && !(nView instanceof androidx.coordinatorlayout.widget.CoordinatorLayout) && nView instanceof android.view.ViewGroup) {
             nCoordinatorLayout = new androidx.coordinatorlayout.widget.CoordinatorLayout(attachView._context);
 
             if (options.view) {
                 const nAttachedView = options.view.nativeViewProtected as android.view.View;
                 const params = new android.widget.FrameLayout.LayoutParams(nAttachedView.getWidth(), nAttachedView.getHeight());
-                const myArray = Array.create('int', 2);
-                nView.getLocationOnScreen(myArray);
-                const otherArray = Array.create('int', 2);
-                options.view.nativeViewProtected.getLocationOnScreen(otherArray);
-
-                params.topMargin = otherArray[1] - myArray[1];
-                (nView as any).addView(nCoordinatorLayout, params);
+                params.gravity = android.view.Gravity.BOTTOM;
+                const locationArray = Array.create('int', 2);
+                options.view.nativeViewProtected.getLocationOnScreen(locationArray);
+                params.bottomMargin = nView.getHeight() - locationArray[1] - nAttachedView.getHeight();
+                nView.addView(nCoordinatorLayout, params);
             } else {
                 (nView as any).addView(nCoordinatorLayout, new android.view.ViewGroup.LayoutParams(android.view.ViewGroup.LayoutParams.MATCH_PARENT, android.view.ViewGroup.LayoutParams.MATCH_PARENT));
             }
 
             nView = nCoordinatorLayout;
         }
         this._snackbar = com.google.android.material.snackbar.Snackbar.make(nView as any, options.message, options.hideDelay);
-
+        if (options.anchorView) {
+            this._snackbar.setAnchorView(options.anchorView.nativeViewProtected);
+        }
         // this._snackbar.setText(options.message);
         // this._snackbar.setDuration(options.hideDelay);
 

src/snackbar/snackbar.ios.ts

@@ -54,7 +54,6 @@ export class SnackBar extends SnackBarBase {
                 button.inkColor = getRippleColor(options.actionTextColor);
             });
 
-            // message.buttonTextColor =
         }
 
         if (options.backgroundColor && Color.isValid(options.backgroundColor)) {
@@ -77,11 +76,17 @@ export class SnackBar extends SnackBarBase {
             nAttachedView = viewController.view;
         }
 
-
         if (nAttachedView) {
-            SnackBar._snackbarManager.setPresentationHostView(nAttachedView);
+            message.presentationHostViewOverride = nAttachedView;
+        }
+
+        if (options.anchorView) {
+            const totalHeight = nAttachedView? (nAttachedView.frame.origin.y + nAttachedView.frame.size.height): UIApplication.sharedApplication.keyWindow.rootViewController.view.bounds.size.height;
+            const  result = (options.anchorView.nativeViewProtected as UIView).convertPointToView(CGPointZero, nAttachedView);
+            SnackBar._snackbarManager.setBottomOffset(totalHeight  - result.y );
         } else {
-            SnackBar._snackbarManager.setPresentationHostView(null);
+            SnackBar._snackbarManager.setBottomOffset(0);
+
         }
     }