feat: disable medium-zoom for mobile layout

Crossbell-Box · Apr 17, 2023 · a6519df · a6519df
1 parent 4e005d5
commit a6519df
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 20 deletions.
diff --git a/src/components/dashboard/PagesManager.tsx b/src/components/dashboard/PagesManager.tsx
@@ -19,7 +19,6 @@ import { Tooltip } from "../ui/Tooltip"
 import { Trans, useTranslation } from "next-i18next"
 import { readFiles } from "~/lib/read-files"
 import { PagesManagerMenu } from "./PagesManagerMenu"
-import { useMobileLayout } from "~/hooks/useMobileLayout"
 
 export const PagesManager: React.FC<{
   isPost: boolean
@@ -38,8 +37,6 @@ export const PagesManager: React.FC<{
   const { t } = useTranslation(["dashboard", "site"])
   const date = useDate()
 
-  const isMobileLayout = useMobileLayout()
-
   const pages = useGetPagesBySite({
     type: isPost ? "post" : "page",
     site: subdomain!,

diff --git a/src/components/ui/Image.tsx b/src/components/ui/Image.tsx
@@ -46,23 +46,26 @@ export const Image: React.FC<TImageProps> = ({
   useEffect(() => {
     const $image = imageRefInternal.current
     if (!$image) return
-    if (isMobileLayout) {
-      const clickHandler = () => {
-        window.open(getSrc(), "_blank")
-      }
-      $image.addEventListener("click", clickHandler)
-      return () => {
-        $image.removeEventListener("click", clickHandler)
-      }
-    }
     if (zoom) {
-      import("medium-zoom").then(({ default: mediumZoom }) => {
-        mediumZoom($image, {
-          margin: 10,
-          background: "rgb(var(--tw-colors-i-white))",
-          scrollOffset: 0,
-        })
-      })
+      if (isMobileLayout !== undefined) {
+        if (isMobileLayout) {
+          const clickHandler = () => {
+            window.open(getSrc(), "_blank")
+          }
+          $image.addEventListener("click", clickHandler)
+          return () => {
+            $image.removeEventListener("click", clickHandler)
+          }
+        } else {
+          import("medium-zoom").then(({ default: mediumZoom }) => {
+            mediumZoom($image, {
+              margin: 10,
+              background: "rgb(var(--tw-colors-i-white))",
+              scrollOffset: 0,
+            })
+          })
+        }
+      }
     }
   }, [zoom, isMobileLayout])
 

diff --git a/src/hooks/useMobileLayout.ts b/src/hooks/useMobileLayout.ts
@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from "react"
 const mobileWidth = 1024
 
 export function useMobileLayout() {
-  const [isMobile, setIsMobile] = useState(false)
+  const [isMobile, setIsMobile] = useState<boolean>()
 
   const onResize = useCallback(() => {
     setIsMobile(window.innerWidth < mobileWidth)