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

package/build/hooks/useDraxScrollHandler.d.ts

@@ -0,0 +1,25 @@
+import { ForwardedRef } from 'react';
+import { FlatList, NativeScrollEvent, NativeSyntheticEvent, ScrollView } from 'react-native';
+import { DraxListProps, DraxViewMeasurements, Position } from '../types';
+type DraxScrollHandlerArgs<T> = {
+    idProp?: string;
+    onContentSizeChangeProp?: DraxListProps<T>['onContentSizeChange'];
+    onScrollProp: DraxListProps<any>['onScroll'];
+    forwardedRef?: ForwardedRef<any>;
+    doScroll: () => void;
+};
+type ScrollableComponents = FlatList<any> | ScrollView;
+export declare const useDraxScrollHandler: <T extends ScrollableComponents>({ idProp, onContentSizeChangeProp, onScrollProp, forwardedRef, doScroll, }: DraxScrollHandlerArgs<T>) => {
+    id: string;
+    containerMeasurementsRef: import("react").MutableRefObject<DraxViewMeasurements | undefined>;
+    contentSizeRef: import("react").MutableRefObject<Position | undefined>;
+    onContentSizeChange: (width: number, height: number) => void | undefined;
+    onMeasureContainer: (measurements: DraxViewMeasurements | undefined) => void;
+    onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    scrollRef: import("react-native-reanimated").AnimatedRef<T>;
+    scrollPosition: import("react-native-reanimated").SharedValue<Position>;
+    setScrollRefs: (ref: T | null) => void;
+    startScroll: () => void;
+    stopScroll: () => void;
+};
+export {};

package/build/hooks/useDraxScrollHandler.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDraxScrollHandler = void 0;
+const react_1 = require("react");
+const react_native_reanimated_1 = require("react-native-reanimated");
+const params_1 = require("../params");
+const useDraxId_1 = require("./useDraxId");
+const useDraxScrollHandler = ({ idProp, onContentSizeChangeProp, onScrollProp, forwardedRef, doScroll, }) => {
+    // Scrollable view, used for scrolling.
+    const scrollRef = (0, react_native_reanimated_1.useAnimatedRef)();
+    // The unique identifer for this view.
+    const id = (0, useDraxId_1.useDraxId)(idProp);
+    // Container view measurements, for scrolling by percentage.
+    const containerMeasurementsRef = (0, react_1.useRef)(undefined);
+    // Auto-scrolling interval.
+    const scrollIntervalRef = (0, react_1.useRef)(undefined);
+    // Content size, for scrolling by percentage.
+    const contentSizeRef = (0, react_1.useRef)(undefined);
+    const scrollPosition = (0, react_native_reanimated_1.useSharedValue)(params_1.INITIAL_REANIMATED_POSITION.value);
+    // Track the size of the container view.
+    const onMeasureContainer = (0, react_1.useCallback)((measurements) => {
+        containerMeasurementsRef.current = measurements;
+    }, []);
+    // Track content size.
+    const onContentSizeChange = (0, react_1.useCallback)((width, height) => {
+        contentSizeRef.current = { x: width, y: height };
+        return onContentSizeChangeProp?.(width, height);
+    }, [onContentSizeChangeProp]);
+    // Update tracked scroll position when list is scrolled.
+    const onScroll = (0, react_1.useCallback)((event) => {
+        onScrollProp?.(event);
+        (0, react_native_reanimated_1.runOnUI)((_event) => {
+            scrollPosition.value = {
+                x: _event.contentOffset.x,
+                y: _event.contentOffset.y,
+            };
+        })(event.nativeEvent);
+    }, [onScrollProp]);
+    // Set the ScrollView/FlatList refs.
+    const setScrollRefs = (0, react_1.useCallback)((ref) => {
+        if (ref) {
+            scrollRef(ref);
+            if (forwardedRef) {
+                if (typeof forwardedRef === 'function') {
+                    forwardedRef(ref);
+                }
+                else {
+                    forwardedRef.current = ref;
+                }
+            }
+        }
+    }, [forwardedRef, scrollRef]);
+    // Start the auto-scrolling interval.
+    const startScroll = (0, react_1.useCallback)(() => {
+        if (scrollIntervalRef.current) {
+            return;
+        }
+        doScroll();
+        scrollIntervalRef.current = setInterval(doScroll, 250);
+    }, [doScroll]);
+    // Stop the auto-scrolling interval.
+    const stopScroll = (0, react_1.useCallback)(() => {
+        if (scrollIntervalRef.current) {
+            clearInterval(scrollIntervalRef.current);
+            scrollIntervalRef.current = undefined;
+        }
+    }, []);
+    // If startScroll changes, refresh our interval.
+    (0, react_1.useEffect)(() => {
+        if (scrollIntervalRef.current) {
+            stopScroll();
+            startScroll();
+        }
+    }, [stopScroll, startScroll]);
+    return {
+        id,
+        containerMeasurementsRef,
+        contentSizeRef,
+        onContentSizeChange,
+        onMeasureContainer,
+        onScroll,
+        scrollRef,
+        scrollPosition,
+        setScrollRefs,
+        startScroll,
+        stopScroll,
+    };
+};
+exports.useDraxScrollHandler = useDraxScrollHandler;

