javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-24 06:22:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(menu): change event interface to be more flexible

Browse Source
This commit is contained in:
Dan Bucholtz
2018-02-23 10:59:26 -06:00
parent ccb82315d0
commit c3361d7306
3 changed files with 17 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/core/src/components/menu-toggle/menu-toggle.tsx
View File

@ -28,9 +28,8 @@ export class MenuToggle {
}); });
} }
@Listen('body:ionMenuDisable') @Listen('body:ionMenuChange')
@Listen('body:ionSplitPaneVisible') @Listen('body:ionSplitPaneVisible')
@Listen('body:ionMenuRegister')
updateVisibility() { updateVisibility() {
return getMenuController().then(menuCtrl => { return getMenuController().then(menuCtrl => {
if (menuCtrl) { if (menuCtrl) {

28
packages/core/src/components/menu/menu.tsx
View File

@ -78,7 +78,7 @@ export class Menu {
@Watch('disabled') @Watch('disabled')
protected disabledChanged(disabled: boolean) { protected disabledChanged(disabled: boolean) {
this.updateState(); this.updateState();
this.ionMenuDisable.emit({disabled}); this.ionMenuChange.emit({ disabled: disabled, open: this._isOpen});
} }
/** /**
@ -108,12 +108,6 @@ export class Menu {
@Prop() maxEdgeStart = 50; @Prop() maxEdgeStart = 50;
/**
* Emitted when the sliding position changes.
* It reports the relative position.
*/
@Event() ionDrag: EventEmitter;
/** /**
* Emitted when the menu is open. * Emitted when the menu is open.
*/ */
@ -125,9 +119,7 @@ export class Menu {
@Event() ionClose: EventEmitter; @Event() ionClose: EventEmitter;
@Event() protected ionMenuDisable: EventEmitter; @Event() protected ionMenuChange: EventEmitter<MenuChangeEventDetail>;
@Event() protected ionMenuRegister: EventEmitter;
componentWillLoad() { componentWillLoad() {
return this.lazyMenuCtrl.componentOnReady().then(menu => { return this.lazyMenuCtrl.componentOnReady().then(menu => {
@ -165,7 +157,7 @@ export class Menu {
} }
// register this menu with the app's menu controller // register this menu with the app's menu controller
this.menuCtrl._register(this); this.menuCtrl._register(this);
this.ionMenuRegister.emit(); this.ionMenuChange.emit({ disabled: !isEnabled, open: this._isOpen});
// mask it as enabled / disabled // mask it as enabled / disabled
this.disabled = !isEnabled; this.disabled = !isEnabled;
@ -394,7 +386,7 @@ export class Menu {
this.contentEl.classList.add(MENU_CONTENT_OPEN); this.contentEl.classList.add(MENU_CONTENT_OPEN);
// emit open event // emit open event
this.ionOpen.emit({ menu: this.el }); this.ionOpen.emit();
} else { } else {
// enable swipe to go back gesture // enable swipe to go back gesture
@ -406,7 +398,7 @@ export class Menu {
this.backdropEl.classList.remove(SHOW_BACKDROP); this.backdropEl.classList.remove(SHOW_BACKDROP);
// emit close event // emit close event
this.ionClose.emit({ menu: this.el }); this.ionClose.emit();
} }
return isOpen; return isOpen;
} }
@ -489,3 +481,13 @@ const SHOW_MENU = 'show-menu';
const SHOW_BACKDROP = 'show-backdrop'; const SHOW_BACKDROP = 'show-backdrop';
const MENU_CONTENT_OPEN = 'menu-content-open'; const MENU_CONTENT_OPEN = 'menu-content-open';
const GESTURE_BLOCKER = 'goback-swipe'; const GESTURE_BLOCKER = 'goback-swipe';
export interface MenuChangeEvent {
target: HTMLIonMenuElement;
detail: MenuChangeEventDetail;
}
export interface MenuChangeEventDetail {
disabled: boolean;
open: boolean;
}

11
packages/core/src/components/menu/readme.md
View File

@ -128,16 +128,7 @@ see the `menuType` in the [config](../../config/Config). Available options:
Emitted when the menu is closed. Emitted when the menu is closed.
#### ionDrag #### ionMenuChange
Emitted when the sliding position changes.
It reports the relative position.
#### ionMenuDisable
#### ionMenuRegister
#### ionOpen #### ionOpen