Skip to content

Commit 02e357b

Browse files
farfromrefugfarfromrefug
authored
Merge pull request #277 from alexander-mai/bottomsheet-ios-full-width
fix (bottomsheet ios) correct resizing like on android version
2 parents 41c9ea7 + 1f78bad commit 02e357b

16 files changed

+171
-46
lines changed

‎demo-vue/app.webpack.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ module.exports = (env, params = {}) => {
149149
exclude: /\.module\.scss$/,
150150
use: [
151151
{
152-
loader: '@nativescript/webpack/helpers/css2json-loader',
152+
loader: '@nativescript/webpack/dist/loaders/css2json-loader',
153153
options: { useForImports: true }
154154
},
155155
{

‎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-common.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export abstract class ViewWithBottomSheetBase extends View {
4646
eventName: shownInBottomSheetEvent,
4747
object: this,
4848
context: this._bottomSheetContext,
49-
closeCallback: this._closeBottomSheetCallback,
49+
closeCallback: this._closeBottomSheetCallback
5050
};
5151

5252
this.notify(args);
@@ -114,7 +114,7 @@ export abstract class ViewWithBottomSheetBase extends View {
114114
eventName: showingInBottomSheetEvent,
115115
object: this,
116116
context: this._bottomSheetContext,
117-
closeCallback: this._closeBottomSheetCallback,
117+
closeCallback: this._closeBottomSheetCallback
118118
};
119119
this.notify(args);
120120
}
@@ -138,7 +138,7 @@ export abstract class ViewWithBottomSheetBase extends View {
138138
options.view instanceof View
139139
? (options.view as ViewWithBottomSheetBase)
140140
: (Builder.createViewFromEntry({
141-
moduleName: options.view as string,
141+
moduleName: options.view as string
142142
}) as ViewWithBottomSheetBase);
143143
view._showNativeBottomSheet(this, options);
144144
return view;

‎src/bottomsheet/bottomsheet.ios.ts

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import { IOSHelper, Page, Trace, Utils, View, fromObject } from '@nativescript/core';
1+
import { Application, IOSHelper, Page, Screen, Trace, Utils, View, fromObject } from '@nativescript/core';
2+
import { iOSNativeHelper } from '@nativescript/core/utils';
3+
import { iosIgnoreSafeAreaProperty } from '@nativescript/core/ui/core/view/view-common';
24
import { applyMixins } from '@nativescript-community/ui-material-core';
35
import { BottomSheetOptions } from './bottomsheet';
46
import { ViewWithBottomSheetBase } from './bottomsheet-common';
@@ -92,11 +94,11 @@ function layoutView(controller: IUILayoutViewController, owner: View): void {
9294
const marginLeft = owner.effectiveMarginLeft + position.left;
9395
const marginRight = owner.effectiveMarginRight;
9496
const top = marginTop + position.top;
95-
const width = owner.getMeasuredWidth();
97+
const width = Screen.mainScreen.widthPixels;
9698
const height = owner.getMeasuredHeight();
97-
View.layoutChild(null, owner, position.left, top, position.left + width + marginLeft + marginRight, position.top + height + marginBottom);
99+
View.layoutChild(null, owner, marginLeft, top, width - marginLeft - marginRight, position.top + height + marginBottom);
98100

99-
const effectiveWidth = width + marginLeft + marginRight;
101+
const effectiveWidth = width;
100102
let effectiveHeight = height + top + marginBottom;
101103
if (controller.ignoreTopSafeArea || controller.ignoreBottomSafeArea) {
102104
const frame = CGRectMake(
@@ -113,14 +115,40 @@ function layoutView(controller: IUILayoutViewController, owner: View): void {
113115

114116
const adjustedPosition = startPos;
115117

118+
const orientation = UIDevice.currentDevice.orientation;
119+
const isLandscape = Application.orientation() === 'landscape';
120+
121+
// there are still some issues in landscape Right but they seem to come from N
122+
123+
owner.iosIgnoreSafeArea = !isLandscape;
116124
if (controller.ignoreTopSafeArea) {
117-
const delta = safeAreaPosition.top - fullscreenPosition.top;
125+
let key = 'top';
126+
let oppositeKey = 'bottom';
127+
if (orientation === UIDeviceOrientation.LandscapeLeft) {
128+
key = 'left';
129+
oppositeKey = 'right';
130+
} else if (orientation === UIDeviceOrientation.LandscapeRight) {
131+
key = 'right';
132+
oppositeKey = 'left';
133+
} else if (orientation === UIDeviceOrientation.PortraitUpsideDown) {
134+
key = 'bottom';
135+
oppositeKey = 'top';
136+
}
137+
const delta = safeAreaPosition[key] - fullscreenPosition[key];
118138
effectiveHeight -= delta;
119-
adjustedPosition.bottom -= delta;
120-
adjustedPosition.top -= delta;
139+
adjustedPosition[oppositeKey] -= delta;
140+
adjustedPosition[key] -= delta;
121141
}
122142
if (controller.ignoreBottomSafeArea) {
123-
const delta = fullscreenPosition.bottom - safeAreaPosition.bottom;
143+
let key = 'bottom';
144+
if (orientation === UIDeviceOrientation.LandscapeLeft) {
145+
key = 'right';
146+
} else if (orientation === UIDeviceOrientation.LandscapeRight) {
147+
key = 'left';
148+
} else if (orientation === UIDeviceOrientation.PortraitUpsideDown) {
149+
key = 'top';
150+
}
151+
const delta = fullscreenPosition[key] - safeAreaPosition[key];
124152
effectiveHeight -= delta;
125153
}
126154
owner.nativeViewProtected.frame = CGRectMake(

0 commit comments

Comments
 (0)