Merge pull request #110 from alexander-mai/master

feat: added features for bottomsheet

Author: farfromrefug

demo/app/examples/bottomsheets-fragment.xml

@@ -1,6 +1,7 @@
 <StackLayout xmlns:mdb="nativescript-material-button">
     <mdb:Button id="bottomsheet1" text="bottomsheet" tap="{{ onTap }}"/>
     <mdb:Button id="bottomsheet2" text="bottomsheet listview" tap="{{ onTap }}"/>
+    <mdb:Button id="bottomsheet3" text="bottomsheet without drag to close" tap="{{ onTap }}"/>
 
     <StackLayout backgroundColor="red" xmlns:mdb="nativescript-material-button"  layoutChanged="onViewTestLayoutChanged">
         <mdb:Button id="test1" text="test1"/>

demo/app/examples/example-page.ts

@@ -105,6 +105,19 @@ class Model {
                 });
                 break;
             }
+            case 'bottomsheet3': {
+                obj.showBottomSheet({
+                    view: 'examples/bottomsheetinner2-fragment',
+                    dismissOnDraggingDownSheet: false,
+                    context: {
+                        dataItems: this.dataItems
+                    },
+                    closeCallback: objId => {
+                        alert(`bottomsheet closed ${objId}`);
+                    }
+                });
+                break;
+            }
             case 'alertdialog':
                 const stack = new StackLayout();
                 stack.orientation = 'horizontal';

src/bottomsheet/bottomsheet-common.ts

@@ -1,9 +1,9 @@
 import { View } from '@nativescript/core/ui/core/view';
-import { createViewFromEntry } from '@nativescript/core/ui/builder';
 import { Frame } from '@nativescript/core/ui/frame';
 import { EventData } from '@nativescript/core/data/observable';
 import { eachDescendant, ViewBase } from '@nativescript/core/ui/core/view-base';
 import { getSystemCssClasses, MODAL_ROOT_VIEW_CSS_CLASS } from '@nativescript/core/css/system-classes';
+import { Builder } from "@nativescript/core";
 
 declare module '@nativescript/core/ui/core/view/view' {
     interface View {
@@ -37,6 +37,7 @@ export interface BottomSheetOptions {
     context?: any; // Any context you want to pass to the view shown in bottom sheet. This same context will be available in the arguments of the shownInBottomSheet event handler.
     animated?: boolean; // An optional parameter specifying whether to show the sheet view with animation.
     dismissOnBackgroundTap?: boolean; // An optional parameter specifying whether to dismiss the sheet when clicking on background.
+    dismissOnDraggingDownSheet?: boolean; // An optional parameter specifying whether to disable dragging the sheet to dismiss.
     closeCallback?: Function; //  A function that will be called when the view is closed. Any arguments provided when calling shownInBottomSheet.closeCallback will be available here.
     trackingScrollView?: string; // optional id of the scroll view to track
     transparent?: boolean; // optional parameter to make the bottomsheet transparent
@@ -126,7 +127,7 @@ export abstract class ViewWithBottomSheetBase extends View {
         if (arguments.length === 0) {
             throw new Error('showModal without parameters is deprecated. Please call showModal on a view instance instead.');
         } else {
-            const view = options.view instanceof View ? (options.view as ViewWithBottomSheetBase) : <ViewWithBottomSheetBase>createViewFromEntry({
+            const view = options.view instanceof View ? (options.view as ViewWithBottomSheetBase) : <ViewWithBottomSheetBase>Builder.createViewFromEntry({
                           moduleName: options.view as string
                       });
             view.cssClasses.add(MODAL_ROOT_VIEW_CSS_CLASS);

src/bottomsheet/bottomsheet.android.ts

@@ -86,6 +86,7 @@ function initializeBottomSheetDialogFragment() {
     class BottomSheetDialogFragmentImpl extends com.google.android.material.bottomsheet.BottomSheetDialogFragment {
         public owner: View;
         private _transparent: boolean;
+        private _dismissOnDraggingDownSheet: boolean;
         // private _fullscreen: boolean;
         // private _stretched: boolean;
         private _shownCallback: () => void;
@@ -117,6 +118,7 @@ function initializeBottomSheetDialogFragment() {
             if (options.options) {
                 const creationOptions = options.options;
                 this._transparent = creationOptions.transparent;
+                this._dismissOnDraggingDownSheet = creationOptions.dismissOnDraggingDownSheet !== false;
                 if (creationOptions.dismissOnBackgroundTap !== undefined) {
                     dialog.setCanceledOnTouchOutside(creationOptions.dismissOnBackgroundTap);
                 }
@@ -155,7 +157,18 @@ function initializeBottomSheetDialogFragment() {
                 }, 0);
             }
 
-            
+            if (this._dismissOnDraggingDownSheet) {
+                const view = this.getDialog().findViewById(getId('design_bottom_sheet'));
+                const behavior = com.google.android.material.bottomsheet.BottomSheetBehavior.from(view);
+                // prevent hiding the bottom sheet by
+                behavior.setHideable(this._dismissOnDraggingDownSheet);
+                if(!this._dismissOnDraggingDownSheet) {
+                    // directly expand the bottom sheet after start
+                    behavior.setState(com.google.android.material.bottomsheet.BottomSheetBehavior.STATE_EXPANDED);
+                    // set to maximum possible value to prevent dragging the sheet between peek and expanded height
+                    behavior.setPeekHeight(java.lang.Integer.MAX_VALUE);
+                }
+            }
 
             if (owner && !owner.isLoaded) {
                 owner.callLoaded();

src/bottomsheet/bottomsheet.ios.ts

@@ -374,6 +374,7 @@ export class ViewWithBottomSheet extends ViewWithBottomSheetBase {
         bottomSheet.isScrimAccessibilityElement = true;
         bottomSheet.scrimAccessibilityLabel = 'close';
         bottomSheet.dismissOnBackgroundTap = options.dismissOnBackgroundTap !== false;
+        bottomSheet.dismissOnDraggingDownSheet = options.dismissOnDraggingDownSheet !== false;
 
         if (options.trackingScrollView) {
             const scrollView = this.getViewById(options.trackingScrollView);