GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-31 05:03:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix types in shortcut(s)

Browse Source
This commit is contained in:
Tom Coleman 2022-10-12 15:54:31 +11:00
parent dee025d4ea
commit 564a4f00a9
2 changed files with 17 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
code/lib/api/src/lib/shortcut.ts
View File

@ -1,7 +1,7 @@
import global from 'global';
// The shortcut is our JSON-ifiable representation of a shortcut combination
import type { KeyCollection, Event } from '../modules/shortcuts';
import type { KeyCollection } from '../modules/shortcuts';
const { navigator } = global;
@ -14,9 +14,15 @@ export const optionOrAltSymbol = () => (isMacLike() ? '⌥' : 'alt');
export const isShortcutTaken = (arr1: string[], arr2: string[]): boolean =>
JSON.stringify(arr1) === JSON.stringify(arr2);
// A subset of `KeyboardEvent` that's serialized over the channel, see `PreviewWeb.tsx`
export type KeyboardEventLike = Pick<
KeyboardEvent,
'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey' | 'key' | 'code' | 'keyCode' | 'preventDefault'
>;
// Map a keyboard event to a keyboard shortcut
// NOTE: if we change the fields on the event that we need, we'll need to update the serialization in core/preview/start.js
export const eventToShortcut = (e: KeyboardEvent): KeyCollection | null => {
export const eventToShortcut = (e: KeyboardEventLike): KeyCollection | null => {
// Meta key only doesn't map to a shortcut
if (['Meta', 'Alt', 'Control', 'Shift'].includes(e.key)) {
return null;
@ -72,7 +78,7 @@ export const shortcutMatchesShortcut = (
};
// Should this keyboard event trigger this keyboard shortcut?
export const eventMatchesShortcut = (e: Event, shortcut: KeyCollection): boolean => {
export const eventMatchesShortcut = (e: KeyboardEventLike, shortcut: KeyCollection): boolean => {
return shortcutMatchesShortcut(eventToShortcut(e), shortcut);
};

26
code/lib/api/src/modules/shortcuts.ts
View File

@ -1,9 +1,10 @@
import global from 'global';
import { PREVIEW_KEYDOWN } from '@storybook/core-events';
import { DOMElement } from 'react';
import type { ModuleFn } from '../index';
import { shortcutMatchesShortcut, eventToShortcut } from '../lib/shortcut';
import { shortcutMatchesShortcut, eventToShortcut, KeyboardEventLike } from '../lib/shortcut';
import { focusableUIElements } from './layout';
const { navigator, document } = global;
@ -31,7 +32,7 @@ export interface SubAPI {
setAddonShortcut(addon: string, shortcut: AddonShortcut): Promise<AddonShortcut>;
restoreAllDefaultShortcuts(): Promise<Shortcuts>;
restoreDefaultShortcut(action: Action): Promise<KeyCollection>;
handleKeydownEvent(event: Event): void;
handleKeydownEvent(event: KeyboardEventLike): void;
handleShortcutFeature(feature: Action): void;
}
export type KeyCollection = string[];
@ -92,21 +93,10 @@ export const defaultShortcuts: Shortcuts = Object.freeze({
});
const addonsShortcuts: AddonShortcuts = {};
export interface Event extends KeyboardEvent {
target: {
tagName: string;
addEventListener(): void;
removeEventListener(): boolean;
dispatchEvent(event: Event): boolean;
getAttribute(attr: string): string | null;
};
}
function focusInInput(event: Event) {
return (
/input|textarea/i.test(event.target.tagName) ||
event.target.getAttribute('contenteditable') !== null
);
function focusInInput(event: KeyboardEvent) {
const target = event.target as Element;
return /input|textarea/i.test(target.tagName) || target.getAttribute('contenteditable') !== null;
}
export const init: ModuleFn = ({ store, fullAPI }) => {
@ -347,14 +337,14 @@ export const init: ModuleFn = ({ store, fullAPI }) => {
const initModule = () => {
// Listen for keydown events in the manager
document.addEventListener('keydown', (event: Event) => {
document.addEventListener('keydown', (event: KeyboardEvent) => {
if (!focusInInput(event)) {
fullAPI.handleKeydownEvent(event);
}
});
// Also listen to keydown events sent over the channel
fullAPI.on(PREVIEW_KEYDOWN, (data: { event: Event }) => {
fullAPI.on(PREVIEW_KEYDOWN, (data: { event: KeyboardEventLike }) => {
fullAPI.handleKeydownEvent(data.event);
});
};