Skip to content

Commit cde19cc

Browse files
author
Alexander Mai
committed
feat: added features for bottomsheet
* dismissOnDraggingDownSheet * added example on demo
1 parent 0fb8f3a commit cde19cc

File tree

5 files changed

+32
-3
lines changed

5 files changed

+32
-3
lines changed

demo/app/examples/bottomsheets-fragment.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<StackLayout xmlns:mdb="nativescript-material-button">
22
<mdb:Button id="bottomsheet1" text="bottomsheet" tap="{{ onTap }}"/>
33
<mdb:Button id="bottomsheet2" text="bottomsheet listview" tap="{{ onTap }}"/>
4+
<mdb:Button id="bottomsheet3" text="bottomsheet without drag to close" tap="{{ onTap }}"/>
45

56
<StackLayout backgroundColor="red" xmlns:mdb="nativescript-material-button" layoutChanged="onViewTestLayoutChanged">
67
<mdb:Button id="test1" text="test1"/>

demo/app/examples/example-page.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,19 @@ class Model {
105105
});
106106
break;
107107
}
108+
case 'bottomsheet3': {
109+
obj.showBottomSheet({
110+
view: 'examples/bottomsheetinner2-fragment',
111+
dismissOnDraggingDownSheet: false,
112+
context: {
113+
dataItems: this.dataItems
114+
},
115+
closeCallback: objId => {
116+
alert(`bottomsheet closed ${objId}`);
117+
}
118+
});
119+
break;
120+
}
108121
case 'alertdialog':
109122
const stack = new StackLayout();
110123
stack.orientation = 'horizontal';

src/bottomsheet/bottomsheet-common.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { View } from '@nativescript/core/ui/core/view';
2-
import { createViewFromEntry } from '@nativescript/core/ui/builder';
32
import { Frame } from '@nativescript/core/ui/frame';
43
import { EventData } from '@nativescript/core/data/observable';
54
import { eachDescendant, ViewBase } from '@nativescript/core/ui/core/view-base';
5+
import { Builder } from "@nativescript/core";
66

77
declare module '@nativescript/core/ui/core/view/view' {
88
interface View {
@@ -36,6 +36,7 @@ export interface BottomSheetOptions {
3636
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.
3737
animated?: boolean; // An optional parameter specifying whether to show the sheet view with animation.
3838
dismissOnBackgroundTap?: boolean; // An optional parameter specifying whether to dismiss the sheet when clicking on background.
39+
dismissOnDraggingDownSheet?: boolean // An optional parameter specifying whether to disable dragging the sheet to dismiss.
3940
closeCallback?: Function; // A function that will be called when the view is closed. Any arguments provided when calling shownInBottomSheet.closeCallback will be available here.
4041
trackingScrollView?: string; // optional id of the scroll view to track
4142
transparent?: boolean // optional parameter to make the bottomsheet transparent
@@ -120,7 +121,7 @@ export abstract class ViewWithBottomSheetBase extends View {
120121
if (arguments.length === 0) {
121122
throw new Error('showModal without parameters is deprecated. Please call showModal on a view instance instead.');
122123
} else {
123-
const view = options.view instanceof View ? (options.view as ViewWithBottomSheetBase) : <ViewWithBottomSheetBase>createViewFromEntry({
124+
const view = options.view instanceof View ? (options.view as ViewWithBottomSheetBase) : <ViewWithBottomSheetBase>Builder.createViewFromEntry({
124125
moduleName: options.view as string
125126
});
126127

src/bottomsheet/bottomsheet.android.ts

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ function initializeBottomSheetDialogFragment() {
8686
class BottomSheetDialogFragmentImpl extends com.google.android.material.bottomsheet.BottomSheetDialogFragment {
8787
public owner: View;
8888
private _transparent: boolean;
89+
private _dismissOnDraggingDownSheet: boolean;
8990
// private _fullscreen: boolean;
9091
// private _stretched: boolean;
9192
private _shownCallback: () => void;
@@ -117,6 +118,7 @@ function initializeBottomSheetDialogFragment() {
117118
if (options.options) {
118119
const creationOptions = options.options;
119120
this._transparent = creationOptions.transparent;
121+
this._dismissOnDraggingDownSheet = creationOptions.dismissOnDraggingDownSheet;
120122
if (creationOptions.dismissOnBackgroundTap !== undefined) {
121123
dialog.setCanceledOnTouchOutside(creationOptions.dismissOnBackgroundTap);
122124
}
@@ -155,7 +157,18 @@ function initializeBottomSheetDialogFragment() {
155157
}, 0);
156158
}
157159

158-
160+
if (this._dismissOnDraggingDownSheet !== undefined) {
161+
const view = this.getDialog().findViewById(getId('design_bottom_sheet'));
162+
const behavior = com.google.android.material.bottomsheet.BottomSheetBehavior.from(view);
163+
// prevent hiding the bottom sheet by
164+
behavior.setHideable(this._dismissOnDraggingDownSheet);
165+
if(!this._dismissOnDraggingDownSheet) {
166+
// directly expand the bottom sheet after start
167+
behavior.setState(com.google.android.material.bottomsheet.BottomSheetBehavior.STATE_EXPANDED);
168+
// set to maximum possible value to prevent dragging the sheet between peek and expanded height
169+
behavior.setPeekHeight(java.lang.Integer.MAX_VALUE);
170+
}
171+
}
159172

160173
if (owner && !owner.isLoaded) {
161174
owner.callLoaded();

src/bottomsheet/bottomsheet.ios.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,7 @@ export class ViewWithBottomSheet extends ViewWithBottomSheetBase {
210210
bottomSheet.isScrimAccessibilityElement = true;
211211
bottomSheet.scrimAccessibilityLabel = 'close';
212212
bottomSheet.dismissOnBackgroundTap = options.dismissOnBackgroundTap !== false;
213+
bottomSheet.dismissOnDraggingDownSheet = options.dismissOnDraggingDownSheet !== false;
213214

214215
if (options.trackingScrollView) {
215216
const scrollView = this.getViewById(options.trackingScrollView);

0 commit comments

Comments
 (0)