Merge pull request #22 from /issues/20

himynameisdave · web-flow · commit 2981ece8c7fe · 2020-01-09T19:25:09.000-08:00
Add withTargetChecked
diff --git a/.babelrc b/.babelrc
@@ -2,5 +2,8 @@
     "presets": [
         "@babel/preset-env",
         "@babel/preset-typescript"
+    ],
+    "plugins": [
+        "@babel/plugin-proposal-optional-chaining"
     ]
 }
diff --git a/docs/with-keypress.md b/docs/with-keypress.md
@@ -33,4 +33,16 @@ const MyButton = () => {
 };
 ```
 
+Although this library doesn't export handlers for specific keys, you could use this method to build out your own suite of key event handlers:
+
+```js
+// /utils/keyboard.js
+const withEscapeKeyPress = withKeyPress('Escape');
+const withEnterKeyPress = withKeyPress('Enter');
+const withTabKeyPress = withKeyPress('Tab');
+const withShiftKeyPress = withKeyPress('Shift');
+//  ...etc
+```
+
+
 [![Edit with-keypress (React)](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/with-keypress-react-9344c?fontsize=14&hidenavigation=1&theme=dark)
diff --git a/docs/with-target-checked.md b/docs/with-target-checked.md
@@ -0,0 +1,34 @@
+### withTargetChecked
+
+Calls your provided event handler function with `event.target.checked` as the first value (if it exists). Passes the `event` along as the second argument in case you need it. 
+
+**Vanilla**
+
+```js
+import { withTargetChecked } from "browser-event-utils";
+
+myInputNode.addEventListener(
+  "change",
+  withTargetChecked((checked, event) => {
+    // 👈 Note that you still get the event object if you need it
+    //  ...handle input change event...
+  })
+);
+```
+
+**React**
+
+```jsx
+import React, { Component } from "react";
+import { withTargetChecked } from "browser-event-utils";
+
+const handleCheck = withTargetChecked((checked, event) => {
+  console.log(`Checked! ${checked}`);
+});
+
+function MyInput() {
+  return <input type="checkbox" onChange={handleCheck} />;
+}
+```
+
+[![Edit with-target-value (React)](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/with-stop-immediate-propagation-react-st3fz?fontsize=14)
diff --git a/docs/with-target-value.md b/docs/with-target-value.md
@@ -1,6 +1,6 @@
 ### withTargetValue
 
-Calls your provided event handler function with `event.target.value` as the first value (if it exists).
+Calls your provided event handler function with `event.target.value` as the first value (if it exists). Passes the `event` along as the second argument in case you need it.
 
 **Vanilla**
 
@@ -22,14 +22,12 @@ myInputNode.addEventListener(
 import React, { Component } from "react";
 import { withTargetValue } from "browser-event-utils";
 
-class MyInput extends Component {
-  handleChange = withTargetValue((value, event) => {
-    console.log(`Value changed! ${value}`);
-  });
+const handleChange = withTargetValue((value, event) => {
+  console.log(`Value changed! ${value}`);
+});
 
-  render() {
-    return <input onChange={this.handleChange} />;
-  }
+function MyInput() {
+  return <input type="text" onChange={handleChange} />;
 }
 ```
 
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
     "@babel/preset-env": "^7.7.7",
     "@babel/preset-typescript": "^7.7.7",
     "@types/jest": "^24.0.25",
