react-native-drax 0.11.0-alpha.2 → 1.1.0

package/build/DraxList.js

@@ -1,512 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DraxList = void 0;
-const lodash_throttle_1 = __importDefault(require("lodash.throttle"));
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-const DraxSubprovider_1 = require("./DraxSubprovider");
-const DraxView_1 = require("./DraxView");
-const useDraxScrollHandler_1 = require("./hooks/useDraxScrollHandler");
-const params_1 = require("./params");
-const types_1 = require("./types");
-const DraxListUnforwarded = (props, forwardedRef) => {
-    const { data, style, onItemDragStart, onItemDragPositionChange, onItemDragEnd, onItemReorder, reorderable: reorderableProp, onScroll: onScrollProp, lockItemDragsToMainAxis = false, longPressDelay = params_1.defaultListItemLongPressDelay, parentDraxViewProps, monitoringExternalDragStyle, ...flatListProps } = props;
-    // Copy the value of the horizontal property for internal use.
-    const horizontal = flatListProps.horizontal ?? false;
-    // Get the item count for internal use.
-    const itemCount = data?.length ?? 0;
-    // Set a sensible default for reorderable prop.
-    const reorderable = reorderableProp ?? onItemReorder !== undefined;
-    // Original index of the currently dragged list item, if any.
-    const draggedItem = (0, react_native_reanimated_1.useSharedValue)(undefined);
-    // Auto-scrolling state.
-    const scrollStateRef = (0, react_1.useRef)(types_1.AutoScrollDirection.None);
-    // List item measurements, for determining shift.
-    const itemMeasurementsRef = (0, react_1.useRef)([]);
-    const prevItemMeasurementsRef = (0, react_1.useRef)([]);
-    // Drax view registrations, for remeasuring after reorder.
-    const registrationsRef = (0, react_1.useRef)([]);
-    // Shift offsets.
-    const shiftsRef = (0, react_native_reanimated_1.useSharedValue)([]);
-    const previousShiftsRef = (0, react_native_reanimated_1.useSharedValue)([]);
-    // Maintain cache of reordered list indexes until data updates.
-    const [originalIndexes, setOriginalIndexes] = (0, react_1.useState)([]);
-    // Maintain the index the item is currently dragged to.
-    const draggedToIndex = (0, react_1.useRef)(undefined);
-    // Adjust measurements, registrations, and shift value arrays as item count changes.
-    (0, react_1.useEffect)(() => {
-        const itemMeasurements = itemMeasurementsRef.current;
-        const registrations = registrationsRef.current;
-        const shifts = shiftsRef.value;
-        if (itemMeasurements.length > itemCount) {
-            itemMeasurements.splice(itemCount - itemMeasurements.length);
-        }
-        else {
-            while (itemMeasurements.length < itemCount) {
-                itemMeasurements.push(undefined);
-            }
-        }
-        if (registrations.length > itemCount) {
-            registrations.splice(itemCount - registrations.length);
-        }
-        else {
-            while (registrations.length < itemCount) {
-                registrations.push(undefined);
-            }
-        }
-        if (shifts.length > itemCount) {
-            shifts.splice(itemCount - shifts.length);
-        }
-        else {
-            while (shifts.length < itemCount) {
-                shifts.push({ x: 0, y: 0 });
-            }
-        }
-        shiftsRef.value = shifts;
-    }, [itemCount]);
-    // Clear reorders when data changes.
-    (0, react_1.useLayoutEffect)(() => {
-        // console.log('clear reorders');
-        setOriginalIndexes(data ? [...Array(data.length).keys()] : []);
-    }, [data]);
-    // Handle auto-scrolling on interval.
-    const doScroll = (0, react_1.useCallback)(() => {
-        const containerMeasurements = containerMeasurementsRef.current;
-        const contentSize = contentSizeRef.current;
-        if (!flatListRef.current || !containerMeasurements || !contentSize) {
-            return;
-        }
-        let containerLength;
-        let contentLength;
-        let prevOffset;
-        if (horizontal) {
-            containerLength = containerMeasurements.width;
-            contentLength = contentSize.x;
-            prevOffset = scrollPosition.value.x;
-        }
-        else {
-            containerLength = containerMeasurements.height;
-            contentLength = contentSize.y;
-            prevOffset = scrollPosition.value.y;
-        }
-        const jumpLength = containerLength * 0.2;
-        let offset;
-        if (scrollStateRef.current === types_1.AutoScrollDirection.Forward) {
-            const maxOffset = contentLength - containerLength;
-            if (prevOffset < maxOffset) {
-                offset = Math.min(prevOffset + jumpLength, maxOffset);
-            }
-        }
-        else if (scrollStateRef.current === types_1.AutoScrollDirection.Back) {
-            if (prevOffset > 0) {
-                offset = Math.max(prevOffset - jumpLength, 0);
-            }
-        }
-        if (offset !== undefined) {
-            flatListRef.current.scrollToOffset({ offset });
-            flatListRef.current.flashScrollIndicators();
-        }
-    }, [horizontal]);
-    const { id, containerMeasurementsRef, contentSizeRef, onContentSizeChange, onMeasureContainer, onScroll, scrollRef: flatListRef, scrollPosition, setScrollRefs, startScroll, stopScroll, } = (0, useDraxScrollHandler_1.useDraxScrollHandler)({
-        idProp: parentDraxViewProps?.id,
-        onContentSizeChangeProp: props.onContentSizeChange,
-        onScrollProp,
-        forwardedRef,
-        doScroll,
-    });
-    // Apply the reorder cache to the data.
-    const reorderedData = (0, react_1.useMemo)(() => {
-        // console.log('refresh sorted data');
-        if (!id || !data) {
-            return null;
-        }
-        if (data.length !== originalIndexes.length) {
-            return data;
-        }
-        return originalIndexes.map(index => data[index]).filter(Boolean);
-    }, [id, data, originalIndexes]);
-    // Set the currently dragged list item.
-    const setDraggedItem = (0, react_1.useCallback)((originalIndex) => {
-        draggedItem.value = originalIndex;
-    }, []);
-    // Clear the currently dragged list item.
-    const resetDraggedItem = (0, react_1.useCallback)(() => {
-        draggedItem.value = undefined;
-    }, []);
-    // Drax view renderItem wrapper.
-    const renderItem = (0, react_1.useCallback)((info) => {
-        const { index, item } = info;
-        const originalIndex = originalIndexes[index];
-        const itemProps = {
-            index,
-            item,
-            originalIndex,
-            horizontal,
-            longPressDelay,
-            lockItemDragsToMainAxis,
-            draggedItem,
-            shiftsRef,
-            itemMeasurementsRef,
-            prevItemMeasurementsRef,
-            resetDraggedItem,
-            keyExtractor: props?.keyExtractor,
-            previousShiftsRef,
-            registrationsRef,
-            info,
-            data,
-        };
-        return props?.renderItem?.(info, itemProps);
-    }, [
-        originalIndexes,
-        resetDraggedItem,
-        longPressDelay,
-        lockItemDragsToMainAxis,
-        horizontal,
-        draggedItem,
-        shiftsRef,
-        itemMeasurementsRef,
-        prevItemMeasurementsRef,
-        previousShiftsRef,
-        registrationsRef,
-        props?.keyExtractor,
-        data,
-    ]);
-    // Reset all shift values.
-    const resetShifts = (0, react_1.useCallback)(() => {
-        previousShiftsRef.value = shiftsRef.value;
-        prevItemMeasurementsRef.current = [...itemMeasurementsRef.current];
-        shiftsRef.value = shiftsRef.value.map(() => ({ x: 0, y: 0 }));
-    }, []);
-    // Update shift values in response to a drag.
-    const updateShifts = (0, react_1.useCallback)(({ index: fromIndex, originalIndex: fromOriginalIndex }, { index: toIndex }, dragged) => {
-        const isForward = fromIndex < toIndex;
-        shiftsRef.value = originalIndexes.map(index => {
-            // Don't shift the dragged item
-            if (index === fromIndex)
-                return { x: 0, y: 0 };
-            // Reset shift if item is no longer in the affected range
-            const shouldShift = isForward
-                ? index > fromIndex && index <= toIndex
-                : index >= toIndex && index < fromIndex;
-            if (!shouldShift)
-                return { x: 0, y: 0 };
-            // Get measurements for current item and the item we're shifting to
-            const currentMeasurements = itemMeasurementsRef.current[index];
-            const draggedMeasurements = itemMeasurementsRef.current[fromOriginalIndex] ||
-                /**  If no measurements, it must be an external dragged item */
-                dragged.data.hoverMeasurements;
-            const targetIndex = isForward ? index - 1 : index + 1;
-            const targetMeasurements = itemMeasurementsRef.current[targetIndex] ||
-                /** If no measurements, it must be last item. Fallback to list contentSize */
-                contentSizeRef.current;
-            if (!currentMeasurements || !draggedMeasurements || !targetMeasurements) {
-                return { x: 0, y: 0 };
-            }
-            // Calculate gaps between items in both directions
-            const xGap = isForward
-                ? currentMeasurements.x - (targetMeasurements.x + targetMeasurements.width)
-                : targetMeasurements.x - (currentMeasurements.x + currentMeasurements.width);
-            const yGap = isForward
-                ? currentMeasurements.y - (targetMeasurements.y + targetMeasurements.height)
-                : targetMeasurements.y - (currentMeasurements.y + currentMeasurements.height);
-            // Calculated new shifts
-            const x = isForward ? -(draggedMeasurements.width + xGap) : draggedMeasurements.width + xGap;
-            const y = isForward ? -(draggedMeasurements.height + yGap) : draggedMeasurements.height + yGap;
-            if ((props?.numColumns || 1) > 1) {
-                return { x, y };
-            }
-            if (horizontal) {
-                return { x, y: 0 };
-            }
-            else {
-                return { x: 0, y };
-            }
-        });
-    }, [originalIndexes]);
-    // Calculate absolute position of list item for snapback.
-    const calculateSnapbackTarget = (0, react_1.useCallback)(({ index: fromIndex, originalIndex: fromOriginalIndex }, { index: toIndex, originalIndex: toOriginalIndex }) => {
-        const containerMeasurements = containerMeasurementsRef.current;
-        const itemMeasurements = itemMeasurementsRef.current;
-        if (containerMeasurements) {
-            let targetPos;
-            if (fromIndex < toIndex) {
-                // Target pos(toIndex + 1) - pos(fromIndex)
-                const nextIndex = toIndex + 1;
-                let nextPos;
-                if (nextIndex < itemCount) {
-                    // toIndex + 1 is in the list. We can measure the position of the next item.
-                    const nextMeasurements = itemMeasurements[originalIndexes[nextIndex]];
-                    if (nextMeasurements) {
-                        nextPos = {
-                            x: nextMeasurements.x,
-                            y: nextMeasurements.y,
-                        };
-                    }
-                }
-                else {
-                    // toIndex is the last item of the list. We can use the list content size.
-                    const contentSize = contentSizeRef.current;
-                    if (contentSize) {
-                        nextPos = horizontal ? { x: contentSize.x, y: 0 } : { x: 0, y: contentSize.y };
-                    }
-                }
-                const fromMeasurements = itemMeasurements[fromOriginalIndex];
-                if (nextPos && fromMeasurements) {
-                    const flattenedStyles = react_native_1.StyleSheet.flatten(flatListProps.contentContainerStyle) || {};
-                    //@ts-ignore
-                    const rowGap = flattenedStyles.rowGap ?? flattenedStyles.gap ?? 0;
-                    //@ts-ignore
-                    const columnGap = flattenedStyles.columnGap ?? flattenedStyles.gap ?? 0;
-                    targetPos = horizontal
-                        ? {
-                            x: nextPos.x - fromMeasurements.width - rowGap,
-                            y: nextPos.y,
-                        }
-                        : {
-                            x: nextPos.x,
-                            y: nextPos.y - fromMeasurements.height - columnGap,
-                        };
-                }
-            }
-            else {
-                // Target pos(toIndex)
-                const toMeasurements = itemMeasurements[toOriginalIndex];
-                if (toMeasurements) {
-                    targetPos = {
-                        x: toMeasurements.x,
-                        y: toMeasurements.y,
-                    };
-                }
-            }
-            if (targetPos) {
-                return {
-                    x: containerMeasurements.x - scrollPosition.value.x + targetPos.x,
-                    y: containerMeasurements.y - scrollPosition.value.y + targetPos.y,
-                };
-            }
-        }
-        return types_1.DraxSnapbackTargetPreset.None;
-    }, [horizontal, itemCount, originalIndexes]);
-    // Stop auto-scrolling, and potentially update shifts and reorder data.
-    const handleInternalDragEnd = (0, react_1.useCallback)((eventData, totalDragEnd) => {
-        // Always stop auto-scroll on drag end.
-        scrollStateRef.current = types_1.AutoScrollDirection.None;
-        stopScroll();
-        const { dragged, receiver } = eventData;
-        const isExternalDrag = dragged.parentId !== id || typeof dragged.payload.originalIndex !== 'number';
-        // First, check if we need to shift items.
-        if (reorderable) {
-            const fromPayload = {
-                /**
-                 * Indexing should start from zero and stop at `itemCount - 1`, but
-                 * we're also handling for external drag by adding a fake item index,
-                 * resulting to `itemCount`.
-                 */
-                index: !isExternalDrag ? dragged.payload.index : itemCount,
-                originalIndex: !isExternalDrag ? dragged.payload.originalIndex : itemCount,
-            };
-            const toPayload = receiver?.parentId === id ? receiver.payload : undefined;
-            const { index: fromIndex, originalIndex: fromOriginalIndex } = fromPayload;
-            const { index: toIndex, originalIndex: toOriginalIndex } = toPayload ?? {};
-            const toItem = toOriginalIndex !== undefined ? data?.[toOriginalIndex] : undefined;
-            const fromItem = data?.[fromOriginalIndex] || dragged.payload;
-            throttledSetIsExternalDrag(false);
-            // Reset all shifts and call callback, regardless of whether toPayload exists.
-            resetShifts();
-            if (totalDragEnd) {
-                onItemDragEnd?.({
-                    ...eventData,
-                    toIndex,
-                    toItem,
-                    cancelled: (0, types_1.isWithCancelledFlag)(eventData) ? eventData.cancelled : false,
-                    index: fromIndex,
-                    item: fromItem,
-                    isExternalDrag,
-                });
-            }
-            // Reset currently dragged over position index to undefined.
-            if (draggedToIndex.current !== undefined) {
-                if (!totalDragEnd) {
-                    onItemDragPositionChange?.({
-                        ...eventData,
-                        index: fromIndex,
-                        item: fromItem,
-                        toIndex: undefined,
-                        previousIndex: draggedToIndex.current,
-                        isExternalDrag,
-                    });
-                }
-                draggedToIndex.current = undefined;
-            }
-            if (toPayload !== undefined) {
-                // If dragged item and received item were ours, reorder data.
-                // console.log(`moving ${fromPayload.index} -> ${toPayload.index}`);
-                const snapbackTarget = calculateSnapbackTarget(fromPayload, toPayload);
-                if (data) {
-                    const newOriginalIndexes = originalIndexes.slice();
-                    newOriginalIndexes.splice(toIndex, 0, newOriginalIndexes.splice(fromIndex, 1)[0]);
-                    setOriginalIndexes(newOriginalIndexes);
-                    onItemReorder?.({
-                        fromIndex,
-                        fromItem,
-                        toIndex: toIndex,
-                        toItem,
-                        isExternalDrag,
-                    });
-                }
-                return snapbackTarget;
-            }
-        }
-        return undefined;
-    }, [
-        id,
-        data,
-        stopScroll,
-        reorderable,
-        resetShifts,
-        calculateSnapbackTarget,
-        originalIndexes,
-        onItemDragEnd,
-        onItemDragPositionChange,
-        onItemReorder,
-    ]);
-    // Monitor drag starts to handle callbacks.
-    const onMonitorDragStart = (0, react_1.useCallback)((eventData) => {
-        parentDraxViewProps?.onMonitorDragStart?.(eventData);
-        const { dragged } = eventData;
-        // First, check if we need to do anything.
-        if (reorderable && dragged.parentId === id) {
-            // One of our list items is starting to be dragged.
-            const { index, originalIndex } = dragged.payload;
-            setDraggedItem(originalIndex);
-            onItemDragStart?.({
-                ...eventData,
-                index,
-                item: data?.[originalIndex],
-                isExternalDrag: false,
-            });
-        }
-    }, [id, reorderable, data, setDraggedItem, onItemDragStart]);
-    // Monitor drags to react with item shifts and auto-scrolling.
-    const onMonitorDragOver = (0, react_1.useCallback)((eventData) => {
-        parentDraxViewProps?.onMonitorDragOver?.(eventData);
-        const { dragged, receiver, monitorOffsetRatio } = eventData;
-        const isExternalDrag = dragged.parentId !== id || typeof dragged.payload.originalIndex !== 'number';
-        // First, check if we need to shift items.
-        if (reorderable) {
-            const fromPayload = {
-                /**
-                 * Indexing should start from zero and stop at `itemCount - 1`, but
-                 * we're also handling for external drag by adding a fake item index,
-                 * resulting to `itemCount`.
-                 */
-                index: !isExternalDrag ? dragged.payload.index : itemCount,
-                originalIndex: !isExternalDrag ? dragged.payload.originalIndex : itemCount,
-            };
-            if (typeof draggedItem.value !== 'number') {
-                /** DraxList is receiving external drag  */
-                setDraggedItem(itemCount);
-            }
-            monitoringExternalDragStyle && draggedItem.value === itemCount && throttledSetIsExternalDrag(true);
-            const fromItem = data?.[fromPayload.originalIndex] || dragged.payload;
-            // Find its current position index in the list, if any.
-            const toPayload = receiver?.parentId === id ? receiver.payload : undefined;
-            // Check and update currently dragged over position index.
-            const toIndex = toPayload?.index;
-            if (toIndex !== draggedToIndex.current) {
-                onItemDragPositionChange?.({
-                    ...eventData,
-                    toIndex,
-                    index: fromPayload.index,
-                    item: fromItem,
-                    previousIndex: draggedToIndex.current,
-                    isExternalDrag,
-                });
-                draggedToIndex.current = toIndex;
-            }
-            // Update shift transforms for items in the list.
-            updateShifts(fromPayload, toPayload ?? fromPayload, dragged);
-        }
-        // Next, see if we need to auto-scroll.
-        const ratio = horizontal ? monitorOffsetRatio.x : monitorOffsetRatio.y;
-        if (ratio > 0.1 && ratio < 0.9) {
-            scrollStateRef.current = types_1.AutoScrollDirection.None;
-            stopScroll();
-        }
-        else {
-            if (ratio >= 0.9) {
-                scrollStateRef.current = types_1.AutoScrollDirection.Forward;
-            }
-            else if (ratio <= 0.1) {
-                scrollStateRef.current = types_1.AutoScrollDirection.Back;
-            }
-            startScroll();
-        }
-    }, [id, reorderable, data, updateShifts, horizontal, stopScroll, startScroll, onItemDragPositionChange]);
-    // Monitor drag exits to stop scrolling, update shifts, and update draggedToIndex.
-    const onMonitorDragExit = (0, react_1.useCallback)((eventData) => {
-        handleInternalDragEnd(eventData, false);
-        parentDraxViewProps?.onMonitorDragExit?.(eventData);
-    }, [handleInternalDragEnd]);
-    /*
-     * Monitor drag ends to stop scrolling, update shifts, and possibly reorder.
-     * This addresses the Android case where if we drag a list item and auto-scroll
-     * too far, the drag gets cancelled.
-     */
-    const onMonitorDragEnd = (0, react_1.useCallback)((eventData) => {
-        const defaultSnapbackTarget = handleInternalDragEnd(eventData, true);
-        const providedSnapTarget = parentDraxViewProps?.onMonitorDragEnd?.(eventData);
-        resetDraggedItem();
-        return providedSnapTarget ?? defaultSnapbackTarget;
-    }, [handleInternalDragEnd]);
-    // Monitor drag drops to stop scrolling, update shifts, and possibly reorder.
-    const onMonitorDragDrop = (0, react_1.useCallback)((eventData) => {
-        const defaultSnapbackTarget = handleInternalDragEnd(eventData, true);
-        const providedSnapTarget = parentDraxViewProps?.onMonitorDragDrop?.(eventData);
-        draggedItem.value === itemCount && resetDraggedItem();
-        return providedSnapTarget ?? defaultSnapbackTarget;
-    }, [handleInternalDragEnd]);
-    const [isExternalDrag, setIsExternalDrag] = (0, react_1.useState)(false);
-    const throttledSetIsExternalDrag = (0, react_1.useMemo)(() => (0, lodash_throttle_1.default)((position) => {
-        setIsExternalDrag(position);
-    }, 300), []);
-    return (react_1.default.createElement(DraxView_1.DraxView, { ...parentDraxViewProps, style: [parentDraxViewProps?.style, isExternalDrag && monitoringExternalDragStyle], id: id, scrollPosition: scrollPosition, onMeasure: event => {
-            parentDraxViewProps?.onMeasure?.(event);
-            return onMeasureContainer(event);
-        }, onMonitorDragStart: onMonitorDragStart, onMonitorDragOver: onMonitorDragOver, onMonitorDragExit: onMonitorDragExit, onMonitorDragEnd: onMonitorDragEnd, onMonitorDragDrop: onMonitorDragDrop },
-        react_1.default.createElement(DraxSubprovider_1.DraxSubprovider, { parent: {
-                id,
-                viewRef: {
-                    current: flatListRef?.current?.getNativeScrollRef?.(),
-                },
-            } },
-            react_1.default.createElement(react_native_reanimated_1.default.FlatList, { ...flatListProps, style: style, ref: setScrollRefs, renderItem: renderItem, onScroll: onScroll, onContentSizeChange: onContentSizeChange, data: reorderedData }))));
-};
-exports.DraxList = (0, react_1.forwardRef)(DraxListUnforwarded);

