@reactuses/core 5.0.2 → 5.0.4

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);
 };
@@ -585,15 +577,10 @@ function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStora
         onError(err);
     }
     const type = guessSerializerType(defaultValue);
-    const serializer = React.useMemo(()=>{
-        var _options_serializer;
-        return (_options_serializer = options.serializer) != null ? _options_serializer : StorageSerializers[type];
-    }, [
-        options.serializer,
-        type
-    ]);
+    var _options_serializer;
+    const serializer = (_options_serializer = options.serializer) != null ? _options_serializer : StorageSerializers[type];
     const [state, setState] = React.useState(getInitialState$2(key, defaultValue, storage, serializer, onError));
-    React.useEffect(()=>{
+    useDeepCompareEffect(()=>{
         const data = effectStorageValue ? isFunction(effectStorageValue) ? effectStorageValue() : effectStorageValue : defaultValue;
         const getStoredValue = ()=>{
             try {
@@ -609,7 +596,6 @@ function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStora
             }
         };
         setState(getStoredValue());
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         key,
         serializer,
@@ -790,7 +776,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,6 +784,15 @@ const useDraggable = (target, options = {})=>{
         x: 0,
         y: 0
     });
+    useDeepCompareEffect(()=>{
+        var _options_initialValue;
+        setPositon((_options_initialValue = options.initialValue) != null ? _options_initialValue : {
+            x: 0,
+            y: 0
+        });
+    }, [
+        options.initialValue
+    ]);
     const [pressedDelta, setPressedDelta] = React.useState();
     const filterEvent = (e)=>{
         if (options.pointerTypes) {
@@ -814,6 +809,7 @@ const useDraggable = (target, options = {})=>{
         }
     };
     const start = (e)=>{
+        var _container_getBoundingClientRect;
         const element = target.current;
         if (!filterEvent(e) || !element) {
             return;
@@ -821,10 +817,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;
@@ -833,15 +831,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);
 };
@@ -578,15 +570,10 @@ function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStora
         onError(err);
     }
     const type = guessSerializerType(defaultValue);
-    const serializer = useMemo(()=>{
-        var _options_serializer;
-        return (_options_serializer = options.serializer) != null ? _options_serializer : StorageSerializers[type];
-    }, [
-        options.serializer,
-        type
-    ]);
+    var _options_serializer;
+    const serializer = (_options_serializer = options.serializer) != null ? _options_serializer : StorageSerializers[type];
     const [state, setState] = useState(getInitialState$2(key, defaultValue, storage, serializer, onError));
-    useEffect(()=>{
+    useDeepCompareEffect(()=>{
         const data = effectStorageValue ? isFunction(effectStorageValue) ? effectStorageValue() : effectStorageValue : defaultValue;
         const getStoredValue = ()=>{
             try {
@@ -602,7 +589,6 @@ function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStora
             }
         };
         setState(getStoredValue());
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         key,
         serializer,
@@ -783,7 +769,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,6 +777,15 @@ const useDraggable = (target, options = {})=>{
         x: 0,
         y: 0
     });
+    useDeepCompareEffect(()=>{
+        var _options_initialValue;
+        setPositon((_options_initialValue = options.initialValue) != null ? _options_initialValue : {
+            x: 0,
+            y: 0
+        });
+    }, [
+        options.initialValue
+    ]);
     const [pressedDelta, setPressedDelta] = useState();
     const filterEvent = (e)=>{
         if (options.pointerTypes) {
@@ -807,6 +802,7 @@ const useDraggable = (target, options = {})=>{
         }
     };
     const start = (e)=>{
+        var _container_getBoundingClientRect;
         const element = target.current;
         if (!filterEvent(e) || !element) {
             return;
@@ -814,10 +810,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;
@@ -826,15 +824,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.2",
+  "version": "5.0.4",
   "license": "Unlicense",
   "homepage": "https://www.reactuse.com/",
   "repository": {