diff --git a/rollup.config.ts b/rollup.config.ts
@@ -10,7 +10,9 @@ const pkg = require('./package.json');
 const plugins = [
     json(),
     typescript({
-        useTsconfigDeclarationDir: true
+        useTsconfigDeclarationDir: true,
+        objectHashIgnoreUnknownHack: true,
+        clean: true,
     }),
     commonjs(),
     resolve(),
@@ -25,7 +27,7 @@ export default [
                 file: pkg.browser,
                 name: 'browserEventUtils',
                 format: 'umd',
-                sourcemap: true
+                sourcemap: true,
             },
         ],
         plugins: [
@@ -39,12 +41,12 @@ export default [
             {
                 file: pkg.module,
                 format: 'es',
-                sourcemap: true
+                sourcemap: true,
             },
             {
                 file: pkg.main,
                 format: 'commonjs',
-                sourcemap: true
+                sourcemap: true,
             }
         ],
         plugins,
@@ -59,4 +61,4 @@ export default [
     // watch: {
     //     include: 'src/**',
     // },
-// };
+// };
diff --git a/src/__tests__/with-target-checked.ts b/src/__tests__/with-target-checked.ts
@@ -0,0 +1,22 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import withTargetChecked from '../with-target-checked';
+
+
+describe('withTargetChecked', () => {
+    it('will not fall over if bad values are passed', () => {
+        expect(() => withTargetChecked()()).not.toThrow();
+    });
+    it('calls consumer function with undefined if event.target.checked does not exist', () => {
+        const mockConsumer = jest.fn();
+        const mockEvent = {};
+        withTargetChecked(mockConsumer)(mockEvent);
+        expect(mockConsumer).toHaveBeenCalledWith(undefined, mockEvent);
+    });
+    it('calls the consumer function with event.target.checked if it exists', () => {
+        const mockConsumer = jest.fn();
+        const mockIsChecked = true;
+        const mockEvent = { target: { checked: mockIsChecked } };
+        withTargetChecked(mockConsumer)(mockEvent);
+        expect(mockConsumer).toHaveBeenCalledWith(mockIsChecked, mockEvent);
+    });
+});
diff --git a/src/helpers/__tests__/with-target.spec.ts b/src/helpers/__tests__/with-target.spec.ts
@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import withTarget from '../with-target';
+import { EventType, $TSFixMe } from '../../index.d';
+
+
+describe('withTarget', () => {
+    it('calls the provided method with event.target (if it exists)', () => {
+        const mockEvent: EventType | $TSFixMe = {
+            target: 'mockEvent',
+        };
+        const mock = jest.fn();
+        withTarget(mock)(mockEvent);
+        expect(mock).toHaveBeenCalledWith(mockEvent.target, mockEvent);
+    });
+});
diff --git a/src/helpers/call-if-exists.ts b/src/helpers/call-if-exists.ts
@@ -1,13 +1,15 @@
-import { EventHandler } from '../index.d';
+import { EventType, EventHandler } from '../index.d';
 
+export type TCallIfExists = (method: string) => EventHandler;
 /**
  *  Helper util which ensures that a given property actually exists, then calls it if it does
  *
- *  @param {String} method - the event method that you want to call
+ *  @param {string} method - the event method that you want to call
  *  @return {Function} event handler function
  */
-const callIfExists = (method: string): EventHandler => (event: KeyboardEvent | any) => {
-    return !!(event && event[method]) && event[method]();
+const callIfExists: TCallIfExists = (method: string = ''): EventHandler => (event: EventType): void => {
+    //  TODO: replace with optional chaining (eg: `?.`)
+    return !!(event && event[method]) && (event[method] as unknown as Function)();
 };
 
 export default callIfExists;
diff --git a/src/helpers/noop.ts b/src/helpers/noop.ts
@@ -0,0 +1,6 @@
+/**
+ * No-operation
+ */
+const noop = (): void => {};
+
+export default noop;
diff --git a/src/helpers/with-event-factory.ts b/src/helpers/with-event-factory.ts
@@ -1,13 +1,16 @@
 import callIfExists from './call-if-exists';
-import { EventHandler } from '../index.d';
+import noop from './noop';
+import { EventType, EventHandler, UserEventHandler } from '../index.d';
+
+export type TWithEventFactory = (method: string) => UserEventHandler;
 
 /**
  *  Factory which returns the higher-order event handler function
  *
  *  @param {Function} method - the event method which you want to call
  *  @return {Function} - function which accepts the consumer's event handler function and returns the final event handler function
  */
-const withEventFactory = (method: string = '') => (fn: EventHandler): EventHandler => (event: KeyboardEvent) => {
+const withEventFactory: TWithEventFactory = (method: string = ''): UserEventHandler => (fn: EventHandler = noop): EventHandler => (event: EventType = {} as any): void => {
     callIfExists(method)(event);
     return fn(event);
 };
diff --git a/src/helpers/with-target.ts b/src/helpers/with-target.ts
@@ -0,0 +1,18 @@
+import { EventType, EventHandler, $TSFixMe } from '../index.d';
+import noop from './noop';
+
+
+export type TEventTarget = EventTarget | HTMLInputElement | $TSFixMe;
+export type TWithTargetHandler = (target: TEventTarget, event: EventType) => void;
+export type TWithTarget = (fn: TWithTargetHandler) => EventHandler;
+
+/**
+ * Calls a fn with event.target (if it exists)
+ *
+ * @param fn Function which will be called with event.target (if it exists)
+ */
+const withTarget: TWithTarget = (fn: TWithTargetHandler = noop): EventHandler => (event: EventType): void => {
+    return fn(event?.target, event);
+};
+
+export default withTarget;
diff --git a/src/index.d.ts b/src/index.d.ts
@@ -1,2 +1,7 @@
-export type EventHandler = (event: KeyboardEvent) => void;
+export type EventType = Event & KeyboardEvent & { [index: string]: string };
+export type EventHandler = (event: EventType) => void;
 export type UserEventHandler = (fn: EventHandler) => EventHandler;
+
+//  Alias for any type, to remind me to go fix later
+//  Idea stolen from this awesome talk: https://www.youtube.com/watch?v=P-J9Eg7hJwE
+export type $TSFixMe = any; // eslint-disable-line @typescript-eslint/no-explicit-any
diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,6 @@
 export { default as withPreventDefault } from './with-prevent-default';
 export { default as withStopPropagation } from './with-stop-propagation';
 export { default as withStopImmediatePropagation } from './with-stop-immediate-propagation';
+export { default as withTargetChecked } from './with-target-checked';
 export { default as withTargetValue } from './with-target-value';
 export { default as withKeyPress } from './with-keypress';
diff --git a/src/with-keypress.ts b/src/with-keypress.ts
@@ -1,11 +1,12 @@
-import { EventHandler } from './index.d';
+import { EventType, EventHandler, UserEventHandler } from './index.d';
+import noop from './helpers/noop';
 
 /**
  * Generic withKeypress generator
  *
- * @param {KeyboardEvent['key']} key The key which must be pressed for the fn to be invoked
+ * @param {string} key The key which must be pressed for the fn to be invoked
  */
-const withKeyPress = (key: KeyboardEvent['key']) => (fn: EventHandler): EventHandler => (event: KeyboardEvent) => {
+const withKeyPress = (key: string): UserEventHandler => (fn: EventHandler = noop): EventHandler => (event: EventType = {} as any): void => {
     if (event.key === key) {
         return fn(event);
     }
diff --git a/src/with-target-checked.ts b/src/with-target-checked.ts
@@ -0,0 +1,16 @@
+import withTarget from './helpers/with-target';
+import noop from './helpers/noop';
+import { EventType, EventHandler } from './index.d';
+
+export type TWithTargetCheckedHandler = (value: string | null, event: EventType) => void;
+
+/**
+ *  Accepts a function, who's first argument is event.target.checked (if exists),
+ *  followed by the full event object.
+ *
+ *  @param {Function} fn - Consumer's handler function
+ *  @return {Function} - event handler function
+ */
+const withTargetChecked = (fn: TWithTargetCheckedHandler = noop): EventHandler => withTarget((target, event): void => fn(target?.checked, event));
+
+export default withTargetChecked;
diff --git a/src/with-target-value.ts b/src/with-target-value.ts
@@ -1,18 +1,17 @@
-export type WithTargetValue = (value: string | undefined, event: KeyboardEvent | InputEvent | any) => void;
+import withTarget from './helpers/with-target';
+import noop from './helpers/noop';
+import { EventType, EventHandler } from './index.d';
 
 
+export type TWithTargetValueHandler = (value: string | null, event: EventType) => void;
+
 /**
  *  Accepts a function, who's first argument is event.target.value (if exists),
  *  followed by the full event object.
  *
  *  @param {Function} fn - Consumer's handler function
  *  @return {Function} - event handler function
  */
-const withTargetValue = (fn: WithTargetValue) => (event: InputEvent | any) => {
-    if (!event || !event.target) {
-        return fn(undefined, event);
-    }
-    return fn(event.target.value, event);
-};
+const withTargetValue = (fn: TWithTargetValueHandler = noop): EventHandler => withTarget((target, event): void => fn(target?.value, event));
 
 export default withTargetValue;
diff --git a/yarn.lock b/yarn.lock
@@ -352,6 +352,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-optional-catch-binding" "^7.7.4"
 
+"@babel/plugin-proposal-optional-chaining@^7.7.5":
+  version "7.7.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.7.5.tgz#f0835f044cef85b31071a924010a2a390add11d4"
+  integrity sha512-sOwFqT8JSchtJeDD+CjmWCaiFoLxY4Ps7NjvwHC/U7l4e9i5pTRNt8nDMIFSOUL+ncFbYSwruHM8WknYItWdXw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.7.4"
+
 "@babel/plugin-proposal-unicode-property-regex@^7.7.7":
   version "7.7.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.7.7.tgz#433fa9dac64f953c12578b29633f456b68831c4e"
@@ -402,6 +410,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-optional-chaining@^7.7.4":
+  version "7.7.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.7.4.tgz#c91fdde6de85d2eb8906daea7b21944c3610c901"
+  integrity sha512-2MqYD5WjZSbJdUagnJvIdSfkb/ucOC9/1fRJxm7GAxY6YQLWlUvkfxoNbUPcPLHJyetKUDQ4+yyuUyAoc0HriA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-syntax-top-level-await@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.7.4.tgz#bd7d8fa7b9fee793a36e4027fd6dd1aa32f946da"

Original file line number	Diff line number	Diff line change
`@@ -2,5 +2,8 @@`
`2`	`2`	`"presets": [`
`3`	`3`	`"@babel/preset-env",`
`4`	`4`	`"@babel/preset-typescript"`
	`5`	`+ ],`
	`6`	`+ "plugins": [`
	`7`	`+ "@babel/plugin-proposal-optional-chaining"`
`5`	`8`	`]`
`6`	`9`	`}`