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

package/build/hooks/useContent.js

@@ -0,0 +1,212 @@
+"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.useContent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = require("react-native-reanimated");
+const DraxSubprovider_1 = require("../DraxSubprovider");
+const math_1 = require("../math");
+const transform_1 = require("../transform");
+const types_1 = require("../types");
+const useDraxContext_1 = require("./useDraxContext");
+const useStatus_1 = require("./useStatus");
+const useContent = ({ draxViewProps: { id, style, dragInactiveStyle, draggingStyle, draggingWithReceiverStyle, draggingWithoutReceiverStyle, dragReleasedStyle, otherDraggingStyle, otherDraggingWithReceiverStyle, otherDraggingWithoutReceiverStyle, receiverInactiveStyle, receivingStyle, children, renderContent, renderHoverContent, isParent, scrollPositionOffset, ...props }, viewRef, }) => {
+    const { getTrackingDragged, getTrackingReceiver, getAbsoluteViewData } = (0, useDraxContext_1.useDraxContext)();
+    const { dragStatus, receiveStatus, anyDragging, anyReceiving } = (0, useStatus_1.useStatus)({
+        id,
+        otherDraggingStyle,
+        otherDraggingWithReceiverStyle,
+        otherDraggingWithoutReceiverStyle,
+        ...props,
+    });
+    const dragged = getTrackingDragged();
+    const trackingReleasedDraggedRef = (0, react_1.useRef)({});
+    (0, react_1.useEffect)(() => {
+        if (dragged && dragged.id === id)
+            trackingReleasedDraggedRef.current = dragged;
+    }, [dragged, id]);
+    const receiver = getTrackingReceiver();
+    const draggedData = getAbsoluteViewData(dragged?.id);
+    // Get full render props for non-hovering view content.
+    const getRenderContentProps = (0, react_1.useCallback)(() => {
+        const viewData = getAbsoluteViewData(id);
+        const measurements = viewData?.measurements;
+        const dimensions = measurements && (0, math_1.extractDimensions)(measurements);
+        return {
+            viewState: {
+                data: viewData,
+                dragStatus,
+                receiveStatus,
+                ...dragged?.tracking,
+                releasedDragTracking: trackingReleasedDraggedRef.current?.tracking && {
+                    ...trackingReleasedDraggedRef.current.tracking,
+                },
+                receivingDrag: receiveStatus !== types_1.DraxViewReceiveStatus.Receiving || !receiver?.id || !draggedData
+                    ? undefined
+                    : {
+                        id: receiver?.id,
+                        payload: draggedData?.protocol.dragPayload,
+                        data: draggedData,
+                    },
+            },
+            trackingStatus: { dragging: anyDragging, receiving: anyReceiving },
+            children,
+            dimensions,
+            hover: !viewRef,
+        };
+    }, [children, dragStatus, receiveStatus, anyDragging, anyReceiving, getTrackingDragged]);
+    // Combined style for current render-related state.
+    const combinedStyle = (0, react_1.useMemo)(() => {
+        // Start with base style.
+        const styles = [style];
+        /** Hover style */
+        if (!viewRef) {
+            const viewData = getAbsoluteViewData(id);
+            const measurements = viewData?.measurements;
+            const dimensions = measurements && (0, math_1.extractDimensions)(measurements);
+            const combinedHoverStyle = dimensions &&
+                (0, transform_1.getCombinedHoverStyle)({ dragStatus, anyReceiving, dimensions }, {
+                    id,
+                    style,
+                    dragInactiveStyle,
+                    draggingStyle,
+                    draggingWithReceiverStyle,
+                    draggingWithoutReceiverStyle,
+                    dragReleasedStyle,
+                    otherDraggingStyle,
+                    otherDraggingWithReceiverStyle,
+                    otherDraggingWithoutReceiverStyle,
+                    receiverInactiveStyle,
+                    receivingStyle,
+                    children,
+                    renderContent,
+                    renderHoverContent,
+                    isParent,
+                    ...props,
+                });
+            styles.push(combinedHoverStyle);
+        }
+        else {
+            // Apply style overrides for drag state.
+            if (dragStatus === types_1.DraxViewDragStatus.Dragging) {
+                styles.push(draggingStyle);
+                if (anyReceiving) {
+                    styles.push(draggingWithReceiverStyle);
+                }
+                else {
+                    styles.push(draggingWithoutReceiverStyle);
+                }
+            }
+            else if (dragStatus === types_1.DraxViewDragStatus.Released) {
+                styles.push(dragReleasedStyle);
+            }
+            else {
+                styles.push(dragInactiveStyle);
+                if (anyDragging) {
+                    styles.push(otherDraggingStyle);
+                    if (anyReceiving) {
+                        styles.push(otherDraggingWithReceiverStyle);
+                    }
+                    else {
+                        styles.push(otherDraggingWithoutReceiverStyle);
+                    }
+                }
+            }
+            // Apply style overrides for receiving state.
+            if (receiveStatus === types_1.DraxViewReceiveStatus.Receiving) {
+                styles.push(receivingStyle);
+            }
+            else {
+                styles.push(receiverInactiveStyle);
+            }
+        }
+        return styles;
+    }, [
+        style,
+        dragStatus,
+        receiveStatus,
+        draggingStyle,
+        anyReceiving,
+        draggingWithReceiverStyle,
+        draggingWithoutReceiverStyle,
+        dragReleasedStyle,
+        dragInactiveStyle,
+        anyDragging,
+        otherDraggingStyle,
+        otherDraggingWithReceiverStyle,
+        otherDraggingWithoutReceiverStyle,
+        receivingStyle,
+        receiverInactiveStyle,
+        viewRef,
+    ]);
+    const hoverFlattenedCombinedStyle = !viewRef && (0, transform_1.flattenStylesWithoutLayout)(combinedStyle);
+    const flattenedCombinedStyle = viewRef && react_native_1.StyleSheet.flatten(combinedStyle);
+    /** Note: Passing Flattened reanimated styles to Reanimated.View is not a good idea... */
+    const _combinedStyle = viewRef ? combinedStyle : hoverFlattenedCombinedStyle;
+    const animatedHoverStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        if (viewRef) {
+            return {};
+        }
+        return {
+            opacity: props.hoverPosition.value.x === 0 && props.hoverPosition.value.y === 0 ? 0 : 1, //prevent flash when release animation finishes.
+            transform: [
+                {
+                    translateX: props.hoverPosition?.value?.x -
+                        ((props.scrollPosition?.value?.x || 0) - (scrollPositionOffset?.x || 0)),
+                },
+                {
+                    translateY: props.hoverPosition?.value?.y -
+                        ((props.scrollPosition?.value?.y || 0) - (scrollPositionOffset?.y || 0)),
+                },
+                ...(flattenedCombinedStyle?.transform || []),
+            ],
+        };
+    });
+    // The rendered React children of this view.
+    const renderedChildren = (0, react_1.useMemo)(() => {
+        let content;
+        const renderDraxContent = !viewRef ? renderHoverContent || renderContent : renderContent;
+        if (renderDraxContent) {
+            const renderContentProps = getRenderContentProps();
+            content = renderDraxContent(renderContentProps);
+        }
+        else {
+            content = children;
+        }
+        if (isParent && viewRef) {
+            // This is a Drax parent, so wrap children in subprovider.
+            content = react_1.default.createElement(DraxSubprovider_1.DraxSubprovider, { parent: { id, viewRef } }, content);
+        }
+        return content;
+    }, [renderContent, getRenderContentProps, children, isParent, id, viewRef, renderHoverContent]);
+    return {
+        renderedChildren,
+        combinedStyle: _combinedStyle,
+        animatedHoverStyle,
+        dragStatus,
+    };
+};
+exports.useContent = useContent;

