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

package/build/DraxScrollView.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import { ScrollView } from 'react-native';
 import { DraxScrollViewProps } from './types';
 export declare const DraxScrollView: React.ForwardRefExoticComponent<DraxScrollViewProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<ScrollView>>;

package/build/DraxScrollView.js

@@ -22,36 +22,25 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.DraxScrollView = void 0;
 const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const DraxView_1 = require("./DraxView");
+const react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
 const DraxSubprovider_1 = require("./DraxSubprovider");
-const hooks_1 = require("./hooks");
-const types_1 = require("./types");
+const DraxView_1 = require("./DraxView");
+const useDraxScrollHandler_1 = require("./hooks/useDraxScrollHandler");
 const params_1 = require("./params");
+const types_1 = require("./types");
 const DraxScrollViewUnforwarded = (props, forwardedRef) => {
-    const { children, style, onScroll: onScrollProp, onContentSizeChange: onContentSizeChangeProp, scrollEventThrottle = params_1.defaultScrollEventThrottle, autoScrollIntervalLength = params_1.defaultAutoScrollIntervalLength, autoScrollJumpRatio = params_1.defaultAutoScrollJumpRatio, autoScrollBackThreshold = params_1.defaultAutoScrollBackThreshold, autoScrollForwardThreshold = params_1.defaultAutoScrollForwardThreshold, id: idProp, ...scrollViewProps } = props;
-    // The unique identifer for this view.
-    const id = (0, hooks_1.useDraxId)(idProp);
-    // Scrollable view, used for scrolling.
-    const scrollRef = (0, react_1.useRef)(null);
-    // ScrollView node handle, used for measuring children.
-    const nodeHandleRef = (0, react_1.useRef)(null);
-    // Container view measurements, for scrolling by percentage.
-    const containerMeasurementsRef = (0, react_1.useRef)(undefined);
-    // Content size, for scrolling by percentage.
-    const contentSizeRef = (0, react_1.useRef)(undefined);
-    // Scroll position, for Drax bounds checking and auto-scrolling.
-    const scrollPositionRef = (0, react_1.useRef)({ x: 0, y: 0 });
+    const { children, style, onContentSizeChange: onContentSizeChangeProp, scrollEventThrottle = params_1.defaultScrollEventThrottle, autoScrollIntervalLength = params_1.defaultAutoScrollIntervalLength, autoScrollJumpRatio = params_1.defaultAutoScrollJumpRatio, autoScrollBackThreshold = params_1.defaultAutoScrollBackThreshold, autoScrollForwardThreshold = params_1.defaultAutoScrollForwardThreshold, id: idProp, ...scrollViewProps } = props;
     // Auto-scroll state.
     const autoScrollStateRef = (0, react_1.useRef)({
         x: types_1.AutoScrollDirection.None,
         y: types_1.AutoScrollDirection.None,
     });
-    // Auto-scroll interval.
-    const autoScrollIntervalRef = (0, react_1.useRef)(undefined);
     // Handle auto-scrolling on interval.
     const doScroll = (0, react_1.useCallback)(() => {
         const scroll = scrollRef.current;
@@ -60,7 +49,6 @@ const DraxScrollViewUnforwarded = (props, forwardedRef) => {
         if (!scroll || !containerMeasurements || !contentSize) {
             return;
         }
-        const scrollPosition = scrollPositionRef.current;
         const autoScrollState = autoScrollStateRef.current;
         const jump = {
             x: containerMeasurements.width * autoScrollJumpRatio,
@@ -70,56 +58,41 @@ const DraxScrollViewUnforwarded = (props, forwardedRef) => {
         let yNew;
         if (autoScrollState.x === types_1.AutoScrollDirection.Forward) {
             const xMax = contentSize.x - containerMeasurements.width;
-            if (scrollPosition.x < xMax) {
-                xNew = Math.min(scrollPosition.x + jump.x, xMax);
+            if (scrollPosition.value.x < xMax) {
+                xNew = Math.min(scrollPosition.value.x + jump.x, xMax);
             }
         }
         else if (autoScrollState.x === types_1.AutoScrollDirection.Back) {
-            if (scrollPosition.x > 0) {
-                xNew = Math.max(scrollPosition.x - jump.x, 0);
+            if (scrollPosition.value.x > 0) {
+                xNew = Math.max(scrollPosition.value.x - jump.x, 0);
             }
         }
         if (autoScrollState.y === types_1.AutoScrollDirection.Forward) {
             const yMax = contentSize.y - containerMeasurements.height;
-            if (scrollPosition.y < yMax) {
-                yNew = Math.min(scrollPosition.y + jump.y, yMax);
+            if (scrollPosition.value.y < yMax) {
+                yNew = Math.min(scrollPosition.value.y + jump.y, yMax);
             }
         }
         else if (autoScrollState.y === types_1.AutoScrollDirection.Back) {
-            if (scrollPosition.y > 0) {
-                yNew = Math.max(scrollPosition.y - jump.y, 0);
+            if (scrollPosition.value.y > 0) {
+                yNew = Math.max(scrollPosition.value.y - jump.y, 0);
             }
         }
         if (xNew !== undefined || yNew !== undefined) {
             scroll.scrollTo({
-                x: xNew ?? scrollPosition.x,
-                y: yNew ?? scrollPosition.y,
+                x: xNew ?? scrollPosition.value.x,
+                y: yNew ?? scrollPosition.value.y,
             });
             scroll.flashScrollIndicators(); // ScrollView typing is missing this method
         }
     }, [autoScrollJumpRatio]);
-    // Start the auto-scrolling interval.
-    const startScroll = (0, react_1.useCallback)(() => {
-        if (autoScrollIntervalRef.current) {
-            return;
-        }
-        doScroll();
-        autoScrollIntervalRef.current = setInterval(doScroll, autoScrollIntervalLength);
-    }, [doScroll, autoScrollIntervalLength]);
-    // Stop the auto-scrolling interval.
-    const stopScroll = (0, react_1.useCallback)(() => {
-        if (autoScrollIntervalRef.current) {
-            clearInterval(autoScrollIntervalRef.current);
-            autoScrollIntervalRef.current = undefined;
-        }
-    }, []);
-    // If startScroll changes, refresh our interval.
-    (0, react_1.useEffect)(() => {
-        if (autoScrollIntervalRef.current) {
-            stopScroll();
-            startScroll();
-        }
-    }, [stopScroll, startScroll]);
+    const { id, containerMeasurementsRef, contentSizeRef, onContentSizeChange, onMeasureContainer, onScroll, scrollRef, scrollPosition, setScrollRefs, startScroll, stopScroll, } = (0, useDraxScrollHandler_1.useDraxScrollHandler)({
+        idProp,
+        onContentSizeChangeProp,
+        onScrollProp: props?.onScroll,
+        forwardedRef,
+        doScroll,
+    });
     // Clear auto-scroll direction and stop the auto-scrolling interval.
     const resetScroll = (0, react_1.useCallback)(() => {
         const autoScrollState = autoScrollStateRef.current;
@@ -127,10 +100,6 @@ const DraxScrollViewUnforwarded = (props, forwardedRef) => {
         autoScrollState.y = types_1.AutoScrollDirection.None;
         stopScroll();
     }, [stopScroll]);
-    // Track the size of the container view.
-    const onMeasureContainer = (0, react_1.useCallback)((measurements) => {
-        containerMeasurementsRef.current = measurements;
-    }, []);
     // Monitor drag-over events to react with auto-scrolling.
     const onMonitorDragOver = (0, react_1.useCallback)((event) => {
         const { monitorOffsetRatio } = event;
@@ -159,39 +128,9 @@ const DraxScrollViewUnforwarded = (props, forwardedRef) => {
         else {
             startScroll();
         }
-    }, [
-        stopScroll,
-        startScroll,
-        autoScrollBackThreshold,
-        autoScrollForwardThreshold,
-    ]);
-    // Set the ScrollView and node handle refs.
-    const setScrollViewRefs = (0, react_1.useCallback)((ref) => {
-        scrollRef.current = ref;
-        nodeHandleRef.current = ref && (0, react_native_1.findNodeHandle)(ref);
-        if (forwardedRef) {
-            if (typeof forwardedRef === 'function') {
-                forwardedRef(ref);
-            }
-            else {
-                // eslint-disable-next-line no-param-reassign
-                forwardedRef.current = ref;
-            }
-        }
-    }, [forwardedRef]);
-    // 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) => {
-        const { nativeEvent: { contentOffset } } = event;
-        scrollPositionRef.current = { ...contentOffset };
-        return onScrollProp?.(event);
-    }, [onScrollProp]);
-    return id ? (react_1.default.createElement(DraxView_1.DraxView, { id: id, style: style, scrollPositionRef: scrollPositionRef, onMeasure: onMeasureContainer, onMonitorDragOver: onMonitorDragOver, onMonitorDragExit: resetScroll, onMonitorDragEnd: resetScroll, onMonitorDragDrop: resetScroll },
-        react_1.default.createElement(DraxSubprovider_1.DraxSubprovider, { parent: { id, nodeHandleRef } },
-            react_1.default.createElement(react_native_1.ScrollView, { ...scrollViewProps, ref: setScrollViewRefs, onContentSizeChange: onContentSizeChange, onScroll: onScroll, scrollEventThrottle: scrollEventThrottle }, children)))) : null;
+    }, [stopScroll, startScroll, autoScrollBackThreshold, autoScrollForwardThreshold]);
+    return id ? (react_1.default.createElement(DraxView_1.DraxView, { id: id, style: style, scrollPosition: scrollPosition, onMeasure: onMeasureContainer, onMonitorDragOver: onMonitorDragOver, onMonitorDragExit: resetScroll, onMonitorDragEnd: resetScroll, onMonitorDragDrop: resetScroll },
+        react_1.default.createElement(DraxSubprovider_1.DraxSubprovider, { parent: { id, viewRef: scrollRef } },
+            react_1.default.createElement(react_native_reanimated_1.default.ScrollView, { ...scrollViewProps, ref: setScrollRefs, onContentSizeChange: onContentSizeChange, scrollEventThrottle: scrollEventThrottle, onScroll: onScroll }, children)))) : null;
 };
 exports.DraxScrollView = (0, react_1.forwardRef)(DraxScrollViewUnforwarded);

package/build/DraxSubprovider.d.ts

@@ -1,3 +1,3 @@
-import { FunctionComponent } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { DraxSubproviderProps } from './types';
-export declare const DraxSubprovider: FunctionComponent<DraxSubproviderProps>;
+export declare const DraxSubprovider: ({ parent, children }: PropsWithChildren<DraxSubproviderProps>) => React.JSX.Element;

package/build/DraxSubprovider.js

@@ -13,6 +13,6 @@ const DraxSubprovider = ({ parent, children }) => {
         ...contextValue,
         parent,
     };
-    return (react_1.default.createElement(DraxContext_1.DraxContext.Provider, { value: subContextValue }, children));
+    return react_1.default.createElement(DraxContext_1.DraxContext.Provider, { value: subContextValue }, children);
 };
 exports.DraxSubprovider = DraxSubprovider;

package/build/DraxView.d.ts

@@ -1,3 +1,8 @@
-import { PropsWithChildren } from 'react';
+import React, { ReactNode } from 'react';
 import { DraxViewProps } from './types';
-export declare const DraxView: ({ onDragStart, onDrag, onDragEnter, onDragOver, onDragExit, onDragEnd, onDragDrop, onSnapbackEnd, onReceiveDragEnter, onReceiveDragOver, onReceiveDragExit, onReceiveDragDrop, onMonitorDragStart, onMonitorDragEnter, onMonitorDragOver, onMonitorDragExit, onMonitorDragEnd, onMonitorDragDrop, animateSnapback, snapbackDelay, snapbackDuration, snapbackAnimator, payload, dragPayload, receiverPayload, style, dragInactiveStyle, draggingStyle, draggingWithReceiverStyle, draggingWithoutReceiverStyle, dragReleasedStyle, hoverStyle, hoverDraggingStyle, hoverDraggingWithReceiverStyle, hoverDraggingWithoutReceiverStyle, hoverDragReleasedStyle, receiverInactiveStyle, receivingStyle, otherDraggingStyle, otherDraggingWithReceiverStyle, otherDraggingWithoutReceiverStyle, renderContent, renderHoverContent, registration, onMeasure, scrollPositionRef, lockDragXPosition, lockDragYPosition, children, noHover, isParent, longPressDelay, id: idProp, parent: parentProp, draggable: draggableProp, receptive: receptiveProp, monitoring: monitoringProp, ...props }: PropsWithChildren<DraxViewProps>) => JSX.Element;
+export declare const DraxView: React.MemoExoticComponent<(props: DraxViewProps) => ReactNode>;
+type IReanimatedView = DraxViewProps & {
+    id: string;
+};
+export declare const DraxReanimatedView: React.MemoExoticComponent<(props: IReanimatedView) => ReactNode>;
+export {};