@anton.bobrov/react-vevet-hooks
Version:
A collection of custom React hooks designed to seamlessly integrate with the `Vevet` library
94 lines (93 loc) • 4.18 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDraggerDirection = void 0;
var react_hooks_1 = require("@anton.bobrov/react-hooks");
var react_1 = require("react");
var vevet_1 = require("vevet");
/**
* Custom React hook that utilizes `vevet`'s `DraggerDirection` for detecting swipe gestures.
*
* This hook sets up a dragger instance to listen for swipe events in four directions
* (left, right, up, down).
*
* @example
* const MyComponent = () => {
* const ref = useRef<HTMLDivElement>(null);
*
* useDraggerDirection({
* ref,
* minLength: 50,
* onAny: (direction) => console.log(`${direction}`),
* onLeft: () => console.log('Swiped left!'),
* onRight: () => console.log('Swiped right!'),
* onUp: () => console.log('Swiped up!'),
* onDown: () => console.log('Swiped down!'),
* });
*
* return <div ref={ref}>Swipe me!</div>;
* };
*/
function useDraggerDirection(_a) {
var ref = _a.ref, minLength = _a.minLength, onAnyProp = _a.onAny, onLeftProp = _a.onLeft, onRightProp = _a.onRight, onUpProp = _a.onUp, onDownProp = _a.onDown, changeableProps = __rest(_a, ["ref", "minLength", "onAny", "onLeft", "onRight", "onUp", "onDown"]);
var _b = (0, react_1.useState)(null), dragger = _b[0], setDragger = _b[1];
var onAny = (0, react_hooks_1.useEvent)(onAnyProp);
var onLeft = (0, react_hooks_1.useEvent)(onLeftProp);
var onRight = (0, react_hooks_1.useEvent)(onRightProp);
var onUp = (0, react_hooks_1.useEvent)(onUpProp);
var onDown = (0, react_hooks_1.useEvent)(onDownProp);
var initialChangeablePropsRef = (0, react_1.useRef)(changeableProps);
(0, react_1.useEffect)(function () {
if (!ref.current) {
return undefined;
}
var instance = new vevet_1.DraggerDirection(__assign(__assign({}, initialChangeablePropsRef.current), { container: ref.current }));
setDragger(instance);
instance.addCallback('left', function () {
onLeft === null || onLeft === void 0 ? void 0 : onLeft();
onAny === null || onAny === void 0 ? void 0 : onAny('left');
});
instance.addCallback('right', function () {
onRight === null || onRight === void 0 ? void 0 : onRight();
onAny === null || onAny === void 0 ? void 0 : onAny('right');
});
instance.addCallback('up', function () {
onUp === null || onUp === void 0 ? void 0 : onUp();
onAny === null || onAny === void 0 ? void 0 : onAny('up');
});
instance.addCallback('down', function () {
onDown === null || onDown === void 0 ? void 0 : onDown();
onAny === null || onAny === void 0 ? void 0 : onAny('down');
});
return function () { return instance.destroy(); };
}, [onAny, onDown, onLeft, onRight, onUp, ref]);
(0, react_1.useEffect)(function () {
if (!dragger) {
return;
}
dragger.changeProps(changeableProps);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [dragger, (0, react_hooks_1.useDeepCompareMemoize)(changeableProps)]);
}
exports.useDraggerDirection = useDraggerDirection;