feat(split-pane): integrated with ion-menu

packages/core/src/components/menu/menu.tsx

@@ -1,5 +1,5 @@
-import { Component, Element, Event, EventEmitter, Prop, PropDidChange } from '@stencil/core';
-import { Config, Animation } from '../../index';
+import { Component, Element, Event, EventEmitter, Prop, PropDidChange, Listen } from '@stencil/core';
+import { Config, Animation, SplitPaneAlert } from '../../index';
 import { MenuController } from './menu-controller';
 import { isRightSide, Side, assert, checkEdgeSide } from '../../utils/helpers';
 
@@ -102,6 +102,11 @@ export class Menu {
   //   const isRTL = false;
   //   // this.isRightSide = isRightSide(side, isRTL);
   // }
+  @Listen('body:ionSplitPaneDidChange')
+  splitPaneChanged(ev: SplitPaneAlert) {
+    this._isPane = ev.detail.splitPane.isPane(this.el);
+    this._updateState();
+  }
 
   @PropDidChange('enabled')
   enabledChanged() {
@@ -155,6 +160,7 @@ export class Menu {
 
     // mask it as enabled / disabled
     this.enable(isEnabled);
+    this._init = true;
   }
 
   hostData() {
@@ -266,7 +272,7 @@ export class Menu {
 
     this._isAnimating = true;
     this._startAnimation(false, false)
-      .then(() => this._after(false));
+    this._after(false);
   }
 
   getWidth(): number {
@@ -521,14 +527,6 @@ export class Menu {
     return false;
   }
 
-  /**
-   * @internal
-   */
-  paneChanged(isPane: boolean) {
-    this._isPane = isPane;
-    this._updateState();
-  }
-
   /**
    * @hidden
    */

packages/core/src/components/split-pane/split-pane.tsx

@@ -160,6 +160,7 @@ export class SplitPane {
   /**
    * @output {any} Expression to be called when the split-pane visibility has changed
    */
+  @Event() ionSplitPaneDidChange: EventEmitter;
   @Event() ionChange: EventEmitter;
 
   ionViewDidLoad() {
@@ -181,16 +182,16 @@ export class SplitPane {
       var isMain = child.hasAttribute('main');
       if (isMain) {
         if (foundMain) {
-          // console.warn('split pane can not have more than one main node');
+          console.warn('split pane can not have more than one main node');
           return;
         }
         foundMain = true;
       }
       setPaneClass(child, isMain);
     }
-    // if (!foundMain) {
-    //   console.warn('split pane could not found any main node');
-    // }
+    if (!foundMain) {
+      console.warn('split pane could not found any main node');
+    }
   }
 
   @PropDidChange('when')
@@ -234,7 +235,9 @@ export class SplitPane {
   private _setVisible(visible: boolean) {
     if (this.visible !== visible) {
       this.visible = visible;
-      this.ionChange.emit(this);
+      const detail = { splitPane: this };
+      this.ionChange.emit(detail);
+      this.ionSplitPaneDidChange.emit(detail);
     }
   }
 
@@ -246,6 +249,14 @@ export class SplitPane {
     return this.visible;
   }
 
+  isPane(element: HTMLElement): boolean {
+    if (!this.visible) {
+      return false;
+    }
+    return element.parentElement === this.ele
+      && element.classList.contains(SPLIT_PANE_SIDE);
+  }
+
   hostData() {
     return {
       class: {
@@ -260,6 +271,12 @@ export class SplitPane {
 
 }
 
+export interface SplitPaneAlert {
+  detail: {
+    splitPane: SplitPane
+  }
+}
+
 function setPaneClass(ele: HTMLElement, isMain: boolean) {
   let toAdd;
   let toRemove;

packages/core/src/components/split-pane/test/basic.html

@@ -55,7 +55,6 @@
 
         <ion-content padding>
           <ion-button onclick="openLeft()">Open left menu</ion-button>
-          <ion-button onclick="openRight()">Open right menu</ion-button>
         </ion-content>
 
       </ion-page>
@@ -70,10 +69,6 @@
       console.log('Open left menu');
       menu.open('left');
     }
-    function openRight() {
-      console.log('Open right menu');
-      menu.open('right');
-    }
   </script>
 </body>
 </html>

packages/core/src/index.d.ts

@@ -20,6 +20,8 @@ import { PopoverController } from './components/popover-controller/popover-contr
 import { Scroll, ScrollCallback, ScrollDetail } from './components/scroll/scroll';
 import { Segment } from './components/segment/segment';
 import { SegmentButton, SegmentButtonEvent } from './components/segment-button/segment-button';
+import { SplitPane, SplitPaneAlert } from './components/split-pane/split-pane';
+
 import { Toast, ToastEvent, ToastOptions } from './components/toast/toast'
 import { ToastController } from './components/toast-controller/toast-controller'
 
@@ -90,6 +92,8 @@ export {
   Segment,
   SegmentButton,
   SegmentButtonEvent,
+  SplitPane,
+  SplitPaneAlert,
   TransitionBuilder,
   Toast,
   ToastEvent,