Skip to content

Commit 0138873

Browse files
ADjenkovSvetoslavTsenov
ADjenkov
authored and
SvetoslavTsenov
committed
feat(modal): introduce stretched param to showModal method (NativeScript#5496)
* fix-next(ios-modal-view): force stretch alignment * feat(modal): introduce stretched param to showModal method * test(modal-view): add modal view stretched test
1 parent 6509efa commit 0138873

File tree

7 files changed

+39
-14
lines changed

7 files changed

+39
-14
lines changed

‎apps/app/ui-tests-app/modal-view/login-page.xml

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<Page xmlns="http://schemas.nativescript.org/tns.xsd" shownModally="onShownModally"
2-
loaded="onLoaded" unloaded="onUnloaded" backgroundColor="Red"
3-
horizontalAlignment="center" verticalAlignment="middle">
2+
loaded="onLoaded" unloaded="onUnloaded" backgroundColor="Red">
43
<StackLayout backgroundColor="PaleGreen" margin="10">
54
<TextField hint="username" id="username" text="username"/>
65
<TextField hint="password" id="password" text="password" secure="true"/>

‎apps/app/ui-tests-app/modal-view/modal-view.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,15 @@ export function onTap(args) {
1010
label.text = username + "/" + password;
1111
}, fullscreen);
1212
}
13+
14+
export function onTapStretched(args) {
15+
const page = <Page>args.object.page;
16+
const label = page.getViewById<Label>("label");
17+
var fullscreen = false;
18+
var stretched = true;
19+
20+
page.showModal("ui-tests-app/modal-view/login-page", "context", function (username: string, password: string) {
21+
console.log(username + "/" + password);
22+
label.text = username + "/" + password;
23+
}, fullscreen, false, stretched);
24+
}

‎apps/app/ui-tests-app/modal-view/modal-view.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<StackLayout backgroundColor="PaleGreen">
33
<Button text="Login (pop-up)" tap="onTap" />
44
<Button text="Login (full-screen)" tap="onTap" />
5+
<Button text="Login (pop-up-stretched)" tap="onTapStretched" />
56
<Label id="label" text="Anonymous"/>
67
</StackLayout>
78
</Page>

‎tns-core-modules/ui/core/view/view-common.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -214,11 +214,12 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
214214
const closeCallback: Function = arguments[2];
215215
const fullscreen: boolean = arguments[3];
216216
const animated = arguments[4];
217+
const stretched = arguments[5];
217218

218219
const view: ViewDefinition = firstAgrument instanceof ViewCommon
219220
? firstAgrument : createViewFromEntry({ moduleName: firstAgrument });
220221

221-
(<ViewCommon>view)._showNativeModalView(this, context, closeCallback, fullscreen, animated);
222+
(<ViewCommon>view)._showNativeModalView(this, context, closeCallback, fullscreen, animated, stretched);
222223
return view;
223224
}
224225
}
@@ -239,7 +240,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
239240
return this._modal;
240241
}
241242

