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

package/build/DraxListItem.js

@@ -0,0 +1,121 @@
+"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,4 +1,2 @@
-/// <reference types="react" />
-/// <reference types="react" />
 import { DraxProviderProps } from './types';
-export declare const DraxProvider: ({ debug, style, children, }: DraxProviderProps) => JSX.Element;
+export declare const DraxProvider: ({ debug, style, children }: DraxProviderProps) => JSX.Element;