🚸 (bubble) Add swipe gesture to close preview…

Closes #1388
baptisteArno · Mar 26, 2024 · 1f158e7 · 1f158e7
1 parent 798e94a
commit 1f158e7
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 3 deletions.
diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

diff --git a/packages/embeds/js/src/features/bubble/components/PreviewMessage.tsx b/packages/embeds/js/src/features/bubble/components/PreviewMessage.tsx
@@ -20,6 +20,27 @@ const defaultTextColor = '#303235'
 export const PreviewMessage = (props: PreviewMessageProps) => {
   const [isPreviewMessageHovered, setIsPreviewMessageHovered] =
     createSignal(false)
+  const [touchStartPosition, setTouchStartPosition] = createSignal({
+    x: 0,
+    y: 0,
+  })
+
+  const handleTouchStart = (e: TouchEvent) => {
+    setTouchStartPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY })
+  }
+
+  const handleTouchEnd = (e: TouchEvent) => {
+    const x = e.changedTouches[0].clientX
+    const y = e.changedTouches[0].clientY
+
+    if (
+      Math.abs(x - touchStartPosition().x) > 10 ||
+      y - touchStartPosition().y > 10
+    )
+      props.onCloseClick()
+
+    setTouchStartPosition({ x: 0, y: 0 })
+  }
 
   return (
     <div
@@ -38,6 +59,8 @@ export const PreviewMessage = (props: PreviewMessageProps) => {
       }}
       onMouseEnter={() => setIsPreviewMessageHovered(true)}
       onMouseLeave={() => setIsPreviewMessageHovered(false)}
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
     >
       <CloseButton
         isHovered={isPreviewMessageHovered()}

diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",