Skip to content

Update modal to allow use of ios presentationStyle #1771

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.

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

Merged
merged 7 commits into from
Mar 28, 2019

Conversation

VladimirAmiorkov
Copy link
Contributor

@VladimirAmiorkov VladimirAmiorkov commented Mar 25, 2019

Refactored this and this PRs into a merged PR and also added "test case" to the modal-navigation-ng application for future e2e test.

PR Checklist

What is the current behavior?

From PR 1767

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

From PR 1769

The current exposed options for showModal differs from the options available in the core.

What is the new behavior?

From PR 1767

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.

From PR 1769

All current and future non-angular options are exposed by leveraging Typescript's Pick type.

Fixes/Implements/Closes

From PR 1767

#1709

@VladimirAmiorkov VladimirAmiorkov merged commit 9dfc569 into master Mar 28, 2019
@ghost ghost removed the in progress label Mar 28, 2019
@VladimirAmiorkov VladimirAmiorkov deleted the amiorkov/modal-options branch March 28, 2019 12:42
zbranzov pushed a commit that referenced this pull request Apr 23, 2019
zbranzov pushed a commit that referenced this pull request Apr 24, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cla: yes docs needed e2e test needed In case ui tests should be included
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants