ahooks - npm Package Compare versions

Comparing version 3.4.0 to 3.4.1

es/createUseStorageState/index.d.ts

@@ -12,2 +12,2 @@ export interface IFuncUpdater<T> {
 }
-export declare function createUseStorageState(getStorage: () => Storage | undefined): <T>(key: string, options?: Options<T> | undefined) => readonly [T | undefined, (value?: T | IFuncUpdater<T> | undefined) => void];
+export declare function createUseStorageState(getStorage: () => Storage | undefined): <T>(key: string, options?: Options<T> | undefined) => readonly [T, (value: T | IFuncUpdater<T>) => void];

es/createUseStorageState/index.js

@@ -89,10 +89,9 @@ var __read = this && this.__read || function (o, n) {
     var updateState = function updateState(value) {
-      if (isUndef(value)) {
-        setState(undefined);
+      var currentState = isFunction(value) ? value(state) : value;
+      setState(currentState);
+
+      if (isUndef(currentState)) {
         storage === null || storage === void 0 ? void 0 : storage.removeItem(key);
-      } else if (isFunction(value)) {
-        var currentState = value(state);
-
+      } else {
         try {
-          setState(currentState);
           storage === null || storage === void 0 ? void 0 : storage.setItem(key, serializer(currentState));
@@ -102,9 +101,2 @@ } catch (e) {
         }
-      } else {
-        try {
-          setState(value);
-          storage === null || storage === void 0 ? void 0 : storage.setItem(key, serializer(value));
-        } catch (e) {
-          console.error(e);
-        }
       }
@@ -111,0 +103,0 @@ };

es/useInterval/index.d.ts

 declare function useInterval(fn: () => void, delay: number | undefined, options?: {
     immediate?: boolean;
-}): void;
+}): () => void;
 export default useInterval;

es/useInterval/index.js

@@ -1,2 +0,2 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import useLatest from '../useLatest';
@@ -8,6 +8,5 @@ import { isNumber } from '../utils';
   var fnRef = useLatest(fn);
