From 299fd8646987ba3516ff5760a469bff46b8adae0 Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Thu, 28 Mar 2019 17:52:53 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20useKey=20hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/__stories__/useKey.story.tsx | 31 ++++++++++++++++++++++++++++
 src/index.ts                     |  2 ++
 src/useEvent.ts                  |  1 -
 src/useKey.ts                    | 35 ++++++++++++++++++++++++++++++++
 4 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 src/__stories__/useKey.story.tsx
 create mode 100644 src/useKey.ts

diff --git a/src/__stories__/useKey.story.tsx b/src/__stories__/useKey.story.tsx
new file mode 100644
index 0000000000..1089d250ab
--- /dev/null
+++ b/src/__stories__/useKey.story.tsx
@@ -0,0 +1,31 @@
+import { storiesOf } from "@storybook/react";
+import * as React from "react";
+import {useKey} from "..";
+import ShowDocs from "../util/ShowDocs";
+import {CenterStory} from "./util/CenterStory";
+
+const Demo = () => {
+  const [count, setCount] = React.useState(0);
+
+  const increment = () => setCount(count => ++count);
+  const decrement = () => setCount(count => --count);
+  const reset = () => setCount(count => 0);
+
+  useKey(']', increment);
+  useKey('[', decrement);
+  useKey('r', reset);
+
+  return (
+    <CenterStory>
+      <style dangerouslySetInnerHTML={{__html: `code {color: red}`}} />
+      <p>
+        Try pressing <code>[</code>, <code>]</code>, and <code>r</code> to
+        see the count incremented and decremented.</p>
+      <p>Count: {count}</p>
+    </CenterStory>
+  );
+};
+
+storiesOf("Sensors/useKey", module)
+  .add("Docs", () => <ShowDocs md={require("../../docs/useKeyPressEvent.md")} />)
+  .add("Demo", () => <Demo />);
diff --git a/src/index.ts b/src/index.ts
index 3517665736..cfe17f24c0 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -17,6 +17,7 @@ import useGetSetState from './useGetSetState';
 import useHover from './useHover';
 import useHoverDirty from './useHoverDirty';
 import useIdle from './useIdle';
+import useKey from './useKey';
 import useKeyPress from './useKeyPress';
 import useKeyPressEvent from './useKeyPressEvent';
 import useLifecycles from './useLifecycles';
@@ -82,6 +83,7 @@ export {
   useHover,
   useHoverDirty,
   useIdle,
+  useKey,
   useKeyPress,
   useKeyPressEvent,
   useLifecycles,
diff --git a/src/useEvent.ts b/src/useEvent.ts
index 3b43c24362..8aec793562 100644
--- a/src/useEvent.ts
+++ b/src/useEvent.ts
@@ -16,7 +16,6 @@ const defaultTarget = typeof window === 'object' ? window : null;
 
 const useEvent = (name: string, handler?: null | undefined | ((event?: any) => void), target: null | UseEventTarget = defaultTarget, options?: any) => {
   useEffect(() => {
-    console.log('adding event...');
     if (!handler) return;
     if (!target) return;
     ((target as ListenerType1).addEventListener || (target as ListenerType2).on).call(target, name, handler, options);
diff --git a/src/useKey.ts b/src/useKey.ts
new file mode 100644
index 0000000000..cacdf5105e
--- /dev/null
+++ b/src/useKey.ts
@@ -0,0 +1,35 @@
+import {useMemo, DependencyList} from 'react';
+import useEvent, {UseEventTarget} from './useEvent';
+
+export type KeyPredicate = (event: KeyboardEvent) => boolean;
+export type KeyFilter = null | undefined | string | ((event: KeyboardEvent) => boolean);
+export type Handler = (event: KeyboardEvent) => void;
+export interface UseKeyOptions {
+  event?: 'keydown' | 'keypress' | 'keyup',
+  target?: UseEventTarget,
+  options?: any,
+}
+
+const noop = () => {};
+const createKeyPredicate = (keyFilter: KeyFilter): KeyPredicate =>
+  typeof keyFilter === 'function'
+    ? keyFilter
+    : typeof keyFilter === 'string'
+      ? (event: KeyboardEvent) => event.key === keyFilter
+      : keyFilter
+        ? () => true
+        : () => false;
+
+const useKey = (key: KeyFilter, fn: Handler = noop, opts: UseKeyOptions = {}, deps: DependencyList = [key]) => {
+  const {event = 'keydown', target, options} = opts;
+  const handler = useMemo(() => {
+    const predicate: KeyPredicate = createKeyPredicate(key);
+    const handler: Handler = (event) => {
+      if (predicate(event)) return fn(event);
+    };
+    return handler;
+  }, deps);
+  useEvent(event, handler, target, options);
+};
+
+export default useKey;