rn-inkpad/dist/hooks/useAnimation.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.useAnimation = void 0;
const react_1 = require("react");
const react_native_1 = require("react-native");
const useAnimation = (props) => {
    const { width = 0 } = props ?? {};
    const translateY = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
    const opacity = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
    const position = (0, react_1.useRef)(new react_native_1.Animated.Value(width === 0 ? 0 : -1)).current;
    const pan = (0, react_1.useRef)(new react_native_1.Animated.ValueXY()).current;
    const scaleValue = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
    const moveRight = (toValue = 0) => {
        react_native_1.Animated.timing(position, {
            toValue,
            duration: 300,
            useNativeDriver: true,
        }).start();
    };
    const moveLeft = (toValue = -1) => {
        react_native_1.Animated.timing(position, {
            toValue,
            duration: 300,
            useNativeDriver: true,
        }).start();
    };
    const moveUp = () => {
        react_native_1.Animated.timing(translateY, {
            toValue: 0,
            duration: 300,
            useNativeDriver: true,
        }).start();
    };
    const moveDown = (toValue = -100) => {
        react_native_1.Animated.timing(translateY, {
            toValue,
            duration: 300,
            useNativeDriver: true,
        }).start();
    };
    const translateX = position.interpolate({
        inputRange: [0, 1],
        outputRange: [0, width],
    });
    const scale = (from = 1, toValue = 0.9) => {
        scaleValue.setValue(from);
        react_native_1.Animated.timing(scaleValue, {
            toValue,
            duration: 200,
            useNativeDriver: true,
        }).start();
    };
    const panResponder = react_native_1.PanResponder.create({
        onStartShouldSetPanResponder: () => true,
        onPanResponderMove: react_native_1.Animated.event([
            null,
            {
                dx: pan.x,
                dy: pan.y,
            },
        ], { useNativeDriver: false }),
        onPanResponderRelease: () => {
            react_native_1.Animated.spring(pan, {
                toValue: { x: 0, y: 0 },
                useNativeDriver: false,
            }).start();
        },
    });
    const fadeIn = (duration = 300) => {
        react_native_1.Animated.timing(opacity, {
            toValue: 1,
            duration,
            useNativeDriver: true,
        }).start();
    };
    const fadeOut = (duration = 300) => {
        react_native_1.Animated.timing(opacity, {
            toValue: 0,
            duration,
            useNativeDriver: true,
        }).start();
    };
    const translatePosition = (initPosition, duration = 300) => {
        position.setValue(initPosition);
        react_native_1.Animated.timing(position, {
            toValue: 0,
            duration,
            useNativeDriver: true,
        }).start();
    };
    return {
        fadeIn,
        fadeOut,
        moveDown,
        moveLeft,
        moveRight,
        moveUp,
        opacity,
        pan,
        panResponder,
        position,
        scale,
        scaleValue,
        translatePosition,
        translateX,
        translateY,
    };
};
exports.useAnimation = useAnimation;