added capslock and updated keyCode to key

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "ignore": ["*/__tests__.js", "*.test.js"]
 }

jest.config.js

@@ -0,0 +1,13 @@
+const ignores = [
+  '/node_modules/',
+  '/__fixtures__/',
+  '/fixtures/',
+  '/__tests__/helpers/',
+  '/__tests__/utils/',
+  '__mocks__'
+];
+
+module.exports = {
+  testMatch: ['**/__tests__/**/*.+(js|jsx|ts|tsx)'],
+  testPathIgnorePatterns: [...ignores]
+};

package.json

@@ -1,18 +1,22 @@
 {
   "name": "use-key-capture",
-  "version": "0.0.1-beta.6",
+  "version": "0.0.1-beta.10",
   "main": "dist",
   "license": "MIT",
   "scripts": {
-    "build": "rimraf dist && babel src --out-dir dist",
+    "build": "rimraf dist && babel src --ignore */__tests__ --out-dir dist",
     "prepare": "yarn build",
-    "postpublish": "git push --tags"
+    "postpublish": "git push --tags",
+    "test": "jest --config=jest.config.js"
   },
   "devDependencies": {
     "@babel/cli": "^7.7.7",
     "@babel/core": "^7.7.7",
     "@babel/preset-env": "^7.7.7",
     "@babel/preset-react": "^7.7.4",
+    "@testing-library/jest-dom": "^5.0.0",
+    "@testing-library/react": "^9.4.0",
+    "jest": "^24.9.0",
     "rimraf": "^3.0.0"
   },
   "peerDependencies": {
@@ -23,5 +27,9 @@
   "homepage": "https://github.com/pranesh239/use-key-capture#readme",
   "bugs": {
     "url": "https://github.com/pranesh239/use-key-capture/issues"
+  },
+  "dependencies": {
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
   }
 }

src/__tests__/useKeyCapture.test.js

@@ -0,0 +1,12 @@
+import { cleanup } from '@testing-library/react';
+import { setUpHook } from '../testUtils';
+
+describe('useKeyCapture', () => {
+  afterEach(cleanup());
+
+  it('should have some result', () => {
+    const hook = setUpHook();
+    console.log('hook', hook);
+    expect(2).toBe(3);
+  });
+});

src/testUtils.js

@@ -0,0 +1,5 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useKeyCapture from './index';
+
+// export const setUpHook = renderHook(useKeyCapture());
+export const setUpHook = 'hi';

src/useKeyCapture/index.js

@@ -1,19 +1,25 @@
-import { useEffect, useReducer } from 'react';
+import { useEffect, useReducer, useRef } from 'react';
 import reducer from './useKeyCaptureReducer';
 
 import {
-  useKeyInitialState,
+  initialState,
   getAction,
   useKeyActionTypes,
-  useEnhancedReducer
+  useEnhancedReducer,
+  targetItemPropsDefaultValue,
+  handleRefAssignment
 } from './useKeyCaptureUtils';
 
 function useKeys() {
   const [keyData, dispatch] = useReducer(
     useEnhancedReducer(reducer),
-    useKeyInitialState
+    initialState
   );
 
+  const targetItemRef = useRef(null);
+
+  console.log('targetItemRef', targetItemRef);
+
   const dispatchWithActionDetails = event => {
     dispatch(getAction(event));
   };
@@ -35,14 +41,24 @@ function useKeys() {
   }, [keyData]);
 
   useEffect(() => {
-    document.addEventListener('keydown', dispatchWithActionDetails);
+    const listenerItem = targetItemRef.current || document;
+    listenerItem.addEventListener('keydown', dispatchWithActionDetails);
 
     return () => {
-      document.removeEventListener('keydown', dispatchWithActionDetails);
+      listenerItem.removeEventListener('keydown', dispatchWithActionDetails);
     };
   }, []);
 
-  return { keyData, resetKeyDetails };
+  const targetPropsGetter = ({ ref, type } = {}) => {
+    return {
+      type: type || targetItemPropsDefaultValue.type,
+      ref: handleRefAssignment(ref, targetItemNode => {
+        targetItemRef.current = targetItemNode;
+      })
+    };
+  };
+
+  return { keyData, resetKeyDetails, targetPropsGetter };
 }
 
 export default useKeys;

src/useKeyCapture/useKeyCaptureReducer.js

@@ -18,6 +18,22 @@ export default function keyReducer(state, action) {
       };
     }
 
