Add keydown methods to types

This commit is contained in:
Josh Johnson 2019-11-19 17:41:09 +00:00
parent 30a8f7df79
commit bbc21f609e
2 changed files with 24 additions and 10 deletions

View file

@ -1321,7 +1321,7 @@ class Choices {
* @param {KeyboardEvent} event * @param {KeyboardEvent} event
*/ */
_onKeyDown(event) { _onKeyDown(event) {
const { target, keyCode, ctrlKey, metaKey } = event; const { keyCode } = event;
const { activeItems } = this._store; const { activeItems } = this._store;
const hasFocusedInput = this.input.isFocussed; const hasFocusedInput = this.input.isFocussed;
const hasActiveDropdown = this.dropdown.isActive; const hasActiveDropdown = this.dropdown.isActive;
@ -1339,7 +1339,6 @@ class Choices {
PAGE_UP_KEY, PAGE_UP_KEY,
PAGE_DOWN_KEY, PAGE_DOWN_KEY,
} = KEY_CODES; } = KEY_CODES;
const hasCtrlDownKeyPressed = ctrlKey || metaKey;
// If a user is typing and the dropdown is not active // If a user is typing and the dropdown is not active
if (!this._isTextElement && /[a-zA-Z0-9-_ ]/.test(keyString)) { if (!this._isTextElement && /[a-zA-Z0-9-_ ]/.test(keyString)) {
@ -1363,14 +1362,10 @@ class Choices {
if (keyDownActions[keyCode]) { if (keyDownActions[keyCode]) {
keyDownActions[keyCode]({ keyDownActions[keyCode]({
event, event,
target,
keyCode,
metaKey,
activeItems, activeItems,
hasFocusedInput, hasFocusedInput,
hasActiveDropdown, hasActiveDropdown,
hasItems, hasItems,
hasCtrlDownKeyPressed,
}); });
} }
} }
@ -1409,7 +1404,9 @@ class Choices {
this._canSearch = this.config.searchEnabled; this._canSearch = this.config.searchEnabled;
} }
_onAKey({ hasItems, hasCtrlDownKeyPressed }) { _onAKey({ event, hasItems }) {
const { ctrlKey, metaKey } = event;
const hasCtrlDownKeyPressed = ctrlKey || metaKey;
// If CTRL + A or CMD + A have been pressed and there are items to select // If CTRL + A or CMD + A have been pressed and there are items to select
if (hasCtrlDownKeyPressed && hasItems) { if (hasCtrlDownKeyPressed && hasItems) {
this._canSearch = false; this._canSearch = false;
@ -1425,7 +1422,8 @@ class Choices {
} }
} }
_onEnterKey({ event, target, activeItems, hasActiveDropdown }) { _onEnterKey({ event, activeItems, hasActiveDropdown }) {
const { target } = event;
const { ENTER_KEY: enterKey } = KEY_CODES; const { ENTER_KEY: enterKey } = KEY_CODES;
const targetWasButton = target.hasAttribute('data-button'); const targetWasButton = target.hasAttribute('data-button');
@ -1473,7 +1471,8 @@ class Choices {
} }
} }
_onDirectionKey({ event, hasActiveDropdown, keyCode, metaKey }) { _onDirectionKey({ event, hasActiveDropdown }) {
const { keyCode, metaKey } = event;
const { const {
DOWN_KEY: downKey, DOWN_KEY: downKey,
PAGE_UP_KEY: pageUpKey, PAGE_UP_KEY: pageUpKey,
@ -1536,7 +1535,8 @@ class Choices {
} }
} }
_onDeleteKey({ event, target, hasFocusedInput, activeItems }) { _onDeleteKey({ event, hasFocusedInput, activeItems }) {
const { target } = event;
// If backspace or delete key is pressed and the input has no value // If backspace or delete key is pressed and the input has no value
if (hasFocusedInput && !target.value && !this._isSelectOneElement) { if (hasFocusedInput && !target.value && !this._isSelectOneElement) {
this._handleBackspace(activeItems); this._handleBackspace(activeItems);

14
types/index.d.ts vendored
View file

@ -780,6 +780,14 @@ declare namespace Choices {
| ((template: Choices.Types.strToEl) => Partial<Choices.Templates>) | ((template: Choices.Types.strToEl) => Partial<Choices.Templates>)
| null; | null;
} }
interface KeyDownAction {
event: KeyboardEvent;
activeItems: Item[];
hasFocusedInput: boolean;
hasActiveDropdown: boolean;
hasItems: boolean;
}
} }
// Exporting default class // Exporting default class
@ -1024,4 +1032,10 @@ export default class Choices {
* **Input types affected:** text, select-one, select-multiple * **Input types affected:** text, select-one, select-multiple
*/ */
disable(): this; disable(): this;
_onEnterKey(keyDownAction: keyDownAction): void;
_onAKey(keyDownAction: keyDownAction): void;
_onEscapeKey(keyDownAction: keyDownAction): void;
_onDirectionKey(keyDownAction: keyDownAction): void;
_onDeleteKey(keyDownAction: keyDownAction): void;
} }