242-
protected _showNativeModalView(parent: ViewCommon, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean) {
243+
protected _showNativeModalView(parent: ViewCommon, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean) {
243244
_rootModalViews.push(this);
244245

245246
parent._modal = this;

‎tns-core-modules/ui/core/view/view.android.ts

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ let Dialog: android.app.Dialog;
3838
interface DialogOptions {
3939
owner: View;
4040
fullscreen: boolean;
41+
stretched: boolean;
4142
shownCallback: () => void;
4243
dismissCallback: () => void;
4344
}
@@ -123,6 +124,7 @@ function initializeDialogFragment() {
123124
class DialogFragmentImpl extends android.app.DialogFragment {
124125
public owner: View;
125126
private _fullscreen: boolean;
127+
private _stretched: boolean;
126128
private _shownCallback: () => void;
127129
private _dismissCallback: () => void;
128130

@@ -136,17 +138,21 @@ function initializeDialogFragment() {
136138
const options = getModalOptions(ownerId);
137139
this.owner = options.owner;
138140
this._fullscreen = options.fullscreen;
141+
this._stretched = options.stretched;
139142
this._dismissCallback = options.dismissCallback;
140143
this._shownCallback = options.shownCallback;
141144
this.owner._dialogFragment = this;
142145
this.setStyle(android.app.DialogFragment.STYLE_NO_TITLE, 0);
143-
146+
144147
const dialog = new DialogImpl(this, this.getActivity(), this.getTheme());
145-
148+
146149
// do not override alignment unless fullscreen modal will be shown;
147150
// otherwise we might break component-level layout:
148151
// https://github.com/NativeScript/NativeScript/issues/5392
149-
if (this._fullscreen) {
152+
if (!this._fullscreen && !this._stretched) {
153+
this.owner.horizontalAlignment = "center";
154+
this.owner.verticalAlignment = "middle";
155+
} else {
150156
this.owner.horizontalAlignment = "stretch";
151157
this.owner.verticalAlignment = "stretch";
152158
}
@@ -179,7 +185,7 @@ function initializeDialogFragment() {
179185

180186
this._shownCallback();
181187
}
182-
188+
183189
public onDismiss(dialog: android.content.IDialogInterface): void {
184190
super.onDismiss(dialog);
185191
const manager = this.getFragmentManager();
@@ -455,8 +461,8 @@ export class View extends ViewCommon {
455461
return result | (childMeasuredState & layout.MEASURED_STATE_MASK);
456462
}
457463

458-
protected _showNativeModalView(parent: View, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean) {
459-
super._showNativeModalView(parent, context, closeCallback, fullscreen);
464+
protected _showNativeModalView(parent: View, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean) {
465+
super._showNativeModalView(parent, context, closeCallback, fullscreen, stretched);
460466
if (!this.backgroundColor) {
461467
this.backgroundColor = new Color("White");
462468
}
@@ -471,6 +477,7 @@ export class View extends ViewCommon {
471477
const dialogOptions: DialogOptions = {
472478
owner: this,
473479
fullscreen: !!fullscreen,
480+
stretched: !!stretched,
474481
shownCallback: () => this._raiseShownModallyEvent(),
475482
dismissCallback: () => this.closeModal()
476483
}

‎tns-core-modules/ui/core/view/view.d.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -498,17 +498,19 @@ export abstract class View extends ViewBase {
498498
* @param closeCallback - A function that will be called when the view is closed.
499499
* Any arguments provided when calling ShownModallyData.closeCallback will be available here.
500500
* @param fullscreen - An optional parameter specifying whether to show the modal page in full-screen mode.
501+
* @param stretched - An optional parameter specifying whether to stretch the modal page when not in full-screen mode.
501502
*/
502-
showModal(moduleName: string, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean): View;
503+
showModal(moduleName: string, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean): View;
503504

504505
/**
505506
* Shows the view passed as parameter as a modal view.
506507
* @param view - View instance to be shown modally.
507508
* @param context - Any context you want to pass to the modally shown view. This same context will be available in the arguments of the shownModally event handler.
508509
* @param closeCallback - A function that will be called when the view is closed. Any arguments provided when calling ShownModallyData.closeCallback will be available here.
509510
* @param fullscreen - An optional parameter specifying whether to show the modal view in full-screen mode.
511+
* @param stretched - An optional parameter specifying whether to stretch the modal page when not in full-screen mode.
510512
*/
511-
showModal(view: View, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean): View;
513+
showModal(view: View, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean): View;
512514

513515
/**
514516
* Deprecated. Showing view as modal is deprecated.

‎tns-core-modules/ui/core/view/view.ios.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -311,10 +311,10 @@ export class View extends ViewCommon {
311311

312312
return view;
313313
}
314-
protected _showNativeModalView(parent: View, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean) {
314+
protected _showNativeModalView(parent: View, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean) {
315315
let parentWithController = this.getParentWithViewController(parent);
316316

317-
super._showNativeModalView(parentWithController, context, closeCallback, fullscreen);
317+
super._showNativeModalView(parentWithController, context, closeCallback, fullscreen, stretched);
318318
let controller = this.viewController;
319319
if (!controller) {
320320
controller = ios.UILayoutViewController.initWithOwner(new WeakRef(this));
@@ -334,6 +334,9 @@ export class View extends ViewCommon {
334334
controller.modalPresentationStyle = UIModalPresentationStyle.FormSheet;
335335
}
336336

337+
this.horizontalAlignment = "stretch";
338+
this.verticalAlignment = "stretch";
339+
337340
this._raiseShowingModallyEvent();
338341
animated = animated === undefined ? true : !!animated;
339342
(<any>controller).animated = animated;

0 commit comments

Comments
 (0)