V6 ontap callback

__tests__/useSwipeable.spec.tsx

@@ -79,9 +79,26 @@ describe("useSwipeable", () => {
     defaultPrevented = 0;
   });
 
+  it("handles onTap callbacks", () => {
+    const onTap = jest.fn();
+    const swipeFuncs = getMockedSwipeFunctions();
+    const { getByText } = render(
+      <SwipeableUsingHook {...swipeFuncs} onTap={onTap} />
+    );
+    const touchArea = getByText(TESTING_TEXT);
+
+    fireEvent[TS](touchArea, cte({ x: 100, y: 100 }));
+    fireEvent[TE](touchArea, cte({ x: 100, y: 100 }));
+
+    expect(onTap).toHaveBeenCalled();
+  });
+
   it("handles touch events and fires correct props", () => {
+    const onTap = jest.fn();
     const swipeFuncs = getMockedSwipeFunctions();
-    const { getByText } = render(<SwipeableUsingHook {...swipeFuncs} />);
+    const { getByText } = render(
+      <SwipeableUsingHook {...swipeFuncs} onTap={onTap} />
+    );
 
     const touchArea = getByText(TESTING_TEXT);
 
@@ -104,6 +121,7 @@ describe("useSwipeable", () => {
       { velocity: expect.any(Number) },
       `useSwipeable onSwiping trackTouch`
     );
+    expect(onTap).not.toHaveBeenCalled();
   });
 
   it("handles mouse events with trackMouse prop and fires correct props", () => {

examples/app/FeatureTestConsole.tsx

@@ -14,7 +14,7 @@ const persistSyntheticEvent = (func: any, persist: any) => {
 const initialState = {
   swiping: false,
   swiped: false,
-  tap: false,
+  tapped: false,
   swipingDirection: '',
   swipedDirection: '',
 };
@@ -29,6 +29,7 @@ const initialStateApplied = {
   showOnSwipeds: false,
   onSwipingApplied: true,
   onSwipedApplied: true,
+  onTapApplied: true,
   onSwipedLeftApplied: true,
   onSwipedRightApplied: true,
   onSwipedUpApplied: true,
@@ -39,7 +40,7 @@ const initialStateApplied = {
 interface IState {
   swiping: boolean;
   swiped: boolean;
-  tap: boolean;
+  tapped: boolean;
   swipingDirection: string;
   swipedDirection: string;
   delta: string;
@@ -50,6 +51,7 @@ interface IState {
   showOnSwipeds: boolean;
   onSwipingApplied: boolean;
   onSwipedApplied: boolean;
+  onTapApplied: boolean;
   onSwipedLeftApplied: boolean;
   onSwipedRightApplied: boolean;
   onSwipedUpApplied: boolean;
@@ -90,6 +92,16 @@ export default class Main extends Component<any, IState> {
     });
   }
 
+  onTap(args: any) {
+    console.log('tap args: ', args)
+
+    this.setState({
+      swiping: false,
+      swiped: false,
+      tapped: true
+    })
+  }
+
   onSwipedDirection(direction: any) {
     this.setState({
       swipedDirection: direction,
@@ -121,12 +133,14 @@ export default class Main extends Component<any, IState> {
     const {
       swiping,
       swiped,
+      tapped,
       swipingDirection,
       swipedDirection,
       delta,
       showOnSwipeds,
       onSwipingApplied,
       onSwipedApplied,
+      onTapApplied,
       persistEvent,
       preventDefaultTouchmoveEvent,
       trackTouch,
@@ -151,6 +165,10 @@ export default class Main extends Component<any, IState> {
       // @ts-ignore
       swipeableDirProps.onSwiped = persistSyntheticEvent((...args: any)=>this.onSwiped(...args), persistEvent);
     }
+    if(onTapApplied) {
+      // @ts-ignore
+      swipeableDirProps.onTap = persistSyntheticEvent((...args: any) => this.onTap(...args), persistEvent);
+    }
 
     return (
       <div className="row" id="FeatureTestConsole">
@@ -190,6 +208,13 @@ export default class Main extends Component<any, IState> {
                     onChange={(e)=>this.updateValue('onSwipedApplied', e.target.checked)} />
                 </td>
                 <td>onSwiped</td><td>{swiped ? 'True' : 'False'}</td>
+              </tr>
+                            <tr style={{color: onTapApplied ? '#000000' : '#cccccc'}}>
+                <td className="text-center">
+                  <input type="checkbox" checked={onTapApplied} style={{margin: "0"}}
+                    onChange={(e)=>this.updateValue('onTapApplied', e.target.checked)} />
+                </td>
+                <td>onTap</td><td>{tapped ? 'True' : 'False'}</td>
               </tr>
               <tr>
                 <td className="text-center"></td>

src/index.ts

@@ -16,6 +16,7 @@ export type EventData = {
 };
 
 export type SwipeCallback = (eventData: EventData) => void;
+export type TapCallback = ({ event }: { event: HandledEvents }) => void;
 
 export interface SwipeableOptions {
   // Event handler/callbacks
@@ -25,6 +26,7 @@ export interface SwipeableOptions {
   onSwipedUp?: SwipeCallback;
   onSwipedDown?: SwipeCallback;
   onSwiping?: SwipeCallback;
+  onTap?: TapCallback;
 
   // Configuration Props
   delta?: number;
@@ -69,6 +71,7 @@ type Props = {
   onSwipedUp?: SwipeCallback;
   onSwipedDown?: SwipeCallback;
   onSwiping?: SwipeCallback;
+  onTap?: TapCallback;
 
   // Configuration Props
   delta: number;
@@ -227,16 +230,18 @@ function getHandlers(
 
   const onEnd = (event: HandledEvents) => {
     set((state, props) => {
-      let eventData: EventData | undefined;
-      if (state.swiping) {
-        eventData = { ...state.eventData, event } as EventData;
+      //let eventData: EventData | undefined;
+      const eventData = { ...state.eventData, event } as EventData;
 
+      if (state.swiping) {
         props.onSwiped && props.onSwiped(eventData);
 
         const onSwipedDir = `onSwiped${eventData.dir}`;
         if (onSwipedDir in props) {
           (props as any)[onSwipedDir](eventData);
         }
+      } else {
+        props.onTap && props.onTap({ event });
       }
       return { ...state, ...initialState, eventData };
     });