From 0138873ee3c978ffac3faffe24887bb7a992913c Mon Sep 17 00:00:00 2001
From: Alexander Djenkov <a.djenkov90@gmail.com>
Date: Wed, 7 Mar 2018 18:17:52 +0200
Subject: [PATCH] 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
---
 .../ui-tests-app/modal-view/login-page.xml    |  3 +--
 .../app/ui-tests-app/modal-view/modal-view.ts | 12 ++++++++++++
 .../ui-tests-app/modal-view/modal-view.xml    |  1 +
 tns-core-modules/ui/core/view/view-common.ts  |  5 +++--
 tns-core-modules/ui/core/view/view.android.ts | 19 +++++++++++++------
 tns-core-modules/ui/core/view/view.d.ts       |  6 ++++--
 tns-core-modules/ui/core/view/view.ios.ts     |  7 +++++--
 7 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/apps/app/ui-tests-app/modal-view/login-page.xml b/apps/app/ui-tests-app/modal-view/login-page.xml
index 431027d0d..f2fd8c601 100644
--- a/apps/app/ui-tests-app/modal-view/login-page.xml
+++ b/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"
-  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"/>
diff --git a/apps/app/ui-tests-app/modal-view/modal-view.ts b/apps/app/ui-tests-app/modal-view/modal-view.ts
index 21cd11a5a..643377c5e 100644
--- a/apps/app/ui-tests-app/modal-view/modal-view.ts
+++ b/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);
+}
diff --git a/apps/app/ui-tests-app/modal-view/modal-view.xml b/apps/app/ui-tests-app/modal-view/modal-view.xml
index 0f0aaab57..f33217964 100644
--- a/apps/app/ui-tests-app/modal-view/modal-view.xml
+++ b/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>
\ No newline at end of file
diff --git a/tns-core-modules/ui/core/view/view-common.ts b/tns-core-modules/ui/core/view/view-common.ts
index f9c023863..7b3da2494 100644
--- a/tns-core-modules/ui/core/view/view-common.ts
+++ b/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;
diff --git a/tns-core-modules/ui/core/view/view.android.ts b/tns-core-modules/ui/core/view/view.android.ts
index 10e647043..646730d98 100644
--- a/tns-core-modules/ui/core/view/view.android.ts
+++ b/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,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()
         }
diff --git a/tns-core-modules/ui/core/view/view.d.ts b/tns-core-modules/ui/core/view/view.d.ts
index 7ab7f6209..c78a0e594 100644
--- a/tns-core-modules/ui/core/view/view.d.ts
+++ b/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.
diff --git a/tns-core-modules/ui/core/view/view.ios.ts b/tns-core-modules/ui/core/view/view.ios.ts
index 7d27931f8..87594b2ab 100644
--- a/tns-core-modules/ui/core/view/view.ios.ts
+++ b/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;