From b2dd17ad095b616cfd33e0d43a4f94feeb0c94f5 Mon Sep 17 00:00:00 2001 From: Austin Date: Mon, 30 Oct 2017 16:07:43 -0500 Subject: [PATCH] fix(menu): make @Output names consistent #6677 (#8053) * fix(menu): make @Output names consistent #6677 * chore(nit): pr feedback updates * chore(merge): fix bad merge --- src/lib/menu/menu-directive.ts | 24 +++++++++++++++--------- src/lib/menu/menu-item.ts | 6 +++--- src/lib/menu/menu-trigger.ts | 24 ++++++++++++++++++------ src/lib/menu/menu.html | 2 +- src/lib/menu/menu.spec.ts | 6 +++--- 5 files changed, 40 insertions(+), 22 deletions(-) diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts index 742023b39340..50453939a2dd 100644 --- a/src/lib/menu/menu-directive.ts +++ b/src/lib/menu/menu-directive.ts @@ -142,7 +142,13 @@ export class MatMenu implements AfterContentInit, MatMenuPanel, OnDestroy { } /** Event emitted when the menu is closed. */ - @Output() close = new EventEmitter(); + @Output() closed = new EventEmitter(); + + /** + * Event emitted when the menu is closed. + * @deprecated Switch to `closed` instead + */ + @Output() close = this.closed; constructor( private _elementRef: ElementRef, @@ -156,39 +162,39 @@ export class MatMenu implements AfterContentInit, MatMenuPanel, OnDestroy { ngOnDestroy() { this._tabSubscription.unsubscribe(); - this.close.emit(); - this.close.complete(); + this.closed.emit(); + this.closed.complete(); } /** Stream that emits whenever the hovered menu item changes. */ - hover(): Observable { + _hovered(): Observable { if (this.items) { return this.items.changes.pipe( startWith(this.items), - switchMap(items => merge(...items.map(item => item.hover))) + switchMap(items => merge(...items.map(item => item._hovered))) ); } return this._ngZone.onStable .asObservable() - .pipe(first(), switchMap(() => this.hover())); + .pipe(first(), switchMap(() => this._hovered())); } /** Handle a keyboard event from the menu, delegating to the appropriate action. */ _handleKeydown(event: KeyboardEvent) { switch (event.keyCode) { case ESCAPE: - this.close.emit('keydown'); + this.closed.emit('keydown'); event.stopPropagation(); break; case LEFT_ARROW: if (this.parentMenu && this.direction === 'ltr') { - this.close.emit('keydown'); + this.closed.emit('keydown'); } break; case RIGHT_ARROW: if (this.parentMenu && this.direction === 'rtl') { - this.close.emit('keydown'); + this.closed.emit('keydown'); } break; default: diff --git a/src/lib/menu/menu-item.ts b/src/lib/menu/menu-item.ts index 96c04201310e..e985c43dabd2 100644 --- a/src/lib/menu/menu-item.ts +++ b/src/lib/menu/menu-item.ts @@ -51,7 +51,7 @@ export class MatMenuItem extends _MatMenuItemMixinBase implements FocusableOptio OnDestroy { /** Stream that emits when the menu item is hovered. */ - hover: Subject = new Subject(); + _hovered: Subject = new Subject(); /** Whether the menu item is highlighted. */ _highlighted: boolean = false; @@ -69,7 +69,7 @@ export class MatMenuItem extends _MatMenuItemMixinBase implements FocusableOptio } ngOnDestroy() { - this.hover.complete(); + this._hovered.complete(); } /** Used to set the `tabindex`. */ @@ -93,7 +93,7 @@ export class MatMenuItem extends _MatMenuItemMixinBase implements FocusableOptio /** Emits to the hover stream. */ _emitHoverEvent() { if (!this.disabled) { - this.hover.next(this); + this._hovered.next(this); } } diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts index 1f0dd4861e2d..9e58c410fd51 100644 --- a/src/lib/menu/menu-trigger.ts +++ b/src/lib/menu/menu-trigger.ts @@ -107,10 +107,22 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy { @Input('matMenuTriggerFor') menu: MatMenuPanel; /** Event emitted when the associated menu is opened. */ - @Output() onMenuOpen = new EventEmitter(); + @Output() menuOpened = new EventEmitter(); + + /** + * Event emitted when the associated menu is opened. + * @deprecated Switch to `menuOpened` instead + */ + @Output() onMenuOpen = this.menuOpened; /** Event emitted when the associated menu is closed. */ - @Output() onMenuClose = new EventEmitter(); + @Output() menuClosed = new EventEmitter(); + + /** + * Event emitted when the associated menu is closed. + * @deprecated Switch to `menuClosed` instead + */ + @Output() onMenuClose = this.menuClosed; constructor(private _overlay: Overlay, private _element: ElementRef, @@ -133,13 +145,13 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy { // If a click closed the menu, we should close the entire chain of nested menus. if (reason === 'click' && this._parentMenu) { - this._parentMenu.close.emit(reason); + this._parentMenu.closed.emit(reason); } }); if (this.triggersSubmenu()) { // Subscribe to changes in the hovered item in order to toggle the panel. - this._hoverSubscription = this._parentMenu.hover() + this._hoverSubscription = this._parentMenu._hovered() .pipe(filter(active => active === this._menuItemInstance)) .subscribe(() => { this._openedByMouse = true; @@ -273,7 +285,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy { // set state rather than toggle to support triggers sharing a menu private _setIsMenuOpen(isOpen: boolean): void { this._menuOpen = isOpen; - this._menuOpen ? this.onMenuOpen.emit() : this.onMenuClose.emit(); + this._menuOpen ? this.menuOpened.emit() : this.menuClosed.emit(); if (this.triggersSubmenu()) { this._menuItemInstance._highlighted = isOpen; @@ -388,7 +400,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy { private _menuClosingActions() { const backdrop = this._overlayRef!.backdropClick(); const parentClose = this._parentMenu ? this._parentMenu.close : observableOf(); - const hover = this._parentMenu ? this._parentMenu.hover().pipe( + const hover = this._parentMenu ? this._parentMenu._hovered().pipe( filter(active => active !== this._menuItemInstance), filter(() => this._menuOpen) ) : observableOf(); diff --git a/src/lib/menu/menu.html b/src/lib/menu/menu.html index ddbad3894152..6c3450a52fcf 100644 --- a/src/lib/menu/menu.html +++ b/src/lib/menu/menu.html @@ -3,7 +3,7 @@ class="mat-menu-panel" [ngClass]="_classList" (keydown)="_handleKeydown($event)" - (click)="close.emit('click')" + (click)="closed.emit('click')" [@transformMenu]="_panelAnimationState" (@transformMenu.done)="_onAnimationDone($event)" tabindex="-1" diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts index 7eae9d1bae64..082257508200 100644 --- a/src/lib/menu/menu.spec.ts +++ b/src/lib/menu/menu.spec.ts @@ -559,7 +559,7 @@ describe('MatMenu', () => { const emitCallback = jasmine.createSpy('emit callback'); const completeCallback = jasmine.createSpy('complete callback'); - fixture.componentInstance.menu.close.subscribe(emitCallback, null, completeCallback); + fixture.componentInstance.menu.closed.subscribe(emitCallback, null, completeCallback); fixture.destroy(); expect(emitCallback).toHaveBeenCalledWith(undefined); @@ -625,7 +625,7 @@ describe('MatMenu', () => { fixture.detectChanges(); const spy = jasmine.createSpy('hover spy'); - const subscription = instance.rootMenu.hover().subscribe(spy); + const subscription = instance.rootMenu._hovered().subscribe(spy); const menuItems = overlay.querySelectorAll('[mat-menu-item]'); dispatchMouseEvent(menuItems[0], 'mouseenter'); @@ -1112,7 +1112,7 @@ describe('MatMenu default overrides', () => { @Component({ template: ` - +