package/build/hooks/useDraxState.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DraxViewState, DraxStateActionCreators, CreateViewStatePayload, UpdateViewStatePayload, DeleteViewStatePayload, UpdateTrackingStatusPayload } from '../types';
 /** Collection of Drax action creators */
 export declare const actions: DraxStateActionCreators;
@@ -6,5 +5,6 @@ export declare const actions: DraxStateActionCreators;
 export declare const useDraxState: () => {
     getViewState: (id: string | undefined) => DraxViewState | undefined;
     getTrackingStatus: () => import("../types").DraxTrackingStatus;
+    getAllViewIds: () => string[];
     dispatch: import("react").Dispatch<import("typesafe-actions").PayloadAction<"createViewState", CreateViewStatePayload> | import("typesafe-actions").PayloadAction<"updateViewState", UpdateViewStatePayload> | import("typesafe-actions").PayloadAction<"deleteViewState", DeleteViewStatePayload> | import("typesafe-actions").PayloadAction<"updateTrackingStatus", UpdateTrackingStatusPayload>>;
 };

package/build/hooks/useDraxState.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDraxState = exports.actions = void 0;
+const lodash_isequal_1 = __importDefault(require("lodash.isequal"));
 const react_1 = require("react");
 const typesafe_actions_1 = require("typesafe-actions");
