Skip to content

Commit c66a4ce

Browse files
author
Alexander Mai
committed
fix (bottomsheet ios) correct resizing like on android version
* made ios bottomsheet always full width like the android version * fixed resizing of bottomsheet on rotating the screen * previously the size was only reduced, but not enlarged when rotating from portrait to landscape * fixed safe area sizes * fixed imports on demo app * added additional demo variants for bottomsheet to demo app for showing the correct handling of safe areas
1 parent 29ee31a commit c66a4ce

14 files changed

+154
-44
lines changed

‎demo/app/app.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import './bundle-config';
2-
import * as app from '@nativescript/core/application';
2+
import { Application } from '@nativescript/core';
33

44
import { installMixins, themer } from '@nativescript-community/ui-material-core';
55
import { install } from '@nativescript-community/ui-material-bottomsheet';
@@ -9,4 +9,4 @@ installMixins();
99
// themer.setPrimaryColor('red');
1010
// themer.setPrimaryColorVariant('#3cff0000');
1111

12-
app.run({ moduleName: 'app-root' });
12+
Application.run({ moduleName: 'app-root' });

‎demo/app/examples/bottomnavigationbar-fragment.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { BottomNavigationBar, TabPressedEventData, TabReselectedEventData, TabSelectedEventData } from '@nativescript-community/ui-material-bottomnavigationbar';
2-
import { EventData } from '@nativescript/core/ui/core/view';
2+
import { EventData } from '@nativescript/core';
33

