Merge pull request #26 from RobertWHurst/feature/multi-bind

Allow binding and unbinding multiple key/keyCombos at once

packages/keystrokes/src/keystrokes.ts

@@ -133,9 +133,14 @@ export class Keystrokes<
   }
 
   bindKey(
-    key: string,
+    key: string | string[],
     handler: Handler<KeyEvent<OriginalEvent, KeyEventProps>>,
   ) {
+    if (typeof key === 'object') {
+      for (const k of key) this.bindKey(k, handler)
+      return
+    }
+
     key = key.toLowerCase()
 
     const handlerState = new HandlerState(handler)
@@ -144,9 +149,14 @@ export class Keystrokes<
   }
 
   unbindKey(
-    key: string,
+    key: string | string[],
     handler?: Handler<KeyEvent<OriginalEvent, KeyEventProps>>,
   ) {
+    if (typeof key === 'object') {
+      for (const k of key) this.unbindKey(k, handler)
+      return
+    }
+
     key = key.toLowerCase()
 
     const handlerStates = this._handlerStates[key]
@@ -165,11 +175,16 @@ export class Keystrokes<
   }
 
   bindKeyCombo(
-    keyCombo: string,
+    keyCombo: string | string[],
     handler: Handler<
       KeyComboEvent<OriginalEvent, KeyEventProps, KeyComboEventProps>
     >,
   ) {
+    if (typeof keyCombo === 'object') {
+      for (const k of keyCombo) this.bindKeyCombo(k, handler)
+      return
+    }
+
     keyCombo = KeyComboState.normalizeKeyCombo(keyCombo)
 
     const keyComboState = new KeyComboState<
@@ -184,11 +199,16 @@ export class Keystrokes<
   }
 
   unbindKeyCombo(
-    keyCombo: string,
+    keyCombo: string | string[],
     handler?: Handler<
       KeyComboEvent<OriginalEvent, KeyEventProps, KeyComboEventProps>
     >,
   ) {
+    if (typeof keyCombo === 'object') {
+      for (const k of keyCombo) this.unbindKeyCombo(k, handler)
+      return
+    }
+
     keyCombo = KeyComboState.normalizeKeyCombo(keyCombo)
 
     const keyComboStates = this._keyComboStates[keyCombo]

packages/keystrokes/src/tests/keystrokes.spec.ts

@@ -159,32 +159,19 @@ describe('new Keystrokes(options)', () => {
       expect(handler2.onReleased).toBeCalledTimes(1)
     })
 
-    // TODO: This should probably be moved to a location for browser related binders. Perhaps
-    // when I actually move the browser binders out to a separate file.
-    it('provides an event with composedPath on it', () => {
+    it('allows binding several keyCombos at the same time', () => {
       const keystrokes = createTestKeystrokes()
 
-      const handler = {
-        onPressed: vi.fn(),
-        onPressedWithRepeat: vi.fn(),
-        onReleased: vi.fn(),
-      }
-      keystrokes.bindKey('a', handler)
-
-      const node1 = {} as EventTarget
-      const node2 = {} as EventTarget
-
-      keystrokes.press({ key: 'a', composedPath: () => [node1, node2] })
-      keystrokes.release({ key: 'a', composedPath: () => [node1, node2] })
+      const handler1 = vi.fn()
+      const handler2 = vi.fn()
+      keystrokes.bindKey(['a', 'b'], handler1)
+      keystrokes.bindKey(['a'], handler2)
 
-      const event = handler.onPressed.mock.calls[0][0] as KeyEvent<
-        KeyboardEvent,
-        BrowserKeyEventProps
-      >
-      const composedPath = event.composedPath()
+      keystrokes.press({ key: 'a' })
+      keystrokes.press({ key: 'b' })
 
-      expect(composedPath[0]).toBe(node1)
-      expect(composedPath[1]).toBe(node2)
+      expect(handler1).toBeCalledTimes(2)
+      expect(handler2).toBeCalledTimes(1)
     })
   })
 
@@ -276,6 +263,24 @@ describe('new Keystrokes(options)', () => {
       expect(handler2.onPressed).toBeCalledTimes(1)
       expect(handler2.onPressedWithRepeat).toBeCalledTimes(1)
     })
+
+    it('allows unbinding several keyCombos at the same time', () => {
+      const keystrokes = createTestKeystrokes()
+
+      const handler1 = vi.fn()
+      const handler2 = vi.fn()
+      keystrokes.bindKey(['a', 'b'], handler1)
+      keystrokes.bindKey(['a'], handler2)
+
+      keystrokes.press({ key: 'a' })
+
+      keystrokes.unbindKey(['a'], handler1)
+
+      keystrokes.press({ key: 'a' })
+
+      expect(handler1).toBeCalledTimes(1)
+      expect(handler2).toBeCalledTimes(2)
+    })
   })
 
   describe('#bindKeyCombo(keyCombo, handler)', () => {