Add useKeyPress hook

Author: lyzadanger

src/hooks/test/use-key-press-test.js

@@ -0,0 +1,72 @@
+import { mount } from 'enzyme';
+import { useRef } from 'preact/hooks';
+import { act } from 'preact/test-utils';
+
+import { useKeyPress } from '../use-key-press';
+
+describe('useKeyPress', () => {
+  let handler;
+  const defaultKeys = ['d', 'u'];
+
+  const createEvent = (name, props) => {
+    const event = new Event(name);
+    Object.assign(event, props);
+    return event;
+  };
+
+  // Create a fake component to mount in tests that uses the hook
+  function FakeComponent({ keys = defaultKeys, enabled = true }) {
+    const myRef = useRef();
+    useKeyPress(keys, handler, { enabled });
+    return (
+      <div ref={myRef}>
+        <button>Hi</button>
+      </div>
+    );
+  }
+
+  function createComponent(props) {
+    return mount(<FakeComponent {...props} />);
+  }
+
+  beforeEach(() => {
+    handler = sinon.stub();
+  });
+
+  defaultKeys.forEach(key => {
+    it(`should invoke callback when registered key ${key} is pressed`, () => {
+      const event = createEvent('keydown', { key });
+      const wrapper = createComponent();
+
+      act(() => {
+        document.body.dispatchEvent(event);
+      });
+      wrapper.update();
+
+      assert.calledOnce(handler);
+
+      // Update the component to change it and re-execute the hook
+      wrapper.setProps({ enabled: false });
+
+      act(() => {
+        document.body.dispatchEvent(event);
+      });
+
+      // Cleanup of hook should have removed eventListeners, so the callback
+      // is not called again
+      assert.calledOnce(handler);
+    });
+  });
+
+  it('should not invoke callback if a non-registered key is pressed', () => {
+    const event = createEvent('keydown', { key: 'q' });
+    const wrapper = createComponent();
+
+    act(() => {
+      document.body.dispatchEvent(event);
+    });
+    wrapper.update();
+
+    assert.notCalled(handler);
+  });
+});

src/hooks/use-key-press.ts

@@ -0,0 +1,38 @@
+import { useEffect } from 'preact/hooks';
+
+import { ListenerCollection } from '../util/listener-collection';
+
+type UseKeyPressOptions = {
+  /** Enable listening for key events? Can be set to false to disable */
+  enabled?: boolean;
+};
+
+/**
+ * Listen on HTMLElement `target` for key press events for the designated `keys`
+ * and invoke a callback. Do not listen if not `enabled`.
+ *
+ * @param keys - Array of keys (e.g. 'Escape', 'd') to listen for
+ */
+export function useKeyPress(
+  keys: string[],
+  callback: (e: KeyboardEvent) => void,
+  { enabled = true }: UseKeyPressOptions = {}
+) {
+  useEffect(() => {
+    if (!enabled) {
+      return () => {};
+    }
+    const target = document.body;
+    const listeners = new ListenerCollection();
+
+    listeners.add(target, 'keydown', event => {
+      if (keys.includes(event.key)) {
+        callback(event);
+      }
+    });
+
+    return () => {
+      listeners.removeAll();
+    };
+  }, [enabled, callback, keys]);
+}