package/build/hooks/useDraxProtocol.d.ts

@@ -0,0 +1,5 @@
+import { SharedValue } from 'react-native-reanimated';
+import { DraxViewProps, Position } from '../types';
+export declare const useDraxProtocol: (props: DraxViewProps & {
+    id: string;
+}, hoverPosition: SharedValue<Position>) => (scrollPositionValue?: Position) => void;

package/build/hooks/useDraxProtocol.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDraxProtocol = void 0;
+const react_1 = require("react");
+const react_native_reanimated_1 = require("react-native-reanimated");
+const useDraxContext_1 = require("./useDraxContext");
+const useDraxProtocol = (props, hoverPosition) => {
+    // Connect with Drax.
+    const { updateViewProtocol } = (0, useDraxContext_1.useDraxContext)();
+    const _scrollPosition = (0, react_native_reanimated_1.useSharedValue)({ x: 0, y: 0 });
+    const scrollPosition = props.scrollPosition || _scrollPosition;
+    const updateViewProtocolCallback = (0, react_1.useCallback)((scrollPositionValue) => {
+        const dragPayload = props.dragPayload ?? props.payload;
+        const receiverPayload = props.receiverPayload ?? props.payload;
+        // Pass the event up to the Drax context.
+        updateViewProtocol({
+            id: props.id,
+            protocol: {
+                ...props,
+                hoverPosition,
+                dragPayload,
+                receiverPayload,
+                scrollPositionValue,
+            },
+        });
+    }, [updateViewProtocol, props, hoverPosition]);
+    (0, react_native_reanimated_1.useAnimatedReaction)(() => scrollPosition?.value, scrollPositionValue => {
+        (0, react_native_reanimated_1.runOnJS)(updateViewProtocolCallback)(scrollPositionValue);
+    });
+    return updateViewProtocolCallback;
+};
+exports.useDraxProtocol = useDraxProtocol;

