Update modal to allow use of ios presentationStyle

[dottodot]

PR Checklist

• The PR title follows our guidelines: https://github.com/NativeScript/NativeScript/blob/master/CONTRIBUTING.md#commit-messages.
• There is an issue for the bug/feature this PR is for. To avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it.
• You have signed the CLA.
• All existing tests are passing: https://github.com/NativeScript/nativescript-angular/blob/master/DevelopmentWorkflow.md#running-the-tests
• Tests for the changes are included.

What is the current behavior?

As per this issue #1709 it's currently not possible to use an ios popover style modal.

What is the new behavior?

I've added a couple of new options to ModalDialogOptions

• sourceView - this is required as normally you would use viewContainerRef but if you want to attach a popover to a button for example you need to pass in the button element.
• ios - allows you to use presentationStyle: UIModalPresentationStyle.Popover, the only caveat with this is you will need to install tns-platform-declarations to be able to use it.

You will also see I've added a closeModal() option. There were 2 reasons for this. Firstly if you click on the background the popover disappears but when you try to open another popover you get an error warning a modal already exists. So at the moment if a sourceView is present it will close any pre existing modal first before opening a new one.

The second issue I had is if I opened a popover then navigated back then went back to the same page to popover would reappear but not attached to the view it was previously attached to and with no content. So I made closeModal() public and call it when going back. i.e

    this.location.onPopState((resp: any) => {
      if (resp.pop) {
        this._modalService.closeModal();
      }
    });

I'm sure there's maybe a better way to resolve these issues but wasn't sure on that.

This solutions probably isn't perfect but it does work without any issues as far as I can tell, so think it's a good starting point at least.

Fixes/Implements/Closes #[Issue Number].
#1709

[edusperoni]

Why not use the new ShowModalOptions?

https://github.com/NativeScript/NativeScript/blob/master/tns-core-modules/ui/core/view-base/view-base.d.ts#L199

The old methods are deprecated at this point.

Since we already use a custom options object for angular (with view container ref and etc), it might be easier to pass something like

{...angularOptions, viewContainerRef: undefined, moduleRef: undefined, sourceView: undefined} plus the extra parameters needed (like closecallback). I'm partially suggesting this approach because it would make compatibility with nativescript-windowed-modal, or any plugin that extend modal options, that much easier.

Quick edit: I can help with this integration if you want to grant me access to the branch

[edusperoni]

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

[VladimirAmiorkov]

Please read my comments and do the necessary changes. After that we can proceeded with merging this PR. Additionally you can follow this issue that is the source of the issues you have noticed. Those issues are are present in a non Angular project so it is best to resolve them not in nativescript-angular but rather in tns-core-modules. You could use the mentioned workaround of the popState so that it works in your project for the time being.

[VladimirAmiorkov]

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.

[VladimirAmiorkov]

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.

[VladimirAmiorkov]

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

[dottodot]

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.

[VladimirAmiorkov]

test

[VladimirAmiorkov]

@dottodot @edusperoni Than you for your contribution. I have merged your PRs into a new one and added a test case for our e2e tests.

Closing in favor of #1771