javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(menu-toggle): use ESM menuController (#19225)

Browse Source
This commit is contained in:
Manu MA
2019-08-29 15:19:01 +02:00
committed by GitHub
parent 9751f145e1
commit 4c30878fc7
5 changed files with 27 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
core/src/components/menu-button/menu-button.tsx
View File

@ -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>

31
core/src/components/menu-toggle/menu-toggle-util.ts
View File

@ -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());
};

15
core/src/components/menu-toggle/menu-toggle.tsx
View File

@ -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() {

9
core/src/components/menu-toggle/test/basic/index.html
View File

@ -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>

18
core/src/components/menu/test/basic/index.html
View File

@ -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>