@kietpt2003/react-native-core-ui/dist/DraggableFlatList/PlaceholderItem.js

React Native Core UI components by KietPT

import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import { StyleSheet } from "react-native";
import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle, } from "react-native-reanimated";
import { typedMemo } from "../utils/DraggableFlatList/typedMemo";
import { useRefs } from "../context/DraggableFlatList/refContext";
import { useDraggableFlatListContext } from "../context/DraggableFlatList/draggableFlatListContext";
import { useAnimatedValues } from "../context/DraggableFlatList/animatedValueContext";
function PlaceholderItem({ renderPlaceholder }) {
    var _a;
    const [size, setSize] = React.useState(0);
    const { activeCellSize, placeholderOffset, spacerIndexAnim, horizontalAnim, scrollOffset, } = useAnimatedValues();
    const { keyToIndexRef, propsRef } = useRefs();
    const { activeKey, horizontal } = useDraggableFlatListContext();
    // Size does not seem to be respected when it is an animated style
    useAnimatedReaction(() => {
        return activeCellSize.value;
    }, (cur, prev) => {
        if (cur !== prev) {
            runOnJS(setSize)(cur);
        }
    });
    const activeIndex = activeKey
        ? keyToIndexRef.current.get(activeKey)
        : undefined;
    const activeItem = activeIndex === undefined ? null : (_a = propsRef.current) === null || _a === void 0 ? void 0 : _a.data[activeIndex];
    const animStyle = useAnimatedStyle(() => {
        const offset = placeholderOffset.value - scrollOffset.value;
        return {
            opacity: size >= 0 ? 1 : 0,
            overflow: "hidden",
            transform: [
                horizontalAnim.value ? { translateX: offset } : { translateY: offset },
            ],
        };
    }, [spacerIndexAnim, placeholderOffset, horizontalAnim, scrollOffset, size]);
    const extraStyle = React.useMemo(() => {
        return horizontal ? { width: size } : { height: size };
    }, [horizontal, size]);
    return (_jsx(Animated.View, { pointerEvents: activeKey ? "auto" : "none", style: [StyleSheet.absoluteFill, animStyle, extraStyle], children: !activeItem || activeIndex === undefined
            ? null
            : renderPlaceholder === null || renderPlaceholder === void 0 ? void 0 : renderPlaceholder({ item: activeItem, index: activeIndex }) }));
}
export default typedMemo(PlaceholderItem);