-const lodash_isequal_1 = __importDefault(require("lodash.isequal"));
 const types_1 = require("../types");
 /** Create the initial empty view state data for a newly registered view. */
 const createInitialViewState = () => ({
@@ -30,9 +30,12 @@ const createInitialState = () => ({
     },
 });
 /** Selector for a view state by view id. */
-const selectViewState = (state, id) => (id === undefined ? undefined : state.viewStateById[id]);
+const selectViewState = (state, id) => id === undefined ? undefined : state.viewStateById[id];
 /** Selector for tracking status. */
 const selectTrackingStatus = (state) => state.trackingStatus;
+const selectAllViewIds = (state) => {
+    return Object.keys(state.viewStateById);
+};
 /** Collection of Drax action creators */
 exports.actions = {
     createViewState: (0, typesafe_actions_1.createAction)('createViewState')(),
@@ -110,15 +113,15 @@ const useDraxState = () => {
     const getViewState = (0, react_1.useCallback)((id) => selectViewState(state, id), [state]);
     /** Get the current tracking status. */
     const getTrackingStatus = (0, react_1.useCallback)(() => selectTrackingStatus(state), [state]);
+    /** Get the current tracking status. */
+    const getAllViewIds = (0, react_1.useCallback)(() => selectAllViewIds(state), [state]);
     /** Create the Drax state object for return, only replacing reference when necessary. */
     const draxState = (0, react_1.useMemo)(() => ({
         getViewState,
         getTrackingStatus,
+        getAllViewIds,
         dispatch,
-    }), [
-        getViewState,
-        getTrackingStatus,
-    ]);
+    }), [getViewState, getTrackingStatus, getAllViewIds]);
     /*
     useEffect(() => {
         console.log(`Rendering drax state ${JSON.stringify(state, null, 2)}`);

package/build/hooks/useMeasurements.d.ts

@@ -0,0 +1,9 @@
+import Reanimated from 'react-native-reanimated';
+import { DraxViewProps, DraxViewMeasurementHandler } from '../types';
+export declare const useMeasurements: ({ onMeasure, registration, id, parent: parentProp, scrollPosition, ...props }: DraxViewProps & {
+    id: string;
+}) => {
+    onLayout: () => void;
+    viewRef: import("react-native-reanimated").AnimatedRef<Reanimated.View>;
+    measureWithHandler: (measurementHandler?: DraxViewMeasurementHandler) => void;
+};

package/build/hooks/useMeasurements.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMeasurements = void 0;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = require("react-native-reanimated");
+const useDraxContext_1 = require("./useDraxContext");
+const useMeasurements = ({ onMeasure, registration, id, parent: parentProp, scrollPosition, ...props }) => {
+    // The underlying View, for measuring and for subprovider nesting if this is a Drax parent view.
+    const viewRef = (0, react_native_reanimated_1.useAnimatedRef)();
+    // This view's measurements, for reference.
+    const measurementsRef = (0, react_1.useRef)(undefined);
+    // Connect with Drax.
+    const { updateViewMeasurements, parent: contextParent, registerView, unregisterView, rootViewRef, getAbsoluteViewData, } = (0, useDraxContext_1.useDraxContext)();
+    // Identify Drax parent view (if any) from context or prop override.
+    const parent = parentProp ?? contextParent;
+    const parentId = parent?.id;
+    // Identify parent view ref.
+    const parentViewRef = parent ? parent.viewRef : rootViewRef;
+    // Register and unregister with Drax context when necessary.
+    (0, react_1.useEffect)(() => {
+        registerView({ id, parentId, scrollPosition });
+        // Unregister when we unmount or id changes.
+        return () => unregisterView({ id });
+    }, [id, parentId, scrollPosition, registerView, unregisterView]);
+    // Build a callback which will report our measurements to Drax context,
+    // onMeasure, and an optional measurement handler.
+    const buildMeasureCallback = (0, react_1.useCallback)((measurementHandler) => (x, y, width, height) => {
+        const parentData = getAbsoluteViewData(parent?.id);
+        /** @todo Remove workaround for the web */
+        const webOffset = react_native_1.Platform.select({
+            web: {
+                x: parentData?.scrollPosition?.value.x || 0,
+                y: parentData?.scrollPosition?.value.y || 0,
+            },
+            default: {
+                x: 0,
+                y: 0,
+            },
+        });
+        /*
+         * In certain cases (on Android), all of these values can be
+         * undefined when the view is not on screen; This should not
+         * happen with the measurement functions we're using, but just
+         * for the sake of paranoia, we'll check and use undefined
+         * for the entire measurements object.
+         */
+        const measurements = height === undefined
+            ? undefined
+            : {
+                height,
+                x: x + webOffset.x,
+                y: y + webOffset.y,
+                width: width,
+            };
+        measurementsRef.current = measurements;
+        updateViewMeasurements({ id, measurements });
+        onMeasure?.(measurements);
+        measurementHandler?.(measurements);
+    }, [updateViewMeasurements, id, onMeasure]);
+    // Callback which will report our measurements to Drax context and onMeasure.
+    const updateMeasurements = (0, react_1.useMemo)(() => buildMeasureCallback(), [buildMeasureCallback]);
+    // Measure and report our measurements to Drax context, onMeasure, and an
+    // optional measurement handler on demand.
+    const measureWithHandler = (0, react_1.useCallback)((measurementHandler) => {
+        const view = viewRef.current;
+        if (view) {
+            if (parentViewRef.current) {
+                const measureCallback = measurementHandler
+                    ? buildMeasureCallback(measurementHandler)
+                    : updateMeasurements;
+                // console.log('definitely measuring in reference to something');
+                view.measureLayout(
+                // @ts-ignore
+                parentViewRef.current, measureCallback, () => {
+                    // console.log('Failed to measure Drax view in relation to parent nodeHandle');
+                });
+            }
+            else {
+                // console.log('No parent nodeHandle to measure Drax view in relation to');
+            }
+        }
+        else {
+            // console.log('No view to measure');
+        }
+    }, [viewRef, parentViewRef, buildMeasureCallback, updateMeasurements]);
+    // Measure and send our measurements to Drax context and onMeasure, used when this view finishes layout.
+    const onLayout = (0, react_1.useCallback)(() => {
+        // console.log(`onLayout ${id}`);
+        measureWithHandler();
+    }, [measureWithHandler]);
+    // Establish dimensions/orientation change handler when necessary.
+    (0, react_1.useEffect)(() => {
+        const handler = ( /* { screen: { width, height } }: { screen: ScaledSize } */) => {
+            // console.log(`Dimensions changed to ${width}/${height}`);
+            setTimeout(measureWithHandler, 100);
+        };
+        const listener = react_native_1.Dimensions.addEventListener('change', handler);
+        return () => listener.remove();
+    }, [measureWithHandler]);
+    // Register and unregister externally when necessary.
+    (0, react_1.useEffect)(() => {
+        if (registration) {
+            // Register externally when registration is set.
+            registration({
+                id,
+                measure: measureWithHandler,
+            });
+            return () => registration(undefined); // Unregister when we unmount or registration changes.
+        }
+        return undefined;
+    }, [id, measureWithHandler, registration]);
+    return {
+        onLayout,
+        viewRef,
+        measureWithHandler,
+    };
+};
+exports.useMeasurements = useMeasurements;

