@anton.bobrov/react-vevet-hooks/lib/esm/hooks/useDraggerDirection.js

A collection of custom React hooks designed to seamlessly integrate with the `Vevet` library

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;
};
import { useEvent, useDeepCompareMemoize } from '@anton.bobrov/react-hooks';
import { useEffect, useRef, useState } from 'react';
import { DraggerDirection } from '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>;
 * };
 */
export 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 = useState(null), dragger = _b[0], setDragger = _b[1];
    var onAny = useEvent(onAnyProp);
    var onLeft = useEvent(onLeftProp);
    var onRight = useEvent(onRightProp);
    var onUp = useEvent(onUpProp);
    var onDown = useEvent(onDownProp);
    var initialChangeablePropsRef = useRef(changeableProps);
    useEffect(function () {
        if (!ref.current) {
            return undefined;
        }
        var instance = new 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]);
    useEffect(function () {
        if (!dragger) {
            return;
        }
        dragger.changeProps(changeableProps);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [dragger, useDeepCompareMemoize(changeableProps)]);
}
//# sourceMappingURL=useDraggerDirection.js.map