Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from Jul 26, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 12 additions & 2 deletions src/lib/menu/index.ts
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
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
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
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