package/build/hooks/useDraxRegistry.d.ts

@@ -1,14 +1,8 @@
-/// <reference types="react" />
-import { Animated } from 'react-native';
-import { RegisterViewPayload, UnregisterViewPayload, UpdateViewProtocolPayload, UpdateViewMeasurementsPayload, DraxViewData, DraxViewMeasurements, Position, DraxFoundAbsoluteViewEntry, StartDragPayload, DraxAbsoluteViewEntry, DraxAbsoluteViewData, DraxStateDispatch, DraxSnapbackTarget } from '../types';
-interface GetDragPositionDataParams {
-    parentPosition: Position;
-    draggedMeasurements: DraxViewMeasurements;
-    lockXPosition?: boolean;
-    lockYPosition?: boolean;
-}
+import { DraxAbsoluteViewData, DraxAbsoluteViewEntry, DraxFoundAbsoluteViewEntry, DraxProtocol, DraxRegistry, DraxSnapbackTarget, DraxStateDispatch, DraxViewData, DraxViewMeasurements, GetDragPositionDataParams, Position, RegisterViewPayload, StartDragPayload, UnregisterViewPayload, UpdateViewMeasurementsPayload, UpdateViewProtocolPayload } from '../types';
 /** Create a Drax registry and wire up all of the methods. */
 export declare const useDraxRegistry: (stateDispatch: DraxStateDispatch) => {
+    registryRef: import("react").MutableRefObject<DraxRegistry>;
+    getReleaseViews: () => string[];
     getViewData: (id: string | undefined) => DraxViewData | undefined;
     getAbsoluteViewData: (id: string | undefined) => DraxAbsoluteViewData | undefined;
     getTrackingDragged: () => {
@@ -41,19 +35,19 @@ export declare const useDraxRegistry: (stateDispatch: DraxStateDispatch) => {
         monitors: DraxFoundAbsoluteViewEntry[];
         receiver: DraxFoundAbsoluteViewEntry | undefined;
     };
-    getHoverItems: () => {
-        internalRenderHoverView: (props: import("../types").DraxInternalRenderHoverViewProps) => import("react").ReactNode;
-        key: string;
+    getHoverItems: (viewIds: string[]) => ({
+        scrollPosition: import("react-native-reanimated").SharedValue<Position> | undefined;
+        scrollPositionOffset: Position | undefined;
+        parentId?: string;
+        protocol: DraxProtocol;
+        measurements?: DraxViewMeasurements;
+        hoverMeasurements?: DraxViewMeasurements;
         id: string;
-        hoverPosition: Animated.ValueXY;
-        dimensions: {
-            width: number;
-            height: number;
-        };
-    }[];
+    } | undefined)[];
     registerView: (payload: RegisterViewPayload) => void;
     updateViewProtocol: (payload: UpdateViewProtocolPayload) => void;
     updateViewMeasurements: (payload: UpdateViewMeasurementsPayload) => void;
+    updateHoverViewMeasurements: (payload: UpdateViewMeasurementsPayload) => void;
     resetReceiver: () => void;
     resetDrag: (snapbackTarget?: DraxSnapbackTarget) => void;
     startDrag: (payload: StartDragPayload) => {
@@ -67,11 +61,18 @@ export declare const useDraxRegistry: (stateDispatch: DraxStateDispatch) => {
             y: number;
         };
         dragOffset: Position;
-        hoverPosition: Animated.ValueXY;
+        hoverPosition: import("react-native-reanimated").SharedValue<Position> | {
+            value: {
+                x: number;
+                y: number;
+            };
+            addListener(): void;
+            removeListener(): void;
+            modify(): void;
+        };
     };
     updateDragPosition: (dragAbsolutePosition: Position) => void;
     updateReceiver: (receiver: DraxFoundAbsoluteViewEntry, dragged: DraxAbsoluteViewEntry) => import("../types").DraxTrackingReceiver | undefined;
     setMonitorIds: (monitorIds: string[]) => void;
     unregisterView: (payload: UnregisterViewPayload) => void;
 };
-export {};