force defaults for undefined configs (#296)

Author: hartzis

Diff for: CHANGELOG.md

@@ -1,3 +1,9 @@
+# unreleased
+* Fix issue with some config properties being set to `undefined` breaking swipeable
+  * [PR #296](https://github.com/formidablelabs/react-swipeable/pull/296)
+  * explicitly set `undefined` config props to config defaults
+  * Thank you [@simonflk](https://github.com/simonflk)
+
 # v6.2.0
 * `delta` prop can now be an `object` specifying different values for each direction
   * [PR #260](https://github.com/formidablelabs/react-swipeable/pull/260)

Diff for: __tests__/useSwipeable.spec.tsx

@@ -151,6 +151,34 @@ describe("useSwipeable", () => {
     expect(onTap).not.toHaveBeenCalled();
   });
 
+  it("handles touch events and fires correct props with undefined values for config", () => {
+    const swipeFuncs = getMockedSwipeFunctions();
+    const undefinedConfigOptions: SwipeableProps = {
+      delta: undefined,
+      preventDefaultTouchmoveEvent: undefined,
+      rotationAngle: undefined,
+      trackMouse: undefined,
+      trackTouch: undefined,
+    };
+    const { getByText } = render(
+      <SwipeableUsingHook {...swipeFuncs} {...undefinedConfigOptions} />
+    );
+
+    const touchArea = getByText(TESTING_TEXT);
+
+    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[TE](touchArea, cte({}));
+
+    expect(swipeFuncs.onSwiped).toHaveBeenCalled();
+    expect(swipeFuncs.onSwipedDown).toHaveBeenCalled();
+    expect(swipeFuncs.onSwipedUp).not.toHaveBeenCalled();
+    expect(swipeFuncs.onSwipedLeft).not.toHaveBeenCalled();
+    expect(swipeFuncs.onSwipedRight).not.toHaveBeenCalled();
+    expect(swipeFuncs.onSwiping).toHaveBeenCalledTimes(2);
+  });
+
   it("handles mouse events with trackMouse prop and fires correct props", () => {
     const swipeFuncs = getMockedSwipeFunctions();
     const { getByText } = render(

Diff for: src/index.ts

@@ -9,6 +9,7 @@ import {
   LEFT,
   RIGHT,
   Setter,
+  ConfigurationOptions,
   SwipeableCallbacks,
   SwipeableHandlers,
   SwipeableProps,
@@ -34,7 +35,7 @@ export {
   Vector2,
 };
 
-const defaultProps = {
+const defaultProps: ConfigurationOptions = {
   delta: 10,
   preventDefaultTouchmoveEvent: false,
   rotationAngle: 0,
@@ -253,7 +254,7 @@ function getHandlers(
       // if new DOM el clean up old DOM and reset cleanUpTouch
       if (state.el && state.el !== el && state.cleanUpTouch) {
         state.cleanUpTouch();
-        addState.cleanUpTouch = undefined;
+        addState.cleanUpTouch = void 0;
       }
       // only attach if we want to track touch
       if (props.trackTouch && el) {
@@ -290,7 +291,7 @@ function updateTransientState(
   // clean up touch handlers if no longer tracking touches
   if (!props.trackTouch && state.cleanUpTouch) {
     state.cleanUpTouch();
-    addState.cleanUpTouch = undefined;
+    addState.cleanUpTouch = void 0;
   } else if (props.trackTouch && !state.cleanUpTouch) {
     // attach/re-attach touch handlers
     if (state.el) {
@@ -309,7 +310,20 @@ export function useSwipeable(options: SwipeableProps): SwipeableHandlers {
   const transientProps = React.useRef<SwipeablePropsWithDefaultOptions>({
     ...defaultProps,
   });
-  transientProps.current = { ...defaultProps, ...options };
+  transientProps.current = {
+    ...defaultProps,
+    ...options,
+    // Force defaults for config properties
+    delta: options.delta === void 0 ? defaultProps.delta : options.delta,
+    rotationAngle:
+      options.rotationAngle === void 0
+        ? defaultProps.rotationAngle
+        : options.rotationAngle,
+    trackTouch:
+      options.trackTouch === void 0
+        ? defaultProps.trackTouch
+        : options.trackTouch,
+  };
 
   const [handlers, attachTouch] = React.useMemo(
     () =>