From 4c30878fc72d4c7f3d5dc72962dbddda0ffe8841 Mon Sep 17 00:00:00 2001
From: Manu MA <manu.mtza@gmail.com>
Date: Thu, 29 Aug 2019 15:19:01 +0200
Subject: [PATCH] fix(menu-toggle): use ESM menuController (#19225)

---
 .../components/menu-button/menu-button.tsx    | 15 ++++-----
 .../menu-toggle/menu-toggle-util.ts           | 31 ++-----------------
 .../components/menu-toggle/menu-toggle.tsx    | 15 ++++-----
 .../menu-toggle/test/basic/index.html         |  9 ++----
 .../src/components/menu/test/basic/index.html | 18 +++++------
 5 files changed, 27 insertions(+), 61 deletions(-)

diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx
index 0529a79830..f8a5c30fb6 100644
--- a/core/src/components/menu-button/menu-button.tsx
+++ b/core/src/components/menu-button/menu-button.tsx
@@ -4,8 +4,9 @@ import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import { Color } from '../../interface';
 import { ButtonInterface } from '../../utils/element-interface';
+import { menuController } from '../../utils/menu-controller';
 import { createColorClasses } from '../../utils/theme';
-import { toggleMenu, updateVisibility } from '../menu-toggle/menu-toggle-util';
+import { updateVisibility } from '../menu-toggle/menu-toggle-util';
 
 @Component({
   tag: 'ion-menu-button',
@@ -46,22 +47,18 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
    */
   @Prop() type: 'submit' | 'reset' | 'button' = 'button';
 
-  async componentDidLoad() {
-    await this.setVisibility();
+  componentDidLoad() {
+    this.visibilityChanged();
   }
 
   @Listen('ionMenuChange', { target: 'body' })
   @Listen('ionSplitPaneVisible', { target: 'body' })
   async visibilityChanged() {
-    await this.setVisibility();
-  }
-
-  private setVisibility = async () => {
     this.visible = await updateVisibility(this.menu);
   }
 
   private onClick = async () => {
-    await toggleMenu(this.menu);
+    return menuController.toggle(this.menu);
   }
 
   render() {
@@ -93,7 +90,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
       >
         <button
           {...attrs}
-          disabled={this.disabled}
+          disabled={disabled}
           class="button-native"
         >
           <slot>
diff --git a/core/src/components/menu-toggle/menu-toggle-util.ts b/core/src/components/menu-toggle/menu-toggle-util.ts
index ab87b36b14..140befaefb 100644
--- a/core/src/components/menu-toggle/menu-toggle-util.ts
+++ b/core/src/components/menu-toggle/menu-toggle-util.ts
@@ -1,32 +1,7 @@
-
-// Get the menu controller element
-export const getMenuController = (doc: Document): Promise<HTMLIonMenuControllerElement | undefined> => {
-  const menuControllerElement = doc.querySelector('ion-menu-controller');
-  if (!menuControllerElement) {
-    return Promise.resolve(undefined);
-  }
-  return menuControllerElement.componentOnReady();
-};
-
-// Given a menu, toggle it
-export const toggleMenu = async (menu: string | undefined) => {
-  const menuCtrl = await getMenuController(document);
-  if (menuCtrl) {
-    const menuEl = await menuCtrl.get(menu);
-    if (menuEl) {
-      menuCtrl.toggle(menu);
-    }
-  }
-};
+import { menuController } from '../../utils/menu-controller';
 
 // Given a menu, return whether or not the menu toggle should be visible
 export const updateVisibility = async (menu: string | undefined) => {
-  const menuCtrl = await getMenuController(document);
-  if (menuCtrl) {
-    const menuEl = await menuCtrl.get(menu);
-    if (menuEl && await menuEl.isActive()) {
-      return true;
-    }
-  }
-  return false;
+  const menuEl = await menuController.get(menu);
+  return !!(menuEl && await menuEl.isActive());
 };
diff --git a/core/src/components/menu-toggle/menu-toggle.tsx b/core/src/components/menu-toggle/menu-toggle.tsx
index 1d540fd5ab..db43b245cc 100644
--- a/core/src/components/menu-toggle/menu-toggle.tsx
+++ b/core/src/components/menu-toggle/menu-toggle.tsx
@@ -1,8 +1,9 @@
 import { Component, ComponentInterface, Host, Listen, Prop, State, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
+import { menuController } from '../../utils/menu-controller';
 
-import { toggleMenu, updateVisibility } from './menu-toggle-util';
+import { updateVisibility } from './menu-toggle-util';
 
 @Component({
   tag: 'ion-menu-toggle',
@@ -31,22 +32,18 @@ export class MenuToggle implements ComponentInterface {
    */
   @Prop() autoHide = true;
 
-  async componentDidLoad() {
-    await this.setVisibility();
+  connectedCallback() {
+    this.visibilityChanged();
   }
 
   @Listen('ionMenuChange', { target: 'body' })
   @Listen('ionSplitPaneVisible', { target: 'body' })
   async visibilityChanged() {
-    await this.setVisibility();
-  }
-
-  private setVisibility = async () => {
     this.visible = await updateVisibility(this.menu);
   }
 
-  private onClick = async () => {
-    await toggleMenu(this.menu);
+  private onClick = () => {
+    return menuController.toggle(this.menu);
   }
 
   render() {
diff --git a/core/src/components/menu-toggle/test/basic/index.html b/core/src/components/menu-toggle/test/basic/index.html
index 5f898110db..73a2285216 100644
--- a/core/src/components/menu-toggle/test/basic/index.html
+++ b/core/src/components/menu-toggle/test/basic/index.html
@@ -91,21 +91,18 @@
 
   <script>
 
-    async function openDefault() {
+    function openDefault() {
       const menuButton = document.querySelector('ion-menu-toggle');
-      await menuButton.componentOnReady();
       menuButton.menu = null;
     }
 
-    async function openStart() {
+    function openStart() {
       const menuButton = document.querySelector('ion-menu-toggle');
-      await menuButton.componentOnReady();
       menuButton.menu = 'start';
     }
 
-    async function openEnd() {
+    function openEnd() {
       const menuButton = document.querySelector('ion-menu-toggle');
-      await menuButton.componentOnReady();
       menuButton.menu = 'end';
     }
   </script>
diff --git a/core/src/components/menu/test/basic/index.html b/core/src/components/menu/test/basic/index.html
index c855f57910..d8a249a7f5 100644
--- a/core/src/components/menu/test/basic/index.html
+++ b/core/src/components/menu/test/basic/index.html
@@ -93,21 +93,21 @@
     }
   </style>
 
-  <script type="module">
+  <script>
     const menuCtrl = document.querySelector('ion-menu-controller');
 
-    function openFirst() {
-      menuCtrl.enable(true, 'first');
-      menuCtrl.open('first');
+    async function openFirst() {
+      await menuCtrl.enable(true, 'first');
+      await menuCtrl.open('first');
     }
 
-    function openEnd() {
-      menuCtrl.open('end');
+    async  function openEnd() {
+      awaitmenuCtrl.open('end');
     }
 
-    function openCustom() {
-      menuCtrl.enable(true, 'custom');
-      menuCtrl.open('custom');
+    async function openCustom() {
+      await menuCtrl.enable(true, 'custom');
+      await menuCtrl.open('custom');
     }
   </script>
 </body>