refactor(popover): get popover working with dom, react, angular components

packages/demos/angular/src/app/app-routing.module.ts

@@ -11,7 +11,8 @@ const routes: Routes = [
   { path: 'toast', loadChildren: 'app/toast/toast.module#ToastModule' },
   { path: 'loading', loadChildren: 'app/loading/loading.module#LoadingModule' },
   { path: 'nav', loadChildren: 'app/nav/nav.module#NavModule' },
-  { path: 'modal', loadChildren: 'app/modal/modal.module#ModalModule' }
+  { path: 'modal', loadChildren: 'app/modal/modal.module#ModalModule' },
+  { path: 'popover', loadChildren: 'app/popover/popover.module#PopoverModule' },
 ];
 
 @NgModule({

packages/demos/angular/src/app/home-page/home-page.component.html

@@ -27,4 +27,7 @@
   <li>
     <a href='modal'>Modal Page</a>
   </li>
+  <li>
+    <a href='popover'>Popover Page</a>
+  </li>
 </ul>

packages/demos/angular/src/app/popover/popover-page-to-present.ts

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'page-one',
+  template: `
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Page One</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  Page One
+  <ul>
+    <li>ngOnInit - {{ngOnInitDetection}}</li>
+  </ul>
+</ion-content>
+  `
+})
+export class PopoverPageToPresent {
+
+  ngOnInitDetection = 'initial';
+
+  constructor() {
+
+  }
+
+
+  ngOnInit() {
+    console.log('page one ngOnInit');
+    setInterval(() => {
+      this.ngOnInitDetection = '' + Date.now();
+    }, 500);
+  }
+
+}

packages/demos/angular/src/app/popover/popover-page.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { PopoverController } from '@ionic/angular';
+import { PopoverPageToPresent } from './popover-page-to-present';
+
+@Component({
+  selector: 'app-popover-page',
+  template: `
+  <ion-app>
+    <ion-page class="show-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Test</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <ion-button (click)="clickMe($event)">Open Basic Popover</ion-button>
+      </ion-content>
+    </ion-page>
+</ion-app>
+  `
+})
+export class PopoverPageComponent {
+
+  constructor(private popoverController: PopoverController) {
+  }
+
+  clickMe(event: Event) {
+    const popover = this.popoverController.create({
+      component: PopoverPageToPresent,
+      ev: event
+    });
+    return popover.present();
+  }
+
+}

packages/demos/angular/src/app/popover/popover-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { PopoverPageComponent } from './popover-page.component';
+
+const routes: Routes = [
+  { path: '', component: PopoverPageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class PopoverRoutingModule { }

packages/demos/angular/src/app/popover/popover.module.ts

@@ -0,0 +1,27 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicAngularModule } from '@ionic/angular';
+
+import { PopoverPageComponent } from './popover-page.component';
+import { PopoverRoutingModule } from './popover-routing.module';
+
+import { PopoverPageToPresent } from './popover-page-to-present';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicAngularModule.forRoot(),
+    PopoverRoutingModule
+  ],
+  declarations: [
+    PopoverPageComponent,
+    PopoverPageToPresent
+  ],
+  providers: [
+  ],
+  entryComponents: [
+    PopoverPageToPresent
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class PopoverModule { }

packages/demos/react/src/pages/PageOne.js

@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 
-import { createModal } from '@ionic/react';
+import { createModal, createPopover } from '@ionic/react';
 
 import PageTwo from './PageTwo';
 import ModalPage from './ModalPage';
+import PopoverPage from './PopoverPage';
 
 export default class PageOne extends Component {
 
@@ -46,6 +47,15 @@ export default class PageOne extends Component {
     });
   }
 
+  openPopover(event) {
+    return createPopover({
+      component: PopoverPage,
+      ev: event
+    }).then((popover) => {
+      return popover.present();
+    });
+  }
+
   componentDidMount() {
     setInterval(() => {
       this.setState({ content: Math.random() * 1000});
@@ -66,7 +76,10 @@ export default class PageOne extends Component {
           <ion-button onClick={() => this.goToPageTwo()}>Go to Page Two</ion-button>
         </div>
         <div>
-          <ion-button onClick={() => this.openModal()}>OpenModal</ion-button>
+          <ion-button onClick={() => this.openModal()}>Open Modal</ion-button>
+        </div>
+        <div>
+          <ion-button onClick={(event) => this.openPopover(event)}>Open Popover</ion-button>
         </div>
         <div>
           Some random content: {this.state.content}

packages/demos/react/src/pages/PopoverPage.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+
+import PageThree from './PageThree';
+
+export default class PopoverPage extends Component {
+
+  constructor() {
+    super();
+    this.style = {
+      height: '100%'
+    };
+    this.state = {
+      content: 'popover page - ' + 50
+    }
+  }
+
+  componentDidMount() {
+    console.log('componentDidMount');
+    setInterval(() => {
+      this.setState({ content: 'Popover page - ' + Math.random() * 1000});
+    }, 1000);
+  }
+
+  dismiss() {
+    return this.props.popover.dismiss();
+  }
+
+  render() {
+    return [
+      <ion-header ref={(element) => this.element = element}>
+        <ion-toolbar>
+          <ion-title>Popover Page</ion-title>
+        </ion-toolbar>
+      </ion-header>,
+      <ion-content>
+        Popover Page
+        <div>
+          <ion-button onClick={() => this.dismiss()}>Dismiss</ion-button>
+        </div>
+        <div>
+          Some random content: {this.state.content}
+        </div>
+        <div>
+          Props : {this.props.paramOne}
+        </div>
+      </ion-content>
+    ];
+  }
+}