fix(useKeyPress): make alias of keyCode more compatible

packages/hooks/src/useKeyPress/__tests__/index.test.tsx

@@ -73,14 +73,21 @@ describe('useKeyPress ', () => {
     unmount();
   });
 
-  it('meta key should be work in keyup event', async () => {
-    renderHook(() =>
-      useKeyPress(['meta'], callback, {
-        events: ['keyup'],
-      }),
-    );
+  it('modifier keys (shift, ctrl, alt, meta) should be work in keyup event', async () => {
+    const hooks1 = renderHook(() => useKeyPress(['shift'], callback, { events: ['keyup'] }));
+    const hooks2 = renderHook(() => useKeyPress(['ctrl'], callback, { events: ['keyup'] }));
+    const hooks3 = renderHook(() => useKeyPress(['alt'], callback, { events: ['keyup'] }));
+    const hooks4 = renderHook(() => useKeyPress(['meta'], callback, { events: ['keyup'] }));
 
-    fireEvent.keyUp(document, { key: 'meta', keyCode: 91, metaKey: false });
-    expect(callback).toBeCalled();
+    fireEvent.keyUp(document, { key: 'shift', shiftKey: false, keyCode: 16 });
+    fireEvent.keyUp(document, { key: 'ctrl', ctrlKey: false, keyCode: 17 });
+    fireEvent.keyUp(document, { key: 'alt', altKey: false, keyCode: 18 });
+    fireEvent.keyUp(document, { key: 'meta', metaKey: false, keyCode: 91 });
+    fireEvent.keyUp(document, { key: 'meta', metaKey: false, keyCode: 92 });
+    expect(callback.mock.calls.length).toBe(5);
+    hooks1.unmount();
+    hooks2.unmount();
+    hooks3.unmount();
+    hooks4.unmount();
   });
 });

packages/hooks/src/useKeyPress/index.ts

@@ -21,24 +21,14 @@ export type Options = {
 };
 
 // 键盘事件 keyCode 别名
