@os-design/use-long-press 1.0.9 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/use-long-press",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -14,7 +14,15 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/__tests__",
+    "!**/*.stories.tsx",
+    "!**/*.stories.mdx",
+    "!**/*.example.tsx",
+    "!**/*.emotion.d.ts"
   ],
   "sideEffects": false,
   "scripts": {
@@ -29,10 +37,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/use-prevent-default-event": "^1.0.9"
+    "@os-design/use-prevent-default-event": "^1.0.10"
   },
   "peerDependencies": {
     "react": ">=18"
   },
-  "gitHead": "0e88d3afc41e36cee61222a039ef1aa4d08115b5"
+  "gitHead": "3d6b264027712ef81a75379fe3fde3c76c3079af"
 }

package/src/index.ts

@@ -0,0 +1,59 @@
+import usePreventDefaultEvent from '@os-design/use-prevent-default-event';
+import {
+  TouchEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+export interface LongPressHandlers {
+  onTouchStart: TouchEventHandler;
+  onTouchMove: () => void;
+  onTouchEnd: () => void;
+}
+
+const useLongPress = (
+  callback: TouchEventHandler,
+  ms = 500
+): LongPressHandlers => {
+  const callbackRef = useRef(callback);
+  const msRef = useRef(ms);
+  const timeout = useRef<NodeJS.Timeout>();
+  const [pressed, setPressed] = useState(false);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    msRef.current = ms;
+  }, [ms]);
+
+  const stopTimeout = useCallback(() => {
+    if (!timeout.current) return;
+    clearTimeout(timeout.current);
+  }, []);
+
+  // Stop the timeout if the component was unmounted
+  useEffect(() => () => stopTimeout(), [stopTimeout]);
+
+  // Disable the context menu
+  usePreventDefaultEvent(document, 'contextmenu', pressed);
+
+  const onTouchStart = useCallback<TouchEventHandler>((e) => {
+    setPressed(true);
+    timeout.current = setTimeout(() => callbackRef.current(e), msRef.current);
+  }, []);
+
+  const onTouchMove = useCallback(() => stopTimeout(), [stopTimeout]);
+
+  const onTouchEnd = useCallback(() => {
+    setPressed(false);
+    stopTimeout();
+  }, [stopTimeout]);
+
+  return { onTouchStart, onTouchMove, onTouchEnd };
+};
+
+export default useLongPress;