+  var timerRef = useRef();
   useEffect(function () {
-    if (!isNumber(delay) || delay < 0) {
-      return;
-    }
+    if (!isNumber(delay) || delay < 0) return;
 
@@ -18,11 +17,19 @@ if (immediate) {
 
-    var timer = setInterval(function () {
+    timerRef.current = setInterval(function () {
       fnRef.current();
     }, delay);
     return function () {
-      clearInterval(timer);
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
     };
   }, [delay]);
+  var clear = useCallback(function () {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+  }, []);
+  return clear;
 }
 
 export default useInterval;

es/useLocalStorageState/index.d.ts

@@ -1,2 +0,2 @@
-declare const useLocalStorageState: <T>(key: string, options?: import("../createUseStorageState").Options<T> | undefined) => readonly [T | undefined, (value?: T | import("../createUseStorageState").IFuncUpdater<T> | undefined) => void];
+declare const useLocalStorageState: <T>(key: string, options?: import("../createUseStorageState").Options<T> | undefined) => readonly [T, (value: T | import("../createUseStorageState").IFuncUpdater<T>) => void];
 export default useLocalStorageState;

es/useLongPress/index.d.ts

@@ -5,6 +5,10 @@ import type { BasicTarget } from '../utils/domTarget';
     delay?: number;
+    moveThreshold?: {
+        x?: number;
+        y?: number;
+    };
     onClick?: (event: EventType) => void;
     onLongPressEnd?: (event: EventType) => void;
 }
-declare function useLongPress(onLongPress: (event: EventType) => void, target: BasicTarget, { delay, onClick, onLongPressEnd }?: Options): void;
+declare function useLongPress(onLongPress: (event: EventType) => void, target: BasicTarget, { delay, moveThreshold, onClick, onLongPressEnd }?: Options): void;
 export default useLongPress;

es/useLongPress/index.js

@@ -13,2 +13,3 @@ import { useRef } from 'react';
       delay = _c === void 0 ? 300 : _c,
+      moveThreshold = _b.moveThreshold,
       onClick = _b.onClick,
@@ -22,2 +23,7 @@ onLongPressEnd = _b.onLongPressEnd;
   var isTriggeredRef = useRef(false);
+  var pervPositionRef = useRef({
+    x: 0,
+    y: 0
+  });
+  var hasMoveThreshold = !!((moveThreshold === null || moveThreshold === void 0 ? void 0 : moveThreshold.x) && moveThreshold.x > 0 || (moveThreshold === null || moveThreshold === void 0 ? void 0 : moveThreshold.y) && moveThreshold.y > 0);
   useEffectWithTarget(function () {
@@ -30,3 +36,44 @@ var targetElement = getTargetElement(target);
 
+    var overThreshold = function overThreshold(event) {
+      var _a = getClientPosition(event),
+          clientX = _a.clientX,
+          clientY = _a.clientY;
+
+      var offsetX = Math.abs(clientX - pervPositionRef.current.x);
+      var offsetY = Math.abs(clientY - pervPositionRef.current.y);
+      return !!((moveThreshold === null || moveThreshold === void 0 ? void 0 : moveThreshold.x) && offsetX > moveThreshold.x || (moveThreshold === null || moveThreshold === void 0 ? void 0 : moveThreshold.y) && offsetY > moveThreshold.y);
+    };
+
+    function getClientPosition(event) {
+      if (event instanceof TouchEvent) {
+        return {
+          clientX: event.touches[0].clientX,
+          clientY: event.touches[0].clientY
+        };
+      }
+
+      if (event instanceof MouseEvent) {
+        return {
+          clientX: event.clientX,
+          clientY: event.clientY
+        };
+      }
+
+      console.warn('Unsupported event type');
+      return {
+        clientX: 0,
+        clientY: 0
+      };
+    }
+
     var onStart = function onStart(event) {
+      if (hasMoveThreshold) {
+        var _a = getClientPosition(event),
+            clientX = _a.clientX,
+            clientY = _a.clientY;
+
+        pervPositionRef.current.x = clientX;
+        pervPositionRef.current.y = clientY;
+      }
+
       timerRef.current = setTimeout(function () {
@@ -38,2 +85,9 @@ onLongPressRef.current(event);
 
+    var onMove = function onMove(event) {
+      if (timerRef.current && overThreshold(event)) {
+        clearInterval(timerRef.current);
+        timerRef.current = undefined;
+      }
+    };
+
     var onEnd = function onEnd(event, shouldTriggerClick) {
@@ -69,5 +123,7 @@ var _a;
       targetElement.addEventListener('mouseleave', onEnd);
+      if (hasMoveThreshold) targetElement.addEventListener('mousemove', onMove);
     } else {
       targetElement.addEventListener('touchstart', onStart);
       targetElement.addEventListener('touchend', onEndWithClick);
+      if (hasMoveThreshold) targetElement.addEventListener('touchmove', onMove);
     }
@@ -85,5 +141,7 @@
         targetElement.removeEventListener('mouseleave', onEnd);
+        if (hasMoveThreshold) targetElement.removeEventListener('mousemove', onMove);
       } else {
         targetElement.removeEventListener('touchstart', onStart);
         targetElement.removeEventListener('touchend', onEndWithClick);
+        if (hasMoveThreshold) targetElement.removeEventListener('touchmove', onMove);
       }
@@ -90,0 +148,0 @@ };

es/useRafInterval/index.d.ts

 declare function useRafInterval(fn: () => void, delay: number | undefined, options?: {
     immediate?: boolean;
-}): void;
+}): () => void;
 export default useRafInterval;

es/useRafInterval/index.js

@@ -1,2 +0,2 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import useLatest from '../useLatest';
@@ -51,2 +51,3 @@ import { isNumber } from '../utils';
   var fnRef = useLatest(fn);
+  var timerRef = useRef();
   useEffect(function () {
@@ -59,11 +60,19 @@ if (!isNumber(delay) || delay < 0) return;
 
-    var timer = setRafInterval(function () {
+    timerRef.current = setRafInterval(function () {
       fnRef.current();
     }, delay);
     return function () {
-      clearRafInterval(timer);
+      if (timerRef.current) {
+        clearRafInterval(timerRef.current);
+      }
     };
   }, [delay]);
+  var clear = useCallback(function () {
+    if (timerRef.current) {
+      clearRafInterval(timerRef.current);
+    }
+  }, []);
+  return clear;
 }
 
 export default useRafInterval;

es/useRafTimeout/index.d.ts

@@ -1,2 +0,2 @@
-declare function useRafTimeout(fn: () => void, delay: number | undefined): void;
+declare function useRafTimeout(fn: () => void, delay: number | undefined): () => void;
 export default useRafTimeout;

es/useRafTimeout/index.js

@@ -1,2 +0,2 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import useLatest from '../useLatest';
@@ -49,13 +49,22 @@ import { isNumber } from '../utils';
   var fnRef = useLatest(fn);
+  var timerRef = useRef();
   useEffect(function () {
     if (!isNumber(delay) || delay < 0) return;
-    var timer = setRafTimeout(function () {
+    timerRef.current = setRafTimeout(function () {
       fnRef.current();
     }, delay);
     return function () {
-      clearRafTimeout(timer);
+      if (timerRef.current) {
+        clearRafTimeout(timerRef.current);
+      }
     };
   }, [delay]);
+  var clear = useCallback(function () {
+    if (timerRef.current) {
+      clearRafTimeout(timerRef.current);
+    }
+  }, []);
+  return clear;
 }
 
 export default useRafTimeout;

es/useSessionStorageState/index.d.ts

@@ -1,2 +0,2 @@
-declare const useSessionStorageState: <T>(key: string, options?: import("../createUseStorageState").Options<T> | undefined) => readonly [T | undefined, (value?: T | import("../createUseStorageState").IFuncUpdater<T> | undefined) => void];
+declare const useSessionStorageState: <T>(key: string, options?: import("../createUseStorageState").Options<T> | undefined) => readonly [T, (value: T | import("../createUseStorageState").IFuncUpdater<T>) => void];
 export default useSessionStorageState;

es/useTimeout/index.d.ts

@@ -1,2 +0,2 @@
-declare function useTimeout(fn: () => void, delay: number | undefined): void;
+declare function useTimeout(fn: () => void, delay: number | undefined): () => void;
 export default useTimeout;

es/useTimeout/index.js

@@ -1,2 +0,2 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import useLatest from '../useLatest';
@@ -7,16 +7,22 @@ import { isNumber } from '../utils';
   var fnRef = useLatest(fn);
+  var timerRef = useRef();
   useEffect(function () {
-    if (!isNumber(delay) || delay < 0) {
-      return;
-    }
-
-    var timer = setTimeout(function () {
+    if (!isNumber(delay) || delay < 0) return;
+    timerRef.current = setTimeout(function () {
       fnRef.current();
     }, delay);
     return function () {
-      clearTimeout(timer);
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
     };
   }, [delay]);
+  var clear = useCallback(function () {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+  }, []);
+  return clear;
 }
 
 export default useTimeout;

lib/createUseStorageState/index.d.ts

@@ -12,2 +12,2 @@ export interface IFuncUpdater<T> {
 }
-export declare function createUseStorageState(getStorage: () => Storage | undefined): <T>(key: string, options?: Options<T> | undefined) => readonly [T | undefined, (value?: T | IFuncUpdater<T> | undefined) => void];
+export declare function createUseStorageState(getStorage: () => Storage | undefined): <T>(key: string, options?: Options<T> | undefined) => readonly [T, (value: T | IFuncUpdater<T>) => void];

lib/createUseStorageState/index.js

@@ -105,10 +105,9 @@ "use strict";
     var updateState = function updateState(value) {
-      if (utils_1.isUndef(value)) {
-        setState(undefined);
+      var currentState = utils_1.isFunction(value) ? value(state) : value;
+      setState(currentState);
+
+      if (utils_1.isUndef(currentState)) {
         storage === null || storage === void 0 ? void 0 : storage.removeItem(key);
-      } else if (utils_1.isFunction(value)) {
-        var currentState = value(state);
-
+      } else {
         try {
-          setState(currentState);
           storage === null || storage === void 0 ? void 0 : storage.setItem(key, serializer(currentState));
@@ -118,9 +117,2 @@ } catch (e) {
         }
-      } else {
-        try {
-          setState(value);
-          storage === null || storage === void 0 ? void 0 : storage.setItem(key, serializer(value));
-        } catch (e) {
-          console.error(e);
-        }
       }
@@ -127,0 +119,0 @@ };

lib/useInterval/index.d.ts

 declare function useInterval(fn: () => void, delay: number | undefined, options?: {
     immediate?: boolean;
-}): void;
+}): () => void;
 export default useInterval;

lib/useInterval/index.js

@@ -22,6 +22,5 @@ "use strict";
   var fnRef = useLatest_1["default"](fn);
+  var timerRef = react_1.useRef();
   react_1.useEffect(function () {
-    if (!utils_1.isNumber(delay) || delay < 0) {
-      return;
-    }
+    if (!utils_1.isNumber(delay) || delay < 0) return;
 
@@ -32,11 +31,19 @@ if (immediate) {
 
-    var timer = setInterval(function () {
+    timerRef.current = setInterval(function () {
       fnRef.current();
     }, delay);
     return function () {
-      clearInterval(timer);
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
     };
   }, [delay]);
+  var clear = react_1.useCallback(function () {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+  }, []);
+  return clear;
 }
 
 exports["default"] = useInterval;

lib/useLocalStorageState/index.d.ts

@@ -1,2 +0,2 @@
-declare const useLocalStorageState: <T>(key: string, options?: import("../createUseStorageState").Options<T> | undefined) => readonly [T | undefined, (value?: T | import("../createUseStorageState").IFuncUpdater<T> | undefined) => void];
+declare const useLocalStorageState: <T>(key: string, options?: import("../createUseStorageState").Options<T> | undefined) => readonly [T, (value: T | import("../createUseStorageState").IFuncUpdater<T>) => void];
 export default useLocalStorageState;

lib/useLongPress/index.d.ts

@@ -5,6 +5,10 @@ import type { BasicTarget } from '../utils/domTarget';
     delay?: number;
+    moveThreshold?: {
+        x?: number;
+        y?: number;
+    };
     onClick?: (event: EventType) => void;
     onLongPressEnd?: (event: EventType) => void;
 }
-declare function useLongPress(onLongPress: (event: EventType) => void, target: BasicTarget, { delay, onClick, onLongPressEnd }?: Options): void;
+declare function useLongPress(onLongPress: (event: EventType) => void, target: BasicTarget, { delay, moveThreshold, onClick, onLongPressEnd }?: Options): void;
 export default useLongPress;

lib/useLongPress/index.js

@@ -30,2 +30,3 @@ "use strict";
       delay = _c === void 0 ? 300 : _c,
+      moveThreshold = _b.moveThreshold,
       onClick = _b.onClick,
@@ -39,2 +40,7 @@ onLongPressEnd = _b.onLongPressEnd;
   var isTriggeredRef = react_1.useRef(false);
+  var pervPositionRef = react_1.useRef({
+    x: 0,
+    y: 0
+  });
+  var hasMoveThreshold = !!((moveThreshold === null || moveThreshold === void 0 ? void 0 : moveThreshold.x) && moveThreshold.x > 0 || (moveThreshold === null || moveThreshold === void 0 ? void 0 : moveThreshold.y) && moveThreshold.y > 0);
   useEffectWithTarget_1["default"](function () {
@@ -47,3 +53,44 @@ var targetElement = domTarget_1.getTargetElement(target);
 
+    var overThreshold = function overThreshold(event) {
+      var _a = getClientPosition(event),
+          clientX = _a.clientX,
+          clientY = _a.clientY;
+
+      var offsetX = Math.abs(clientX - pervPositionRef.current.x);
+      var offsetY = Math.abs(clientY - pervPositionRef.current.y);
+      return !!((moveThreshold === null || moveThreshold === void 0 ? void 0 : moveThreshold.x) && offsetX > moveThreshold.x || (moveThreshold === null || moveThreshold === void 0 ? void 0 : moveThreshold.y) && offsetY > moveThreshold.y);
+    };
+
+    function getClientPosition(event) {
+      if (event instanceof TouchEvent) {
+        return {
+          clientX: event.touches[0].clientX,
+          clientY: event.touches[0].clientY
+        };
+      }
+
+      if (event instanceof MouseEvent) {
+        return {
+          clientX: event.clientX,
+          clientY: event.clientY
+        };
+      }
+
+      console.warn('Unsupported event type');
+      return {
+        clientX: 0,
+        clientY: 0
+      };
+    }
+
     var onStart = function onStart(event) {
+      if (hasMoveThreshold) {
+        var _a = getClientPosition(event),
+            clientX = _a.clientX,
+            clientY = _a.clientY;
+
+        pervPositionRef.current.x = clientX;
+        pervPositionRef.current.y = clientY;
+      }
+
       timerRef.current = setTimeout(function () {
@@ -55,2 +102,9 @@ onLongPressRef.current(event);
 
+    var onMove = function onMove(event) {
+      if (timerRef.current && overThreshold(event)) {
+        clearInterval(timerRef.current);
+        timerRef.current = undefined;
+      }
+    };
+
     var onEnd = function onEnd(event, shouldTriggerClick) {
@@ -86,5 +140,7 @@ var _a;
       targetElement.addEventListener('mouseleave', onEnd);
+      if (hasMoveThreshold) targetElement.addEventListener('mousemove', onMove);
     } else {
       targetElement.addEventListener('touchstart', onStart);
       targetElement.addEventListener('touchend', onEndWithClick);
+      if (hasMoveThreshold) targetElement.addEventListener('touchmove', onMove);
     }
@@ -102,5 +158,7 @@
         targetElement.removeEventListener('mouseleave', onEnd);
+        if (hasMoveThreshold) targetElement.removeEventListener('mousemove', onMove);
       } else {
         targetElement.removeEventListener('touchstart', onStart);
         targetElement.removeEventListener('touchend', onEndWithClick);
+        if (hasMoveThreshold) targetElement.removeEventListener('touchmove', onMove);
       }
@@ -107,0 +165,0 @@ };

lib/useRafInterval/index.d.ts

 declare function useRafInterval(fn: () => void, delay: number | undefined, options?: {
     immediate?: boolean;
-}): void;
+}): () => void;
 export default useRafInterval;

lib/useRafInterval/index.js

@@ -65,2 +65,3 @@ "use strict";
   var fnRef = useLatest_1["default"](fn);
+  var timerRef = react_1.useRef();
   react_1.useEffect(function () {
@@ -73,11 +74,19 @@ if (!utils_1.isNumber(delay) || delay < 0) return;
 
-    var timer = setRafInterval(function () {
+    timerRef.current = setRafInterval(function () {
       fnRef.current();
     }, delay);
     return function () {
-      clearRafInterval(timer);
+      if (timerRef.current) {
+        clearRafInterval(timerRef.current);
+      }
     };
   }, [delay]);
+  var clear = react_1.useCallback(function () {
+    if (timerRef.current) {
+      clearRafInterval(timerRef.current);
+    }
+  }, []);
+  return clear;
 }
 
 exports["default"] = useRafInterval;

lib/useRafTimeout/index.d.ts

@@ -1,2 +0,2 @@
-declare function useRafTimeout(fn: () => void, delay: number | undefined): void;
+declare function useRafTimeout(fn: () => void, delay: number | undefined): () => void;
 export default useRafTimeout;

lib/useRafTimeout/index.js

@@ -63,13 +63,22 @@ "use strict";
   var fnRef = useLatest_1["default"](fn);
+  var timerRef = react_1.useRef();
   react_1.useEffect(function () {
     if (!utils_1.isNumber(delay) || delay < 0) return;
-    var timer = setRafTimeout(function () {
+    timerRef.current = setRafTimeout(function () {
       fnRef.current();
     }, delay);
     return function () {
-      clearRafTimeout(timer);
+      if (timerRef.current) {
+        clearRafTimeout(timerRef.current);
+      }
     };
   }, [delay]);
+  var clear = react_1.useCallback(function () {
+    if (timerRef.current) {
+      clearRafTimeout(timerRef.current);
+    }
+  }, []);
+  return clear;
 }
 
 exports["default"] = useRafTimeout;

lib/useSessionStorageState/index.d.ts

@@ -1,2 +0,2 @@
-declare const useSessionStorageState: <T>(key: string, options?: import("../createUseStorageState").Options<T> | undefined) => readonly [T | undefined, (value?: T | import("../createUseStorageState").IFuncUpdater<T> | undefined) => void];
+declare const useSessionStorageState: <T>(key: string, options?: import("../createUseStorageState").Options<T> | undefined) => readonly [T, (value: T | import("../createUseStorageState").IFuncUpdater<T>) => void];
 export default useSessionStorageState;

lib/useTimeout/index.d.ts

@@ -1,2 +0,2 @@
-declare function useTimeout(fn: () => void, delay: number | undefined): void;
+declare function useTimeout(fn: () => void, delay: number | undefined): () => void;
 export default useTimeout;

lib/useTimeout/index.js

@@ -21,16 +21,22 @@ "use strict";
   var fnRef = useLatest_1["default"](fn);
+  var timerRef = react_1.useRef();
   react_1.useEffect(function () {
-    if (!utils_1.isNumber(delay) || delay < 0) {
-      return;
-    }
-
-    var timer = setTimeout(function () {
+    if (!utils_1.isNumber(delay) || delay < 0) return;
+    timerRef.current = setTimeout(function () {
       fnRef.current();
     }, delay);
     return function () {
-      clearTimeout(timer);
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
     };
   }, [delay]);
+  var clear = react_1.useCallback(function () {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+  }, []);
+  return clear;
 }
 
 exports["default"] = useTimeout;

package.json

 {
   "name": "ahooks",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "description": "react hooks library",
@@ -63,3 +63,3 @@ "keywords": [
   "license": "MIT",
-  "gitHead": "bcf80cfb0ba43158d8d1155b8723b01ed367143c"
+  "gitHead": "051a2ad3f159337d222b6c2657548d9a7e09415f"
 }

No alert changes

Improved metrics

Total package byte prevSize

668864

increased by1.04%

Lines of code

16644

increased by0.95%

No dependency changes