-const aliasKeyCodeMap = {
-  '0': 48,
-  '1': 49,
-  '2': 50,
-  '3': 51,
-  '4': 52,
-  '5': 53,
-  '6': 54,
-  '7': 55,
-  '8': 56,
-  '9': 57,
+const aliasKeyCodeMap: Record<string, number | number[]> = {
   backspace: 8,
   tab: 9,
   enter: 13,
   shift: 16,
   ctrl: 17,
   alt: 18,
-  pausebreak: 19,
+  pausebreak: [19, 126],
   capslock: 20,
   esc: 27,
   space: 32,
@@ -52,6 +42,16 @@ const aliasKeyCodeMap = {
   downarrow: 40,
   insert: 45,
   delete: 46,
+  '0': 48,
+  '1': 49,
+  '2': 50,
+  '3': 51,
+  '4': 52,
+  '5': 53,
+  '6': 54,
+  '7': 55,
+  '8': 56,
+  '9': 57,
   a: 65,
   b: 66,
   c: 67,
@@ -79,8 +79,11 @@ const aliasKeyCodeMap = {
   y: 89,
   z: 90,
   leftwindowkey: 91,
-  rightwindowkey: 92,
-  selectkey: 93,
+  rightwindowkey: [91, 92],
+  meta: isAppleDevice ? [91, 93, 224] : [91, 92], // Command ⌘ or Window ⊞
+  leftmetakey: isAppleDevice ? [91, 224] : 91, // Left ⌘ or Left ⊞
+  rightmetakey: isAppleDevice ? [93, 224] : [91, 92], // Right ⌘ or Right ⊞
+  selectkey: 93, // ContextMenu ≣
   numpad0: 96,
   numpad1: 97,
   numpad2: 98,
@@ -91,11 +94,11 @@ const aliasKeyCodeMap = {
   numpad7: 103,
   numpad8: 104,
   numpad9: 105,
-  multiply: 106,
-  add: 107,
-  subtract: 109,
-  decimalpoint: 110,
-  divide: 111,
+  multiply: 106, // Numpad *
+  add: 107, // Numpad +
+  subtract: 109, // Numpad -
+  decimalpoint: 110, // Numpad .
+  divide: 111, // Numpad /
   f1: 112,
   f2: 113,
   f3: 114,
@@ -108,40 +111,51 @@ const aliasKeyCodeMap = {
   f10: 121,
   f11: 122,
   f12: 123,
-  numlock: 144,
-  scrolllock: 145,
-  semicolon: 186,
-  equalsign: 187,
-  comma: 188,
-  dash: 189,
-  period: 190,
-  forwardslash: 191,
-  graveaccent: 192,
-  openbracket: 219,
-  backslash: 220,
-  closebracket: 221,
-  singlequote: 222,
+  numlock: [12, 144],
+  scrolllock: [125, 145],
+  semicolon: [186, 59], // ;
+  equalsign: [187, 61], // =
+  comma: 188, // ,
+  dash: [189, 173], // -
+  period: 190, // .
+  forwardslash: 191, // /
+  graveaccent: 192, // `
+  openbracket: 219, // [
+  backslash: 220, // \
+  closebracket: 221, // ]
+  singlequote: 222, // '
 };
 
-if (isAppleDevice) {
-  aliasKeyCodeMap['meta'] = [91, 93];
-} else {
-  aliasKeyCodeMap['meta'] = [91, 92];
-}
-
 // 修饰键
 const modifierKey = {
   ctrl: (event: KeyboardEvent) => event.ctrlKey,
   shift: (event: KeyboardEvent) => event.shiftKey,
   alt: (event: KeyboardEvent) => event.altKey,
   meta: (event: KeyboardEvent) => {
     if (event.type === 'keyup') {
-      return aliasKeyCodeMap['meta'].includes(event.keyCode);
+      return genAliasKeyCodeHit(event, 'meta');
     }
     return event.metaKey;
   },
 };
 
+// 修饰键的 keyCode
+const modifierKeyCode = [16, 17, 18, 91, 92, 93, 224];
+
+/**
+ * 判断“键盘事件 keyCode 别名”是否命中
+ * @param event 键盘事件
+ * @param aliasKey 键盘事件 keyCode 别名
+ * @returns Boolean
+ */
+function genAliasKeyCodeHit(event: KeyboardEvent, aliasKey: string) {
+  const aliasKeyCode = aliasKeyCodeMap[aliasKey];
+
+  return Array.isArray(aliasKeyCode)
+    ? aliasKeyCode.some((item) => item === event.keyCode)
+    : !!aliasKeyCode && aliasKeyCode === event.keyCode;
+}
+
 // 根据 event 计算激活键数量
 function countKeyByEvent(event: KeyboardEvent) {
   const countOfModifier = Object.keys(modifierKey).reduce((total, key) => {
@@ -152,8 +166,8 @@ function countKeyByEvent(event: KeyboardEvent) {
     return total;
   }, 0);
 
-  // 16 17 18 91 92 是修饰键的 keyCode，如果 keyCode 是修饰键，那么激活数量就是修饰键的数量，如果不是，那么就需要 +1
-  return [16, 17, 18, 91, 92].includes(event.keyCode) ? countOfModifier : countOfModifier + 1;
+  // 如果 keyCode 是修饰键，那么激活数量就是修饰键的数量，如果不是，那么就需要 +1
+  return modifierKeyCode.includes(event.keyCode) ? countOfModifier : countOfModifier + 1;
 }
 
 /**
@@ -180,10 +194,8 @@ function genFilterKey(event: KeyboardEvent, keyFilter: keyType, exactMatch: bool
   for (const key of genArr) {
     // 组合键
     const genModifier = modifierKey[key];
-    // keyCode 别名
-    const aliasKeyCode: number | number[] = aliasKeyCodeMap[key.toLowerCase()];
 
-    if ((genModifier && genModifier(event)) || (aliasKeyCode && aliasKeyCode === event.keyCode)) {
+    if ((genModifier && genModifier(event)) || genAliasKeyCodeHit(event, key.toLowerCase())) {
       genLen++;
     }
   }