feat(modal): introduce stretched param to showModal method (#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

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

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

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

@@ -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);
+}

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

@@ -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>

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

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

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

@@ -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,6 +138,7 @@ 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;
@@ -146,7 +149,10 @@ function initializeDialogFragment() {
             // 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";
             }
@@ -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) {
+    protected _showNativeModalView(parent: View, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean) {
-        super._showNativeModalView(parent, context, closeCallback, fullscreen);
+        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()
         }

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

@@ -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.

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

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