add image on zoom

CivicDataLab · Feb 8, 2024 · b8ac803 · b8ac803
1 parent fcaf2be
commit b8ac803
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/opub-ui/assets/base.css b/packages/opub-ui/assets/base.css
@@ -1,80 +1,81 @@
 @import 'leaflet/dist/leaflet.css';
+@import 'react-medium-image-zoom/dist/styles.css';
 
 body {
-	color: var(--text-default);
-	line-height: 150%;
-	box-sizing: border-box;
-	font-family: var(--primary-font);
-	--outline: 2px solid var(--text-interactive);
-	--outline-offset: 2px;
+  color: var(--text-default);
+  line-height: 150%;
+  box-sizing: border-box;
+  font-family: var(--primary-font);
+  --outline: 2px solid var(--text-interactive);
+  --outline-offset: 2px;
 }
 
 *,
 ::after,
 ::before {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 *:focus {
-	outline: var(--outline);
-	outline-offset: var(--outline-offset);
+  outline: var(--outline);
+  outline-offset: var(--outline-offset);
 }
 
 *:focus:not(:focus-visible) {
-	outline: none;
+  outline: none;
 }
 
 *:focus-visible {
-	outline: var(--outline);
-	outline-offset: var(--outline-offset);
+  outline: var(--outline);
+  outline-offset: var(--outline-offset);
 }
 
 .sr-only:not(:where(:focus, :active, :focus-within)) {
-	clip: rect(0 0 0 0);
-	clip-path: inset(50%);
-	height: 1px;
-	overflow: hidden;
-	position: absolute;
-	white-space: nowrap;
-	width: 1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }
 
 [data-radix-popper-content-wrapper] {
-	z-index: var(--z-max, 999999) !important;
+  z-index: var(--z-max, 999999) !important;
 }
 
 .text-clamp {
-	line-height: 156%;
-	overflow: hidden;
-	-webkit-line-clamp: 1;
-	line-clamp: 3;
-	-webkit-box-orient: vertical;
-	display: -webkit-box;
+  line-height: 156%;
+  overflow: hidden;
+  -webkit-line-clamp: 1;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
 }
 
 .leaflet-container {
-	width: 100%;
-	height: 100%;
-	font-family: var(--primary-font);
+  width: 100%;
+  height: 100%;
+  font-family: var(--primary-font);
 }
 
 .opub-leaflet-popup .leaflet-popup-content-wrapper {
-	border-radius: var(--border-radius-5);
-	padding: var(--space-1) var(--space-4);
-	background-color: var(--background-solid-dark);
-	color: var(--text-onbg-default);
+  border-radius: var(--border-radius-5);
+  padding: var(--space-1) var(--space-4);
+  background-color: var(--background-solid-dark);
+  color: var(--text-onbg-default);
 }
 
 .opub-leaflet-popup .leaflet-popup-tip-container {
-	left: 30%;
+  left: 30%;
 }
 
 .opub-leaflet-popup .leaflet-popup-tip {
-	background-color: var(--background-solid-dark);
+  background-color: var(--background-solid-dark);
 }
 
 .opub-leaflet-popup .leaflet-popup-content {
-	margin: 0;
-	font-weight: 500;
-	font-size: var(--font-size-75);
+  margin: 0;
+  font-weight: 500;
+  font-size: var(--font-size-75);
 }
diff --git a/packages/opub-ui/package.json b/packages/opub-ui/package.json
@@ -104,6 +104,7 @@
     "react-hook-form": "^7.49.3",
     "react-leaflet": "^4.2.1",
     "react-leaflet-fullscreen": "^4.1.1",
+    "react-medium-image-zoom": "^5.1.10",
     "react-stately": "^3.21.0",
     "satori": "^0.10.11",
     "screenfull": "^6.0.2",

diff --git a/packages/opub-ui/src/components/ShareDialog/ShareDialog.tsx b/packages/opub-ui/src/components/ShareDialog/ShareDialog.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { IconShare } from '@tabler/icons-react';
+import { Controlled as Zoom } from 'react-medium-image-zoom';
 
 import { cn } from '../../utils';
 import { Button } from '../Button';
@@ -59,6 +60,9 @@ const ShareDialog = React.forwardRef(
     ref?: React.Ref<HTMLDivElement>
   ) => {
     const [isOpen, setIsOpen] = React.useState(false);
+    const [lockDialog, setLockDialog] = React.useState(false);
+    const [zoom, setZoom] = React.useState(false);
+
     const { copyToClipboard, shareImage, apiSupport } = useScreenshot();
     const isSupported = apiSupport();
 
@@ -93,7 +97,17 @@ const ShareDialog = React.forwardRef(
 
     return (
       <div ref={ref} className={cn(className)}>
-        <Dialog open={isOpen} onOpenChange={handleOpen}>
+        <Dialog
+          open={isOpen}
+          onOpenChange={(e) => {
+            if (lockDialog) {
+              setZoom(false);
+              setLockDialog(false);
+            } else {
+              handleOpen(e);
+            }
+          }}
+        >
           <Dialog.Trigger>
             <Button
               icon={
@@ -114,14 +128,24 @@ const ShareDialog = React.forwardRef(
           <Dialog.Content title={title} className="z-max mt-[-20px]">
             <Divider className="mb-2" />
             {image && !loading ? (
-              <img
-                src={image}
-                alt={alt}
-                width={768}
-                height={props?.height || 384}
-                {...props}
-                className="h-full w-full overflow-auto object-contain"
-              />
+              <Zoom
+                zoomMargin={40}
+                isZoomed={zoom}
+                onZoomChange={(e) => {
+                  setZoom(e);
+                  setLockDialog(e);
+                }}
+                classDialog="[&_img]:select-none"
+              >
+                <img
+                  src={image}
+                  alt={alt}
+                  width={768}
+                  height={props?.height || 384}
+                  {...props}
+                  className="h-full w-full  overflow-auto object-contain"
+                />
+              </Zoom>
             ) : (
               <div
                 style={{