diff --git a/core/src/components/menu-button/menu-button.scss b/core/src/components/menu-button/menu-button.scss index ba1fe5a65e..7a322e64b7 100644 --- a/core/src/components/menu-button/menu-button.scss +++ b/core/src/components/menu-button/menu-button.scss @@ -77,6 +77,13 @@ ion-icon { pointer-events: none; } +// Menu Button: Hidden +// -------------------------------------------------- + +:host(.menu-button-hidden) { + display: none; +} + // Menu Button: Disabled // -------------------------------------------------- diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx index 8173d88db5..0529a79830 100644 --- a/core/src/components/menu-button/menu-button.tsx +++ b/core/src/components/menu-button/menu-button.tsx @@ -1,10 +1,11 @@ -import { Component, ComponentInterface, Prop, h } from '@stencil/core'; +import { Component, ComponentInterface, Host, Listen, Prop, State, h } from '@stencil/core'; import { config } from '../../global/config'; import { getIonMode } from '../../global/ionic-global'; import { Color } from '../../interface'; import { ButtonInterface } from '../../utils/element-interface'; import { createColorClasses } from '../../utils/theme'; +import { toggleMenu, updateVisibility } from '../menu-toggle/menu-toggle-util'; @Component({ tag: 'ion-menu-button', @@ -16,6 +17,8 @@ import { createColorClasses } from '../../utils/theme'; }) export class MenuButton implements ComponentInterface, ButtonInterface { + @State() visible = false; + /** * The color to use from your application's color palette. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. @@ -43,35 +46,51 @@ export class MenuButton implements ComponentInterface, ButtonInterface { */ @Prop() type: 'submit' | 'reset' | 'button' = 'button'; - hostData() { - const mode = getIonMode(this); - const { color, disabled } = this; + async componentDidLoad() { + await this.setVisibility(); + } - return { - 'aria-disabled': disabled ? 'true' : null, - class: { - ...createColorClasses(color), + @Listen('ionMenuChange', { target: 'body' }) + @Listen('ionSplitPaneVisible', { target: 'body' }) + async visibilityChanged() { + await this.setVisibility(); + } - [mode]: true, + private setVisibility = async () => { + this.visible = await updateVisibility(this.menu); + } - 'button': true, // ion-buttons target .button - 'menu-button-disabled': disabled, - 'ion-activatable': true, - 'ion-focusable': true - } - }; + private onClick = async () => { + await toggleMenu(this.menu); } render() { + const { color, disabled } = this; const mode = getIonMode(this); const menuIcon = config.get('menuIcon', 'menu'); + const hidden = this.autoHide && !this.visible; const attrs = { type: this.type }; return ( - + - + ); } } diff --git a/core/src/components/menu-button/readme.md b/core/src/components/menu-button/readme.md index 7e90145e65..25761955ab 100644 --- a/core/src/components/menu-button/readme.md +++ b/core/src/components/menu-button/readme.md @@ -38,14 +38,12 @@ Menu Button is component that automatically creates the icon and functionality t ### Depends on -- [ion-menu-toggle](../menu-toggle) - ion-icon - [ion-ripple-effect](../ripple-effect) ### Graph ```mermaid graph TD; - ion-menu-button --> ion-menu-toggle ion-menu-button --> ion-icon ion-menu-button --> ion-ripple-effect style ion-menu-button fill:#f9f,stroke:#333,stroke-width:4px diff --git a/core/src/components/menu-button/test/basic/index.html b/core/src/components/menu-button/test/basic/index.html index d41dcce417..fa4ffbe012 100644 --- a/core/src/components/menu-button/test/basic/index.html +++ b/core/src/components/menu-button/test/basic/index.html @@ -84,6 +84,13 @@ Success + + + + + + Hidden + @@ -92,7 +99,7 @@ padding-left: 16px; } - ion-menu-button { + ion-menu-button[auto-hide="false"] { display: inline-block; } diff --git a/core/src/components/menu-toggle/menu-toggle-util.ts b/core/src/components/menu-toggle/menu-toggle-util.ts new file mode 100644 index 0000000000..ab87b36b14 --- /dev/null +++ b/core/src/components/menu-toggle/menu-toggle-util.ts @@ -0,0 +1,32 @@ + +// Get the menu controller element +export const getMenuController = (doc: Document): Promise => { + 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); + } + } +}; + +// 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; +}; diff --git a/core/src/components/menu-toggle/menu-toggle.tsx b/core/src/components/menu-toggle/menu-toggle.tsx index 1482696759..1d540fd5ab 100644 --- a/core/src/components/menu-toggle/menu-toggle.tsx +++ b/core/src/components/menu-toggle/menu-toggle.tsx @@ -2,6 +2,8 @@ import { Component, ComponentInterface, Host, Listen, Prop, State, h } from '@st import { getIonMode } from '../../global/ionic-global'; +import { toggleMenu, updateVisibility } from './menu-toggle-util'; + @Component({ tag: 'ion-menu-toggle', styleUrl: 'menu-toggle.scss', @@ -29,33 +31,24 @@ export class MenuToggle implements ComponentInterface { */ @Prop() autoHide = true; - componentDidLoad() { - return this.updateVisibility(); + async componentDidLoad() { + await this.setVisibility(); } @Listen('ionMenuChange', { target: 'body' }) @Listen('ionSplitPaneVisible', { target: 'body' }) - async updateVisibility() { - const menuCtrl = await getMenuController(document); - if (menuCtrl) { - const menu = await menuCtrl.get(this.menu); - if (menu && await menu.isActive()) { - this.visible = true; - return; - } - } - this.visible = false; + async visibilityChanged() { + await this.setVisibility(); + } + + private setVisibility = async () => { + this.visible = await updateVisibility(this.menu); } private onClick = async () => { - const menuCtrl = await getMenuController(document); - if (menuCtrl) { - const menu = await menuCtrl.get(this.menu); - if (menu) { - menuCtrl.toggle(this.menu); - } - } + await toggleMenu(this.menu); } + render() { const mode = getIonMode(this); const hidden = this.autoHide && !this.visible; @@ -74,11 +67,3 @@ export class MenuToggle implements ComponentInterface { ); } } - -function getMenuController(doc: Document): Promise { - const menuControllerElement = doc.querySelector('ion-menu-controller'); - if (!menuControllerElement) { - return Promise.resolve(undefined); - } - return menuControllerElement.componentOnReady(); -} diff --git a/core/src/components/menu-toggle/readme.md b/core/src/components/menu-toggle/readme.md index 61fb8749ae..2824f4b2de 100644 --- a/core/src/components/menu-toggle/readme.md +++ b/core/src/components/menu-toggle/readme.md @@ -17,19 +17,6 @@ In case it's desired to keep `ion-menu-toggle` always visible, the `autoHide` pr | `menu` | `menu` | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle. If this property is not used, `ion-menu-toggle` will toggle the first menu that is active. | `string \| undefined` | `undefined` | -## Dependencies - -### Used by - - - [ion-menu-button](../menu-button) - -### Graph -```mermaid -graph TD; - ion-menu-button --> ion-menu-toggle - style ion-menu-toggle fill:#f9f,stroke:#333,stroke-width:4px -``` - ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/split-pane/test/basic/index.html b/core/src/components/split-pane/test/basic/index.html index 8f081a72b5..631a158515 100644 --- a/core/src/components/split-pane/test/basic/index.html +++ b/core/src/components/split-pane/test/basic/index.html @@ -55,6 +55,7 @@ + Navigation