chore: Use code instead of keyCode (#1482)

Using `code` instead of `keyCode` in places where keyboard events are registered.
GetTerminus · Apr 25, 2019 · c66e9df · c66e9df
1 parent b08f5e8
commit c66e9df
Show file tree

Hide file tree

Showing 17 changed files with 132 additions and 194 deletions.
diff --git a/package.json b/package.json
@@ -173,7 +173,7 @@
     "@angular/platform-browser": "^7.2.2",
     "@angular/platform-browser-dynamic": "^7.2.2",
     "@angular/router": "^7.2.2",
-    "@terminus/ngx-tools": "^6.3.0",
+    "@terminus/ngx-tools": "^6.5.1",
     "@terminus/ui": "latest",
     "date-fns": "2.0.0-alpha.26",
     "ngx-perfect-scrollbar": "^7.2.0",

diff --git a/terminus-ui/csv-entry/src/csv-entry.component.spec.ts b/terminus-ui/csv-entry/src/csv-entry.component.spec.ts
@@ -11,7 +11,7 @@ import {
 } from '@angular/core/testing';
 import { ValidatorFn, Validators } from '@angular/forms';
 import { By } from '@angular/platform-browser';
-import { A, ENTER, TAB } from '@terminus/ngx-tools/keycodes';
+import { KEYS } from '@terminus/ngx-tools/keycodes';
 import {
   configureTestBedWithoutReset,
   createFakeEvent,
@@ -179,27 +179,31 @@ describe(`TsCSVEntryComponent`, function() {
     TAB_EVENT = document.createEvent('KeyboardEvent');
     TAB_EVENT.initEvent('keydown', true, false);
     Object.defineProperties(TAB_EVENT, {
-      keyCode: { get: () => TAB },
-      key: { get: () => 'Tab' },
+      code: { get: () => KEYS.TAB.code },
+      key: { get: () => KEYS.TAB.code },
+      keyCode: { get: () => KEYS.TAB.keyCode },
     });
     SHIFT_TAB_EVENT = document.createEvent('KeyboardEvent');
     SHIFT_TAB_EVENT.initEvent('keydown', true, false);
     Object.defineProperties(SHIFT_TAB_EVENT, {
-      keyCode: { get: () => TAB },
-      key: { get: () => 'Tab' },
+      code: { get: () => KEYS.TAB.code },
+      key: { get: () => KEYS.TAB.code },
+      keyCode: { get: () => KEYS.TAB.keyCode },
       shiftKey: { get: () => true },
     });
     ENTER_EVENT = document.createEvent('KeyboardEvent');
     ENTER_EVENT.initEvent('keydown', true, false);
     Object.defineProperties(ENTER_EVENT, {
-      keyCode: { get: () => ENTER },
-      key: { get: () => 'Enter' },
+      code: { get: () => KEYS.ENTER.code },
+      key: { get: () => KEYS.ENTER.code },
+      keyCode: { get: () => KEYS.ENTER.keyCode },
     });
     SHIFT_ENTER_EVENT = document.createEvent('KeyboardEvent');
     SHIFT_ENTER_EVENT.initEvent('keydown', true, false);
     Object.defineProperties(SHIFT_ENTER_EVENT, {
-      keyCode: { get: () => ENTER },
-      key: { get: () => 'Enter' },
+      code: { get: () => KEYS.ENTER.code },
+      key: { get: () => KEYS.ENTER.code },
+      keyCode: { get: () => KEYS.ENTER.keyCode },
       shiftKey: { get: () => true },
     });
 
@@ -712,9 +716,9 @@ describe(`TsCSVEntryComponent`, function() {
       fixture.detectChanges();
 
       // Try typing to verify the input is readonly
-      dispatchKeyboardEvent(firstHeaderCell, 'keyup', A);
-      dispatchKeyboardEvent(firstHeaderCell, 'keyup', A);
-      dispatchKeyboardEvent(firstHeaderCell, 'keyup', A);
+      dispatchKeyboardEvent(firstHeaderCell, 'keyup', KEYS.A);
+      dispatchKeyboardEvent(firstHeaderCell, 'keyup', KEYS.A);
+      dispatchKeyboardEvent(firstHeaderCell, 'keyup', KEYS.A);
       fixture.detectChanges();
 
       expect(firstHeaderCell.value).toEqual('one');

diff --git a/terminus-ui/expansion-panel/src/accordion/accordion.component.spec.ts b/terminus-ui/expansion-panel/src/accordion/accordion.component.spec.ts
@@ -1,13 +1,7 @@
 import { Type } from '@angular/core';
 import { ComponentFixture } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import {
-  A,
-  END,
-  ENTER,
-  HOME,
-  SPACE,
-} from '@terminus/ngx-tools/keycodes';
+import { KEYS } from '@terminus/ngx-tools/keycodes';
 import {
   createComponent as createComponentInner,
   createKeyboardEvent,
@@ -21,7 +15,7 @@ import {
   togglePanel,
 } from '@terminus/ui/expansion-panel/testing';
 
-import { TsExpansionPanelModule } from './../expansion-panel.module';
+import { TsExpansionPanelModule } from '../expansion-panel.module';
 
 
 function createComponent<T>(component: Type<T>): ComponentFixture<T> {
@@ -123,18 +117,18 @@ describe(`TsAccordionComponent`, function() {
       expect(document.activeElement === trigger2).toEqual(false);
 
       // Non-special key to complete coverage
-      const keyEvent = createKeyboardEvent('keydown', A, trigger1);
+      const keyEvent = createKeyboardEvent('keydown', KEYS.A, trigger1);
       trigger1.dispatchEvent(keyEvent);
       fixture.detectChanges();
 
-      const homeEvent = createKeyboardEvent('keydown', HOME, trigger1);
+      const homeEvent = createKeyboardEvent('keydown', KEYS.HOME, trigger1);
       trigger1.dispatchEvent(homeEvent);
       fixture.detectChanges();
 
       expect(document.activeElement === trigger1).toEqual(true);
       expect(document.activeElement === trigger2).toEqual(false);
 
-      const endEvent = createKeyboardEvent('keydown', END, trigger1);
+      const endEvent = createKeyboardEvent('keydown', KEYS.END, trigger1);
       trigger1.dispatchEvent(endEvent);
       fixture.detectChanges();
 
@@ -159,14 +153,14 @@ describe(`TsAccordionComponent`, function() {
       const spaceEvent = document.createEvent('KeyboardEvent');
       spaceEvent.initEvent('keydown', true, false);
       Object.defineProperties(spaceEvent, {
-        keyCode: { get: () => SPACE },
-        key: { get: () => 'Space' },
+        code: { get: () => KEYS.SPACE.code },
+        key: { get: () => KEYS.SPACE.code },
       });
       const enterEvent = document.createEvent('KeyboardEvent');
       enterEvent.initEvent('keydown', true, false);
       Object.defineProperties(enterEvent, {
-        keyCode: { get: () => ENTER },
-        key: { get: () => 'Enter' },
+        code: { get: () => KEYS.ENTER.code },
+        key: { get: () => KEYS.ENTER.code },
       });
 
       trigger1.dispatchEvent(spaceEvent);

diff --git a/terminus-ui/expansion-panel/src/accordion/accordion.component.ts b/terminus-ui/expansion-panel/src/accordion/accordion.component.ts
@@ -12,13 +12,9 @@ import {
   QueryList,
   ViewEncapsulation,
 } from '@angular/core';
-import {
-  END,
-  HOME,
-} from '@terminus/ngx-tools/keycodes';
-
+import { KEYS } from '@terminus/ngx-tools/keycodes';
 import { TsExpansionPanelComponent } from '../expansion-panel.component';
-import { TsExpansionPanelTriggerComponent } from './../trigger/expansion-panel-trigger.component';
+import { TsExpansionPanelTriggerComponent } from '../trigger/expansion-panel-trigger.component';
 import {
   TS_ACCORDION,
   TsAccordionBase,
@@ -118,13 +114,13 @@ export class TsAccordionComponent extends CdkAccordion implements TsAccordionBas
    * Handle keyboard events coming in from the panel triggers
    */
   public handleTriggerKeydown(event: KeyboardEvent): void {
-    const {keyCode} = event;
+    const {code} = event;
     const manager = this.keyManager;
 
-    if (keyCode === HOME) {
+    if (code === KEYS.HOME.code) {
       manager.setFirstItemActive();
       event.preventDefault();
-    } else if (keyCode === END) {
+    } else if (code === KEYS.END.code) {
       manager.setLastItemActive();
       event.preventDefault();
     } else {

diff --git a/terminus-ui/expansion-panel/src/trigger/expansion-panel-trigger.component.ts b/terminus-ui/expansion-panel/src/trigger/expansion-panel-trigger.component.ts
@@ -17,22 +17,19 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import { untilComponentDestroyed } from '@terminus/ngx-tools';
-import {
-  ENTER,
-  SPACE,
-} from '@terminus/ngx-tools/keycodes';
+import { KEYS } from '@terminus/ngx-tools/keycodes';
 import {
   EMPTY,
   merge,
 } from 'rxjs';
 import { filter } from 'rxjs/operators';
 
-import { tsExpansionPanelAnimations } from './../expansion-animations';
+import { tsExpansionPanelAnimations } from '../expansion-animations';
 import {
   TS_EXPANSION_PANEL_DEFAULT_OPTIONS,
   TsExpansionPanelComponent,
   TsExpansionPanelDefaultOptions,
-} from './../expansion-panel.component';
+} from '../expansion-panel.component';
 
 
 /**
@@ -198,8 +195,8 @@ export class TsExpansionPanelTriggerComponent implements OnDestroy, FocusableOpt
    * Handle keydown event calling to toggle() if appropriate
    */
   public keydown(event: KeyboardEvent): void {
-    const {keyCode} = event;
-    const isSelectionKey = (keyCode === SPACE) || (keyCode === ENTER);
+    const {code} = event;
+    const isSelectionKey = (code === KEYS.SPACE.code) || (code === KEYS.ENTER.code);
 
     if (isSelectionKey) {
       // istanbul ignore else

diff --git a/terminus-ui/file-upload/src/file-upload.component.spec.ts b/terminus-ui/file-upload/src/file-upload.component.spec.ts
@@ -8,7 +8,6 @@ import {
   TestModuleMetadata,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { A, ENTER } from '@terminus/ngx-tools/keycodes';
 import {
   configureTestBedWithoutReset,
   createFakeEvent,
@@ -19,6 +18,7 @@ import {
 import { TsStyleThemeTypes } from '@terminus/ui/utilities';
 
 import { FormControl } from '@angular/forms';
+import { KEYS } from '@terminus/ngx-tools/keycodes';
 import { TsFileUploadComponent } from './file-upload.component';
 import { TsFileUploadModule } from './file-upload.module';
 import { TsFileImageDimensionConstraints } from './image-dimension-constraints';
@@ -505,15 +505,15 @@ describe(`TsFileUploadComponent`, function() {
       });
 
       test(`should trigger file selection if Enter was pressed`, () => {
-        dispatchKeyboardEvent(el, 'keydown', ENTER);
+        dispatchKeyboardEvent(el, 'keydown', KEYS.ENTER);
 
         expect(component.promptForFiles).toHaveBeenCalled();
         expect(el.blur).toHaveBeenCalled();
       });
 
 
       test(`should do nothing if the key pressed was not Enter`, () => {
-        dispatchKeyboardEvent(el, 'keydown', A);
+        dispatchKeyboardEvent(el, 'keydown', KEYS.A);
 
         expect(component.promptForFiles).not.toHaveBeenCalled();
         expect(el.blur).not.toHaveBeenCalled();

diff --git a/terminus-ui/file-upload/src/file-upload.component.ts b/terminus-ui/file-upload/src/file-upload.component.ts
@@ -30,7 +30,6 @@ import {
   coerceArray,
   coerceNumberProperty,
 } from '@terminus/ngx-tools/coercion';
-import { ENTER } from '@terminus/ngx-tools/keycodes';
 import { TS_SPACING } from '@terminus/ui/spacing';
 import {
   ControlValueAccessorProviderFactory,
@@ -42,6 +41,7 @@ import {
 } from '@terminus/ui/utilities';
 import { filter } from 'rxjs/operators';
 
+import { KEYS } from '@terminus/ngx-tools/keycodes';
 import { TsDropProtectionService } from './drop-protection.service';
 import { TsFileImageDimensionConstraints } from './image-dimension-constraints';
 import { TS_ACCEPTED_MIME_TYPES, TsFileAcceptedMimeTypes } from './mime-types';
@@ -533,7 +533,7 @@ export class TsFileUploadComponent extends TsReactiveFormBaseComponent implement
    * @param event - The keyboard event
    */
   public handleKeydown(event: KeyboardEvent): void {
-    if (event.keyCode === ENTER) {
+    if (event.code === KEYS.ENTER.code) {
       this.promptForFiles();
       this.elementRef.nativeElement.blur();
     }

diff --git a/terminus-ui/input/src/input.component.spec.ts b/terminus-ui/input/src/input.component.spec.ts
@@ -17,7 +17,7 @@ import {
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { TsDocumentService } from '@terminus/ngx-tools';
-import { A } from '@terminus/ngx-tools/keycodes';
+import { KEYS } from '@terminus/ngx-tools/keycodes';
 import {
   createKeyboardEvent,
   TsDocumentServiceMock,
@@ -679,7 +679,7 @@ describe(`TsInputComponent`, function() {
         const fixture = createComponent(TestComponents.OnChanges);
         fixture.detectChanges();
         const inputElement = getInputElement(fixture);
-        const keyboardEvent: KeyboardEvent = createKeyboardEvent('keyup', A, inputElement);
+        const keyboardEvent: KeyboardEvent = createKeyboardEvent('keyup', KEYS.A, inputElement);
         inputElement.setSelectionRange = jest.fn();
         fixture.componentInstance.inputComponent['platform'].IOS = true;
         fixture.componentInstance.inputComponent.ngAfterContentInit();

diff --git a/terminus-ui/select/src/autocomplete/autocomplete-trigger.directive.ts b/terminus-ui/select/src/autocomplete/autocomplete-trigger.directive.ts
@@ -28,13 +28,7 @@ import {
   TsDocumentService,
 } from '@terminus/ngx-tools';
 import { coerceBooleanProperty } from '@terminus/ngx-tools/coercion';
-import {
-  DOWN_ARROW,
-  ENTER,
-  ESCAPE,
-  TAB,
-  UP_ARROW,
-} from '@terminus/ngx-tools/keycodes';
+import { KEYS } from '@terminus/ngx-tools/keycodes';
 import { TsFormFieldComponent } from '@terminus/ui/form-field';
 import { ControlValueAccessorProviderFactory } from '@terminus/ui/utilities';
 import {
@@ -434,24 +428,24 @@ export class TsAutocompleteTriggerDirective implements ControlValueAccessor, OnD
    * @param event - The keyboard event
    */
   public handleKeydown(event: KeyboardEvent): void {
-    const keyCode = event.keyCode;
+    const keyCode = event.code;
 
     // Prevent the default action on all escape key presses. This is here primarily to bring IE in line with other browsers. By default,
     // pressing escape on IE will cause it to revert the input value to the one that it had on focus, however it won't dispatch any events
     // which means that the model value will be out of sync with the view.
-    if (keyCode === ESCAPE) {
+    if (keyCode === KEYS.ESCAPE.code) {
       event.preventDefault();
     }
 
-    if (this.activeOption && keyCode === ENTER && this.panelOpen) {
+    if (this.activeOption && keyCode === KEYS.ENTER.code && this.panelOpen) {
       this.activeOption.selectViaInteraction();
       this.resetActiveItem();
       event.preventDefault();
     } else if (this.autocompletePanel) {
       const prevActiveItem = this.autocompletePanel.keyManager.activeItem;
-      const isArrowKey = keyCode === UP_ARROW || keyCode === DOWN_ARROW;
+      const isArrowKey = keyCode === KEYS.UP_ARROW.code || keyCode === KEYS.DOWN_ARROW.code;
 
-      if (this.panelOpen || keyCode === TAB) {
+      if (this.panelOpen || keyCode === KEYS.TAB.code) {
         this.autocompletePanel.keyManager.onKeydown(event);
       } else if (isArrowKey && this.canOpen()) {
         this.openPanel();
@@ -549,7 +543,7 @@ export class TsAutocompleteTriggerDirective implements ControlValueAccessor, OnD
       this.overlayRef.keydownEvents().subscribe((event) => {
         // Close when pressing ESCAPE or ALT + UP_ARROW, based on the a11y guidelines.
         // See: https://www.w3.org/TR/wai-aria-practices-1.1/#textbox-keyboard-interaction
-        if (event.keyCode === ESCAPE || (event.keyCode === UP_ARROW && event.altKey)) {
+        if (event.code === KEYS.ESCAPE.code || (event.code === KEYS.UP_ARROW.code && event.altKey)) {
           this.resetActiveItem();
           this.closeKeyEventStream.next();
         }

diff --git a/terminus-ui/select/src/option/option.component.ts b/terminus-ui/select/src/option/option.component.ts
@@ -21,12 +21,12 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import { NgModel } from '@angular/forms';
-import { ENTER, SPACE } from '@terminus/ngx-tools/keycodes';
+import { KEYS } from '@terminus/ngx-tools/keycodes';
 import { TsStyleThemeTypes } from '@terminus/ui/utilities';
 import { Subject } from 'rxjs';
 import { take } from 'rxjs/operators';
 
-import { TsSelectOption } from './../select.component';
+import { TsSelectOption } from '../select.component';
 import { TsSelectOptionDisplayDirective } from './option-display.directive';
 
 
@@ -363,7 +363,7 @@ export class TsSelectOptionComponent implements Highlightable, AfterContentInit,
    */
   public handleKeydown(event: KeyboardEvent): void {
     // istanbul ignore else
-    if (event.keyCode === ENTER || event.keyCode === SPACE) {
+    if (event.code === KEYS.ENTER.code || event.code === KEYS.SPACE.code) {
       this.selectViaInteraction();
 
       // Prevent the page from scrolling down and form submits.