Skip to content

Update modal to allow use of ios presentationStyle #1767

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed

Update modal to allow use of ios presentationStyle #1767

Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f1f5825
update
Feb 1, 2019
17894e0
Revert "update"
Feb 1, 2019
26eca2f
add popover
Mar 16, 2019
7087ac8
fix for tslint
Mar 20, 2019
4d799cc
Refactor modal options
Mar 21, 2019
b118557
Fix lint issue
Mar 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 27 additions & 3 deletions nativescript-angular/directives/dialogs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
ReflectiveInjector,
Type,
ViewContainerRef,
ElementRef,
} from "@angular/core";

import { NSLocationStrategy } from "../router/ns-location-strategy";
Expand All @@ -26,6 +27,8 @@ export interface ModalDialogOptions {
stretched?: boolean;
viewContainerRef?: ViewContainerRef;
moduleRef?: NgModuleRef<any>;
sourceView?: ElementRef;
ios?: any;
}

export class ModalDialogParams {
Expand All @@ -46,15 +49,17 @@ interface ShowDialogOptions {
parentView: ViewBase;
resolver: ComponentFactoryResolver;
type: Type<any>;
ios?: any;
}

@Injectable()
export class ModalDialogService {
private componentView: View;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this probably breaks multiple modals, as it stores only one componentview

constructor(private location: NSLocationStrategy) {
}

public showModal(type: Type<any>,
{ viewContainerRef, moduleRef, context, fullscreen, animated, stretched }: ModalDialogOptions
{ viewContainerRef, moduleRef, context, fullscreen, animated, stretched, sourceView, ios }: ModalDialogOptions
): Promise<any> {
if (!viewContainerRef) {
throw new Error(
Expand All @@ -63,7 +68,11 @@ export class ModalDialogService {
);
}

let parentView = viewContainerRef.element.nativeElement;
if (sourceView) {
this.closeModal();
}

let parentView = sourceView ? sourceView.nativeElement : viewContainerRef.element.nativeElement;
if (parentView instanceof AppHostView && parentView.ngAppRoot) {
parentView = parentView.ngAppRoot;
}
Expand Down Expand Up @@ -103,6 +112,7 @@ export class ModalDialogService {
parentView,
resolver,
type,
ios
});
} catch (err) {
reject(err);
Expand All @@ -111,6 +121,13 @@ export class ModalDialogService {
});
}

public closeModal() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you remove this method. After locally testing and reviewing this PR I discovered a bug (NativeScript/NativeScript#7050) that when fixed will resolve this issue you are working around with this code so it is not needed.

if (this.componentView) {
this.componentView.closeModal();
this.location._closeModalNavigation();
}
}

private _showDialog({
containerRef,
context,
Expand All @@ -122,6 +139,7 @@ export class ModalDialogService {
parentView,
resolver,
type,
ios
}: ShowDialogOptions): void {
let componentView: View;
let detachedLoaderRef: ComponentRef<DetachedLoader>;
Expand Down Expand Up @@ -159,7 +177,13 @@ export class ModalDialogService {

// TODO: remove <any> cast after https://github.com/NativeScript/NativeScript/pull/5734
// is in a published version of tns-core-modules.
(<any>parentView).showModal(componentView, context, closeCallback, fullscreen, animated, stretched);
if (ios) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As already mentioned, the code in the else is being deprecated and is not longer needed. You could simply do:

          let modalOptions: ShowModalOptions = {
               closeCallback: closeCallback,
               context: context,
               fullscreen: fullscreen,
               animated: animated,
               stretched: stretched,
               ios: ios
           };
            // TODO: remove <any> cast after https://github.com/NativeScript/NativeScript/pull/5734
            // is in a published version of tns-core-modules.
           (<any>parentView).showModal(componentView, modalOptions);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've made the changes but based it on this PR #1769 as I think that's a better way to do it and will mean we don't have to keep adding options to match the core.

// tslint:disable-next-line:max-line-length
(<any>parentView).showModal(componentView, { context, closeCallback, fullscreen, animated, stretched, ios });
} else {
(<any>parentView).showModal(componentView, context, closeCallback, fullscreen, animated, stretched);
}
this.componentView = componentView;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you remove this method. After locally testing and reviewing this PR I discovered a bug (NativeScript/NativeScript#7050) that when fixed will resolve this issue you are working around with this code so it is not needed.

});
}
}
Expand Down