setup onSwipeStart prop (#226)

Author: hartzis

README.md

@@ -33,11 +33,16 @@ Spread `handlers` onto the element you wish to track swipes on.
   onSwipedRight,  // After RIGHT swipe (SwipeEventData) => void
   onSwipedUp,     // After UP swipe    (SwipeEventData) => void
   onSwipedDown,   // After DOWN swipe  (SwipeEventData) => void
+  onSwipeStart,   // Start of swipe    (SwipeEventData) => void *see details*
   onSwiping,      // During swiping    (SwipeEventData) => void
   onTap,          // After a tap       ({ event }) => void
 }
 ```
 
+#### Details
+- `onSwipeStart` - called only once per swipe at the start and before the first `onSwiping` callback
+  - The `first` property of the `SwipeEventData` will be `true`
+
 ### Configuration props and default values
 
 ```js

__tests__/useSwipeable.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { render, fireEvent, act } from "@testing-library/react";
 import { useSwipeable } from "../src/index";
-import { LEFT, RIGHT, UP, DOWN } from "../src/types";
+import { LEFT, RIGHT, UP, DOWN, SwipeableProps } from "../src/types";
 import { expectSwipeFuncsDir } from "./helpers";
 
 const DIRECTIONS: [typeof LEFT, typeof RIGHT, typeof UP, typeof DOWN] = [
@@ -34,7 +34,10 @@ const TESTING_TEXT = "touch here";
 /*
  * Wrapping component for the hook testing
  */
-function SwipeableUsingHook({ nodeName = "div", ...rest }) {
+function SwipeableUsingHook({
+  nodeName = "div",
+  ...rest
+}: SwipeableProps & { nodeName?: string }) {
   const eventHandlers = useSwipeable(rest);
   const Elem = nodeName as React.ElementType;
   return (
@@ -222,6 +225,33 @@ describe("useSwipeable", () => {
     );
   });
 
+  it("correctly calls onSwipeStart for first swipe event", () => {
+    const onSwipeStart = jest.fn();
+    const { getByText } = render(
+      <SwipeableUsingHook onSwipeStart={onSwipeStart} />
+    );
+
+    const touchArea = getByText(TESTING_TEXT);
+
+    // first swipe
+    fireEvent[TS](touchArea, cte({ x: 100, y: 100 }));
+    fireEvent[TM](touchArea, cte({ x: 100, y: 125 }));
+    fireEvent[TM](touchArea, cte({ x: 100, y: 150 }));
+    fireEvent[TM](touchArea, cte({ x: 100, y: 175 }));
+    fireEvent[TE](touchArea, cte({}));
+
+    expect(onSwipeStart).toHaveBeenCalledTimes(1);
+
+    // second swipe
+    fireEvent[TS](touchArea, cte({ x: 100, y: 100 }));
+    fireEvent[TM](touchArea, cte({ x: 125, y: 125 }));
+    fireEvent[TM](touchArea, cte({ x: 150, y: 150 }));
+    fireEvent[TM](touchArea, cte({ x: 175, y: 175 }));
+    fireEvent[TE](touchArea, cte({}));
+
+    expect(onSwipeStart).toHaveBeenCalledTimes(2);
+  });
+
   it("calls preventDefault when swiping in direction that has a callback", () => {
     const onSwipedDown = jest.fn();
 
@@ -346,22 +376,22 @@ describe("useSwipeable", () => {
     expectSwipeFuncsDir(swipeFuncsLeft, LEFT);
 
     // check up
-    const swipeFunsUp = getMockedSwipeFunctions();
-    rerender(<SwipeableUsingHook {...swipeFunsUp} rotationAngle={90} />);
+    const swipeFuncsUp = getMockedSwipeFunctions();
+    rerender(<SwipeableUsingHook {...swipeFuncsUp} rotationAngle={90} />);
     fireEvent[TS](touchArea, cte({ x: 100, y: 100 }));
     fireEvent[TM](touchArea, cte({ x: 125, y: 100 }));
     fireEvent[TM](touchArea, cte({ x: 150, y: 100 }));
     fireEvent[TE](touchArea, cte({}));
-    expectSwipeFuncsDir(swipeFunsUp, UP);
+    expectSwipeFuncsDir(swipeFuncsUp, UP);
 
     // check down
-    const swipeFunsDown = getMockedSwipeFunctions();
-    rerender(<SwipeableUsingHook {...swipeFunsDown} rotationAngle={90} />);
+    const swipeFuncsDown = getMockedSwipeFunctions();
+    rerender(<SwipeableUsingHook {...swipeFuncsDown} rotationAngle={90} />);
     fireEvent[TS](touchArea, cte({ x: 100, y: 100 }));
     fireEvent[TM](touchArea, cte({ x: 75, y: 100 }));
     fireEvent[TM](touchArea, cte({ x: 50, y: 100 }));
     fireEvent[TE](touchArea, cte({}));
-    expectSwipeFuncsDir(swipeFunsDown, DOWN);
+    expectSwipeFuncsDir(swipeFuncsDown, DOWN);
   });
 
   it('Handle "odd" rotations', () => {

src/index.ts

@@ -149,6 +149,10 @@ function getHandlers(
         vxvy,
       };
 
+      // call onSwipeStart if present and is first swipe event
+      eventData.first && props.onSwipeStart && props.onSwipeStart(eventData);
+
+      // Call onSwiping if present
       props.onSwiping && props.onSwiping(eventData);
 
       // track if a swipe is cancelable(handler for swiping or swiped(dir) exists)

src/types.ts

@@ -29,6 +29,7 @@ export type TapCallback = ({ event }: { event: HandledEvents }) => void;
 
 export type SwipeableCallbacks = {
   // Event handler/callbacks
+  onSwipeStart: SwipeCallback;
   onSwiped: SwipeCallback;
   onSwipedDown: SwipeCallback;
   onSwipedLeft: SwipeCallback;