@reactuses/core 5.0.1 → 5.0.3

package/dist/index.cjs

@@ -61,15 +61,11 @@ function getTargetElement(target, defaultElement) {
     return targetElement;
 }
 
-const isPrimitive$1 = (val)=>val !== Object(val);
 const useCustomCompareEffect = (effect, deps, depsEqual)=>{
     if (process.env.NODE_ENV !== "production") {
         if (!Array.isArray(deps) || !deps.length) {
             console.warn("`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead.");
         }
-        if (deps.every(isPrimitive$1)) {
-            console.warn("`useCustomCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead.");
-        }
         if (typeof depsEqual !== "function") {
             console.warn("`useCustomCompareEffect` should be used with depsEqual callback for comparing deps list");
         }
@@ -82,15 +78,11 @@ const useCustomCompareEffect = (effect, deps, depsEqual)=>{
     React.useEffect(effect, ref.current);
 };
 
-const isPrimitive = (val)=>val !== Object(val);
 const useDeepCompareEffect = (effect, deps)=>{
     if (process.env.NODE_ENV !== "production") {
         if (!Array.isArray(deps) || !deps.length) {
             console.warn("`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead.");
         }
-        if (deps.every(isPrimitive)) {
-            console.warn("`useDeepCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead.");
-        }
     }
     useCustomCompareEffect(effect, deps, lodashEs.isEqual);
 };
@@ -790,7 +782,7 @@ const useDoubleClick = ({ target, latency = 300, onSingleClick = ()=>{}, onDoubl
 };
 
 const useDraggable = (target, options = {})=>{
-    const draggingElement = options.draggingElement;
+    const { draggingElement, containerElement } = options;
     var _options_handle;
     const draggingHandle = (_options_handle = options.handle) != null ? _options_handle : target;
     var _options_initialValue;
@@ -798,7 +790,7 @@ const useDraggable = (target, options = {})=>{
         x: 0,
         y: 0
     });
-    React.useEffect(()=>{
+    useDeepCompareEffect(()=>{
         var _options_initialValue;
         setPositon((_options_initialValue = options.initialValue) != null ? _options_initialValue : {
             x: 0,
@@ -823,6 +815,7 @@ const useDraggable = (target, options = {})=>{
         }
     };
     const start = (e)=>{
+        var _container_getBoundingClientRect;
         const element = target.current;
         if (!filterEvent(e) || !element) {
             return;
@@ -830,10 +823,12 @@ const useDraggable = (target, options = {})=>{
         if (options.exact && e.target !== element) {
             return;
         }
-        const rect = element.getBoundingClientRect();
+        const container = containerElement == null ? void 0 : containerElement.current;
+        const containerRect = container == null ? void 0 : (_container_getBoundingClientRect = container.getBoundingClientRect) == null ? void 0 : _container_getBoundingClientRect.call(container);
+        const targetRect = element.getBoundingClientRect();
         const pos = {
-            x: e.pageX - rect.left,
-            y: e.pageY - rect.top
+            x: e.clientX - (container ? targetRect.left - containerRect.left + container.scrollLeft : targetRect.left),
+            y: e.clientY - (container ? targetRect.top - containerRect.top + container.scrollTop : targetRect.top)
         };
         if ((options.onStart == null ? void 0 : options.onStart.call(options, pos, e)) === false) {
             return;
@@ -842,15 +837,25 @@ const useDraggable = (target, options = {})=>{
         handleEvent(e);
     };
     const move = (e)=>{
-        if (!filterEvent(e)) {
+        const element = target.current;
+        if (!filterEvent(e) || !element) {
             return;
         }
         if (!pressedDelta) {
             return;
         }
+        const container = containerElement == null ? void 0 : containerElement.current;
+        const targetRect = element.getBoundingClientRect();
+        let { x, y } = position;
+        x = e.clientX - pressedDelta.x;
+        y = e.clientY - pressedDelta.y;
+        if (container) {
+            x = Math.min(Math.max(0, x), container.scrollWidth - targetRect.width);
+            y = Math.min(Math.max(0, y), container.scrollHeight - targetRect.height);
+        }
         setPositon({
-            x: e.pageX - pressedDelta.x,
-            y: e.pageY - pressedDelta.y
+            x,
+            y
         });
         options.onMove == null ? void 0 : options.onMove.call(options, position, e);
         handleEvent(e);

package/dist/index.d.cts

@@ -491,7 +491,13 @@ interface UseDraggableOptions {
      * @zh 将“pointermove”和“pointerup”事件附加到的dom元素
      * @defaultValue window
      */
-    draggingElement?: RefObject<HTMLElement | SVGElement | Window | Document>;
+    draggingElement?: BasicTarget<HTMLElement | SVGElement>;
+    /**
+     * @en Element for calculating bounds (If not set, it will use the event's target).
+     * @zh 设置拖拽容器边界
+     * @defaultValue undefined
+     */
+    containerElement?: RefObject<HTMLElement | SVGAElement>;
     /**
      * @en Handle that triggers the drag event
      * @zh 触发拖动事件的dom元素

package/dist/index.d.mts

@@ -491,7 +491,13 @@ interface UseDraggableOptions {
      * @zh 将“pointermove”和“pointerup”事件附加到的dom元素
      * @defaultValue window
      */
-    draggingElement?: RefObject<HTMLElement | SVGElement | Window | Document>;
+    draggingElement?: BasicTarget<HTMLElement | SVGElement>;
+    /**
+     * @en Element for calculating bounds (If not set, it will use the event's target).
+     * @zh 设置拖拽容器边界
+     * @defaultValue undefined
+     */
+    containerElement?: RefObject<HTMLElement | SVGAElement>;
     /**
      * @en Handle that triggers the drag event
      * @zh 触发拖动事件的dom元素

package/dist/index.d.ts

@@ -491,7 +491,13 @@ interface UseDraggableOptions {
      * @zh 将“pointermove”和“pointerup”事件附加到的dom元素
      * @defaultValue window
      */
-    draggingElement?: RefObject<HTMLElement | SVGElement | Window | Document>;
+    draggingElement?: BasicTarget<HTMLElement | SVGElement>;
+    /**
+     * @en Element for calculating bounds (If not set, it will use the event's target).
+     * @zh 设置拖拽容器边界
+     * @defaultValue undefined
+     */
+    containerElement?: RefObject<HTMLElement | SVGAElement>;
     /**
      * @en Handle that triggers the drag event
      * @zh 触发拖动事件的dom元素

package/dist/index.mjs

@@ -54,15 +54,11 @@ function getTargetElement(target, defaultElement) {
     return targetElement;
 }
 
-const isPrimitive$1 = (val)=>val !== Object(val);
 const useCustomCompareEffect = (effect, deps, depsEqual)=>{
     if (process.env.NODE_ENV !== "production") {
         if (!Array.isArray(deps) || !deps.length) {
             console.warn("`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead.");
         }
-        if (deps.every(isPrimitive$1)) {
-            console.warn("`useCustomCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead.");
-        }
         if (typeof depsEqual !== "function") {
             console.warn("`useCustomCompareEffect` should be used with depsEqual callback for comparing deps list");
         }
@@ -75,15 +71,11 @@ const useCustomCompareEffect = (effect, deps, depsEqual)=>{
     useEffect(effect, ref.current);
 };
 
-const isPrimitive = (val)=>val !== Object(val);
 const useDeepCompareEffect = (effect, deps)=>{
     if (process.env.NODE_ENV !== "production") {
         if (!Array.isArray(deps) || !deps.length) {
             console.warn("`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead.");
         }
-        if (deps.every(isPrimitive)) {
-            console.warn("`useDeepCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead.");
-        }
     }
     useCustomCompareEffect(effect, deps, isEqual);
 };
@@ -783,7 +775,7 @@ const useDoubleClick = ({ target, latency = 300, onSingleClick = ()=>{}, onDoubl
 };
 
 const useDraggable = (target, options = {})=>{
-    const draggingElement = options.draggingElement;
+    const { draggingElement, containerElement } = options;
     var _options_handle;
     const draggingHandle = (_options_handle = options.handle) != null ? _options_handle : target;
     var _options_initialValue;
@@ -791,7 +783,7 @@ const useDraggable = (target, options = {})=>{
         x: 0,
         y: 0
     });
-    useEffect(()=>{
+    useDeepCompareEffect(()=>{
         var _options_initialValue;
         setPositon((_options_initialValue = options.initialValue) != null ? _options_initialValue : {
             x: 0,
@@ -816,6 +808,7 @@ const useDraggable = (target, options = {})=>{
         }
     };
     const start = (e)=>{
+        var _container_getBoundingClientRect;
         const element = target.current;
         if (!filterEvent(e) || !element) {
             return;
@@ -823,10 +816,12 @@ const useDraggable = (target, options = {})=>{
         if (options.exact && e.target !== element) {
             return;
         }
-        const rect = element.getBoundingClientRect();
+        const container = containerElement == null ? void 0 : containerElement.current;
+        const containerRect = container == null ? void 0 : (_container_getBoundingClientRect = container.getBoundingClientRect) == null ? void 0 : _container_getBoundingClientRect.call(container);
+        const targetRect = element.getBoundingClientRect();
         const pos = {
-            x: e.pageX - rect.left,
-            y: e.pageY - rect.top
+            x: e.clientX - (container ? targetRect.left - containerRect.left + container.scrollLeft : targetRect.left),
+            y: e.clientY - (container ? targetRect.top - containerRect.top + container.scrollTop : targetRect.top)
         };
         if ((options.onStart == null ? void 0 : options.onStart.call(options, pos, e)) === false) {
             return;
@@ -835,15 +830,25 @@ const useDraggable = (target, options = {})=>{
         handleEvent(e);
     };
     const move = (e)=>{
-        if (!filterEvent(e)) {
+        const element = target.current;
+        if (!filterEvent(e) || !element) {
             return;
         }
         if (!pressedDelta) {
             return;
         }
+        const container = containerElement == null ? void 0 : containerElement.current;
+        const targetRect = element.getBoundingClientRect();
+        let { x, y } = position;
+        x = e.clientX - pressedDelta.x;
+        y = e.clientY - pressedDelta.y;
+        if (container) {
+            x = Math.min(Math.max(0, x), container.scrollWidth - targetRect.width);
+            y = Math.min(Math.max(0, y), container.scrollHeight - targetRect.height);
+        }
         setPositon({
-            x: e.pageX - pressedDelta.x,
-            y: e.pageY - pressedDelta.y
+            x,
+            y
         });
         options.onMove == null ? void 0 : options.onMove.call(options, position, e);
         handleEvent(e);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactuses/core",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "license": "Unlicense",
   "homepage": "https://www.reactuse.com/",
   "repository": {