refactor usage of pseudo events (#436)

SAP · May 23, 2019 · 64985b2 · 64985b2
1 parent 5b2efc8
commit 64985b2
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 48 deletions.
diff --git a/packages/base/src/events/PseudoEvents.js b/packages/base/src/events/PseudoEvents.js
@@ -28,7 +28,7 @@ const isDelete = event => (event.key ? (event.key === "Delete" || event.key ===
 
 const isShow = event => {
 	if (event.key) {
-		return (event.key === "F4" && !hasModifierKeys(event)) || ((event.key === "ArrowDown" || event.key === "Down") && checkModifierKeys(event, /* Ctrl */ false, /* Alt */ true, /* Shift */ false));
+		return (event.key === "F4" && !hasModifierKeys(event)) || (((event.key === "ArrowDown" || event.key === "Down") || (event.key === "ArrowUp" || event.key === "Up")) && checkModifierKeys(event, /* Ctrl */ false, /* Alt */ true, /* Shift */ false));
 	}
 
 	return (event.keyCode === KeyCodes.F4 && !hasModifierKeys(event)) || (event.keyCode === KeyCodes.ARROW_DOWN && checkModifierKeys(event, /* Ctrl */ false, /* Alt */ true, /* Shift */ false));

diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
@@ -1,8 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import URI from "@ui5/webcomponents-base/src/types/URI.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
-import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
-
+import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";
 import ButtonTemplateContext from "./ButtonTemplateContext.js";
 import ButtonType from "./types/ButtonType.js";
 import ButtonRenderer from "./build/compiled/ButtonRenderer.lit.js";
@@ -242,13 +241,13 @@ class Button extends UI5Element {
 	}
 
 	onkeydown(event) {
-		if (event.which === KeyCodes.SPACE || event.which === KeyCodes.ENTER) {
+		if (isSpace(event) || isEnter(event)) {
 			this._active = true;
 		}
 	}
 
 	onkeyup(event) {
-		if (event.which === KeyCodes.SPACE || event.which === KeyCodes.ENTER) {
+		if (isSpace(event) || isEnter(event)) {
 			this._active = false;
 		}
 	}

diff --git a/packages/main/src/CalendarHeader.js b/packages/main/src/CalendarHeader.js
@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
-import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
+import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";
 import CalendarHeaderTemplateContext from "./CalendarHeaderTemplateContext.js";
 import Button from "./Button.js";
 import ButtonType from "./types/ButtonType.js";
@@ -111,7 +111,7 @@ class CalendarHeader extends UI5Element {
 	}
 
 	onkeydown(event) {
-		if (event.which === KeyCodes.SPACE || event.which === KeyCodes.ENTER) {
+		if (isSpace(event) || isEnter(event)) {
 			const showPickerButton = event.ui5target.getAttribute("data-sap-show-picker");
 
 			if (showPickerButton) {

diff --git a/packages/main/src/CheckBox.js b/packages/main/src/CheckBox.js
@@ -1,10 +1,9 @@
 import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
-import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
 import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js";
-
-import CheckBoxRenderer from "./build/compiled/CheckBoxRenderer.lit.js";
+import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";
 import CheckBoxTemplateContext from "./CheckBoxTemplateContext.js";
+import CheckBoxRenderer from "./build/compiled/CheckBoxRenderer.lit.js";
 import Label from "./Label.js";
 
 // Styles
@@ -218,17 +217,17 @@ class CheckBox extends UI5Element {
 	}
 
 	onkeydown(event) {
-		if (event.keyCode === KeyCodes.SPACE) {
+		if (isSpace(event)) {
 			event.preventDefault();
 		}
 
-		if (event.keyCode === KeyCodes.ENTER) {
+		if (isEnter(event)) {
 			this.toggle();
 		}
 	}
 
 	onkeyup(event) {
-		if (event.keyCode === KeyCodes.SPACE) {
+		if (isSpace(event)) {
 			this.toggle();
 		}
 	}

diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js
@@ -3,7 +3,6 @@ import "@ui5/webcomponents-base/src/shims/Core-shim.js";
 import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import { fetchCldrData } from "@ui5/webcomponents-base/src/CLDR.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
-import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
 import { getCalendarType } from "@ui5/webcomponents-base/src/Configuration.js";
 import { getLocale } from "@ui5/webcomponents-base/src/LocaleProvider.js";
 import { getIconURI } from "@ui5/webcomponents-base/src/IconPool.js";
@@ -12,6 +11,7 @@ import DateFormat from "@ui5/webcomponents-core/dist/sap/ui/core/format/DateForm
 import CalendarType from "@ui5/webcomponents-base/src/dates/CalendarType.js";
 import CalendarDate from "@ui5/webcomponents-base/src/dates/CalendarDate.js";
 import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js";
+import { isShow } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";
 import DatePickerTemplateContext from "./DatePickerTemplateContext.js";
 import Icon from "./Icon.js";
 import Popover from "./Popover.js";
@@ -239,7 +239,6 @@ class DatePicker extends UI5Element {
 		this._input.icon.src = getIconURI("appointment-2");
 		this._input.onChange = this._handleInputChange.bind(this);
 		this._input.onLiveChange = this._handleInputLiveChange.bind(this);
-		this.aArrows = [KeyCodes.ARROW_DOWN, KeyCodes.ARROW_UP]; // keys we need for keyboard handling
 
 		this._popover = {
 			placementType: PopoverPlacementType.Bottom,
@@ -325,11 +324,7 @@ class DatePicker extends UI5Element {
 	}
 
 	onkeydown(event) {
-		if (event.which === KeyCodes.ALT) {
-			return;
-		}
-
-		if (event.which === KeyCodes.F4 || (event.altKey && this.aArrows.includes(event.which))) {
+		if (isShow(event)) {
 			this.togglePicker();
 			this._getInput().focus();
 		}

diff --git a/packages/main/src/Link.js b/packages/main/src/Link.js
@@ -1,7 +1,7 @@
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
-import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
 import URI from "@ui5/webcomponents-base/src/types/URI.js";
+import { isSpace } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";
 import LinkType from "./types/LinkType.js";
 
 // Template
@@ -204,13 +204,11 @@ class Link extends UI5Element {
 	}
 
 	onkeydown(event) {
-		const eventKeyCode = event.keyCode;
-
 		if (this.disabled) {
 			return;
 		}
 
-		if (eventKeyCode === KeyCodes.SPACE) {
+		if (isSpace(event)) {
 			event.preventDefault();
 		}
 	}
@@ -220,7 +218,7 @@ class Link extends UI5Element {
 			return;
 		}
 
-		if (event.keyCode === KeyCodes.SPACE) {
+		if (isSpace(event)) {
 			const defaultPrevented = !this.fireEvent("press", {}, true);
 			if (defaultPrevented) {
 				return;

diff --git a/packages/main/src/ListItem.js b/packages/main/src/ListItem.js
@@ -1,5 +1,5 @@
-import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
 import Function from "@ui5/webcomponents-base/src/types/Function.js";
+import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";
 import ListItemType from "./types/ListItemType.js";
 import ListMode from "./types/ListMode.js";
 import ListItemBase from "./ListItemBase.js";
@@ -98,32 +98,27 @@ class ListItem extends ListItemBase {
 	onkeydown(event) {
 		super.onkeydown(event);
 
-		const spaceUsed = event.which === KeyCodes.SPACE;
-		const enterUsed = event.which === KeyCodes.ENTER;
 		const itemActive = this.type === ListItemType.Active;
 
-		if (spaceUsed) {
+		if (isSpace(event)) {
 			event.preventDefault();
 		}
 
-		if ((spaceUsed || enterUsed) && itemActive) {
+		if ((isSpace(event) || isEnter(event)) && itemActive) {
 			this.activate();
 		}
 
-		if (enterUsed) {
+		if (isEnter(event)) {
 			this.fireItemPress();
 		}
 	}
 
 	onkeyup(event) {
-		const spaceUsed = event.which === KeyCodes.SPACE;
-		const enterUsed = event.which === KeyCodes.ENTER;
-
-		if (spaceUsed || enterUsed) {
+		if (isSpace(event) || isEnter(event)) {
 			this.deactivate();
 		}
 
-		if (spaceUsed) {
+		if (isSpace(event)) {
 			this.fireItemPress();
 		}
 	}

diff --git a/packages/main/src/RadioButton.js b/packages/main/src/RadioButton.js
@@ -1,6 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
-import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
 import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js";
 import {
 	isSpace,
@@ -282,7 +281,7 @@ class RadioButton extends UI5Element {
 	}
 
 	onkeyup(event) {
-		if (event.keyCode === KeyCodes.SPACE) {
+		if (isSpace(event)) {
 			this.toggle();
 		}
 	}

diff --git a/packages/main/src/Select.js b/packages/main/src/Select.js
@@ -6,8 +6,8 @@ import {
 	isDown,
 	isEnter,
 	isEscape,
+	isShow,
 } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";
-import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
 import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js";
 import Function from "@ui5/webcomponents-base/src/types/Function.js";
 import Suggestions from "./Suggestions.js";
@@ -213,9 +213,7 @@ class Select extends UI5Element {
 			this._escapePressed = true;
 		}
 
-		const key = event.which;
-
-		if (key === KeyCodes.F4 || (event.altKey && Select.ARROWS.includes(key))) {
+		if (isShow(event)) {
 			event.preventDefault();
 			this.Suggestions.toggle();
 		}
@@ -370,8 +368,6 @@ class Select extends UI5Element {
 	}
 }
 
-Select.ARROWS = [KeyCodes.ARROW_DOWN, KeyCodes.ARROW_UP];
-
 Bootstrap.boot().then(_ => {
 	Select.define();
 });

diff --git a/packages/main/src/Switch.js b/packages/main/src/Switch.js
@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
-import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
+import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";
 
 // Template
 import SwitchRenderer from "./build/compiled/SwitchRenderer.lit.js";
@@ -139,17 +139,17 @@ class Switch extends UI5Element {
 	}
 
 	onkeydown(event) {
-		if (event.keyCode === KeyCodes.SPACE) {
+		if (isSpace(event)) {
 			event.preventDefault();
 		}
 
-		if (event.keyCode === KeyCodes.ENTER) {
+		if (isEnter(event)) {
 			this.toggle();
 		}
 	}
 
 	onkeyup(event) {
-		if (event.keyCode === KeyCodes.SPACE) {
+		if (isSpace(event)) {
 			this.toggle();
 		}
 	}