From ddc68dea9d382dbb6caa8d5b3864c25a087ab8f1 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 2 Dec 2024 08:15:32 -0600
Subject: [PATCH] long press package and hook

---
 web/package-lock.json      | 10 +++++++
 web/package.json           |  1 +
 web/src/hooks/use-press.ts | 54 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 65 insertions(+)
 create mode 100644 web/src/hooks/use-press.ts

diff --git a/web/package-lock.json b/web/package-lock.json
index a0971c361..7ce6345af 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -72,6 +72,7 @@
         "tailwind-merge": "^2.4.0",
         "tailwind-scrollbar": "^3.1.0",
         "tailwindcss-animate": "^1.0.7",
+        "use-long-press": "^3.2.0",
         "vaul": "^0.9.1",
         "vite-plugin-monaco-editor": "^1.1.0",
         "zod": "^3.23.8"
@@ -8709,6 +8710,15 @@
         "scheduler": ">=0.19.0"
       }
     },
+    "node_modules/use-long-press": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/use-long-press/-/use-long-press-3.2.0.tgz",
+      "integrity": "sha512-uq5o2qFR1VRjHn8Of7Fl344/AGvgk7C5Mcb4aSb1ZRVp6PkgdXJJLdRrlSTJQVkkQcDuqFbFc3mDX4COg7mRTA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/use-sidecar": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
diff --git a/web/package.json b/web/package.json
index 73b2ed309..d76e6ad10 100644
--- a/web/package.json
+++ b/web/package.json
@@ -78,6 +78,7 @@
     "tailwind-merge": "^2.4.0",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss-animate": "^1.0.7",
+    "use-long-press": "^3.2.0",
     "vaul": "^0.9.1",
     "vite-plugin-monaco-editor": "^1.1.0",
     "zod": "^3.23.8"
diff --git a/web/src/hooks/use-press.ts b/web/src/hooks/use-press.ts
new file mode 100644
index 000000000..5115541ec
--- /dev/null
+++ b/web/src/hooks/use-press.ts
@@ -0,0 +1,54 @@
+// https://gist.github.com/cpojer/641bf305e6185006ea453e7631b80f95
+
+import { useCallback, useState } from "react";
+import {
+  LongPressCallbackMeta,
+  LongPressReactEvents,
+  useLongPress,
+} from "use-long-press";
+
+export default function usePress(
+  options: Omit<Parameters<typeof useLongPress>[1], "onCancel" | "onStart"> & {
+    onLongPress: NonNullable<Parameters<typeof useLongPress>[0]>;
+    onPress: () => void;
+  },
+) {
+  const { onLongPress, onPress, ...actualOptions } = options;
+  const [hasLongPress, setHasLongPress] = useState(false);
+
+  const onCancel = useCallback(() => {
+    if (hasLongPress) {
+      setHasLongPress(false);
+    }
+  }, [hasLongPress]);
+
+  const bind = useLongPress(
+    useCallback(
+      (
+        event: LongPressReactEvents<Element>,
+        meta: LongPressCallbackMeta<unknown>,
+      ) => {
+        setHasLongPress(true);
+        onLongPress(event, meta);
+      },
+      [onLongPress],
+    ),
+    {
+      ...actualOptions,
+      onCancel,
+      onStart: onCancel,
+    },
+  );
+
+  return useCallback(
+    () => ({
+      ...bind(),
+      onClick: () => {
+        if (!hasLongPress) {
+          onPress();
+        }
+      },
+    }),
+    [bind, hasLongPress, onPress],
+  );
+}