package/build/hooks/useStatus.d.ts

@@ -0,0 +1,11 @@
+import { SharedValue } from 'react-native-reanimated';
+import { DraxViewDragStatus, DraxViewProps, DraxViewReceiveStatus, Position } from '../types';
+export declare const useStatus: ({ id, otherDraggingStyle, otherDraggingWithReceiverStyle, otherDraggingWithoutReceiverStyle, hoverPosition, }: DraxViewProps & {
+    id: string;
+    hoverPosition: SharedValue<Position>;
+}) => {
+    dragStatus: DraxViewDragStatus;
+    receiveStatus: DraxViewReceiveStatus;
+    anyReceiving: boolean;
+    anyDragging: boolean;
+};

package/build/hooks/useStatus.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStatus = void 0;
+const react_1 = require("react");
+const react_native_reanimated_1 = require("react-native-reanimated");
+const types_1 = require("../types");
+const useDraxContext_1 = require("./useDraxContext");
+const useStatus = ({ id, otherDraggingStyle, otherDraggingWithReceiverStyle, otherDraggingWithoutReceiverStyle, hoverPosition, }) => {
+    const [dragStatus, setDragSatatus] = (0, react_1.useState)(types_1.DraxViewDragStatus.Inactive);
+    const [receiveStatus, setReceiveStatus] = (0, react_1.useState)(types_1.DraxViewReceiveStatus.Inactive);
+    const [anyReceiving, setAnyReceiving] = (0, react_1.useState)(false);
+    const [anyDragging, setAnyDragging] = (0, react_1.useState)(false);
+    // Connect with Drax.
+    const { getTrackingDragged, parentPosition, getReleaseViews } = (0, useDraxContext_1.useDraxContext)();
+    const updateState = (0, react_1.useCallback)((position) => {
+        const dragged = getTrackingDragged();
+        const releaseViews = getReleaseViews();
+        if (position.x === 0 && position.y === 0) {
+            setDragSatatus(types_1.DraxViewDragStatus.Inactive);
+            setAnyReceiving(false);
+        }
+        else if (releaseViews?.includes(id)) {
+            setDragSatatus(types_1.DraxViewDragStatus.Released);
+        }
+        else if (dragged) {
+            if (dragged?.id === id) {
+                setDragSatatus(types_1.DraxViewDragStatus.Dragging);
+            }
+            else {
+                setDragSatatus(types_1.DraxViewDragStatus.Inactive);
+            }
+            if (otherDraggingStyle || otherDraggingWithReceiverStyle || otherDraggingWithoutReceiverStyle) {
+                setAnyDragging(true);
+            }
+        }
+        else {
+            setAnyDragging(false);
+            setDragSatatus(types_1.DraxViewDragStatus.Inactive);
+        }
+    }, [
+        getReleaseViews,
+        getTrackingDragged,
+        id,
+        otherDraggingStyle,
+        otherDraggingWithReceiverStyle,
+        otherDraggingWithoutReceiverStyle,
+    ]);
+    (0, react_native_reanimated_1.useAnimatedReaction)(() => hoverPosition.value, position => {
+        (0, react_native_reanimated_1.runOnJS)(updateState)(position);
+    });
+    const updateReceivingState = (0, react_1.useCallback)((position) => {
+        const dragged = getTrackingDragged();
+        if (position.x === 0 && position.y === 0) {
+            const releaseViews = getReleaseViews();
+            if (releaseViews?.includes(id) || dragged?.tracking.draggedId === id) {
+                setDragSatatus(types_1.DraxViewDragStatus.Released);
+            }
+            else {
+                setReceiveStatus(types_1.DraxViewReceiveStatus.Inactive);
+            }
+            setAnyReceiving(false);
+        }
+        else if (dragged) {
+            if (dragged?.tracking.receiver) {
+                if (dragged?.tracking.receiver?.receiverId === id) {
+                    setReceiveStatus(types_1.DraxViewReceiveStatus.Receiving);
+                }
+                else {
+                    setReceiveStatus(types_1.DraxViewReceiveStatus.Inactive);
+                }
+                if (otherDraggingWithReceiverStyle) {
+                    setAnyReceiving(true);
+                }
+            }
+            else {
+                setAnyReceiving(false);
+                setReceiveStatus(types_1.DraxViewReceiveStatus.Inactive);
+            }
+        }
+        else {
+            setReceiveStatus(types_1.DraxViewReceiveStatus.Inactive);
+            setAnyReceiving(false);
+        }
+    }, [getTrackingDragged, id, otherDraggingWithReceiverStyle]);
+    (0, react_native_reanimated_1.useAnimatedReaction)(() => parentPosition.value, position => {
+        (0, react_native_reanimated_1.runOnJS)(updateReceivingState)(position);
+    });
+    const status = (0, react_1.useMemo)(() => ({
+        dragStatus,
+        receiveStatus,
+        anyReceiving,
+        anyDragging,
+    }), [anyDragging, anyReceiving, dragStatus, receiveStatus]);
+    return status;
+};
+exports.useStatus = useStatus;

