From 18c6dec61a7775d02cee529c45dda0ad2d587ce8 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 15 Aug 2017 23:46:55 +0200 Subject: [PATCH] fix: improved key manager typings (#6443) Makes the FocusKeyManager and ActivedescendantKeyManager generic which avoids having to cast the items all the time (e.g. https://github.com/angular/material2/blob/master/src/lib/autocomplete/autocomplete-trigger.ts#L234). --- src/cdk/a11y/activedescendant-key-manager.ts | 2 +- src/cdk/a11y/focus-key-manager.ts | 2 +- src/cdk/a11y/list-key-manager.spec.ts | 8 ++++---- src/lib/autocomplete/autocomplete-trigger.ts | 4 ++-- src/lib/autocomplete/autocomplete.ts | 4 ++-- src/lib/chips/chip-list.spec.ts | 6 +++--- src/lib/chips/chip-list.ts | 6 +++--- src/lib/core/a11y/activedescendant-key-manager.ts | 2 +- src/lib/core/a11y/focus-key-manager.ts | 2 +- src/lib/list/selection-list.ts | 6 +++--- src/lib/menu/menu-directive.ts | 6 +++--- src/lib/select/select.ts | 4 ++-- 12 files changed, 26 insertions(+), 26 deletions(-) diff --git a/src/cdk/a11y/activedescendant-key-manager.ts b/src/cdk/a11y/activedescendant-key-manager.ts index 07e60243ef1e..40f0d40144c9 100644 --- a/src/cdk/a11y/activedescendant-key-manager.ts +++ b/src/cdk/a11y/activedescendant-key-manager.ts @@ -18,7 +18,7 @@ export interface Highlightable extends ListKeyManagerOption { setInactiveStyles(): void; } -export class ActiveDescendantKeyManager extends ListKeyManager { +export class ActiveDescendantKeyManager extends ListKeyManager { /** * This method sets the active item to the item at the specified index. diff --git a/src/cdk/a11y/focus-key-manager.ts b/src/cdk/a11y/focus-key-manager.ts index b1b2256991b3..8c8f06102a87 100644 --- a/src/cdk/a11y/focus-key-manager.ts +++ b/src/cdk/a11y/focus-key-manager.ts @@ -17,7 +17,7 @@ export interface FocusableOption extends ListKeyManagerOption { focus(): void; } -export class FocusKeyManager extends ListKeyManager { +export class FocusKeyManager extends ListKeyManager { /** * This method sets the active item to the item at the specified index. * It also adds focuses the newly active item. diff --git a/src/cdk/a11y/list-key-manager.spec.ts b/src/cdk/a11y/list-key-manager.spec.ts index c03f0f1a60b9..462366554ece 100644 --- a/src/cdk/a11y/list-key-manager.spec.ts +++ b/src/cdk/a11y/list-key-manager.spec.ts @@ -451,11 +451,11 @@ describe('Key managers', () => { }); describe('FocusKeyManager', () => { - let keyManager: FocusKeyManager; + let keyManager: FocusKeyManager; beforeEach(() => { itemList.items = [new FakeFocusable(), new FakeFocusable(), new FakeFocusable()]; - keyManager = new FocusKeyManager(itemList); + keyManager = new FocusKeyManager(itemList); // first item is already focused keyManager.setFirstItemActive(); @@ -503,11 +503,11 @@ describe('Key managers', () => { }); describe('ActiveDescendantKeyManager', () => { - let keyManager: ActiveDescendantKeyManager; + let keyManager: ActiveDescendantKeyManager; beforeEach(fakeAsync(() => { itemList.items = [new FakeHighlightable(), new FakeHighlightable(), new FakeHighlightable()]; - keyManager = new ActiveDescendantKeyManager(itemList); + keyManager = new ActiveDescendantKeyManager(itemList); // first item is already focused keyManager.setFirstItemActive(); diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index d0da2c36bc66..42788e28b88d 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -231,7 +231,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { /** The currently active option, coerced to MdOption type. */ get activeOption(): MdOption | null { if (this.autocomplete && this.autocomplete._keyManager) { - return this.autocomplete._keyManager.activeItem as MdOption; + return this.autocomplete._keyManager.activeItem; } return null; @@ -439,7 +439,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { * Clear any previous selected option and emit a selection change event for this option */ private _clearPreviousSelectedOption(skip: MdOption) { - this.autocomplete.options.forEach((option) => { + this.autocomplete.options.forEach(option => { if (option != skip && option.selected) { option.deselect(); } diff --git a/src/lib/autocomplete/autocomplete.ts b/src/lib/autocomplete/autocomplete.ts index 92ffb49bd89d..53d579664d9c 100644 --- a/src/lib/autocomplete/autocomplete.ts +++ b/src/lib/autocomplete/autocomplete.ts @@ -43,7 +43,7 @@ let _uniqueAutocompleteIdCounter = 0; export class MdAutocomplete implements AfterContentInit { /** Manages active item in option list based on key events. */ - _keyManager: ActiveDescendantKeyManager; + _keyManager: ActiveDescendantKeyManager; /** Whether the autocomplete panel should be visible, depending on option length. */ showPanel = false; @@ -66,7 +66,7 @@ export class MdAutocomplete implements AfterContentInit { constructor(private _changeDetectorRef: ChangeDetectorRef) { } ngAfterContentInit() { - this._keyManager = new ActiveDescendantKeyManager(this.options).withWrap(); + this._keyManager = new ActiveDescendantKeyManager(this.options).withWrap(); } /** diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts index 5d656d96cb6e..9bf1fdbb0182 100644 --- a/src/lib/chips/chip-list.spec.ts +++ b/src/lib/chips/chip-list.spec.ts @@ -3,13 +3,14 @@ import {Component, DebugElement, QueryList} from '@angular/core'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {MdChipList, MdChipsModule} from './index'; -import {FocusKeyManager} from '../core/a11y/focus-key-manager'; +import {FocusKeyManager} from '@angular/cdk/a11y'; import {createKeyboardEvent} from '@angular/cdk/testing'; import {MdInputModule} from '../input/index'; import {LEFT_ARROW, RIGHT_ARROW, BACKSPACE, DELETE, TAB} from '../core/keyboard/keycodes'; import {Directionality} from '../core'; import {MdFormFieldModule} from '../form-field/index'; +import {MdChip} from './chip'; describe('MdChipList', () => { let fixture: ComponentFixture; @@ -18,8 +19,7 @@ describe('MdChipList', () => { let chipListInstance: MdChipList; let testComponent: StandardChipList; let chips: QueryList; - let manager: FocusKeyManager; - + let manager: FocusKeyManager; let dir = 'ltr'; beforeEach(async(() => { diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts index 35d7ddfb7f70..4d35584f9fb6 100644 --- a/src/lib/chips/chip-list.ts +++ b/src/lib/chips/chip-list.ts @@ -21,7 +21,7 @@ import { } from '@angular/core'; import {MdChip} from './chip'; -import {FocusKeyManager} from '../core/a11y/focus-key-manager'; +import {FocusKeyManager} from '@angular/cdk/a11y'; import {BACKSPACE, DELETE, LEFT_ARROW, RIGHT_ARROW, UP_ARROW} from '../core/keyboard/keycodes'; import {Directionality} from '@angular/cdk/bidi'; import {Subscription} from 'rxjs/Subscription'; @@ -77,7 +77,7 @@ export class MdChipList implements AfterContentInit, OnDestroy { _tabIndex = 0; /** The FocusKeyManager which handles focus. */ - _keyManager: FocusKeyManager; + _keyManager: FocusKeyManager; /** The chip components contained within this chip list. */ chips: QueryList; @@ -87,7 +87,7 @@ export class MdChipList implements AfterContentInit, OnDestroy { } ngAfterContentInit(): void { - this._keyManager = new FocusKeyManager(this.chips).withWrap(); + this._keyManager = new FocusKeyManager(this.chips).withWrap(); // Prevents the chip list from capturing focus and redirecting // it back to the first chip when the user tabs out. diff --git a/src/lib/core/a11y/activedescendant-key-manager.ts b/src/lib/core/a11y/activedescendant-key-manager.ts index 07e60243ef1e..40f0d40144c9 100644 --- a/src/lib/core/a11y/activedescendant-key-manager.ts +++ b/src/lib/core/a11y/activedescendant-key-manager.ts @@ -18,7 +18,7 @@ export interface Highlightable extends ListKeyManagerOption { setInactiveStyles(): void; } -export class ActiveDescendantKeyManager extends ListKeyManager { +export class ActiveDescendantKeyManager extends ListKeyManager { /** * This method sets the active item to the item at the specified index. diff --git a/src/lib/core/a11y/focus-key-manager.ts b/src/lib/core/a11y/focus-key-manager.ts index b1b2256991b3..8c8f06102a87 100644 --- a/src/lib/core/a11y/focus-key-manager.ts +++ b/src/lib/core/a11y/focus-key-manager.ts @@ -17,7 +17,7 @@ export interface FocusableOption extends ListKeyManagerOption { focus(): void; } -export class FocusKeyManager extends ListKeyManager { +export class FocusKeyManager extends ListKeyManager { /** * This method sets the active item to the item at the specified index. * It also adds focuses the newly active item. diff --git a/src/lib/list/selection-list.ts b/src/lib/list/selection-list.ts index 7853f4ec6ed4..a1b3f508dda1 100644 --- a/src/lib/list/selection-list.ts +++ b/src/lib/list/selection-list.ts @@ -202,10 +202,10 @@ export class MdSelectionList extends _MdSelectionListMixinBase private _optionDestroyStream: Subscription; /** The FocusKeyManager which handles focus. */ - _keyManager: FocusKeyManager; + _keyManager: FocusKeyManager; /** The option components contained within this selection-list. */ - @ContentChildren(MdListOption) options; + @ContentChildren(MdListOption) options: QueryList; /** options which are selected. */ selectedOptions: SelectionModel = new SelectionModel(true); @@ -223,7 +223,7 @@ export class MdSelectionList extends _MdSelectionListMixinBase } ngAfterContentInit(): void { - this._keyManager = new FocusKeyManager(this.options).withWrap(); + this._keyManager = new FocusKeyManager(this.options).withWrap(); if (this.disabled) { this._tabIndex = -1; diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts index 5c62eee09c79..a0344ba141ce 100644 --- a/src/lib/menu/menu-directive.ts +++ b/src/lib/menu/menu-directive.ts @@ -27,7 +27,7 @@ import {AnimationEvent} from '@angular/animations'; import {MenuPositionX, MenuPositionY} from './menu-positions'; import {throwMdMenuInvalidPositionX, throwMdMenuInvalidPositionY} from './menu-errors'; import {MdMenuItem} from './menu-item'; -import {FocusKeyManager} from '../core/a11y/focus-key-manager'; +import {FocusKeyManager} from '@angular/cdk/a11y'; import {MdMenuPanel} from './menu-panel'; import {Subscription} from 'rxjs/Subscription'; import {transformMenu, fadeInItems} from './menu-animations'; @@ -68,7 +68,7 @@ const MD_MENU_BASE_ELEVATION = 2; exportAs: 'mdMenu' }) export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy { - private _keyManager: FocusKeyManager; + private _keyManager: FocusKeyManager; private _xPosition: MenuPositionX = this._defaultOptions.xPosition; private _yPosition: MenuPositionY = this._defaultOptions.yPosition; private _previousElevation: string; @@ -145,7 +145,7 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy { @Inject(MD_MENU_DEFAULT_OPTIONS) private _defaultOptions: MdMenuDefaultOptions) { } ngAfterContentInit() { - this._keyManager = new FocusKeyManager(this.items).withWrap(); + this._keyManager = new FocusKeyManager(this.items).withWrap(); this._tabSubscription = this._keyManager.tabOut.subscribe(() => this.close.emit('keydown')); } diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index ee179ceeb55b..1ce46210c567 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -239,7 +239,7 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On _triggerWidth: number; /** Manages keyboard events for options in the panel. */ - _keyManager: FocusKeyManager; + _keyManager: FocusKeyManager; /** * The width of the selected option's value. Must be set programmatically @@ -737,7 +737,7 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On /** Sets up a key manager to listen to keyboard events on the overlay panel. */ private _initKeyManager() { - this._keyManager = new FocusKeyManager(this.options).withTypeAhead(); + this._keyManager = new FocusKeyManager(this.options).withTypeAhead(); this._tabSubscription = this._keyManager.tabOut.subscribe(() => this.close()); }