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

Merge pull request #20167 from gitstart/fix/viewport-resetting-shortcut

Browse Source 
Addons: Fix Viewport resetting shortcut key not working
This commit is contained in:
Jeppe Reinhold 2023-01-18 11:04:44 +01:00 committed by GitHub
commit d2d2f9c317
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
code/lib/manager-api/src/lib/shortcut.ts
View File

@ -20,7 +20,7 @@ export type KeyboardEventLike = Pick<
// Map a keyboard event to a keyboard shortcut // 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 // 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: KeyboardEventLike): API_KeyCollection | null => { export const eventToShortcut = (e: KeyboardEventLike): (string | string[])[] | null => {
// Meta key only doesn't map to a shortcut // Meta key only doesn't map to a shortcut
if (['Meta', 'Alt', 'Control', 'Shift'].includes(e.key)) { if (['Meta', 'Alt', 'Control', 'Shift'].includes(e.key)) {
return null; return null;
@ -41,7 +41,17 @@ export const eventToShortcut = (e: KeyboardEventLike): API_KeyCollection | null
} }
if (e.key && e.key.length === 1 && e.key !== ' ') { if (e.key && e.key.length === 1 && e.key !== ' ') {
keys.push(e.key.toUpperCase()); const key = e.key.toUpperCase();
// Using `event.code` to support `alt (option) + <key>` on macos which returns special characters
// See full list of event.code here:
// https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values
const code = e.code?.toUpperCase().replace('KEY', '').replace('DIGIT', '');
if (code && code.length === 1 && code !== key) {
keys.push([key, code]);
} else {
keys.push(key);
}
} }
if (e.key === ' ') { if (e.key === ' ') {
keys.push('space'); keys.push('space');
@ -66,13 +76,15 @@ export const eventToShortcut = (e: KeyboardEventLike): API_KeyCollection | null
}; };
export const shortcutMatchesShortcut = ( export const shortcutMatchesShortcut = (
inputShortcut: API_KeyCollection, inputShortcut: (string | string[])[],
shortcut: API_KeyCollection shortcut: API_KeyCollection
): boolean => { ): boolean => {
if (!inputShortcut || !shortcut) return false; if (!inputShortcut || !shortcut) return false;
if (inputShortcut.join('') === 'shift/') inputShortcut.shift(); // shift is optional for `/` if (inputShortcut.join('') === 'shift/') inputShortcut.shift(); // shift is optional for `/`
if (inputShortcut.length !== shortcut.length) return false; if (inputShortcut.length !== shortcut.length) return false;
return !inputShortcut.find((key, i) => key !== shortcut[i]); return !inputShortcut.find((input, i) =>
Array.isArray(input) ? !input.includes(shortcut[i]) : input !== shortcut[i]
);
}; };
// Should this keyboard event trigger this keyboard shortcut? // Should this keyboard event trigger this keyboard shortcut?

9
code/lib/manager-api/src/tests/shortcut.test.js
View File

@ -43,16 +43,19 @@ describe('eventToShortcut', () => {
expect(output).toEqual(['escape']); expect(output).toEqual(['escape']);
}); });
test('it capitalizes a letter key through', () => { test('it capitalizes a letter key through', () => {
const output = eventToShortcut(ev({ key: 'a' })); const output = eventToShortcut(ev({ key: 'a', code: 'KeyA' }));
expect(output).toEqual(['A']); expect(output).toEqual(['A']);
}); });
test('it passes regular key through', () => { test('it passes regular key through', () => {
const output = eventToShortcut(ev({ key: '1' })); const output = eventToShortcut(ev({ key: '1', code: 'Digit1' }));
expect(output).toEqual(['1']); expect(output).toEqual(['1']);
}); });
test('it passes modified regular key through', () => { test('it passes modified regular key through', () => {
const output = eventToShortcut(ev({ altKey: true, key: '1' })); const output = eventToShortcut(ev({ altKey: true, key: '1', code: 'Digit1' }));
expect(output).toEqual(['alt', '1']); expect(output).toEqual(['alt', '1']);
// on macos
const outputMacOs = eventToShortcut(ev({ altKey: true, key: '√', code: 'KeyV' }));
expect(outputMacOs).toEqual(['alt', ['√', 'V']]);
}); });
}); });