package/build/index.d.ts

@@ -1,7 +1,9 @@
 export * from './types';
 export { DraxContext } from './DraxContext';
 export { DraxList } from './DraxList';
+export { DraxListItem } from './DraxListItem';
 export { DraxProvider } from './DraxProvider';
 export { DraxScrollView } from './DraxScrollView';
 export { DraxSubprovider } from './DraxSubprovider';
 export { DraxView } from './DraxView';
+export * from './hooks';

package/build/index.js

@@ -14,12 +14,14 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DraxView = exports.DraxSubprovider = exports.DraxScrollView = exports.DraxProvider = exports.DraxList = exports.DraxContext = void 0;
+exports.DraxView = exports.DraxSubprovider = exports.DraxScrollView = exports.DraxProvider = exports.DraxListItem = exports.DraxList = exports.DraxContext = void 0;
 __exportStar(require("./types"), exports);
 var DraxContext_1 = require("./DraxContext");
 Object.defineProperty(exports, "DraxContext", { enumerable: true, get: function () { return DraxContext_1.DraxContext; } });
 var DraxList_1 = require("./DraxList");
 Object.defineProperty(exports, "DraxList", { enumerable: true, get: function () { return DraxList_1.DraxList; } });
+var DraxListItem_1 = require("./DraxListItem");
+Object.defineProperty(exports, "DraxListItem", { enumerable: true, get: function () { return DraxListItem_1.DraxListItem; } });
 var DraxProvider_1 = require("./DraxProvider");
 Object.defineProperty(exports, "DraxProvider", { enumerable: true, get: function () { return DraxProvider_1.DraxProvider; } });
 var DraxScrollView_1 = require("./DraxScrollView");
