From 5fda2e089441a3935f843e439a8c55291a404fa3 Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Sun, 7 Apr 2019 21:27:35 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20useStartTypings=20?=
 =?UTF-8?q?hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                |  1 +
 docs/useStartTyping.md                   | 16 +++++++++
 src/__stories__/useStartTyping.story.tsx | 41 +++++++++++++++++++++++
 src/index.ts                             |  2 ++
 src/useStartTyping.ts                    | 42 ++++++++++++++++++++++++
 5 files changed, 102 insertions(+)
 create mode 100644 docs/useStartTyping.md
 create mode 100644 src/__stories__/useStartTyping.story.tsx
 create mode 100644 src/useStartTyping.ts

diff --git a/README.md b/README.md
index 74449a3cc6..ced7577257 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,7 @@
   - [`usePageLeave`](./docs/usePageLeave.md) &mdash; triggers when mouse leaves page boundaries.
   - [`useScroll`](./docs/useScroll.md) &mdash; tracks an HTML element's scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescroll--docs)
   - [`useSize`](./docs/useSize.md) &mdash; tracks an HTML element's dimensions.
+  - [`useStartTyping`](./docs/useStartTyping.md) &mdash; detects when user starts typing.
   - [`useWindowScroll`](./docs/useWindowScroll.md) &mdash; tracks `Window` scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usewindowscroll--docs)
   - [`useWindowSize`](./docs/useWindowSize.md) &mdash; tracks `Window` dimensions. [![][img-demo]](https://codesandbox.io/s/m7ln22668)
     <br/>
diff --git a/docs/useStartTyping.md b/docs/useStartTyping.md
new file mode 100644
index 0000000000..213810c28f
--- /dev/null
+++ b/docs/useStartTyping.md
@@ -0,0 +1,16 @@
+# `useStartTyping`
+
+React sensor hook that fires a callback when user start typing. Can be use
+to focus default input field on the page.
+
+## Usage
+
+```jsx
+import useStartTyping from 'react-use/lib/useStartTyping';
+
+const Demo = () => {
+  useStartTyping(() => alert('Started typing...'));
+
+  return null;
+};
+```
diff --git a/src/__stories__/useStartTyping.story.tsx b/src/__stories__/useStartTyping.story.tsx
new file mode 100644
index 0000000000..f1cd9d01d4
--- /dev/null
+++ b/src/__stories__/useStartTyping.story.tsx
@@ -0,0 +1,41 @@
+import {storiesOf} from '@storybook/react';
+import * as React from 'react';
+import {useStartTyping} from '..';
+import ShowDocs from './util/ShowDocs';
+
+const Demo = () => {
+  const input = React.useRef(null);
+  useStartTyping(() => {
+    if (input.current) {
+      input.current.focus();
+    }
+  });
+
+  return (
+    <div>
+      <p>Start typing, and below field will get focused.</p>
+      <input ref={input} />
+
+      <br />
+      <hr />
+
+      <p>Try focusing below elements and see what happens.</p>
+      <button>When button is focused, it will lose it.</button>
+      <br />
+      <br />
+      <input />
+      <br />
+      <br />
+      <textarea>Editable textarea</textarea>
+      <br />
+      <br />
+      <div contentEditable>Editable DIV</div>
+    </div>
+  );
+};
+
+storiesOf('Sensors|useStartTyping', module)
+  // .add('Docs', () => <ShowDocs md={require('../../docs/useStartTyping.md')} />)
+  .add('Demo', () =>
+    <Demo/>
+  )
diff --git a/src/index.ts b/src/index.ts
index 9b8f364024..6d3508b4a4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -51,6 +51,7 @@ import useSetState from './useSetState';
 import useSize from './useSize';
 import useSpeech from './useSpeech';
 import useSpring from './useSpring';
+import useStartTyping from './useStartTyping';
 import useThrottle from './useThrottle';
 import useThrottleFn from './useThrottleFn';
 import useTimeout from './useTimeout';
@@ -119,6 +120,7 @@ export {
   useSize,
   useSpeech,
   useSpring,
+  useStartTyping,
   useThrottle,
   useThrottleFn,
   useTimeout,
diff --git a/src/useStartTyping.ts b/src/useStartTyping.ts
new file mode 100644
index 0000000000..aeee4d3b9a
--- /dev/null
+++ b/src/useStartTyping.ts
@@ -0,0 +1,42 @@
+import {useLayoutEffect} from 'react';
+
+const isFocusedElementEditable = () => {
+  const {activeElement, body} = document;
+
+  // If not element has focus, we assume it is not editable, too.
+  if (activeElement === body) return false;
+
+  // Assume <input> and <textarea> elements are editable.
+  switch (activeElement.tagName) {
+    case 'INPUT':
+    case 'TEXTAREA':
+      return true;
+  }
+
+  // Check if any other focused element id editable.
+  return activeElement.hasAttribute('contenteditable');
+};
+
+const isTypedCharGood = ({keyCode}: KeyboardEvent) => {
+  // 0...9
+  if ((keyCode >= 48) && (keyCode <= 57)) return true;
+  // a...z
+  if ((keyCode >= 65) && (keyCode <= 90)) return true;
+  // All other keys.
+  return false;
+};
+
+const useStartTyping = (onStartTyping: (event: KeyboardEvent) => void) => {
+  useLayoutEffect(() => {
+    const keydown = (event) => {
+      !isFocusedElementEditable() && isTypedCharGood(event) && onStartTyping(event);
+    };
+
+    document.addEventListener('keydown', keydown);
+    return () => {
+      document.removeEventListener('keydown', keydown);
+    };
+  }, []);
+};
+
+export default useStartTyping;