rn-inkpad/dist/hooks/useSlider.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.useSlider = void 0;
const react_1 = require("react");
const react_native_1 = require("react-native");
const useSlider = (props, width) => {
    const { onChange, value, minValue = 0, maxValue = 100 } = props;
    const [thumbLeft, setThumbLeft] = (0, react_1.useState)(0);
    const containerWidth = (0, react_1.useRef)(0);
    (0, react_1.useEffect)(() => {
        if (!!onChange && value === 0) {
            onChange(minValue);
        }
    }, [minValue]);
    const handlePanResponderMove = (_, gestureState) => {
        const newValue = thumbLeft + gestureState.dx;
        const boundedValue = Math.max(0, Math.min(newValue, containerWidth.current - width));
        const currentValue = (boundedValue / (containerWidth.current - width)) *
            (maxValue - minValue);
        if (!!onChange) {
            onChange(Math.round(currentValue) + minValue);
        }
        setThumbLeft(boundedValue);
    };
    const handlePanResponderRelease = () => {
        setThumbLeft(((containerWidth.current - width) / maxValue) * (value ?? 0));
    };
    const handleLayout = (event) => {
        const { width } = event.nativeEvent.layout;
        containerWidth.current = width;
        setThumbLeft(((containerWidth.current - width) / maxValue) * (value ?? 0));
    };
    const panResponder = react_native_1.PanResponder.create({
        onStartShouldSetPanResponder: () => true,
        onMoveShouldSetPanResponder: () => true,
        onPanResponderRelease: handlePanResponderRelease,
        onPanResponderMove: handlePanResponderMove,
    });
    return {
        panResponder,
        handleLayout,
        thumbLeft,
    };
};
exports.useSlider = useSlider;