@@ -28,3 +30,4 @@ var DraxSubprovider_1 = require("./DraxSubprovider");
 Object.defineProperty(exports, "DraxSubprovider", { enumerable: true, get: function () { return DraxSubprovider_1.DraxSubprovider; } });
 var DraxView_1 = require("./DraxView");
 Object.defineProperty(exports, "DraxView", { enumerable: true, get: function () { return DraxView_1.DraxView; } });
+__exportStar(require("./hooks"), exports);

package/build/math.d.ts

@@ -1,7 +1,7 @@
 import { DraxViewMeasurements, Position } from './types';
 export declare const clipMeasurements: (vm: DraxViewMeasurements, cvm: DraxViewMeasurements) => DraxViewMeasurements;
-export declare const isPointInside: ({ x, y }: Position, { width, height, x: x0, y: y0, }: DraxViewMeasurements) => boolean;
-export declare const getRelativePosition: ({ x, y }: Position, { width, height, x: x0, y: y0, }: DraxViewMeasurements) => {
+export declare const isPointInside: ({ x, y }: Position, { width, height, x: x0, y: y0 }: DraxViewMeasurements) => boolean;
+export declare const getRelativePosition: ({ x, y }: Position, { width, height, x: x0, y: y0 }: DraxViewMeasurements) => {
     relativePosition: {
         x: number;
         y: number;

package/build/math.js

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateRandomId = exports.extractDimensions = exports.extractPosition = exports.getRelativePosition = exports.isPointInside = exports.clipMeasurements = void 0;
 const clipMeasurements = (vm, cvm) => {
-    let { width, height, x: x0, y: y0, } = vm;
+    'worklet';
+    let { width, height, x: x0, y: y0 } = vm;
     let x1 = x0 + width;
     let y1 = y0 + height;
-    const { width: cwidth, height: cheight, x: cx0, y: cy0, } = cvm;
+    const { width: cwidth, height: cheight, x: cx0, y: cy0 } = cvm;
     const cx1 = cx0 + cwidth;
     const cy1 = cy0 + cheight;
     if (x0 >= cx1 || x1 <= cx0 || y0 >= cy1 || y1 <= cy0) {
@@ -40,9 +41,9 @@ const clipMeasurements = (vm, cvm) => {
     };
 };
 exports.clipMeasurements = clipMeasurements;
-const isPointInside = ({ x, y }, { width, height, x: x0, y: y0, }) => (x >= x0 && y >= y0 && x < x0 + width && y < y0 + height);
+const isPointInside = ({ x, y }, { width, height, x: x0, y: y0 }) => x >= x0 && y >= y0 && x < x0 + width && y < y0 + height;
 exports.isPointInside = isPointInside;
-const getRelativePosition = ({ x, y }, { width, height, x: x0, y: y0, }) => {
+const getRelativePosition = ({ x, y }, { width, height, x: x0, y: y0 }) => {
     const rx = x - x0;
     const ry = y - y0;
     return {
@@ -53,12 +54,15 @@ const getRelativePosition = ({ x, y }, { width, height, x: x0, y: y0, }) => {
 exports.getRelativePosition = getRelativePosition;
 const extractPosition = ({ x, y }) => ({ x, y });
 exports.extractPosition = extractPosition;
-const extractDimensions = ({ width, height }) => ({ width, height });
+const extractDimensions = ({ width, height }) => ({
+    width,
+    height,
+});
 exports.extractDimensions = extractDimensions;
 /*
  * Previously we were using the uuid library to generate unique identifiers for Drax
  * components. Since we do not need them to be cryptographically secure and likely
  * won't need very many of them, let's just use this simple function.
  */
-const generateRandomId = () => (`${Math.random().toString(36).substr(2)}${Math.random().toString(36).substr(2)}`);
+const generateRandomId = () => `${Math.random().toString(36).substr(2)}${Math.random().toString(36).substr(2)}`;
 exports.generateRandomId = generateRandomId;

package/build/params.d.ts

@@ -16,3 +16,12 @@ export declare const defaultAutoScrollJumpRatio = 0.2;
 export declare const defaultAutoScrollBackThreshold = 0.1;
 /** Default drag-over minimum position threshold for auto-scroll forward, as a fraction relative to content width/length */
 export declare const defaultAutoScrollForwardThreshold = 0.9;
+export declare const INITIAL_REANIMATED_POSITION: {
+    value: {
+        x: number;
+        y: number;
+    };
+    addListener(): void;
+    removeListener(): void;
+    modify(): void;
+};

package/build/params.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultAutoScrollForwardThreshold = exports.defaultAutoScrollBackThreshold = exports.defaultAutoScrollJumpRatio = exports.defaultAutoScrollIntervalLength = exports.defaultScrollEventThrottle = exports.defaultListItemLongPressDelay = exports.defaultLongPressDelay = exports.defaultSnapbackDuration = exports.defaultSnapbackDelay = void 0;
+exports.INITIAL_REANIMATED_POSITION = exports.defaultAutoScrollForwardThreshold = exports.defaultAutoScrollBackThreshold = exports.defaultAutoScrollJumpRatio = exports.defaultAutoScrollIntervalLength = exports.defaultScrollEventThrottle = exports.defaultListItemLongPressDelay = exports.defaultLongPressDelay = exports.defaultSnapbackDuration = exports.defaultSnapbackDelay = void 0;
 /** Default snapback delay in milliseconds */
 exports.defaultSnapbackDelay = 100;
 /** Default snapback duration in milliseconds */
@@ -19,3 +19,9 @@ exports.defaultAutoScrollJumpRatio = 0.2;
 exports.defaultAutoScrollBackThreshold = 0.1;
 /** Default drag-over minimum position threshold for auto-scroll forward, as a fraction relative to content width/length */
 exports.defaultAutoScrollForwardThreshold = 0.9;
+exports.INITIAL_REANIMATED_POSITION = {
+    value: { x: 0, y: 0 },
+    addListener() { },
+    removeListener() { },
+    modify() { },
+};

package/build/transform.d.ts

@@ -1,4 +1,11 @@
-import { Animated, StyleProp, ViewStyle } from 'react-native';
-import { AnimatedViewStyleWithoutLayout } from './types';
-export declare const flattenStylesWithoutLayout: (styles: StyleProp<Animated.WithAnimatedValue<ViewStyle>>[]) => AnimatedViewStyleWithoutLayout;
-export declare const mergeStyleTransform: (style: AnimatedViewStyleWithoutLayout, transform: Animated.WithAnimatedValue<ViewStyle['transform']>) => AnimatedViewStyleWithoutLayout;
+import { PropsWithChildren } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { AnimatedStyle, ILayoutAnimationBuilder, SharedValue, StyleProps } from 'react-native-reanimated';
+import { AnimatedViewStyleWithoutLayout, DraxViewDragStatus, TReanimatedHoverViewProps, ViewDimensions } from './types';
+export declare const flattenStylesWithoutLayout: (styles: (StyleProps | StyleProp<ViewStyle> | StyleProp<AnimatedStyle<StyleProp<ViewStyle>>> | null)[]) => AnimatedViewStyleWithoutLayout;
+export declare const getCombinedHoverStyle: ({ dragStatus, anyReceiving, dimensions, }: {
+    dimensions: ViewDimensions;
+    dragStatus: DraxViewDragStatus;
+    anyReceiving: boolean;
+}, props: Partial<PropsWithChildren<TReanimatedHoverViewProps>>) => AnimatedViewStyleWithoutLayout;
+export declare const customLayoutTransition: (shiftsRef: SharedValue<number[]>, data?: ArrayLike<any> | null) => ILayoutAnimationBuilder;

package/build/transform.js

@@ -1,17 +1,59 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergeStyleTransform = exports.flattenStylesWithoutLayout = void 0;
+exports.customLayoutTransition = exports.getCombinedHoverStyle = exports.flattenStylesWithoutLayout = void 0;
 const react_native_1 = require("react-native");
+const react_native_reanimated_1 = require("react-native-reanimated");
+const types_1 = require("./types");
 const flattenStylesWithoutLayout = (styles) => {
     const { margin, marginHorizontal, marginVertical, marginLeft, marginRight, marginTop, marginBottom, marginStart, marginEnd, left, right, top, bottom, flex, flexBasis, flexDirection, flexGrow, flexShrink, ...flattened } = react_native_1.StyleSheet.flatten(styles);
     return flattened;
 };
 exports.flattenStylesWithoutLayout = flattenStylesWithoutLayout;
-const mergeStyleTransform = (style, transform) => ({
-    ...style,
-    transform: [
-        ...(transform ?? []),
-        ...(style.transform ?? []),
-    ],
+// Combine hover styles for given internal render props.
+const getCombinedHoverStyle = ({ dragStatus, anyReceiving, dimensions, }, props) => {
+    // Start with base style, calculated dimensions, and hover base style.
+    const hoverStyles = [
+        props?.style,
+        dimensions,
+        props?.hoverStyle,
+    ];
+    // Apply style overrides based on state.
+    if (dragStatus === types_1.DraxViewDragStatus.Dragging) {
+        hoverStyles.push(props?.hoverDraggingStyle);
+        if (anyReceiving) {
+            hoverStyles.push(props?.hoverDraggingWithReceiverStyle);
+        }
+        else {
+            hoverStyles.push(props?.hoverDraggingWithoutReceiverStyle);
+        }
+    }
+    else if (dragStatus === types_1.DraxViewDragStatus.Released) {
+        hoverStyles.push(props?.hoverDragReleasedStyle);
+    }
+    // Remove any layout styles.
+    const flattenedHoverStyle = (0, exports.flattenStylesWithoutLayout)(hoverStyles);
+    return flattenedHoverStyle;
+};
+exports.getCombinedHoverStyle = getCombinedHoverStyle;
+const customLayoutTransition = (shiftsRef, data) => ({
+    build: () => values => {
+        'worklet';
+        const isInternalReordering = shiftsRef.value.length <= (data?.length || 0);
+        const duration = isInternalReordering ? 1 : 200;
+        return {
+            animations: {
+                originX: (0, react_native_reanimated_1.withTiming)(values.targetOriginX, { duration }),
+                originY: (0, react_native_reanimated_1.withTiming)(values.targetOriginY, { duration }),
+                width: (0, react_native_reanimated_1.withSpring)(values.targetWidth),
+                height: (0, react_native_reanimated_1.withSpring)(values.targetHeight),
+            },
+            initialValues: {
+                originX: values.currentOriginX,
+                originY: values.currentOriginY,
+                width: values.currentWidth,
+                height: values.currentHeight,
+            },
+        };
+    },
 });
-exports.mergeStyleTransform = mergeStyleTransform;
+exports.customLayoutTransition = customLayoutTransition;