44
export function onbottomNavigationBarLoaded(args: EventData): void {
55
const bottomNavigationBar = args.object as BottomNavigationBar;

‎demo/app/examples/bottomsheetinner1-fragment.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { EventData, View } from '@nativescript/core/ui/core/view';
1+
import { EventData, View } from '@nativescript/core';
22

33
// let closeCallback
44

‎demo/app/examples/bottomsheetinner2-fragment.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { EventData, View } from '@nativescript/core/ui/core/view';
2-
import { ItemEventData } from '@nativescript/core/ui/list-view/list-view';
1+
import { EventData, View, ItemEventData } from '@nativescript/core';
32

43
export function onTap(args: ItemEventData) {
54
const bindingContext = (args.object as View).bindingContext;

‎demo/app/examples/bottomsheetinner2-fragment.xml

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
<StackLayout
2-
xmlns:lv="nativescript-ui-listview"
3-
xmlns:mdcr="@nativescript-community/ui-material-ripple"
4-
>
5-
<ListView id="listview" height="200" items="{{ dataItems }}" itemTap="onTap" class="list-group" backgroundColor="transparent">
1+
<StackLayout xmlns:lv="nativescript-ui-listview" xmlns:mdcr="@nativescript-community/ui-material-ripple">
2+
<Label text="Please select a value" backgroundColor="lightgrey" class="p-10"></Label>
3+
<ListView id="listview" height="200" items="{{ dataItems }}" itemTap="onTap" class="list-group" backgroundColor="grey">
64
<ListView.itemTemplate>
75
<mdcr:Ripple class="list-group-item item-with-border">
86
<Label text="{{ title }}" textWrap="true" class="title"/>
97
</mdcr:Ripple>
108
</ListView.itemTemplate>
119
</ListView>
12-
</StackLayout>
10+
</StackLayout>

‎demo/app/examples/bottomsheetinner4-fragment.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<WebView id="webview" height="300" src="https://github.com/nativescript-community/ui-material-components/blob/master/packages/bottomsheet/README.md" backgroundColor="red" padding="0" margin="0"></WebView>

‎demo/app/examples/bottomsheets-fragment.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { View } from '@nativescript/core/ui/core/view';
1+
import { View } from '@nativescript/core';
22

33
export function onViewTestLayoutChanged(args) {
44
const view: View = <View>args.object;

‎demo/app/examples/bottomsheets-fragment.xml

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,23 @@
11
<StackLayout xmlns:mdb="@nativescript-community/ui-material-button">
2-
<mdb:Button id="bottomsheet1" text="bottomsheet" tap="{{ onTap }}"/>
3-
<mdb:Button id="bottomsheet2" text="bottomsheet listview" tap="{{ onTap }}"/>
4-
<mdb:Button id="bottomsheet3" text="bottomsheet without drag to close" tap="{{ onTap }}"/>
2+
<ScrollView>
3+
<StackLayout>
4+
<mdb:Button id="bottomsheet1none" text="bottomsheet buttons\nignoreSafeArea: none" tap="{{ onTap }}" textWrap="true"/>
5+
<mdb:Button id="bottomsheet1top" text="bottomsheet buttons\nignoreSafeArea: top (default)" tap="{{ onTap }}" textWrap="true"/>
6+
<mdb:Button id="bottomsheet1bottom" text="bottomsheet buttons\nignoreSafeArea: bottom" tap="{{ onTap }}" textWrap="true"/>
7+
<mdb:Button id="bottomsheet1both" text="bottomsheet buttons\nignoreSafeArea: both" tap="{{ onTap }}" textWrap="true"/>
8+
9+
<mdb:Button id="bottomsheet2" text="bottomsheet listview" tap="{{ onTap }}"/>
10+
<mdb:Button id="bottomsheet3" text="bottomsheet without drag to close" tap="{{ onTap }}"/>
11+
12+
<mdb:Button id="bottomsheet4none" text="bottomsheet webview\nignoreSafeArea: none" tap="{{ onTap }}" textWrap="true"/>
13+
<mdb:Button id="bottomsheet4top" text="bottomsheet webview\nignoreSafeArea: top (default)" tap="{{ onTap }}" textWrap="true"/>
14+
<mdb:Button id="bottomsheet4bottom" text="bottomsheet webview\nignoreSafeArea: bottom" tap="{{ onTap }}" textWrap="true"/>
15+
<mdb:Button id="bottomsheet4both" text="bottomsheet webview\nignoreSafeArea: both" tap="{{ onTap }}" textWrap="true"/>
16+
</StackLayout>
17+
</ScrollView>
518

619
<StackLayout backgroundColor="red" xmlns:mdb="@nativescript-community/ui-material-button" layoutChanged="onViewTestLayoutChanged">
720
<mdb:Button id="test1" text="test1"/>
821
<mdb:Button id="test2" text="test2"/>
922
</StackLayout>
10-
</StackLayout>
23+
</StackLayout>

‎demo/app/examples/dialogcustomview-fragment.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { EventData, View } from '@nativescript/core/ui/core/view';
2-
import { ItemEventData } from '@nativescript/core/ui/list-view/list-view';
1+
import { EventData, View, ItemEventData } from '@nativescript/core';
32

43
export function onTap(args: ItemEventData) {
54
const bindingContext = (args.object as View).bindingContext;

‎demo/app/examples/example-page.ts

Lines changed: 99 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
1-
import { NavigationButton } from '@nativescript/core/ui/action-bar/action-bar';
2-
import { EventData, Frame, View } from '@nativescript/core/ui/frame/frame';
1+
import { NavigationButton, EventData, Frame, View, ObservableArray, StackLayout, Label, Builder } from '@nativescript/core';
32
import { alert, AlertDialog, login, prompt } from '@nativescript-community/ui-material-dialogs';
4-
import { ObservableArray } from '@nativescript/core/data/observable-array/observable-array';
5-
const builder = require('@nativescript/core/ui/builder');
3+
64
// importing adds the View augmentation
75
import { BottomSheetOptions } from '@nativescript-community/ui-material-bottomsheet';
8-
import { StackLayout } from '@nativescript/core/ui/layouts/stack-layout/stack-layout';
96
import { ActivityIndicator } from '@nativescript-community/ui-material-activityindicator';
10-
import { Label } from '@nativescript/core/ui/label/label';
11-
import { Button } from '@nativescript/core/ui/button/button';
127

138
function getObjectClass(obj) {
149
if (typeof obj !== 'object' || obj === null) return false;
@@ -82,9 +77,47 @@ class Model {
8277
}).then(result => console.log('login result', result));
8378
break;
8479
}
85-
case 'bottomsheet1': {
80+
case 'bottomsheet1none': {
81+
obj.showBottomSheet({
82+
view: 'examples/bottomsheetinner1-fragment',
83+
ignoreBottomSafeArea: false,
84+
ignoreTopSafeArea: false,
85+
context: {},
86+
closeCallback: objId => {
87+
alert(`bottomsheet closed ${objId}`);
88+
}
89+
});
90+
break;
91+
}
92+
case 'bottomsheet1top': {
93+
obj.showBottomSheet({
94+
view: 'examples/bottomsheetinner1-fragment',
95+
ignoreBottomSafeArea: false,
96+
ignoreTopSafeArea: true,
97+
context: {},
98+
closeCallback: objId => {
99+
alert(`bottomsheet closed ${objId}`);
100+
}
101+
});
102+
break;
103+
}
104+
case 'bottomsheet1bottom': {
105+
obj.showBottomSheet({
106+
view: 'examples/bottomsheetinner1-fragment',
107+
ignoreBottomSafeArea: true,
108+
ignoreTopSafeArea: false,
109+
context: {},
110+
closeCallback: objId => {
111+
alert(`bottomsheet closed ${objId}`);
112+
}
113+
});
114+
break;
115+
}
116+
case 'bottomsheet1both': {
86117
obj.showBottomSheet({
87118
view: 'examples/bottomsheetinner1-fragment',
119+
ignoreBottomSafeArea: true,
120+
ignoreTopSafeArea: true,
88121
context: {},
89122
closeCallback: objId => {
90123
alert(`bottomsheet closed ${objId}`);
@@ -118,6 +151,62 @@ class Model {
118151
});
119152
break;
120153
}
154+
case 'bottomsheet4none': {
155+
obj.showBottomSheet({
156+
view: 'examples/bottomsheetinner4-fragment',
157+
trackingScrollView: 'webview',
158+
dismissOnDraggingDownSheet: false,
159+
ignoreBottomSafeArea: false,
160+
ignoreTopSafeArea: false,
161+
context: {},
162+
closeCallback: objId => {
163+
alert(`bottomsheet closed ${objId}`);
164+
}
165+
});
166+
break;
167+
}
168+
case 'bottomsheet4top': {
169+
obj.showBottomSheet({
170+
view: 'examples/bottomsheetinner4-fragment',
171+
trackingScrollView: 'webview',
172+
dismissOnDraggingDownSheet: false,
173+
ignoreBottomSafeArea: false,
174+
ignoreTopSafeArea: true,
175+
context: {},
176+
closeCallback: objId => {
177+
alert(`bottomsheet closed ${objId}`);
178+
}
179+
});
180+
break;
181+
}
182+
case 'bottomsheet4bottom': {
183+
obj.showBottomSheet({
184+
view: 'examples/bottomsheetinner4-fragment',
185+
trackingScrollView: 'webview',
186+
dismissOnDraggingDownSheet: false,
187+
ignoreBottomSafeArea: true,
188+
ignoreTopSafeArea: false,
189+
context: {},
190+
closeCallback: objId => {
191+
alert(`bottomsheet closed ${objId}`);
192+
}
193+
});
194+
break;
195+
}
196+
case 'bottomsheet4both': {
197+
obj.showBottomSheet({
198+
view: 'examples/bottomsheetinner4-fragment',
199+
trackingScrollView: 'webview',
200+
dismissOnDraggingDownSheet: false,
201+
ignoreBottomSafeArea: true,
202+
ignoreTopSafeArea: true,
203+
context: {},
204+
closeCallback: objId => {
205+
alert(`bottomsheet closed ${objId}`);
206+
}
207+
});
208+
break;
209+
}
121210
case 'alertdialog':
122211
const stack = new StackLayout();
123212
stack.orientation = 'horizontal';
@@ -171,10 +260,10 @@ export function onNavigatingTo(args) {
171260
// some-fragment.xml registered via bundle-config.ts, because it's postfixed with "fragment"
172261
// so it already exist in bundle.js as module
173262
console.log('loading xml', `./${exampleTitle}-fragment.xml`);
174-
innerComponent = builder.parse(require(`./${exampleTitle}-fragment.xml`) as string, theModule);
263+
innerComponent = Builder.parse(require(`./${exampleTitle}-fragment.xml`) as string, theModule);
175264
} else {
176265
console.log('loading xml', `${__dirname}/${exampleTitle}-fragment.xml`);
177-
innerComponent = builder.load(`${__dirname}/${exampleTitle}-fragment.xml`, theModule);
266+
innerComponent = Builder.load(`${__dirname}/${exampleTitle}-fragment.xml`, theModule);
178267
}
179268

180269
container.addChild(innerComponent);

0 commit comments

Comments
 (0)