+    case useKeyActionTypes.CAPSLOCK: {
+      return {
+        ...initialState,
+        isCapsLock: true,
+        ...action.payload
+      };
+    }
+
+    case useKeyActionTypes.SHIFT: {
+      return {
+        ...initialState,
+        isShift: true,
+        ...action.payload
+      };
+    }
+
     case useKeyActionTypes.CAPS_ALPHABET: {
       return {
         ...initialState,
@@ -50,6 +66,14 @@ export default function keyReducer(state, action) {
       };
     }
 
+    case useKeyActionTypes.TAB: {
+      return {
+        ...initialState,
+        isTab: true,
+        ...action.payload
+      };
+    }
+
     case useKeyActionTypes.SPECIAL: {
       return {
         ...initialState,

src/useKeyCapture/useKeyCaptureUtils.js

@@ -1,39 +1,41 @@
 import { useCallback } from 'react';
 
-export const initialState = {
+const initialState = {
   // Pressed key
   key: null,
 
   isEscape: false,
   isEnter: false,
+  isCapsLock: false,
+  isTab: false,
   isSpace: false,
 
+  // Function keys
+  isFunctionKey: false,
+
   // Arrow keys
   isArrow: false,
   isArrowRight: false,
   isArrowLeft: false,
   isArrowUp: false,
   isArrowDown: false,
 
-  isTab: false,
-
   // Modifier keys
   isWithShift: false,
   isWithCtrl: false,
   isWithMeta: false,
   isWithAlt: false,
 
-  isNumber: false,
-
   // Character varients
   isCaps: false,
   isSmall: false,
+  isNumber: false,
 
   // For special character
   isSpecialCharacter: false
 };
 
-export const useKeyActionTypes = {
+const useKeyActionTypes = {
   ENTER_KEY: 'ENTER_KEY',
   ESCAPE_KEY: 'ESCAPE_KEY',
   RESET_CAPTURES: 'RESET_CAPTURES',
@@ -42,7 +44,10 @@ export const useKeyActionTypes = {
   NUMBER: 'NUMBER',
   SPACE: 'SPACE',
   ARROWS: 'ARROWS',
-  SPECIAL: 'SPECIAL'
+  SPECIAL: 'SPECIAL',
+  TAB: 'TAB',
+  CAPSLOCK: 'CAPSLOCK',
+  SHIFT: 'SHIFT'
 };
 
 const modifierKeys = {
@@ -53,9 +58,13 @@ const modifierKeys = {
 };
 
 const keyCodeMapper = {
-  13: useKeyActionTypes.ENTER_KEY,
-  27: useKeyActionTypes.ESCAPE_KEY,
-  32: useKeyActionTypes.SPACE
+  Enter: useKeyActionTypes.ENTER_KEY,
+  Escape: useKeyActionTypes.ESCAPE_KEY,
+  Tab: useKeyActionTypes.TAB,
+  CapsLock: useKeyActionTypes.CAPSLOCK,
+  Shift: useKeyActionTypes.SHIFT,
+  // eslint-disable-next-line no-useless-computed-key
+  [' ']: useKeyActionTypes.SPACE
 };
 
 const getArrowKeysPayload = key => {
@@ -72,7 +81,8 @@ const isSpecialCharacterPressed = key => {
   return (
     !isCapitalLetterPressed(key) &&
     !isSmallLetterPressed(key) &&
-    !isNumberPressed(key)
+    !isNumberPressed(key) &&
+    !keyCodeMapper[key]
   );
 };
 
@@ -94,7 +104,7 @@ const getModifierPayload = eventDetails => {
  * @param {KeyboardEvent} eventDetails keyboard event object
  * @return {String}  action type
  */
-export const getAction = eventDetails => {
+const getAction = eventDetails => {
   if (!eventDetails) {
     throw new Error('Event called with no details');
   }
@@ -112,8 +122,7 @@ export const getAction = eventDetails => {
 
   let type;
 
-  if (keyCodeMapper[eventDetails.keyCode])
-    type = keyCodeMapper[eventDetails.keyCode];
+  if (keyCodeMapper[eventDetails.key]) type = keyCodeMapper[eventDetails.key];
 
   if (isCapitalLetterPressed(eventDetails.key)) {
     type = useKeyActionTypes.CAPS_ALPHABET;
@@ -127,7 +136,7 @@ export const getAction = eventDetails => {
     type = useKeyActionTypes.NUMBER;
   }
 
-  if (isSpecialCharacterPressed(eventDetails.key)) {
+  if (!type && isSpecialCharacterPressed(eventDetails.key)) {
     type = useKeyActionTypes.SPECIAL;
   }
 
@@ -141,10 +150,35 @@ export const getAction = eventDetails => {
   };
 };
 
-export const useEnhancedReducer = reducer =>
+const targetItemPropsDefaultValue = {
+  type: 'text'
+};
+
+function handleRefAssignment(...refs) {
+  return node => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    });
+  };
+}
+
+const useEnhancedReducer = reducer =>
   useCallback(
     (state, action) => {
       return reducer(state, action);
     },
     [reducer]
   );
+
+export {
+  getAction,
+  initialState,
+  targetItemPropsDefaultValue,
+  useKeyActionTypes,
+  useEnhancedReducer,
+  handleRefAssignment
+};