Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-swipeable

Package Overview
Dependencies
Maintainers
26
Versions
75
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-swipeable - npm Package Compare versions

Comparing version 6.1.2 to 6.2.0

13

CHANGELOG.md

@@ -0,1 +1,14 @@

# 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)
* Thank you [@macabeus](https://github.com/macabeus) for the idea and PR!
* defaults `delta` if direction not present in object, [PR #262](https://github.com/formidablelabs/react-swipeable/pull/262)
* Maintenance
* upgrade to latest version of `microbundle`
* remove comments from built files
* attempt to lower size to counter unnecessary increase from `microbundle` upgrade due to `rollup` `output.interop`
* include type updates influenced by [PR #259](https://github.com/formidablelabs/react-swipeable/pull/259)
* Thank you [@jaketodaro](https://github.com/jaketodaro)
* ~dependabot security updates~
# v6.1.2

@@ -2,0 +15,0 @@ * Maintenance

88

dist/react-swipeable.js
var React = require('react');
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () {
return e[k];
}
});
}
});
}
n['default'] = e;
return n;
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
function _extends() {

@@ -70,6 +92,4 @@ _extends = Object.assign || function (target) {

var onStart = function onStart(event) {
// if more than a single touch don't track, for now...
if (event && "touches" in event && event.touches.length > 1) return;
set(function (state, props) {
// setup mouse listeners on document to track swipe since swipe can leave container
if (props.trackMouse) {

@@ -95,4 +115,2 @@ document.addEventListener(mouseMove, onMove);

set(function (state, props) {
// Discount a swipe if additional touches are present after
// a swipe has started.
if ("touches" in event && event.touches.length > 1) {

@@ -116,6 +134,6 @@ return state;

var velocity = Math.sqrt(absX * absX + absY * absY) / (time || 1);
var vxvy = [deltaX / (time || 1), deltaY / (time || 1)]; // if swipe is under delta and we have not started to track a swipe: skip update
if (absX < props.delta && absY < props.delta && !state.swiping) return state;
var vxvy = [deltaX / (time || 1), deltaY / (time || 1)];
var dir = getDirection(absX, absY, deltaX, deltaY);
var delta = typeof props.delta === "number" ? props.delta : props.delta[dir.toLowerCase()] || defaultProps.delta;
if (absX < delta && absY < delta && !state.swiping) return state;
var eventData = {

@@ -132,9 +150,5 @@ absX: absX,

vxvy: 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)
// so we can call preventDefault if needed
};
eventData.first && props.onSwipeStart && props.onSwipeStart(eventData);
props.onSwiping && props.onSwiping(eventData);
var cancelablePageSwipe = false;

@@ -148,3 +162,2 @@

return _extends({}, state, {
// first is now always false
first: false,

@@ -166,7 +179,4 @@ eventData: eventData,

props.onSwiped && props.onSwiped(eventData);
var onSwipedDir = "onSwiped" + eventData.dir;
if (onSwipedDir in props) {
props[onSwipedDir](eventData);
}
var onSwipedDir = props["onSwiped" + eventData.dir];
onSwipedDir && onSwipedDir(eventData);
} else {

@@ -185,3 +195,2 @@ props.onTap && props.onTap({

var cleanUpMouse = function cleanUpMouse() {
// safe to just call removeEventListener
document.removeEventListener(mouseMove, onMove);

@@ -195,12 +204,3 @@ document.removeEventListener(mouseUp, onUp);

};
/**
* Switch of "passive" property for now.
* When `preventDefaultTouchmoveEvent` is:
* - true => { passive: false }
* - false => { passive: true }
*
* Could take entire `addEventListener` options object as a param later?
*/
var attachTouch = function attachTouch(el, passive) {

@@ -210,3 +210,2 @@ var cleanup = function cleanup() {};

if (el && el.addEventListener) {
// attach touch event listeners and handlers
var tls = [[touchStart, onStart], [touchMove, onMove], [touchEnd, onEnd]];

@@ -219,3 +218,3 @@ tls.forEach(function (_ref3) {

});
}); // return properly scoped cleanup method for removing listeners, options not required
});

@@ -235,9 +234,6 @@ cleanup = function cleanup() {

var onRef = function onRef(el) {
// "inline" ref functions are called twice on render, once with null then again with DOM element
// ignore null here
if (el === null) return;
set(function (state, props) {
// if the same DOM el as previous just return state
if (state.el === el) return state;
var addState = {}; // if new DOM el clean up old DOM and reset cleanUpTouch
var addState = {};

@@ -247,10 +243,8 @@ if (state.el && state.el !== el && state.cleanUpTouch) {

addState.cleanUpTouch = undefined;
} // only attach if we want to track touch
}
if (props.trackTouch && el) {
addState.cleanUpTouch = attachTouch(el, !props.preventDefaultTouchmoveEvent);
} // store event attached DOM el for comparison, clean up, and re-attachment
}
return _extends({}, state, {

@@ -260,8 +254,7 @@ el: el

});
}; // set ref callback to attach touch event listeners
};
var output = {
ref: onRef
}; // if track mouse attach mouse down listener
};

@@ -276,3 +269,3 @@ if (handlerProps.trackMouse) {

function updateTransientState(state, props, attachTouch) {
var addState = {}; // clean up touch handlers if no longer tracking touches
var addState = {};

@@ -283,3 +276,2 @@ if (!props.trackTouch && state.cleanUpTouch) {

} else if (props.trackTouch && !state.cleanUpTouch) {
// attach/re-attach touch handlers
if (state.el) {

@@ -295,7 +287,7 @@ addState.cleanUpTouch = attachTouch(state.el, !props.preventDefaultTouchmoveEvent);

var trackMouse = options.trackMouse;
var transientState = React.useRef(_extends({}, initialState));
var transientProps = React.useRef(_extends({}, defaultProps));
var transientState = React__namespace.useRef(_extends({}, initialState));
var transientProps = React__namespace.useRef(_extends({}, defaultProps));
transientProps.current = _extends({}, defaultProps, options);
var _React$useMemo = React.useMemo(function () {
var _React$useMemo = React__namespace.useMemo(function () {
return getHandlers(function (stateSetter) {

@@ -302,0 +294,0 @@ return transientState.current = stateSetter(transientState.current, transientProps.current);

122

dist/react-swipeable.modern.js

@@ -1,3 +0,21 @@

import { useRef, useMemo } from 'react';
import * as React from 'react';
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
const LEFT = "Left";

@@ -8,3 +26,2 @@ const RIGHT = "Right";

/* global document */
const defaultProps = {

@@ -54,6 +71,4 @@ delta: 10,

const onStart = event => {
// if more than a single touch don't track, for now...
if (event && "touches" in event && event.touches.length > 1) return;
set((state, props) => {
// setup mouse listeners on document to track swipe since swipe can leave container
if (props.trackMouse) {

@@ -69,8 +84,7 @@ document.addEventListener(mouseMove, onMove);

const xy = rotateXYByAngle([clientX, clientY], props.rotationAngle);
return { ...state,
...initialState,
return _extends({}, state, initialState, {
initial: [...xy],
xy,
start: event.timeStamp || 0
};
});
});

@@ -81,4 +95,2 @@ };

set((state, props) => {
// Discount a swipe if additional touches are present after
// a swipe has started.
if ("touches" in event && event.touches.length > 1) {

@@ -99,6 +111,6 @@ return state;

const velocity = Math.sqrt(absX * absX + absY * absY) / (time || 1);
const vxvy = [deltaX / (time || 1), deltaY / (time || 1)]; // if swipe is under delta and we have not started to track a swipe: skip update
if (absX < props.delta && absY < props.delta && !state.swiping) return state;
const vxvy = [deltaX / (time || 1), deltaY / (time || 1)];
const dir = getDirection(absX, absY, deltaX, deltaY);
const delta = typeof props.delta === "number" ? props.delta : props.delta[dir.toLowerCase()] || defaultProps.delta;
if (absX < delta && absY < delta && !state.swiping) return state;
const eventData = {

@@ -115,9 +127,5 @@ absX,

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)
// so we can call preventDefault if needed
};
eventData.first && props.onSwipeStart && props.onSwipeStart(eventData);
props.onSwiping && props.onSwiping(eventData);
let cancelablePageSwipe = false;

@@ -130,8 +138,7 @@

if (cancelablePageSwipe && props.preventDefaultTouchmoveEvent && props.trackTouch && event.cancelable) event.preventDefault();
return { ...state,
// first is now always false
return _extends({}, state, {
first: false,
eventData,
swiping: true
};
});
});

@@ -145,11 +152,8 @@ };

if (state.swiping && state.eventData) {
eventData = { ...state.eventData,
eventData = _extends({}, state.eventData, {
event
};
});
props.onSwiped && props.onSwiped(eventData);
const onSwipedDir = `onSwiped${eventData.dir}`;
if (onSwipedDir in props) {
props[onSwipedDir](eventData);
}
const onSwipedDir = props[`onSwiped${eventData.dir}`];
onSwipedDir && onSwipedDir(eventData);
} else {

@@ -161,6 +165,5 @@ props.onTap && props.onTap({

return { ...state,
...initialState,
return _extends({}, state, initialState, {
eventData
};
});
});

@@ -170,3 +173,2 @@ };

const cleanUpMouse = () => {
// safe to just call removeEventListener
document.removeEventListener(mouseMove, onMove);

@@ -180,12 +182,3 @@ document.removeEventListener(mouseUp, onUp);

};
/**
* Switch of "passive" property for now.
* When `preventDefaultTouchmoveEvent` is:
* - true => { passive: false }
* - false => { passive: true }
*
* Could take entire `addEventListener` options object as a param later?
*/
const attachTouch = (el, passive) => {

@@ -195,7 +188,6 @@ let cleanup = () => {};

if (el && el.addEventListener) {
// attach touch event listeners and handlers
const tls = [[touchStart, onStart], [touchMove, onMove], [touchEnd, onEnd]];
tls.forEach(([e, h]) => el.addEventListener(e, h, {
passive
})); // return properly scoped cleanup method for removing listeners, options not required
}));

@@ -209,9 +201,6 @@ cleanup = () => tls.forEach(([e, h]) => el.removeEventListener(e, h));

const onRef = el => {
// "inline" ref functions are called twice on render, once with null then again with DOM element
// ignore null here
if (el === null) return;
set((state, props) => {
// if the same DOM el as previous just return state
if (state.el === el) return state;
const addState = {}; // if new DOM el clean up old DOM and reset cleanUpTouch
const addState = {};

@@ -221,21 +210,17 @@ if (state.el && state.el !== el && state.cleanUpTouch) {

addState.cleanUpTouch = undefined;
} // only attach if we want to track touch
}
if (props.trackTouch && el) {
addState.cleanUpTouch = attachTouch(el, !props.preventDefaultTouchmoveEvent);
} // store event attached DOM el for comparison, clean up, and re-attachment
}
return { ...state,
el,
...addState
};
return _extends({}, state, {
el
}, addState);
});
}; // set ref callback to attach touch event listeners
};
const output = {
ref: onRef
}; // if track mouse attach mouse down listener
};

@@ -250,3 +235,3 @@ if (handlerProps.trackMouse) {

function updateTransientState(state, props, attachTouch) {
const addState = {}; // clean up touch handlers if no longer tracking touches
const addState = {};

@@ -257,3 +242,2 @@ if (!props.trackTouch && state.cleanUpTouch) {

} else if (props.trackTouch && !state.cleanUpTouch) {
// attach/re-attach touch handlers
if (state.el) {

@@ -264,5 +248,3 @@ addState.cleanUpTouch = attachTouch(state.el, !props.preventDefaultTouchmoveEvent);

return { ...state,
...addState
};
return _extends({}, state, addState);
}

@@ -274,10 +256,6 @@

} = options;
const transientState = useRef({ ...initialState
});
const transientProps = useRef({ ...defaultProps
});
transientProps.current = { ...defaultProps,
...options
};
const [handlers, attachTouch] = useMemo(() => getHandlers(stateSetter => transientState.current = stateSetter(transientState.current, transientProps.current), {
const transientState = React.useRef(_extends({}, initialState));
const transientProps = React.useRef(_extends({}, defaultProps));
transientProps.current = _extends({}, defaultProps, options);
const [handlers, attachTouch] = React.useMemo(() => getHandlers(stateSetter => transientState.current = stateSetter(transientState.current, transientProps.current), {
trackMouse

@@ -284,0 +262,0 @@ }), [trackMouse]);

68

dist/react-swipeable.module.js

@@ -1,2 +0,2 @@

import { useRef, useMemo } from 'react';
import * as React from 'react';

@@ -70,6 +70,4 @@ function _extends() {

var onStart = function onStart(event) {
// if more than a single touch don't track, for now...
if (event && "touches" in event && event.touches.length > 1) return;
set(function (state, props) {
// setup mouse listeners on document to track swipe since swipe can leave container
if (props.trackMouse) {

@@ -95,4 +93,2 @@ document.addEventListener(mouseMove, onMove);

set(function (state, props) {
// Discount a swipe if additional touches are present after
// a swipe has started.
if ("touches" in event && event.touches.length > 1) {

@@ -116,6 +112,6 @@ return state;

var velocity = Math.sqrt(absX * absX + absY * absY) / (time || 1);
var vxvy = [deltaX / (time || 1), deltaY / (time || 1)]; // if swipe is under delta and we have not started to track a swipe: skip update
if (absX < props.delta && absY < props.delta && !state.swiping) return state;
var vxvy = [deltaX / (time || 1), deltaY / (time || 1)];
var dir = getDirection(absX, absY, deltaX, deltaY);
var delta = typeof props.delta === "number" ? props.delta : props.delta[dir.toLowerCase()] || defaultProps.delta;
if (absX < delta && absY < delta && !state.swiping) return state;
var eventData = {

@@ -132,9 +128,5 @@ absX: absX,

vxvy: 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)
// so we can call preventDefault if needed
};
eventData.first && props.onSwipeStart && props.onSwipeStart(eventData);
props.onSwiping && props.onSwiping(eventData);
var cancelablePageSwipe = false;

@@ -148,3 +140,2 @@

return _extends({}, state, {
// first is now always false
first: false,

@@ -166,7 +157,4 @@ eventData: eventData,

props.onSwiped && props.onSwiped(eventData);
var onSwipedDir = "onSwiped" + eventData.dir;
if (onSwipedDir in props) {
props[onSwipedDir](eventData);
}
var onSwipedDir = props["onSwiped" + eventData.dir];
onSwipedDir && onSwipedDir(eventData);
} else {

@@ -185,3 +173,2 @@ props.onTap && props.onTap({

var cleanUpMouse = function cleanUpMouse() {
// safe to just call removeEventListener
document.removeEventListener(mouseMove, onMove);

@@ -195,12 +182,3 @@ document.removeEventListener(mouseUp, onUp);

};
/**
* Switch of "passive" property for now.
* When `preventDefaultTouchmoveEvent` is:
* - true => { passive: false }
* - false => { passive: true }
*
* Could take entire `addEventListener` options object as a param later?
*/
var attachTouch = function attachTouch(el, passive) {

@@ -210,3 +188,2 @@ var cleanup = function cleanup() {};

if (el && el.addEventListener) {
// attach touch event listeners and handlers
var tls = [[touchStart, onStart], [touchMove, onMove], [touchEnd, onEnd]];

@@ -219,3 +196,3 @@ tls.forEach(function (_ref3) {

});
}); // return properly scoped cleanup method for removing listeners, options not required
});

@@ -235,9 +212,6 @@ cleanup = function cleanup() {

var onRef = function onRef(el) {
// "inline" ref functions are called twice on render, once with null then again with DOM element
// ignore null here
if (el === null) return;
set(function (state, props) {
// if the same DOM el as previous just return state
if (state.el === el) return state;
var addState = {}; // if new DOM el clean up old DOM and reset cleanUpTouch
var addState = {};

@@ -247,10 +221,8 @@ if (state.el && state.el !== el && state.cleanUpTouch) {

addState.cleanUpTouch = undefined;
} // only attach if we want to track touch
}
if (props.trackTouch && el) {
addState.cleanUpTouch = attachTouch(el, !props.preventDefaultTouchmoveEvent);
} // store event attached DOM el for comparison, clean up, and re-attachment
}
return _extends({}, state, {

@@ -260,8 +232,7 @@ el: el

});
}; // set ref callback to attach touch event listeners
};
var output = {
ref: onRef
}; // if track mouse attach mouse down listener
};

@@ -276,3 +247,3 @@ if (handlerProps.trackMouse) {

function updateTransientState(state, props, attachTouch) {
var addState = {}; // clean up touch handlers if no longer tracking touches
var addState = {};

@@ -283,3 +254,2 @@ if (!props.trackTouch && state.cleanUpTouch) {

} else if (props.trackTouch && !state.cleanUpTouch) {
// attach/re-attach touch handlers
if (state.el) {

@@ -295,7 +265,7 @@ addState.cleanUpTouch = attachTouch(state.el, !props.preventDefaultTouchmoveEvent);

var trackMouse = options.trackMouse;
var transientState = useRef(_extends({}, initialState));
var transientProps = useRef(_extends({}, defaultProps));
var transientState = React.useRef(_extends({}, initialState));
var transientProps = React.useRef(_extends({}, defaultProps));
transientProps.current = _extends({}, defaultProps, options);
var _React$useMemo = useMemo(function () {
var _React$useMemo = React.useMemo(function () {
return getHandlers(function (stateSetter) {

@@ -302,0 +272,0 @@ return transientState.current = stateSetter(transientState.current, transientProps.current);

88

dist/react-swipeable.umd.js

@@ -6,2 +6,24 @@ (function (global, factory) {

}(this, (function (exports, React) {
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () {
return e[k];
}
});
}
});
}
n['default'] = e;
return n;
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
function _extends() {

@@ -74,6 +96,4 @@ _extends = Object.assign || function (target) {

var onStart = function onStart(event) {
// if more than a single touch don't track, for now...
if (event && "touches" in event && event.touches.length > 1) return;
set(function (state, props) {
// setup mouse listeners on document to track swipe since swipe can leave container
if (props.trackMouse) {

@@ -99,4 +119,2 @@ document.addEventListener(mouseMove, onMove);

set(function (state, props) {
// Discount a swipe if additional touches are present after
// a swipe has started.
if ("touches" in event && event.touches.length > 1) {

@@ -120,6 +138,6 @@ return state;

var velocity = Math.sqrt(absX * absX + absY * absY) / (time || 1);
var vxvy = [deltaX / (time || 1), deltaY / (time || 1)]; // if swipe is under delta and we have not started to track a swipe: skip update
if (absX < props.delta && absY < props.delta && !state.swiping) return state;
var vxvy = [deltaX / (time || 1), deltaY / (time || 1)];
var dir = getDirection(absX, absY, deltaX, deltaY);
var delta = typeof props.delta === "number" ? props.delta : props.delta[dir.toLowerCase()] || defaultProps.delta;
if (absX < delta && absY < delta && !state.swiping) return state;
var eventData = {

@@ -136,9 +154,5 @@ absX: absX,

vxvy: 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)
// so we can call preventDefault if needed
};
eventData.first && props.onSwipeStart && props.onSwipeStart(eventData);
props.onSwiping && props.onSwiping(eventData);
var cancelablePageSwipe = false;

@@ -152,3 +166,2 @@

return _extends({}, state, {
// first is now always false
first: false,

@@ -170,7 +183,4 @@ eventData: eventData,

props.onSwiped && props.onSwiped(eventData);
var onSwipedDir = "onSwiped" + eventData.dir;
if (onSwipedDir in props) {
props[onSwipedDir](eventData);
}
var onSwipedDir = props["onSwiped" + eventData.dir];
onSwipedDir && onSwipedDir(eventData);
} else {

@@ -189,3 +199,2 @@ props.onTap && props.onTap({

var cleanUpMouse = function cleanUpMouse() {
// safe to just call removeEventListener
document.removeEventListener(mouseMove, onMove);

@@ -199,12 +208,3 @@ document.removeEventListener(mouseUp, onUp);

};
/**
* Switch of "passive" property for now.
* When `preventDefaultTouchmoveEvent` is:
* - true => { passive: false }
* - false => { passive: true }
*
* Could take entire `addEventListener` options object as a param later?
*/
var attachTouch = function attachTouch(el, passive) {

@@ -214,3 +214,2 @@ var cleanup = function cleanup() {};

if (el && el.addEventListener) {
// attach touch event listeners and handlers
var tls = [[touchStart, onStart], [touchMove, onMove], [touchEnd, onEnd]];

@@ -223,3 +222,3 @@ tls.forEach(function (_ref3) {

});
}); // return properly scoped cleanup method for removing listeners, options not required
});

@@ -239,9 +238,6 @@ cleanup = function cleanup() {

var onRef = function onRef(el) {
// "inline" ref functions are called twice on render, once with null then again with DOM element
// ignore null here
if (el === null) return;
set(function (state, props) {
// if the same DOM el as previous just return state
if (state.el === el) return state;
var addState = {}; // if new DOM el clean up old DOM and reset cleanUpTouch
var addState = {};

@@ -251,10 +247,8 @@ if (state.el && state.el !== el && state.cleanUpTouch) {

addState.cleanUpTouch = undefined;
} // only attach if we want to track touch
}
if (props.trackTouch && el) {
addState.cleanUpTouch = attachTouch(el, !props.preventDefaultTouchmoveEvent);
} // store event attached DOM el for comparison, clean up, and re-attachment
}
return _extends({}, state, {

@@ -264,8 +258,7 @@ el: el

});
}; // set ref callback to attach touch event listeners
};
var output = {
ref: onRef
}; // if track mouse attach mouse down listener
};

@@ -280,3 +273,3 @@ if (handlerProps.trackMouse) {

function updateTransientState(state, props, attachTouch) {
var addState = {}; // clean up touch handlers if no longer tracking touches
var addState = {};

@@ -287,3 +280,2 @@ if (!props.trackTouch && state.cleanUpTouch) {

} else if (props.trackTouch && !state.cleanUpTouch) {
// attach/re-attach touch handlers
if (state.el) {

@@ -299,7 +291,7 @@ addState.cleanUpTouch = attachTouch(state.el, !props.preventDefaultTouchmoveEvent);

var trackMouse = options.trackMouse;
var transientState = React.useRef(_extends({}, initialState));
var transientProps = React.useRef(_extends({}, defaultProps));
var transientState = React__namespace.useRef(_extends({}, initialState));
var transientProps = React__namespace.useRef(_extends({}, defaultProps));
transientProps.current = _extends({}, defaultProps, options);
var _React$useMemo = React.useMemo(function () {
var _React$useMemo = React__namespace.useMemo(function () {
return getHandlers(function (stateSetter) {

@@ -306,0 +298,0 @@ return transientState.current = stateSetter(transientState.current, transientProps.current);

5

dist/types.d.ts

@@ -35,4 +35,7 @@ import * as React from "react";

};
export declare type ConfigurationOptionDelta = number | {
[key in Lowercase<SwipeDirections>]?: number;
};
export interface ConfigurationOptions {
delta: number;
delta: ConfigurationOptionDelta;
preventDefaultTouchmoveEvent: boolean;

@@ -39,0 +42,0 @@ rotationAngle: number;

6

package.json
{
"name": "react-swipeable",
"version": "6.1.2",
"version": "6.2.0",
"description": "React Swipe event handler hook",

@@ -37,3 +37,3 @@ "main": "./dist/react-swipeable.js",

{
"limit": "1.15 KB",
"limit": "1.4 KB",
"path": "dist/react-swipeable.js"

@@ -90,3 +90,3 @@ }

"jest": "^26.1.0",
"microbundle": "^0.12.3",
"microbundle": "^0.13.3",
"prettier": "^2.0.5",

@@ -93,0 +93,0 @@ "react": "^17.0.1",

14

README.md

@@ -50,3 +50,3 @@ # React Swipeable

{
delta: 10, // min distance(px) before a swipe starts
delta: 10, // min distance(px) before a swipe starts. *See Notes*
preventDefaultTouchmoveEvent: false, // call e.preventDefault *See Details*

@@ -59,2 +59,12 @@ trackTouch: true, // track touch input

#### Delta
`delta` can be either a `number` or an `object` specifying different deltas for each direction, [`left`, `right`, `up`, `down`], direction values are optional and will default to `10`;
```js
{
delta: { top: 20, bottom: 20 } // top and bottom when ">= 20", left and right default to ">= 10"
}
```
## Swipe Event Data

@@ -125,3 +135,3 @@

If would like something similar to the old `<Swipeable>` component you can recreate it from the hook. There are examples in the [migration doc](./migration.md#swipeable-component-examples).
If you would like something similar to the old `<Swipeable>` component you can recreate it from the hook. There are examples in the [migration doc](./migration.md#swipeable-component-examples).

@@ -128,0 +138,0 @@ ## FAQs

19

src/index.ts

@@ -12,2 +12,3 @@ /* global document */

Setter,
SwipeableCallbacks,
SwipeableHandlers,

@@ -135,7 +136,12 @@ SwipeableProps,

const dir = getDirection(absX, absY, deltaX, deltaY);
// if swipe is under delta and we have not started to track a swipe: skip update
if (absX < props.delta && absY < props.delta && !state.swiping)
return state;
const delta =
typeof props.delta === "number"
? props.delta
: props.delta[dir.toLowerCase() as Lowercase<SwipeDirections>] ||
defaultProps.delta;
if (absX < delta && absY < delta && !state.swiping) return state;
const dir = getDirection(absX, absY, deltaX, deltaY);
const eventData = {

@@ -192,6 +198,5 @@ absX,

const onSwipedDir = `onSwiped${eventData.dir}`;
if (onSwipedDir in props) {
((props as any)[onSwipedDir] as SwipeCallback)(eventData);
}
const onSwipedDir =
props[`onSwiped${eventData.dir}` as keyof SwipeableCallbacks];
onSwipedDir && onSwipedDir(eventData);
} else {

@@ -198,0 +203,0 @@ props.onTap && props.onTap({ event });

5

src/types.ts

@@ -43,4 +43,7 @@ import * as React from "react";

// Configuration Options
export type ConfigurationOptionDelta =
| number
| { [key in Lowercase<SwipeDirections>]?: number };
export interface ConfigurationOptions {
delta: number;
delta: ConfigurationOptionDelta;
preventDefaultTouchmoveEvent: boolean;

@@ -47,0 +50,0 @@ rotationAngle: number;

dist/react-swipeable.js.map

Sorry, the diff of this file is not supported yet

dist/react-swipeable.modern.js.map

Sorry, the diff of this file is not supported yet

dist/react-swipeable.module.js.map

Sorry, the diff of this file is not supported yet

dist/react-swipeable.umd.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc