Pass event to KeyboardNavigatable whenCallback (#1922)

This way the callback can know which key is pressed.
This commit is contained in:
Clark Winkelmann 2019-11-15 15:08:36 +01:00 committed by Franz Liedke
parent ba79935bfe
commit 3e07f47b51

View File

@ -7,10 +7,24 @@
*/ */
export default class KeyboardNavigatable { export default class KeyboardNavigatable {
constructor() { constructor() {
/**
* Callback to be executed for a specified input.
*
* @callback KeyboardNavigatable~keyCallback
* @param {KeyboardEvent} event
* @returns {boolean}
*/
this.callbacks = {}; this.callbacks = {};
// By default, always handle keyboard navigation. /**
this.whenCallback = () => true; * Callback that determines whether keyboard input should be handled.
* By default, always handle keyboard navigation.
*
* @callback whenCallback
* @param {KeyboardEvent} event
* @returns {boolean}
*/
this.whenCallback = event => true;
} }
/** /**
@ -19,7 +33,7 @@ export default class KeyboardNavigatable {
* This will be triggered by the Up key. * This will be triggered by the Up key.
* *
* @public * @public
* @param {Function} callback * @param {KeyboardNavigatable~keyCallback} callback
* @return {KeyboardNavigatable} * @return {KeyboardNavigatable}
*/ */
onUp(callback) { onUp(callback) {
@ -37,7 +51,7 @@ export default class KeyboardNavigatable {
* This will be triggered by the Down key. * This will be triggered by the Down key.
* *
* @public * @public
* @param {Function} callback * @param {KeyboardNavigatable~keyCallback} callback
* @return {KeyboardNavigatable} * @return {KeyboardNavigatable}
*/ */
onDown(callback) { onDown(callback) {
@ -55,7 +69,7 @@ export default class KeyboardNavigatable {
* This will be triggered by the Return and Tab keys.. * This will be triggered by the Return and Tab keys..
* *
* @public * @public
* @param {Function} callback * @param {KeyboardNavigatable~keyCallback} callback
* @return {KeyboardNavigatable} * @return {KeyboardNavigatable}
*/ */
onSelect(callback) { onSelect(callback) {
@ -73,7 +87,7 @@ export default class KeyboardNavigatable {
* This will be triggered by the Escape key. * This will be triggered by the Escape key.
* *
* @public * @public
* @param {Function} callback * @param {KeyboardNavigatable~keyCallback} callback
* @return {KeyboardNavigatable} * @return {KeyboardNavigatable}
*/ */
onCancel(callback) { onCancel(callback) {
@ -81,7 +95,7 @@ export default class KeyboardNavigatable {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
callback(e); callback(e);
} };
return this; return this;
} }
@ -92,7 +106,7 @@ export default class KeyboardNavigatable {
* This will be triggered by the Backspace key. * This will be triggered by the Backspace key.
* *
* @public * @public
* @param {Function} callback * @param {KeyboardNavigatable~keyCallback} callback
* @return {KeyboardNavigatable} * @return {KeyboardNavigatable}
*/ */
onRemove(callback) { onRemove(callback) {
@ -110,7 +124,7 @@ export default class KeyboardNavigatable {
* Provide a callback that determines whether keyboard input should be handled. * Provide a callback that determines whether keyboard input should be handled.
* *
* @public * @public
* @param {Function} callback * @param {KeyboardNavigatable~whenCallback} callback
* @return {KeyboardNavigatable} * @return {KeyboardNavigatable}
*/ */
when(callback) { when(callback) {
@ -138,7 +152,7 @@ export default class KeyboardNavigatable {
*/ */
navigate(event) { navigate(event) {
// This callback determines whether keyboard should be handled or ignored. // This callback determines whether keyboard should be handled or ignored.
if (!this.whenCallback()) return; if (!this.whenCallback(event)) return;
const keyCallback = this.callbacks[event.which]; const keyCallback = this.callbacks[event.which];
if (keyCallback) { if (keyCallback) {