diff --git a/CHANGELOG.md b/CHANGELOG.md
index fc808c0a..6609bed1 100644
--- a/CHANGELOG.md
+++ b/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 --git a/__tests__/useSwipeable.spec.tsx b/__tests__/useSwipeable.spec.tsx
index ba66ff12..7a56b9dc 100644
--- a/__tests__/useSwipeable.spec.tsx
+++ b/__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(
+
+ );
+
+ 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 --git a/src/index.ts b/src/index.ts
index 52c86ac5..f300e715 100644
--- a/src/index.ts
+++ b/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({
...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(
() =>