Use template literals for swipe direction callbacks

package.json

@@ -85,7 +85,7 @@
     "eslint-plugin-react-hooks": "^4.0.5",
     "gh-pages": "^3.0.0",
     "jest": "^26.1.0",
-    "microbundle": "^0.12.3",
+    "microbundle": "^0.13.0",
     "prettier": "^2.0.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

src/index.ts

@@ -1,35 +1,36 @@
 /* global document */
 import * as React from "react";
 import {
-  AttachTouch,
-  SwipeDirections,
   DOWN,
-  SwipeEventData,
-  HandledEvents,
   LEFT,
   RIGHT,
+  UP,
+  AttachTouch,
+  HandledEvents,
+  OnSwipedDirections,
   Setter,
   SwipeableHandlers,
   SwipeableProps,
   SwipeablePropsWithDefaultOptions,
   SwipeableState,
   SwipeCallback,
+  SwipeDirections,
+  SwipeEventData,
   TapCallback,
-  UP,
   Vector2,
 } from "./types";
 
 export {
+  DOWN,
   LEFT,
   RIGHT,
   UP,
-  DOWN,
-  SwipeDirections,
-  SwipeEventData,
-  SwipeCallback,
   TapCallback,
   SwipeableHandlers,
   SwipeableProps,
+  SwipeCallback,
+  SwipeDirections,
+  SwipeEventData,
   Vector2,
 };
 
@@ -187,13 +188,13 @@ function getHandlers(
         eventData = { ...state.eventData, event };
         props.onSwiped && props.onSwiped(eventData);
 
-        const onSwipedDir = `onSwiped${eventData.dir}`;
-        if (onSwipedDir in props) {
-          ((props as any)[onSwipedDir] as SwipeCallback)(eventData);
-        }
+        const onSwipedDir =
+          props[`onSwiped${eventData.dir}` as OnSwipedDirections];
+        onSwipedDir && onSwipedDir(eventData);
       } else {
         props.onTap && props.onTap({ event });
       }
+
       return { ...state, ...initialState, eventData };
     });
   };

src/types.ts

@@ -11,6 +11,7 @@ export type SwipeDirections =
   | typeof RIGHT
   | typeof UP
   | typeof DOWN;
+
 export interface SwipeEventData {
   absX: number;
   absY: number;
@@ -27,14 +28,15 @@ export interface SwipeEventData {
 export type SwipeCallback = (eventData: SwipeEventData) => void;
 export type TapCallback = ({ event }: { event: HandledEvents }) => void;
 
-export type SwipeableCallbacks = {
+export type OnSwipedDirections = `onSwiped${SwipeDirections}`;
+export type OnSwipedDirectionCallbacks = {
+  [Property in OnSwipedDirections]: SwipeCallback;
+};
+
+export type SwipeableCallbacks = OnSwipedDirectionCallbacks & {
   // Event handler/callbacks
   onSwipeStart: SwipeCallback;
   onSwiped: SwipeCallback;
-  onSwipedDown: SwipeCallback;
-  onSwipedLeft: SwipeCallback;
-  onSwipedRight: SwipeCallback;
-  onSwipedUp: SwipeCallback;
   onSwiping: SwipeCallback;
   onTap: TapCallback;
 };

tsconfig.base.json

@@ -12,7 +12,6 @@
     "noUnusedParameters": true,
     "outDir": "lib/",
     "pretty": true,
-    "rootDirs": ["./src"],
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,

tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "./tsconfig.base.json",
   "include": ["src/**/*"],
- }
+}