skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(menu): switch menu-item to common coercion logic (#3065)

Browse Source 
* `MdMenuItem` to use the common coercion logic when determining the disabled state.
* Gets rid of the `@HostBinding` in favor of passing them through the `host` option.

Relates to #2985.
This commit is contained in:
Kristiyan Kostadinov
2017-03-07 01:51:27 +01:00
committed by tinayuangao
parent 8b2ae0d8aa
commit b135b64a8e
1 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/menu/menu-item.ts
+24 -14
View File
@@ -1,5 +1,6 @@
import {Component, ElementRef, Input, HostBinding, Renderer} from '@angular/core';
import {Component, ElementRef, Input, Renderer} from '@angular/core';
import {Focusable} from '../core/a11y/focus-key-manager';
import {coerceBooleanProperty} from '../core/coercion/boolean-property';
/**
* This directive is intended to be used inside an md-menu tag.
@@ -11,40 +12,49 @@ import {Focusable} from '../core/a11y/focus-key-manager';
host: {
'role': 'menuitem',
'[class.mat-menu-item]': 'true',
'[attr.tabindex]': '_getTabIndex()',
'[attr.aria-disabled]': 'disabled.toString()',
'[attr.disabled]': '_getDisabledAttr()',
'(click)': '_checkDisabled($event)',
'[attr.tabindex]': '_tabindex'
},
templateUrl: 'menu-item.html',
exportAs: 'mdMenuItem'
})
export class MdMenuItem implements Focusable {
_disabled: boolean;
/** Whether the menu item is disabled */
private _disabled: boolean = false;
constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
/** Focuses the menu item. */
focus(): void {
this._renderer.invokeElementMethod(this._elementRef.nativeElement, 'focus');
this._renderer.invokeElementMethod(this._getHostElement(), 'focus');
}
// this is necessary to support anchors
/** Whether the menu item is disabled. */
@HostBinding('attr.disabled')
@Input()
get disabled(): boolean { return this._disabled; }
set disabled(value: boolean) {
this._disabled = (value === false || value === undefined) ? null : true;
get disabled() { return this._disabled; }
set disabled(value: any) {
this._disabled = coerceBooleanProperty(value);
}
/** Sets the aria-disabled property on the menu item. */
@HostBinding('attr.aria-disabled')
get isAriaDisabled(): string { return String(!!this.disabled); }
get _tabindex() { return this.disabled ? '-1' : '0'; }
/** Used to set the `tabindex`. */
_getTabIndex(): string {
return this._disabled ? '-1' : '0';
}
/** Used to set the HTML `disabled` attribute. Necessary for links to be disabled properly. */
_getDisabledAttr(): boolean {
return this._disabled ? true : null;
}
/** Returns the host DOM element. */
_getHostElement(): HTMLElement {
return this._elementRef.nativeElement;
}
_checkDisabled(event: Event) {
/** Prevents the default element actions if it is disabled. */
_checkDisabled(event: Event): void {
if (this.disabled) {
event.preventDefault();
event.stopPropagation();