Skip to content

Commit

Permalink
feat(menu): add injection token for overriding the default options (a…
Browse files Browse the repository at this point in the history
…ngular#5483)

* feat(menu): add injection token for overriding the default options

Adds a new injection token that allows the consumer to override the default values for the `xPosition`, `yPosition` and `overlapTrigger` options.

Fixes angular#5479.

* fix: unresolved merge conflict and pr feedback
  • Loading branch information
crisbeto authored and andrewseguin committed Jul 26, 2017
1 parent 92d8368 commit 3cb3945
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 7 deletions.
14 changes: 12 additions & 2 deletions src/lib/menu/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {OverlayModule, MdCommonModule} from '../core';
import {MdMenu} from './menu-directive';
import {MdMenu, MD_MENU_DEFAULT_OPTIONS} from './menu-directive';
import {MdMenuItem} from './menu-item';
import {MdMenuTrigger, MD_MENU_SCROLL_STRATEGY_PROVIDER} from './menu-trigger';
import {MdRippleModule} from '../core/ripple/index';
Expand All @@ -24,7 +24,17 @@ import {MdRippleModule} from '../core/ripple/index';
],
exports: [MdMenu, MdMenuItem, MdMenuTrigger, MdCommonModule],
declarations: [MdMenu, MdMenuItem, MdMenuTrigger],
providers: [MD_MENU_SCROLL_STRATEGY_PROVIDER],
providers: [
MD_MENU_SCROLL_STRATEGY_PROVIDER,
{
provide: MD_MENU_DEFAULT_OPTIONS,
useValue: {
overlapTrigger: true,
xPosition: 'after',
yPosition: 'below',
},
}
],
})
export class MdMenuModule {}

Expand Down
22 changes: 18 additions & 4 deletions src/lib/menu/menu-directive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ import {
ViewEncapsulation,
ElementRef,
ChangeDetectionStrategy,
InjectionToken,
Inject,
} from '@angular/core';
import {AnimationEvent} from '@angular/animations';
import {MenuPositionX, MenuPositionY} from './menu-positions';
Expand All @@ -34,6 +36,16 @@ import {merge} from 'rxjs/observable/merge';
import {Observable} from 'rxjs/Observable';
import {Direction} from '../core';

/** Default `md-menu` options that can be overridden. */
export interface MdMenuDefaultOptions {
xPosition: MenuPositionX;
yPosition: MenuPositionY;
overlapTrigger: boolean;
}

/** Injection token to be used to override the default options for `md-menu`. */
export const MD_MENU_DEFAULT_OPTIONS =
new InjectionToken<MdMenuDefaultOptions>('md-menu-default-options');

@Component({
moduleId: module.id,
Expand All @@ -50,8 +62,8 @@ import {Direction} from '../core';
})
export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
private _keyManager: FocusKeyManager;
private _xPosition: MenuPositionX = 'after';
private _yPosition: MenuPositionY = 'below';
private _xPosition: MenuPositionX = this._defaultOptions.xPosition;
private _yPosition: MenuPositionY = this._defaultOptions.yPosition;

/** Subscription to tab events on the menu panel */
private _tabSubscription: Subscription;
Expand Down Expand Up @@ -96,7 +108,7 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
@ContentChildren(MdMenuItem) items: QueryList<MdMenuItem>;

/** Whether the menu should overlap its trigger. */
@Input() overlapTrigger = true;
@Input() overlapTrigger = this._defaultOptions.overlapTrigger;

/**
* This method takes classes set on the host md-menu element and applies them on the
Expand All @@ -120,7 +132,9 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
/** Event emitted when the menu is closed. */
@Output() close = new EventEmitter<void | 'click' | 'keydown'>();

constructor(private _elementRef: ElementRef) { }
constructor(
private _elementRef: ElementRef,
@Inject(MD_MENU_DEFAULT_OPTIONS) private _defaultOptions: MdMenuDefaultOptions) { }

ngAfterContentInit() {
this._keyManager = new FocusKeyManager(this.items).withWrap();
Expand Down
24 changes: 24 additions & 0 deletions src/lib/menu/menu.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
MenuPositionX,
MenuPositionY,
MdMenu,
MD_MENU_DEFAULT_OPTIONS,
} from './index';
import {MENU_PANEL_TOP_PADDING} from './menu-trigger';
import {extendObject} from '../core/util/object-extend';
Expand Down Expand Up @@ -875,6 +876,29 @@ describe('MdMenu', () => {

});

describe('MdMenu default overrides', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [MdMenuModule, NoopAnimationsModule],
declarations: [SimpleMenu],
providers: [{
provide: MD_MENU_DEFAULT_OPTIONS,
useValue: {overlapTrigger: false, xPosition: 'before', yPosition: 'above'},
}],
}).compileComponents();
}));

it('should allow for the default menu options to be overridden', () => {
const fixture = TestBed.createComponent(SimpleMenu);
fixture.detectChanges();
const menu = fixture.componentInstance.menu;

expect(menu.overlapTrigger).toBe(false);
expect(menu.xPosition).toBe('before');
expect(menu.yPosition).toBe('above');
});
});

@Component({
template: `
<button [mdMenuTriggerFor]="menu" #triggerEl>Toggle menu</button>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/menu/menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/

export {MdMenu} from './menu-directive';
export {MdMenu, MdMenuDefaultOptions, MD_MENU_DEFAULT_OPTIONS} from './menu-directive';
export {MdMenuItem} from './menu-item';
export {MdMenuTrigger} from './menu-trigger';
export {MdMenuPanel} from './menu-panel';
Expand Down

0 comments on commit 3cb3945

Please sign in to comment.