rn-inkpad/dist/hooks/useSlideAction.js

<img src="https://res.cloudinary.com/fercloudinary/image/upload/v1715452841/packages/inkpad-banner_acl0xl.png" />

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSlideAction = void 0;
const react_1 = require("react");
const react_native_1 = require("react-native");
const useSlideAction = (padding, thumbWidth, isCompleted = false, onCompleted) => {
    const [thumbLeft, setThumbLeft] = (0, react_1.useState)(padding);
    const [completed, setCompleted] = (0, react_1.useState)(false);
    const [showText, setShowText] = (0, react_1.useState)(true);
    const containerWidth = (0, react_1.useRef)(0);
    (0, react_1.useEffect)(() => {
        setCompleted(isCompleted);
    }, [isCompleted]);
    (0, react_1.useEffect)(() => {
        if (isCompleted) {
            if (containerWidth.current > 0) {
                setThumbLeft(containerWidth.current - (thumbWidth + padding));
            }
        }
        else {
            setThumbLeft(padding);
        }
    }, [isCompleted, containerWidth.current]);
    const handlePanResponderMove = (_, gestureState) => {
        setShowText(false);
        const newValue = thumbLeft + gestureState.dx;
        const boundedValue = Math.max(0, Math.min(newValue, containerWidth.current - (thumbWidth + padding)));
        setThumbLeft(boundedValue);
    };
    const handlePanResponderRelease = () => {
        if (thumbLeft < containerWidth.current - (thumbWidth + padding)) {
            setThumbLeft(padding);
            setCompleted(false);
        }
        else {
            setCompleted(true);
            if (!!onCompleted) {
                onCompleted();
            }
        }
        setShowText(true);
    };
    const handleLayout = (event) => {
        const { width } = event.nativeEvent.layout;
        containerWidth.current = width;
    };
    const panResponder = react_native_1.PanResponder.create({
        onStartShouldSetPanResponder: () => true,
        onMoveShouldSetPanResponder: () => true,
        onPanResponderRelease: handlePanResponderRelease,
        onPanResponderMove: handlePanResponderMove,
    });
    return {
        completed,
        handleLayout,
        panResponder,
        showText,
        thumbLeft,
    };
};
exports.useSlideAction = useSlideAction;