package/build/DraxListItem.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { DraxListItemProps, DraxViewProps } from './types';
-declare const RenderItemComponent: <T extends unknown>({ itemProps: { index, item, originalIndex, horizontal, lockItemDragsToMainAxis, draggedItem, shiftsRef, itemMeasurementsRef, prevItemMeasurementsRef, resetDraggedItem, keyExtractor, previousShiftsRef, registrationsRef, data, }, ...draxViewProps }: {
-    itemProps: DraxListItemProps<T>;
-} & DraxViewProps) => React.JSX.Element;
-export declare const DraxListItem: typeof RenderItemComponent;
-export {};

package/build/DraxListItem.js

@@ -1,121 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DraxListItem = void 0;
-const react_1 = __importStar(require("react"));
-const react_native_reanimated_1 = require("react-native-reanimated");
-const DraxView_1 = require("./DraxView");
-// const defaultStyles = StyleSheet.create({
-//     draggingStyle: { opacity: 0 },
-//     dragReleasedStyle: { opacity: 0.5 },
-// });
-const RenderItemComponent = ({ itemProps: { index, item, originalIndex, horizontal, lockItemDragsToMainAxis, draggedItem, shiftsRef, itemMeasurementsRef, prevItemMeasurementsRef, resetDraggedItem, keyExtractor, previousShiftsRef, registrationsRef, data, }, ...draxViewProps }) => {
-    const animatedValueX = (0, react_native_reanimated_1.useSharedValue)(0);
-    const animatedValueY = (0, react_native_reanimated_1.useSharedValue)(0);
-    const itemKey = (item && keyExtractor?.(item, index)) ?? item?.key ?? item?.id;
-    const shiftTransformStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
-        return {
-            transform: [{ translateX: animatedValueX.value }, { translateY: animatedValueY.value }],
-        };
-    });
-    (0, react_native_reanimated_1.useAnimatedReaction)(() => shiftsRef.value[originalIndex], shift => {
-        const isDragged = typeof draggedItem.value === 'number';
-        /** Apply reordering animations by shifting items between them */
-        if (isDragged) {
-            animatedValueX.value = (0, react_native_reanimated_1.withTiming)(shift.x, {
-                duration: 200,
-            });
-            animatedValueY.value = (0, react_native_reanimated_1.withTiming)(shift.y, {
-                duration: 200,
-            });
-        }
-    });
-    (0, react_1.useLayoutEffect)(() => {
-        /** Reset the shift when the item moves to a new index. */
-        animatedValueX.value = 0;
-        animatedValueY.value = 0;
-    }, [index]);
-    (0, react_1.useLayoutEffect)(() => {
-        const measurements = itemMeasurementsRef.current[originalIndex];
-        const previousMeasurementsIndex = prevItemMeasurementsRef.current.findIndex(item => item?.key === itemKey);
-        const previousMeasurements = prevItemMeasurementsRef.current[previousMeasurementsIndex];
-        const isLayoutShifted = previousShiftsRef.value.some(item => item.x || item.y);
-        /**
-         * Animate as items are added/removed from the list.
-         * For newly added items, if layout is shifted, it's most probably an external drag that was dropped in the list
-         * and it skips list layout animation.
-         *
-         * @todo implement animations even for this described scenario
-         * by applying the shift offset.
-         */
-        if (previousMeasurements && measurements && !isLayoutShifted) {
-            const offsetX = previousMeasurements.x - measurements.x;
-            const offsetY = previousMeasurements.y - measurements.y;
-            /** Start from previous values before the items data (order) changed */
-            animatedValueX.value = offsetX;
-            animatedValueY.value = offsetY;
-            animatedValueX.value = (0, react_native_reanimated_1.withTiming)(0, {
-                duration: 200,
-            });
-            animatedValueY.value = (0, react_native_reanimated_1.withTiming)(0, {
-                duration: 200,
-            });
-        }
-    }, [itemKey, originalIndex, horizontal, itemMeasurementsRef, prevItemMeasurementsRef, previousShiftsRef]);
-    return (react_1.default.createElement(DraxView_1.DraxView, { lockDragXPosition: lockItemDragsToMainAxis && !horizontal, lockDragYPosition: lockItemDragsToMainAxis && horizontal, ...draxViewProps, style: [shiftTransformStyle, draxViewProps.style], payload: { ...draxViewProps.payload, index, originalIndex, item: data?.[index] }, onDragEnd: event => {
-            draxViewProps.onDragEnd?.(event);
-            resetDraggedItem();
-        }, onDragDrop: event => {
-            draxViewProps.onDragDrop?.(event);
-            resetDraggedItem();
-        }, onMeasure: measurements => {
-            draxViewProps.onMeasure?.(measurements);
-            if (originalIndex !== undefined && measurements) {
-                /**
-                 * @todo 🪲 BUG
-                 * @platform web
-                 * @summary Somehow the measurements for the same item are getting duplicated.
-                 */
-                // Clear any duplicate measurements
-                const duplicateIndex = itemMeasurementsRef.current.findIndex((item, idx) => idx !== originalIndex && item?.key === itemKey);
-                if (duplicateIndex !== -1) {
-                    itemMeasurementsRef.current[duplicateIndex] = undefined;
-                }
-                // Store the new measurement
-                itemMeasurementsRef.current[originalIndex] = {
-                    ...measurements,
-                    key: itemKey,
-                };
-            }
-        }, registration: registration => {
-            draxViewProps.registration?.(registration);
-            if (registration && originalIndex !== undefined) {
-                // console.log(`registering [${index}, ${originalIndex}], ${registration.id}`);
-                registrationsRef.current[originalIndex] = registration;
-                registration.measure();
-            }
-        } }));
-};
-exports.DraxListItem = (0, react_1.memo)(RenderItemComponent);

package/build/DraxProvider.d.ts

@@ -1,2 +0,0 @@
-import { DraxProviderProps } from './types';
-export declare const DraxProvider: ({ debug, style, children }: DraxProviderProps) => JSX.Element;