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

React Native Core UI components by KietPT

import { jsx as _jsx } from "react/jsx-runtime";
import { StyleSheet } from "react-native";
import Animated, { interpolate, useAnimatedStyle, } from "react-native-reanimated";
import { useDraggableFlatListContext } from "../context/DraggableFlatList/draggableFlatListContext";
import { useOnCellActiveAnimation } from "../hooks/DraggableFlatList/useOnCellActiveAnimation";
import { WEB } from "../utils";
export const ScaleDecorator = ({ activeScale = 1.1, children }) => {
    const { isActive, onActiveAnim } = useOnCellActiveAnimation({
        animationConfig: { mass: 0.1, restDisplacementThreshold: 0.0001 },
    });
    const { horizontal } = useDraggableFlatListContext();
    if (WEB) {
        const scale = isActive ? activeScale : 1;
        return (_jsx("div", { style: Object.assign({ transform: `scale(${scale})`, transition: "transform 0.2s ease" }, (horizontal && { display: "inline-block" })), children: children }));
    }
    const style = useAnimatedStyle(() => {
        const animScale = interpolate(onActiveAnim.value, [0, 1], [1, activeScale]);
        const scale = isActive ? animScale : 1;
        return {
            transform: [{ scaleX: scale }, { scaleY: scale }],
        };
    }, [isActive]);
    return (_jsx(Animated.View, { style: [style, horizontal && styles.horizontal], children: children }));
};
export const ShadowDecorator = ({ elevation = 10, color = "black", opacity = 0.25, radius = 5, children, }) => {
    const { isActive, onActiveAnim } = useOnCellActiveAnimation();
    const { horizontal } = useDraggableFlatListContext();
    if (WEB) {
        const shadowOpacity = isActive ? opacity : 0;
        const boxShadow = isActive
            ? `0px ${elevation}px ${radius}px rgba(0, 0, 0, ${shadowOpacity})`
            : "none";
        return (_jsx("div", { style: Object.assign({ boxShadow, transition: "box-shadow 0.2s ease" }, (horizontal && { display: "inline-block" })), children: children }));
    }
    const style = useAnimatedStyle(() => {
        const shadowOpacity = onActiveAnim.value * opacity;
        return {
            elevation: isActive ? elevation : 0,
            shadowRadius: isActive ? radius : 0,
            shadowColor: isActive ? color : "transparent",
            shadowOpacity: isActive ? shadowOpacity : 0,
        };
    }, [isActive, onActiveAnim]);
    return (_jsx(Animated.View, { style: [style, horizontal && styles.horizontal], children: children }));
};
export const OpacityDecorator = ({ activeOpacity = 0.25, children, }) => {
    const { isActive, onActiveAnim } = useOnCellActiveAnimation();
    const { horizontal } = useDraggableFlatListContext();
    if (WEB) {
        const opacity = isActive ? activeOpacity : 1;
        return (_jsx("div", { style: Object.assign({ opacity, transition: "opacity 0.2s ease" }, (horizontal && { display: "inline-block" })), children: children }));
    }
    const style = useAnimatedStyle(() => {
        const opacity = interpolate(onActiveAnim.value, [0, 1], [1, activeOpacity]);
        return {
            opacity: isActive ? opacity : 1,
        };
    }, [isActive]);
    return (_jsx(Animated.View, { style: [style, horizontal && styles.horizontal], children: children }));
};
const styles = StyleSheet.create({
    horizontal: {
        flexDirection: "row",
        flex: 1,
    },
});