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);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Observable, Page, PropertyChangeData } from '@nativescript/core/ui/page';
1+
import { Observable, Page, PropertyChangeData } from '@nativescript/core';
22
import { Progress } from '@nativescript-community/ui-material-progress';
33

44
export function onNavigatingTo(args) {

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { Observable, PropertyChangeData } from '@nativescript/core/ui/core/view';
2-
import { Page } from '@nativescript/core/ui/page';
1+
import { Observable, PropertyChangeData, Page } from '@nativescript/core';
32
import { Slider } from '@nativescript-community/ui-material-slider';
43

54
export function onNavigatingTo(args) {

‎demo/app/home/home-view-model.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { Frame } from '@nativescript/core/ui/frame/frame';
2-
import { ItemEventData } from '@nativescript/core/ui/list-view';
1+
import { Frame, ItemEventData } from '@nativescript/core';
32
const examples = ['buttons', 'cardview', 'ripple', 'textfields', 'textviews', 'sliders', 'progress', 'activityindicators', 'dialogs', 'bottomsheets', 'mixins', 'snackbar', 'bottomnavigationbar'];
43

54
export class ViewModel {

‎src/bottomsheet/bottomsheet.ios.ts

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { IOSHelper, Page, Trace, Utils, View, fromObject } from '@nativescript/core';
1+
import { IOSHelper, Page, Trace, Utils, View, fromObject, Screen } from '@nativescript/core';
22
import { applyMixins } from '@nativescript-community/ui-material-core';
33
import { BottomSheetOptions } from './bottomsheet';
44
import { ViewWithBottomSheetBase } from './bottomsheet-common';
@@ -92,11 +92,11 @@ function layoutView(controller: IUILayoutViewController, owner: View): void {
9292
const marginLeft = owner.effectiveMarginLeft + position.left;
9393
const marginRight = owner.effectiveMarginRight;
9494
const top = marginTop + position.top;
95-
const width = owner.getMeasuredWidth();
95+
const width = Screen.mainScreen.widthPixels;
9696
const height = owner.getMeasuredHeight();
97-
View.layoutChild(null, owner, position.left, top, position.left + width + marginLeft + marginRight, position.top + height + marginBottom);
97+
View.layoutChild(null, owner, marginLeft, top, width - marginLeft - marginRight, position.top + height + marginBottom);
9898

99-
const effectiveWidth = width + marginLeft + marginRight;
99+
const effectiveWidth = width;
100100
let effectiveHeight = height + top + marginBottom;
101101
if (controller.ignoreTopSafeArea || controller.ignoreBottomSafeArea) {
102102
const frame = CGRectMake(
@@ -113,15 +113,28 @@ function layoutView(controller: IUILayoutViewController, owner: View): void {
113113

114114
const adjustedPosition = startPos;
115115

116+
const topDelta = safeAreaPosition.top - fullscreenPosition.top;
117+
// move content upwards, because safearea is handled in this view and the child view
118+
adjustedPosition.top -= topDelta;
119+
console.log("safeAreaPosition.top, fullscreenPosition.top", safeAreaPosition.top, fullscreenPosition.top);
120+
console.log("topDelta", topDelta);
121+
122+
const bottomDelta = fullscreenPosition.bottom - safeAreaPosition.bottom;
123+
// extend background behind bottom bar on landscape
124+
adjustedPosition.bottom += Math.max(bottomDelta - topDelta, 0);
125+
console.log("Math.max(bottomDelta - topDelta, 0)", Math.max(bottomDelta - topDelta, 0));
126+
console.log("safeAreaPosition.bottom, fullscreenPosition.bottom", safeAreaPosition.bottom, fullscreenPosition.bottom);
127+
console.log("bottom delta", bottomDelta);
128+
129+
adjustedPosition.right = adjustedPosition.right - adjustedPosition.left;
130+
adjustedPosition.left = 0;
131+
116132
if (controller.ignoreTopSafeArea) {
117-
const delta = safeAreaPosition.top - fullscreenPosition.top;
118-
effectiveHeight -= delta;
119-
adjustedPosition.bottom -= delta;
120-
adjustedPosition.top -= delta;
133+
effectiveHeight -= topDelta;
134+
adjustedPosition.top -= topDelta;
121135
}
122136
if (controller.ignoreBottomSafeArea) {
123-
const delta = fullscreenPosition.bottom - safeAreaPosition.bottom;
124-
effectiveHeight -= delta;
137+
effectiveHeight -= bottomDelta;
125138
}
126139
owner.nativeViewProtected.frame = CGRectMake(
127140
Utils.layout.toDeviceIndependentPixels(adjustedPosition.left),

0 commit comments

Comments
 (0)