react-use-pointer-drag - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

lib/index.d.ts

@@ -69,3 +69,3 @@ import React from 'react';
     /**
-     * Timestamp (UNIX; milliseconds) when pointer down was called.
+     * Timestamp (UNIX; milliseconds) when pointerDown occured.
      */
@@ -82,3 +82,3 @@ startedAt: number;
     /**
-     * PointerEvent object from pointer down.
+     * PointerEvent object from pointerDown.
      */
@@ -94,2 +94,3 @@ initialEvent?: PointerEvent;
      * If set to true, stopPropagation will be called.
+     * Does not apply to pointerDown.
      * Default: true.
@@ -100,2 +101,3 @@ */
      * If set to true, preventDefault will be called.
+     * Does not apply to pointerDown.
      * Default: true.
@@ -105,2 +107,18 @@ */
     /**
+     * If set to true, stopPropagation will be called.
+     * Applies only to pointerDown.
+     * Default: false.
+     */
+    pointerDownStopPropagation?: boolean;
+    /**
+     * If set to true, preventDefault will be called.
+     * Applies only to pointerDown.
+     * Default: false.
+     */
+    pointerDownPreventDefault?: boolean;
+    /**
+     * Called on pointerDown.
+     */
+    onBeforeStart?(state: IPointerDragData<T>): void;
+    /**
      * Called if no dragging occurs (either due to constraints or the user not moving the pointer).
@@ -122,3 +140,3 @@ */
     /**
-     * Drag predicate function that is called during pointer move and returns true to begin dragging.
+     * Drag predicate function that is called during pointerMove and returns true to begin dragging.
      */
@@ -125,0 +143,0 @@ dragPredicate?(state: IPointerDragData<T>): boolean;

lib/index.js

@@ -91,9 +91,30 @@ import { useState, useEffect, useCallback, useRef } from 'react';
                 setIsStarted(true);
+                const now = Date.now();
                 infoRef.current = {
                     x: e.clientX,
                     y: e.clientY,
-                    startedAt: Date.now(),
+                    startedAt: now,
                     dragging: false,
                     initialEvent: e.nativeEvent,
                 };
+                if (optionsRef.current.pointerDownPreventDefault) {
+                    e.preventDefault();
+                }
+                if (optionsRef.current.pointerDownStopPropagation) {
+                    e.stopPropagation();
+                }
+                optionsRef.current.onBeforeStart?.({
+                    x: e.clientX,
+                    y: e.clientY,
+                    state: state,
+                    setState: setDragState,
+                    deltaX: 0,
+                    deltaY: 0,
+                    startX: e.clientX,
+                    startY: e.clientY,
+                    startedAt: now,
+                    initialEvent: e.nativeEvent,
+                    distance: 0,
+                    event: e.nativeEvent,
+                });
             },
@@ -100,0 +121,0 @@ };

package.json

 {
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "BSD-3-Clause-Clear",
@@ -4,0 +4,0 @@ "files": [

src/index.ts

@@ -84,3 +84,3 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
   /**
-   * Timestamp (UNIX; milliseconds) when pointer down was called.
+   * Timestamp (UNIX; milliseconds) when pointerDown occured.
    */
@@ -100,3 +100,3 @@ startedAt: number;
   /**
-   * PointerEvent object from pointer down.
+   * PointerEvent object from pointerDown.
    */
@@ -114,2 +114,3 @@ initialEvent?: PointerEvent;
    * If set to true, stopPropagation will be called.
+   * Does not apply to pointerDown.
    * Default: true.
@@ -121,2 +122,3 @@ */
    * If set to true, preventDefault will be called.
+   * Does not apply to pointerDown.
    * Default: true.
@@ -127,2 +129,21 @@ */
   /**
+   * If set to true, stopPropagation will be called.
+   * Applies only to pointerDown.
+   * Default: false.
+   */
+  pointerDownStopPropagation?: boolean;
+
+  /**
+   * If set to true, preventDefault will be called.
+   * Applies only to pointerDown.
+   * Default: false.
+   */
+  pointerDownPreventDefault?: boolean;
+
+  /**
+   * Called on pointerDown.
+   */
+  onBeforeStart?(state: IPointerDragData<T>): void;
+
+  /**
    * Called if no dragging occurs (either due to constraints or the user not moving the pointer).
@@ -148,3 +169,3 @@ */
   /**
-   * Drag predicate function that is called during pointer move and returns true to begin dragging.
+   * Drag predicate function that is called during pointerMove and returns true to begin dragging.
    */
@@ -281,9 +302,33 @@ dragPredicate?(state: IPointerDragData<T>): boolean;
           setIsStarted(true);
+          const now = Date.now();
           infoRef.current = {
             x: e.clientX,
             y: e.clientY,
-            startedAt: Date.now(),
+            startedAt: now,
             dragging: false,
             initialEvent: e.nativeEvent,
           };
+
+          if (optionsRef.current.pointerDownPreventDefault) {
+            e.preventDefault();
+          }
+
+          if (optionsRef.current.pointerDownStopPropagation) {
+            e.stopPropagation();
+          }
+
+          optionsRef.current.onBeforeStart?.({
+            x: e.clientX,
+            y: e.clientY,
+            state: state!,
+            setState: setDragState,
+            deltaX: 0,
+            deltaY: 0,
+            startX: e.clientX,
+            startY: e.clientY,
+            startedAt: now,
+            initialEvent: e.nativeEvent,
+            distance: 0,
+            event: e.nativeEvent,
+          });
         },
@@ -290,0 +335,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

20554

increased by13.55%

Lines of code

555

increased by16.35%

No dependency changes