Fix: inability to drag gallery on touch devices (#14)

andrewrubin · web-flow · commit a12e2b64a444 · 2023-11-14T14:54:12.000-08:00
* fix(docs): add GalleryPaginationItem to table of contents [skip-ci]

* fix(Gallery): add touch-action CSS when draggable

* style(demo): manage overflow

* 3.0.2
diff --git a/index.html b/index.html
@@ -4,7 +4,20 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>@wethegit/react-gallery</title>
+    <style>
+      body {
+        overscroll-behavior: none;
+      }
+
+      .gallery {
+        overflow: hidden;
+      }
+
+      img {
+        max-width: 100%;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wethegit/react-gallery",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "A customizable, accessible gallery component for React projects.",
   "files": [
     "dist"
diff --git a/src/lib/components/gallery-context.jsx b/src/lib/components/gallery-context.jsx
@@ -118,7 +118,7 @@ export const Gallery = ({
   return (
     <GalleryContext.Provider value={value}>
       <div
-        className={classnames(["gallery", className])}
+        className={classnames(["gallery", draggable && "gallery--draggable", className])}
         style={{ "--touch-offset": touchState.xOffset }}
       >
         {children}
diff --git a/src/lib/components/gallery.css b/src/lib/components/gallery.css
@@ -22,6 +22,10 @@
   width: 100%;
 }
 
+.gallery--draggable {
+  touch-action: pan-y;
+}
+
 .gallery__main {
   display: grid;
   grid-template-areas: "item";

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@wethegit/react-gallery",`
`3`		`- "version": "3.0.1",`
	`3`	`+ "version": "3.0.2",`
`4`	`4`	`"description": "A customizable, accessible gallery component for React projects.",`
`5`	`5`	`"files": [`
`6`	`6`	`"dist"`
Original file line number	Diff line number	Diff line change
`@@ -118,7 +118,7 @@ export const Gallery = ({`
`118`	`118`	`return (`
`119`	`119`	`<GalleryContext.Provider value={value}>`
`120`	`120`	`<div`
`121`		`- className={classnames(["gallery", className])}`
	`121`	`+ className={classnames(["gallery", draggable && "gallery--draggable", className])}`
`122`	`122`	`style={{ "--touch-offset": touchState.xOffset }}`
`123`	`123`	`>`
`124`	`124`	`{children}`