@reactuses/core 5.0.4 → 5.0.6

package/README.md

@@ -58,7 +58,7 @@ Refer to [documentations](https://reactuse.com/) for more details.
 
 ## Feedback
 
-You can submit an [issue](https://github.com/childrentime/reactuse/issues) or provide feedback on [Discord](https://discord.gg/WzDtCCFF).
+You can submit an [issue](https://github.com/childrentime/reactuse/issues) or provide feedback on [Discord](https://discord.gg/HMsq6cFkKp).
 
 <hr/>
 

package/dist/index.cjs

@@ -775,6 +775,18 @@ const useDoubleClick = ({ target, latency = 300, onSingleClick = ()=>{}, onDoubl
     });
 };
 
+const isScrollX = (node)=>{
+    if (!node) {
+        return false;
+    }
+    return getComputedStyle(node).overflowX === "auto" || getComputedStyle(node).overflowX === "scroll";
+};
+const isScrollY = (node)=>{
+    if (!node) {
+        return false;
+    }
+    return getComputedStyle(node).overflowY === "auto" || getComputedStyle(node).overflowY === "scroll";
+};
 const useDraggable = (target, options = {})=>{
     const { draggingElement, containerElement } = options;
     var _options_handle;
@@ -844,8 +856,10 @@ const useDraggable = (target, options = {})=>{
         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);
+            const containerWidth = isScrollX(container) ? container.scrollWidth : container.clientWidth;
+            const containerHeight = isScrollY(container) ? container.scrollHeight : container.clientHeight;
+            x = Math.min(Math.max(0, x), containerWidth - targetRect.width);
+            y = Math.min(Math.max(0, y), containerHeight - targetRect.height);
         }
         setPositon({
             x,
@@ -871,7 +885,8 @@ const useDraggable = (target, options = {})=>{
     return [
         position.x,
         position.y,
-        !!pressedDelta
+        !!pressedDelta,
+        setPositon
     ];
 };
 

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { DependencyList, RefObject, MutableRefObject, EffectCallback, useEffect, Dispatch, SetStateAction, useLayoutEffect } from 'react';
+import react__default, { DependencyList, RefObject, MutableRefObject, EffectCallback, Dispatch, SetStateAction, useEffect, useLayoutEffect } from 'react';
 import Cookies from 'js-cookie';
 import { DebounceSettings, ThrottleSettings, DebouncedFunc as DebouncedFunc$1 } from 'lodash-es';
 import * as lodash from 'lodash';
@@ -448,10 +448,12 @@ interface Position {
  * - x
  * - y
  * - 元素是否在拖动中
+ * - 设置元素的位置
  * @returns_en A tuple with the following elements:
  * - x
  * - y
  * - Whether the element is being dragged
+ * set the element position
  */
 type UseDraggable = (
 /**
@@ -463,7 +465,7 @@ target: RefObject<HTMLElement | SVGElement>,
  * @zh 可选参数
  * @en optional params
  */
-options?: UseDraggableOptions) => readonly [number, number, boolean];
+options?: UseDraggableOptions) => readonly [number, number, boolean, Dispatch<SetStateAction<Position>>];
 /**
  * @title  UseDraggableOptions
  */

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { DependencyList, RefObject, MutableRefObject, EffectCallback, useEffect, Dispatch, SetStateAction, useLayoutEffect } from 'react';
+import react__default, { DependencyList, RefObject, MutableRefObject, EffectCallback, Dispatch, SetStateAction, useEffect, useLayoutEffect } from 'react';
 import Cookies from 'js-cookie';
 import { DebounceSettings, ThrottleSettings, DebouncedFunc as DebouncedFunc$1 } from 'lodash-es';
 import * as lodash from 'lodash';
@@ -448,10 +448,12 @@ interface Position {
  * - x
  * - y
  * - 元素是否在拖动中
+ * - 设置元素的位置
  * @returns_en A tuple with the following elements:
  * - x
  * - y
  * - Whether the element is being dragged
+ * set the element position
  */
 type UseDraggable = (
 /**
@@ -463,7 +465,7 @@ target: RefObject<HTMLElement | SVGElement>,
  * @zh 可选参数
  * @en optional params
  */
-options?: UseDraggableOptions) => readonly [number, number, boolean];
+options?: UseDraggableOptions) => readonly [number, number, boolean, Dispatch<SetStateAction<Position>>];
 /**
  * @title  UseDraggableOptions
  */

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { DependencyList, RefObject, MutableRefObject, EffectCallback, useEffect, Dispatch, SetStateAction, useLayoutEffect } from 'react';
+import react__default, { DependencyList, RefObject, MutableRefObject, EffectCallback, Dispatch, SetStateAction, useEffect, useLayoutEffect } from 'react';
 import Cookies from 'js-cookie';
 import { DebounceSettings, ThrottleSettings, DebouncedFunc as DebouncedFunc$1 } from 'lodash-es';
 import * as lodash from 'lodash';
@@ -448,10 +448,12 @@ interface Position {
  * - x
  * - y
  * - 元素是否在拖动中
+ * - 设置元素的位置
  * @returns_en A tuple with the following elements:
  * - x
  * - y
  * - Whether the element is being dragged
+ * set the element position
  */
 type UseDraggable = (
 /**
@@ -463,7 +465,7 @@ target: RefObject<HTMLElement | SVGElement>,
  * @zh 可选参数
  * @en optional params
  */
-options?: UseDraggableOptions) => readonly [number, number, boolean];
+options?: UseDraggableOptions) => readonly [number, number, boolean, Dispatch<SetStateAction<Position>>];
 /**
  * @title  UseDraggableOptions
  */

package/dist/index.mjs

@@ -768,6 +768,18 @@ const useDoubleClick = ({ target, latency = 300, onSingleClick = ()=>{}, onDoubl
     });
 };
 
+const isScrollX = (node)=>{
+    if (!node) {
+        return false;
+    }
+    return getComputedStyle(node).overflowX === "auto" || getComputedStyle(node).overflowX === "scroll";
+};
+const isScrollY = (node)=>{
+    if (!node) {
+        return false;
+    }
+    return getComputedStyle(node).overflowY === "auto" || getComputedStyle(node).overflowY === "scroll";
+};
 const useDraggable = (target, options = {})=>{
     const { draggingElement, containerElement } = options;
     var _options_handle;
@@ -837,8 +849,10 @@ const useDraggable = (target, options = {})=>{
         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);
+            const containerWidth = isScrollX(container) ? container.scrollWidth : container.clientWidth;
+            const containerHeight = isScrollY(container) ? container.scrollHeight : container.clientHeight;
+            x = Math.min(Math.max(0, x), containerWidth - targetRect.width);
+            y = Math.min(Math.max(0, y), containerHeight - targetRect.height);
         }
         setPositon({
             x,
@@ -864,7 +878,8 @@ const useDraggable = (target, options = {})=>{
     return [
         position.x,
         position.y,
-        !!pressedDelta
+        !!pressedDelta,
+        setPositon
     ];
 };
 

package/package.json

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