javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 19:26:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(modal): introduce stretched param to showModal method (#5496)

Browse Source 
* fix-next(ios-modal-view): force stretch alignment

* feat(modal): introduce stretched param to showModal method

* test(modal-view): add modal view stretched test
This commit is contained in:
Alexander Djenkov
2018-03-07 18:17:52 +02:00
committed by Svetoslav
parent 6509efa430
commit 0138873ee3
7 changed files with 39 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/app/ui-tests-app/modal-view/login-page.xml
View File

@ -1,6 +1,5 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" shownModally="onShownModally"
loaded="onLoaded" unloaded="onUnloaded" backgroundColor="Red"
horizontalAlignment="center" verticalAlignment="middle">
loaded="onLoaded" unloaded="onUnloaded" backgroundColor="Red">
<StackLayout backgroundColor="PaleGreen" margin="10">
<TextField hint="username" id="username" text="username"/>
<TextField hint="password" id="password" text="password" secure="true"/>

12
apps/app/ui-tests-app/modal-view/modal-view.ts
View File

@ -10,3 +10,15 @@ export function onTap(args) {
label.text = username + "/" + password;
}, fullscreen);
}
export function onTapStretched(args) {
const page = <Page>args.object.page;
const label = page.getViewById<Label>("label");
var fullscreen = false;
var stretched = true;
page.showModal("ui-tests-app/modal-view/login-page", "context", function (username: string, password: string) {
console.log(username + "/" + password);
label.text = username + "/" + password;
}, fullscreen, false, stretched);
}

1
apps/app/ui-tests-app/modal-view/modal-view.xml
View File

@ -2,6 +2,7 @@
<StackLayout backgroundColor="PaleGreen">
<Button text="Login (pop-up)" tap="onTap" />
<Button text="Login (full-screen)" tap="onTap" />
<Button text="Login (pop-up-stretched)" tap="onTapStretched" />
<Label id="label" text="Anonymous"/>
</StackLayout>
</Page>

5
tns-core-modules/ui/core/view/view-common.ts
View File

@ -214,11 +214,12 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
const closeCallback: Function = arguments[2];
const fullscreen: boolean = arguments[3];
const animated = arguments[4];
const stretched = arguments[5];
const view: ViewDefinition = firstAgrument instanceof ViewCommon
? firstAgrument : createViewFromEntry({ moduleName: firstAgrument });
(<ViewCommon>view)._showNativeModalView(this, context, closeCallback, fullscreen, animated);
(<ViewCommon>view)._showNativeModalView(this, context, closeCallback, fullscreen, animated, stretched);
return view;
}
}
@ -239,7 +240,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
return this._modal;
}
protected _showNativeModalView(parent: ViewCommon, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean) {
protected _showNativeModalView(parent: ViewCommon, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean) {
_rootModalViews.push(this);
parent._modal = this;

19
tns-core-modules/ui/core/view/view.android.ts
View File

@ -38,6 +38,7 @@ let Dialog: android.app.Dialog;
interface DialogOptions {
owner: View;
fullscreen: boolean;
stretched: boolean;
shownCallback: () => void;
dismissCallback: () => void;
}
@ -123,6 +124,7 @@ function initializeDialogFragment() {
class DialogFragmentImpl extends android.app.DialogFragment {
public owner: View;
private _fullscreen: boolean;
private _stretched: boolean;
private _shownCallback: () => void;
private _dismissCallback: () => void;
@ -136,17 +138,21 @@ function initializeDialogFragment() {
const options = getModalOptions(ownerId);
this.owner = options.owner;
this._fullscreen = options.fullscreen;
this._stretched = options.stretched;
this._dismissCallback = options.dismissCallback;
this._shownCallback = options.shownCallback;
this.owner._dialogFragment = this;
this.setStyle(android.app.DialogFragment.STYLE_NO_TITLE, 0);
const dialog = new DialogImpl(this, this.getActivity(), this.getTheme());
// do not override alignment unless fullscreen modal will be shown;
// otherwise we might break component-level layout:
// https://github.com/NativeScript/NativeScript/issues/5392
if (this._fullscreen) {
if (!this._fullscreen && !this._stretched) {
this.owner.horizontalAlignment = "center";
this.owner.verticalAlignment = "middle";
} else {
this.owner.horizontalAlignment = "stretch";
this.owner.verticalAlignment = "stretch";
}
@ -179,7 +185,7 @@ function initializeDialogFragment() {
this._shownCallback();
}
public onDismiss(dialog: android.content.IDialogInterface): void {
super.onDismiss(dialog);
const manager = this.getFragmentManager();
@ -455,8 +461,8 @@ export class View extends ViewCommon {
return result | (childMeasuredState & layout.MEASURED_STATE_MASK);
}
protected _showNativeModalView(parent: View, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean) {
super._showNativeModalView(parent, context, closeCallback, fullscreen);
protected _showNativeModalView(parent: View, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean) {
super._showNativeModalView(parent, context, closeCallback, fullscreen, stretched);
if (!this.backgroundColor) {
this.backgroundColor = new Color("White");
}
@ -471,6 +477,7 @@ export class View extends ViewCommon {
const dialogOptions: DialogOptions = {
owner: this,
fullscreen: !!fullscreen,
stretched: !!stretched,
shownCallback: () => this._raiseShownModallyEvent(),
dismissCallback: () => this.closeModal()
}

6
tns-core-modules/ui/core/view/view.d.ts vendored
View File

@ -498,8 +498,9 @@ export abstract class View extends ViewBase {
* @param closeCallback - A function that will be called when the view is closed.
* Any arguments provided when calling ShownModallyData.closeCallback will be available here.
* @param fullscreen - An optional parameter specifying whether to show the modal page in full-screen mode.
* @param stretched - An optional parameter specifying whether to stretch the modal page when not in full-screen mode.
*/
showModal(moduleName: string, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean): View;
showModal(moduleName: string, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean): View;
/**
* Shows the view passed as parameter as a modal view.
@ -507,8 +508,9 @@ export abstract class View extends ViewBase {
* @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.
* @param closeCallback - A function that will be called when the view is closed. Any arguments provided when calling ShownModallyData.closeCallback will be available here.
* @param fullscreen - An optional parameter specifying whether to show the modal view in full-screen mode.
* @param stretched - An optional parameter specifying whether to stretch the modal page when not in full-screen mode.
*/
showModal(view: View, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean): View;
showModal(view: View, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean): View;
/**
* Deprecated. Showing view as modal is deprecated.

7
tns-core-modules/ui/core/view/view.ios.ts
View File

@ -311,10 +311,10 @@ export class View extends ViewCommon {
return view;
}
protected _showNativeModalView(parent: View, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean) {
protected _showNativeModalView(parent: View, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean) {
let parentWithController = this.getParentWithViewController(parent);
super._showNativeModalView(parentWithController, context, closeCallback, fullscreen);
super._showNativeModalView(parentWithController, context, closeCallback, fullscreen, stretched);
let controller = this.viewController;
if (!controller) {
controller = ios.UILayoutViewController.initWithOwner(new WeakRef(this));
@ -334,6 +334,9 @@ export class View extends ViewCommon {
controller.modalPresentationStyle = UIModalPresentationStyle.FormSheet;
}
this.horizontalAlignment = "stretch";
this.verticalAlignment = "stretch";
this._raiseShowingModallyEvent();
animated = animated === undefined ? true : !!animated;
(<any>controller).animated = animated;