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

feat(view): added iOS parameter for modal presentation style (#6409)

Browse Source 
* feat(view): added iOS parameter for modal presentation style

* Now passing options to showModal in one argument

* refactor: Move context and close in modal options

* chore: Comments added for UIModalPresentationStyle.Popover case

* refactor: Use modalOptions in e2e demo

* chore: fix pbroken test
This commit is contained in:
Nicu
2018-12-13 17:03:25 +02:00
committed by Alexander Vakrilov
parent 44dba1a0b7
commit 540b2b4f82
6 changed files with 264 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -46,6 +46,43 @@ export function isEventOrGesture(name: string, view: ViewBase): boolean;
*/
export function getViewById(view: ViewBase, id: string): ViewBase;
export interface ShowModalOptions {
/**
* 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.
*/
context: any;
/**
* A function that will be called when the view is closed. Any arguments provided when calling ShownModallyData.closeCallback will be available here.
*/
closeCallback: Function;
/**
* An optional parameter specifying whether to show the modal view in full-screen mode.
*/
fullscreen?: boolean;
/**
* An optional parameter specifying whether to show the modal view with animation.
*/
animated?: boolean;
/**
* An optional parameter specifying whether to stretch the modal view when not in full-screen mode.
*/
stretched?: boolean;
/**
* An optional parameter that specify options specific to iOS as an object.
*/
ios?: {
/**
* The UIModalPresentationStyle to be used when showing the dialog in iOS .
*/
presentationStyle: any /* UIModalPresentationStyle */
}
}
export abstract class ViewBase extends Observable {
// Dynamic properties.
left: Length;
@@ -110,6 +147,7 @@ export abstract class ViewBase extends Observable {
//@endprivate
/**
* @deprecated Use showModal with ShowModalOptions instead.
* Shows the View contained in moduleName as a modal view.
* @param moduleName - The name of the module to load starting from the application root.
* @param context - Any context you want to pass to the modally shown view.
@@ -123,6 +161,7 @@ export abstract class ViewBase extends Observable {
showModal(moduleName: string, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean): ViewBase;
/**
* @deprecated Use showModal with ShowModalOptions instead.
* Shows the view passed as parameter as a modal view.
* @param view - View instance to be shown modally.
* @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.
@@ -133,6 +172,20 @@ export abstract class ViewBase extends Observable {
*/
showModal(view: ViewBase, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean): ViewBase;
/**
* Shows the View contained in moduleName as a modal view.
* @param moduleName - The name of the module to load starting from the application root.
* @param modalOptions - A ShowModalOptions instance
*/
showModal(moduleName: string, modalOptions: ShowModalOptions): ViewBase;
/**
* Shows the view passed as parameter as a modal view.
* @param view - View instance to be shown modally.
* @param modalOptions - A ShowModalOptions instance
*/
showModal(view: ViewBase, modalOptions: ShowModalOptions): ViewBase;
/**
* Deprecated. Showing view as modal is deprecated.
* Use showModal method with arguments.
@@ -259,7 +312,7 @@ export abstract class ViewBase extends Observable {
public requestLayout(): void;
/**
* Iterates over children of type ViewBase.
* Iterates over children of type ViewBase.
* @param callback Called for each child of type ViewBase. Iteration stops if this method returns falsy value.
*/
public eachChild(callback: (child: ViewBase) => boolean): void;
@@ -291,7 +344,7 @@ export abstract class ViewBase extends Observable {
/**
* @private
* Notifies each child's css state for change, recursively.
* Either the style scope, className or id properties were changed.
* Either the style scope, className or id properties were changed.
*/
_onCssStateChange(): void;
@@ -309,7 +362,7 @@ export abstract class ViewBase extends Observable {
_context: any /* android.content.Context */;
/**
/**
* Setups the UI for ViewBase and all its children recursively.
* This method should *not* be overridden by derived views.
*/

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

@@ -7,7 +7,8 @@ import {
import {
ViewBase, Property, booleanConverter, EventData, layout,
getEventOrGestureName, traceEnabled, traceWrite, traceCategories,
InheritedProperty
InheritedProperty,
ShowModalOptions
} from "../view-base";
import { HorizontalAlignment, VerticalAlignment, Visibility, Length, PercentLength } from "../../styling/style-properties";
@@ -215,25 +216,41 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
return undefined;
}
public showModal(): ViewDefinition {
if (arguments.length === 0) {
private getModalOptions(args: IArguments): { view: ViewCommon, options: ShowModalOptions } {
if (args.length === 0) {
throw new Error("showModal without parameters is deprecated. Please call showModal on a view instance instead.");
} else {
const firstAgrument = arguments[0];
const context: any = arguments[1];
const closeCallback: Function = arguments[2];
const fullscreen: boolean = arguments[3];
const animated = arguments[4];
const stretched = arguments[5];
let options: ShowModalOptions = null;
const view = firstAgrument instanceof ViewCommon
? firstAgrument : <ViewCommon>createViewFromEntry({ moduleName: firstAgrument });
if (args.length === 2) {
options = <ShowModalOptions>args[1];
} else {
// TODO: Add deprecation warning
options = {
context: args[1],
closeCallback: args[2],
fullscreen: args[3],
animated: args[4],
stretched: args[5]
};
}
view._showNativeModalView(this, context, closeCallback, fullscreen, animated, stretched);
return view;
const firstArgument = args[0];
const view = firstArgument instanceof ViewCommon
? firstArgument : <ViewCommon>createViewFromEntry({ moduleName: firstArgument });
return { view, options };
}
}
public showModal(): ViewDefinition {
const { view, options } = this.getModalOptions(arguments);
view._showNativeModalView(this, options);
return view;
}
public closeModal(...args) {
let closeCallback = this._closeModalCallback;
if (closeCallback) {
@@ -250,12 +267,12 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
return this._modal;
}
protected _showNativeModalView(parent: ViewCommon, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean) {
protected _showNativeModalView(parent: ViewCommon, options: ShowModalOptions) { //context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean, iosOpts?: any) {
_rootModalViews.push(this);
parent._modal = this;
this._modalParent = parent;
this._modalContext = context;
this._modalContext = options.context;
const that = this;
this._closeModalCallback = function (...originalArgs) {
if (that._closeModalCallback) {
@@ -268,8 +285,8 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
parent._modal = null;
const whenClosedCallback = () => {
if (typeof closeCallback === "function") {
closeCallback.apply(undefined, originalArgs);
if (typeof options.closeCallback === "function") {
options.closeCallback.apply(undefined, originalArgs);
}
}

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

@@ -6,7 +6,7 @@ import {
ViewCommon, layout, isEnabledProperty, originXProperty, originYProperty, automationTextProperty, isUserInteractionEnabledProperty,
traceEnabled, traceWrite, traceCategories, traceNotifyEvent,
paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty,
Color, EventData
Color, EventData, ShowModalOptions
} from "./view-common";
import {
@@ -574,9 +574,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, stretched?: boolean) {
super._showNativeModalView(parent, context, closeCallback, fullscreen, stretched);
protected _showNativeModalView(parent: View, options: ShowModalOptions) { //context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean, iosOpts?: any) {
super._showNativeModalView(parent, options);
if (!this.backgroundColor) {
this.backgroundColor = new Color("White");
}
@@ -590,8 +589,8 @@ export class View extends ViewCommon {
const dialogOptions: DialogOptions = {
owner: this,
fullscreen: !!fullscreen,
stretched: !!stretched,
fullscreen: !!options.fullscreen,
stretched: !!options.stretched,
shownCallback: () => this._raiseShownModallyEvent(),
dismissCallback: () => this.closeModal()
}

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

@@ -5,7 +5,7 @@ import { booleanConverter, Property } from "../view";
import {
ViewCommon, layout, isEnabledProperty, originXProperty, originYProperty, automationTextProperty, isUserInteractionEnabledProperty,
traceEnabled, traceWrite, traceCategories, traceError, traceMessageType, getAncestor
traceEnabled, traceWrite, traceCategories, traceError, traceMessageType, ShowModalOptions
} from "./view-common";
import { ios as iosBackground, Background } from "../../styling/background";
@@ -150,7 +150,7 @@ export class View extends ViewCommon {
}
public onLayout(left: number, top: number, right: number, bottom: number): void {
//
//
}
public _setNativeViewFrame(nativeView: UIView, frame: CGRect): void {
@@ -371,7 +371,7 @@ export class View extends ViewCommon {
return this._suspendCATransaction || this._suspendNativeUpdatesCount;
}
protected _showNativeModalView(parent: View, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean) {
protected _showNativeModalView(parent: View, options: ShowModalOptions) { //context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean, iosOpts?: any) {
const parentWithController = ios.getParentWithViewController(parent);
if (!parentWithController) {
traceWrite(`Could not find parent with viewController for ${parent} while showing modal view.`,
@@ -394,7 +394,7 @@ export class View extends ViewCommon {
this._setupAsRootView({});
super._showNativeModalView(parentWithController, context, closeCallback, fullscreen, stretched);
super._showNativeModalView(parentWithController, options);
let controller = this.viewController;
if (!controller) {
const nativeView = this.ios || this.nativeViewProtected;
@@ -407,17 +407,31 @@ export class View extends ViewCommon {
this.viewController = controller;
}
if (fullscreen) {
if (options.fullscreen) {
controller.modalPresentationStyle = UIModalPresentationStyle.FullScreen;
} else {
controller.modalPresentationStyle = UIModalPresentationStyle.FormSheet;
}
if (options.ios && options.ios.presentationStyle) {
const presentationStyle = options.ios.presentationStyle;
controller.modalPresentationStyle = presentationStyle;
if (presentationStyle === UIModalPresentationStyle.Popover) {
const popoverPresentationController = controller.popoverPresentationController;
const view = parent.nativeViewProtected;
// Note: sourceView and sourceRect are needed to specify the anchor location for the popover.
// Note: sourceView should be the button triggering the modal. If it the Page the popover might appear "behind" the page content
popoverPresentationController.sourceView = view;
popoverPresentationController.sourceRect = CGRectMake(0, 0, view.frame.size.width, view.frame.size.height);
}
}
this.horizontalAlignment = "stretch";
this.verticalAlignment = "stretch";
this._raiseShowingModallyEvent();
animated = animated === undefined ? true : !!animated;
const animated = options.animated === undefined ? true : !!options.animated;
(<any>controller).animated = animated;
parentController.presentViewControllerAnimatedCompletion(controller, animated, null);
const transitionCoordinator = iosUtils.getter(parentController, parentController.transitionCoordinator);