Refactor keycode exporting in ui_framework (#13663)
* Refactor keycode exporting in ui_framework * Replace all uses of ENTER_KEY and SPACE_KEY * Use ESCAPE instead of ESC universally * Rename keycodes -> keyCodes * Replace keyCodes in advanced_row
This commit is contained in:
parent
592253fbe3
commit
64b3c0ffa3
|
@ -25,7 +25,7 @@ import { documentationLinks } from 'ui/documentation_links/documentation_links';
|
|||
import { showCloneModal } from './top_nav/show_clone_modal';
|
||||
import { migrateLegacyQuery } from 'ui/utils/migrateLegacyQuery';
|
||||
import { QueryManagerProvider } from 'ui/query_manager';
|
||||
import { ESC_KEY_CODE } from 'ui_framework/services';
|
||||
import { keyCodes } from 'ui_framework/services';
|
||||
import { DashboardContainerAPI } from './dashboard_container_api';
|
||||
|
||||
const app = uiModules.get('app/dashboard', [
|
||||
|
@ -328,7 +328,7 @@ app.directive('dashboardApp', function ($injector) {
|
|||
$scope.exitFullScreenMode = () => setFullScreenMode(false);
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.keyCode === ESC_KEY_CODE) {
|
||||
if (e.keyCode === keyCodes.ESCAPE) {
|
||||
setFullScreenMode(false);
|
||||
}
|
||||
}, false);
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import 'ui/elastic_textarea';
|
||||
import 'ui/filters/markdown';
|
||||
import { uiModules } from 'ui/modules';
|
||||
import { keyCodes } from 'ui_framework/services';
|
||||
import advancedRowTemplate from 'plugins/kibana/management/sections/settings/advanced_row.html';
|
||||
|
||||
uiModules.get('apps/management')
|
||||
|
@ -15,9 +16,6 @@ uiModules.get('apps/management')
|
|||
},
|
||||
link: function ($scope) {
|
||||
const notify = new Notifier();
|
||||
const keyCodes = {
|
||||
ESC: 27
|
||||
};
|
||||
|
||||
// To allow passing form validation state back
|
||||
$scope.forms = {};
|
||||
|
@ -33,7 +31,7 @@ uiModules.get('apps/management')
|
|||
};
|
||||
|
||||
$scope.maybeCancel = function ($event, conf) {
|
||||
if ($event.keyCode === keyCodes.ESC) {
|
||||
if ($event.keyCode === keyCodes.ESCAPE) {
|
||||
$scope.cancelEdit(conf);
|
||||
}
|
||||
};
|
||||
|
|
|
@ -192,7 +192,7 @@ app.directive('timelionExpressionInput', function ($document, $http, $interval,
|
|||
}
|
||||
break;
|
||||
|
||||
case comboBoxKeyCodes.ESC:
|
||||
case comboBoxKeyCodes.ESCAPE:
|
||||
e.preventDefault();
|
||||
scope.functionSuggestions.hide();
|
||||
break;
|
||||
|
|
|
@ -3,10 +3,7 @@ import sinon from 'sinon';
|
|||
import expect from 'expect.js';
|
||||
import ngMock from 'ng_mock';
|
||||
import '../kbn_accessible_click';
|
||||
import {
|
||||
ENTER_KEY,
|
||||
SPACE_KEY,
|
||||
} from 'ui_framework/services';
|
||||
import { keyCodes } from 'ui_framework/services';
|
||||
|
||||
describe('kbnAccessibleClick directive', () => {
|
||||
let $compile;
|
||||
|
@ -92,14 +89,14 @@ describe('kbnAccessibleClick directive', () => {
|
|||
|
||||
it(`on ENTER keyup`, () => {
|
||||
const e = angular.element.Event('keyup'); // eslint-disable-line new-cap
|
||||
e.keyCode = ENTER_KEY;
|
||||
e.keyCode = keyCodes.ENTER;
|
||||
element.trigger(e);
|
||||
sinon.assert.calledOnce(scope.handleClick);
|
||||
});
|
||||
|
||||
it(`on SPACE keyup`, () => {
|
||||
const e = angular.element.Event('keyup'); // eslint-disable-line new-cap
|
||||
e.keyCode = SPACE_KEY;
|
||||
e.keyCode = keyCodes.SPACE;
|
||||
element.trigger(e);
|
||||
sinon.assert.calledOnce(scope.handleClick);
|
||||
});
|
||||
|
|
|
@ -3,10 +3,7 @@ import sinon from 'sinon';
|
|||
import expect from 'expect.js';
|
||||
import ngMock from 'ng_mock';
|
||||
import '../kbn_ui_ace_keyboard_mode';
|
||||
import {
|
||||
ENTER_KEY,
|
||||
ESC_KEY_CODE,
|
||||
} from 'ui_framework/services';
|
||||
import { keyCodes } from 'ui_framework/services';
|
||||
|
||||
describe('kbnUiAceKeyboardMode directive', () => {
|
||||
let element;
|
||||
|
@ -30,7 +27,7 @@ describe('kbnUiAceKeyboardMode directive', () => {
|
|||
const textarea = element.find('textarea');
|
||||
sinon.spy(textarea[0], 'focus');
|
||||
const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap
|
||||
ev.keyCode = ENTER_KEY;
|
||||
ev.keyCode = keyCodes.ENTER;
|
||||
element.find('.uiAceKeyboardHint').trigger(ev);
|
||||
expect(textarea[0].focus.called).to.be(true);
|
||||
expect(element.find('.uiAceKeyboardHint').hasClass('uiAceKeyboardHint-isInactive')).to.be(true);
|
||||
|
@ -41,7 +38,7 @@ describe('kbnUiAceKeyboardMode directive', () => {
|
|||
const hint = element.find('.uiAceKeyboardHint');
|
||||
sinon.spy(hint[0], 'focus');
|
||||
const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap
|
||||
ev.keyCode = ESC_KEY_CODE;
|
||||
ev.keyCode = keyCodes.ESCAPE;
|
||||
textarea.trigger(ev);
|
||||
expect(hint[0].focus.called).to.be(true);
|
||||
expect(hint.hasClass('uiAceKeyboardHint-isInactive')).to.be(false);
|
||||
|
@ -80,7 +77,7 @@ describe('kbnUiAceKeyboardModeService', () => {
|
|||
const textarea = element.find('textarea');
|
||||
sinon.spy(textarea[0], 'focus');
|
||||
const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap
|
||||
ev.keyCode = ENTER_KEY;
|
||||
ev.keyCode = keyCodes.ENTER;
|
||||
element.find('.uiAceKeyboardHint').trigger(ev);
|
||||
expect(textarea[0].focus.called).to.be(true);
|
||||
expect(element.find('.uiAceKeyboardHint').hasClass('uiAceKeyboardHint-isInactive')).to.be(true);
|
||||
|
@ -91,7 +88,7 @@ describe('kbnUiAceKeyboardModeService', () => {
|
|||
const hint = element.find('.uiAceKeyboardHint');
|
||||
sinon.spy(hint[0], 'focus');
|
||||
const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap
|
||||
ev.keyCode = ESC_KEY_CODE;
|
||||
ev.keyCode = keyCodes.ESCAPE;
|
||||
textarea.trigger(ev);
|
||||
expect(hint[0].focus.called).to.be(true);
|
||||
expect(hint.hasClass('uiAceKeyboardHint-isInactive')).to.be(false);
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
import {
|
||||
accessibleClickKeys,
|
||||
SPACE_KEY,
|
||||
keyCodes,
|
||||
} from 'ui_framework/services';
|
||||
import { uiModules } from 'ui/modules';
|
||||
|
||||
|
@ -31,7 +31,7 @@ uiModules.get('kibana')
|
|||
controller: $element => {
|
||||
$element.on('keydown', e => {
|
||||
// Prevent a scroll from occurring if the user has hit space.
|
||||
if (e.keyCode === SPACE_KEY) {
|
||||
if (e.keyCode === keyCodes.SPACE) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
import angular from 'angular';
|
||||
import { uiModules } from 'ui/modules';
|
||||
import './kbn_ui_ace_keyboard_mode.less';
|
||||
import { ESC_KEY_CODE, ENTER_KEY } from 'ui_framework/services';
|
||||
import { keyCodes } from 'ui_framework/services';
|
||||
|
||||
let aceKeyboardModeId = 0;
|
||||
|
||||
|
@ -53,7 +53,7 @@ uiModules.get('kibana')
|
|||
}
|
||||
|
||||
hint.keydown((ev) => {
|
||||
if (ev.keyCode === ENTER_KEY) {
|
||||
if (ev.keyCode === keyCodes.ENTER) {
|
||||
ev.preventDefault();
|
||||
startEditing();
|
||||
}
|
||||
|
@ -64,7 +64,7 @@ uiModules.get('kibana')
|
|||
});
|
||||
|
||||
uiAceTextbox.keydown((ev) => {
|
||||
if (ev.keyCode === ESC_KEY_CODE) {
|
||||
if (ev.keyCode === keyCodes.ESCAPE) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
enableOverlay();
|
||||
|
|
|
@ -121,7 +121,7 @@ typeahead.directive('kbnTypeahead', function () {
|
|||
}
|
||||
|
||||
// hide on escape
|
||||
if (_.contains([comboBoxKeyCodes.ESC], keyCode)) {
|
||||
if (_.contains([comboBoxKeyCodes.ESCAPE], keyCode)) {
|
||||
self.hidden = true;
|
||||
self.active = false;
|
||||
}
|
||||
|
|
|
@ -25,22 +25,19 @@ import {
|
|||
cloneElement,
|
||||
} from 'react';
|
||||
|
||||
import {
|
||||
ENTER_KEY,
|
||||
SPACE_KEY,
|
||||
} from '../../services';
|
||||
import { keyCodes } from '../../services';
|
||||
|
||||
export class KuiKeyboardAccessible extends Component {
|
||||
onKeyDown = e => {
|
||||
// Prevent a scroll from occurring if the user has hit space.
|
||||
if (e.keyCode === SPACE_KEY) {
|
||||
if (e.keyCode === keyCodes.SPACE) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
onKeyUp = e => {
|
||||
// Support keyboard accessibility by emulating mouse click on ENTER or SPACE keypress.
|
||||
if (e.keyCode === ENTER_KEY || e.keyCode === SPACE_KEY) {
|
||||
if (e.keyCode === keyCodes.ENTER || e.keyCode === keyCodes.SPACE) {
|
||||
// Delegate to the click handler on the element.
|
||||
this.props.children.props.onClick(e);
|
||||
}
|
||||
|
|
|
@ -7,10 +7,7 @@ import sinon from 'sinon';
|
|||
|
||||
import { KuiKeyboardAccessible } from './keyboard_accessible';
|
||||
|
||||
import {
|
||||
ENTER_KEY,
|
||||
SPACE_KEY,
|
||||
} from '../../services';
|
||||
import { keyCodes } from '../../services';
|
||||
|
||||
describe('KuiKeyboardAccessible', () => {
|
||||
describe('throws an error', () => {
|
||||
|
@ -176,7 +173,7 @@ describe('KuiKeyboardAccessible', () => {
|
|||
);
|
||||
|
||||
$button.find('[data-div]').simulate('keyup', {
|
||||
keyCode: ENTER_KEY
|
||||
keyCode: keyCodes.ENTER
|
||||
});
|
||||
|
||||
sinon.assert.calledOnce(onClickHandler);
|
||||
|
@ -192,7 +189,7 @@ describe('KuiKeyboardAccessible', () => {
|
|||
);
|
||||
|
||||
$button.find('[data-div]').simulate('keyup', {
|
||||
keyCode: SPACE_KEY
|
||||
keyCode: keyCodes.SPACE
|
||||
});
|
||||
|
||||
sinon.assert.calledOnce(onClickHandler);
|
||||
|
|
|
@ -8,7 +8,7 @@ import { KuiModalHeaderTitle } from './modal_header_title';
|
|||
import { KuiModalBody } from './modal_body';
|
||||
import { KuiModalBodyText } from './modal_body_text';
|
||||
import { KuiButton } from '../index';
|
||||
import { ESC_KEY_CODE } from '../../services';
|
||||
import { keyCodes } from '../../services';
|
||||
|
||||
export const CONFIRM_BUTTON = 'confirm';
|
||||
export const CANCEL_BUTTON = 'cancel';
|
||||
|
@ -32,7 +32,7 @@ export function KuiConfirmModal({
|
|||
|
||||
const onKeyDown = (event) => {
|
||||
// Treat the 'esc' key as a cancel indicator.
|
||||
if (event.keyCode === ESC_KEY_CODE) {
|
||||
if (event.keyCode === keyCodes.ESCAPE) {
|
||||
onCancel();
|
||||
}
|
||||
};
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
export const ENTER_KEY = 13;
|
||||
export const SPACE_KEY = 32;
|
||||
import { ENTER, SPACE } from '../key_codes';
|
||||
|
||||
// These keys are used to execute click actions on interactive elements like buttons and links.
|
||||
export const accessibleClickKeys = {
|
||||
[ENTER_KEY]: 'enter',
|
||||
[SPACE_KEY]: 'space',
|
||||
[ENTER]: 'enter',
|
||||
[SPACE]: 'space',
|
||||
};
|
||||
|
|
|
@ -8,17 +8,17 @@
|
|||
*/
|
||||
|
||||
import {
|
||||
DOWN_KEY_CODE,
|
||||
ENTER_KEY_CODE,
|
||||
ESC_KEY_CODE,
|
||||
TAB_KEY_CODE,
|
||||
UP_KEY_CODE,
|
||||
DOWN,
|
||||
ENTER,
|
||||
ESCAPE,
|
||||
TAB,
|
||||
UP,
|
||||
} from '../key_codes';
|
||||
|
||||
export const comboBoxKeyCodes = {
|
||||
DOWN: DOWN_KEY_CODE,
|
||||
ENTER: ENTER_KEY_CODE,
|
||||
ESC: ESC_KEY_CODE,
|
||||
TAB: TAB_KEY_CODE,
|
||||
UP: UP_KEY_CODE,
|
||||
DOWN,
|
||||
ENTER,
|
||||
ESCAPE,
|
||||
TAB,
|
||||
UP,
|
||||
};
|
||||
|
|
|
@ -1,7 +1,2 @@
|
|||
export {
|
||||
accessibleClickKeys,
|
||||
ENTER_KEY,
|
||||
SPACE_KEY,
|
||||
} from './accessible_click_keys';
|
||||
|
||||
export { accessibleClickKeys } from './accessible_click_keys';
|
||||
export { comboBoxKeyCodes } from './combo_box_key_codes';
|
||||
|
|
|
@ -1,11 +1,12 @@
|
|||
// Export all keyCodes under a `keyCodes` named variable
|
||||
import * as keyCodes from './key_codes';
|
||||
export { keyCodes };
|
||||
|
||||
export {
|
||||
accessibleClickKeys,
|
||||
comboBoxKeyCodes,
|
||||
ENTER_KEY,
|
||||
SPACE_KEY,
|
||||
} from './accessibility';
|
||||
|
||||
export { SortableProperties } from './sort';
|
||||
export { ESC_KEY_CODE } from './key_codes';
|
||||
|
||||
export { LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from './alignment';
|
||||
|
|
|
@ -1,5 +1,8 @@
|
|||
export const DOWN_KEY_CODE = 40;
|
||||
export const ENTER_KEY_CODE = 13;
|
||||
export const ESC_KEY_CODE = 27;
|
||||
export const TAB_KEY_CODE = 9;
|
||||
export const UP_KEY_CODE = 38;
|
||||
export const ENTER = 13;
|
||||
export const SPACE = 32;
|
||||
export const ESCAPE = 27;
|
||||
export const TAB = 9;
|
||||
|
||||
// Arrow keys
|
||||
export const DOWN = 40;
|
||||
export const UP = 38;
|
||||
|
|
Loading…
Reference in a new issue