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( () =>