feat: fix ts

Author: mbret

packages/react-reader/src/common/useMeasure.ts

@@ -0,0 +1,51 @@
+import { useMemo, useState } from "react"
+import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect"
+
+export type UseMeasureRect = Pick<
+  DOMRectReadOnly,
+  "x" | "y" | "top" | "left" | "right" | "bottom" | "height" | "width"
+>
+export type UseMeasureRef<E extends Element = Element> = (element: E) => void
+export type UseMeasureResult<E extends Element = Element> = [
+  UseMeasureRef<E>,
+  UseMeasureRect,
+  E | null,
+]
+
+const defaultState: UseMeasureRect = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+}
+
+export function useMeasure<E extends Element = Element>(): UseMeasureResult<E> {
+  const [element, setElement] = useState<E | null>(null)
+  const [rect, setRect] = useState<UseMeasureRect>(defaultState)
+
+  const observer = useMemo(
+    () =>
+      new ResizeObserver((entries) => {
+        if (entries[0]) {
+          const { x, y, width, height, top, left, bottom, right } =
+            entries[0].contentRect
+          setRect({ x, y, width, height, top, left, bottom, right })
+        }
+      }),
+    [],
+  )
+
+  useIsomorphicLayoutEffect(() => {
+    if (!element) return
+    observer.observe(element)
+    return () => {
+      observer.disconnect()
+    }
+  }, [element])
+
+  return [setElement, rect, element]
+}

packages/react-reader/src/gallery/GalleryDialog.tsx

@@ -1,9 +1,8 @@
 import { Box, Button } from "@chakra-ui/react"
-import { type SpineItem, isShallowEqual } from "@prose-reader/core"
+import type { SpineItem } from "@prose-reader/core"
 import { memo } from "react"
 import { useObserve, useSubscribe } from "reactjrx"
-import { NEVER, distinctUntilChanged, filter, map, switchMap, tap } from "rxjs"
-import useMeasure from "../common/useMeasure"
+import { useMeasure } from "../common/useMeasure"
 import {
   DialogActionTrigger,
   DialogBody,
@@ -14,34 +13,14 @@ import {
   DialogRoot,
   DialogTitle,
 } from "../components/ui/dialog"
-import { hasGalleryEnhancer, useReader } from "../context/useReader"
+import { useReader } from "../context/useReader"
+import { useAttachSnapshot } from "./useAttachSnapshot"
 
-const GalleryItem = ({ item }: { item: SpineItem }) => {
+const GalleryItem = memo(({ item }: { item: SpineItem }) => {
   const reader = useReader()
   const [setElement, measures, element] = useMeasure()
-  const readerWithGalleryEnhancer = hasGalleryEnhancer(reader)
-    ? reader
-    : undefined
 
-  useSubscribe(() => {
-    if (!readerWithGalleryEnhancer || !element) return NEVER
-
-    const itemReadyAndLayoutChanged$ = item.isReady$.pipe(
-      filter((isReady) => isReady),
-      map(() => item.layout.layoutInfo),
-      distinctUntilChanged(isShallowEqual),
-    )
-
-    return itemReadyAndLayoutChanged$.pipe(
-      switchMap(() =>
-        readerWithGalleryEnhancer?.gallery.snapshot(item, measures),
-      ),
-      tap((snapshot) => {
-        element.innerHTML = ""
-        element.appendChild(snapshot)
-      }),
-    )
-  }, [readerWithGalleryEnhancer, item, measures, element])
+  useAttachSnapshot(element, item, measures)
 
   useSubscribe(
     () => reader?.spine.spineItemsLoader.forceOpen([item]),
@@ -57,11 +36,9 @@ const GalleryItem = ({ item }: { item: SpineItem }) => {
       borderColor="border"
       borderRadius="md"
       data-grid-item
-    >
-      {item.item.id}
-    </Box>
+    />
   )
-}
+})
 
 export const GalleryDialog = memo(
   ({
@@ -87,19 +64,21 @@ export const GalleryDialog = memo(
           <DialogHeader>
             <DialogTitle>Gallery</DialogTitle>
           </DialogHeader>
-          <DialogBody
-            gridTemplateColumns={[
-              "repeat(2, minmax(0, 1fr))",
-              "repeat(2, minmax(0, 1fr))",
-            ]}
-            display="grid"
-            gap={2}
-            pt={2}
-            data-grid
-          >
-            {items?.map((item) => (
-              <GalleryItem key={item.item.id} item={item} />
-            ))}
+          <DialogBody>
+            <Box
+              gridTemplateColumns={[
+                "repeat(2, minmax(0, 1fr))",
+                "repeat(3, minmax(0, 1fr))",
+              ]}
+              display="grid"
+              gap={[2, 4]}
+              pt={2}
+              data-grid
+            >
+              {items?.map((item) => (
+                <GalleryItem key={item.item.id} item={item} />
+              ))}
+            </Box>
           </DialogBody>
           <DialogFooter>
             <DialogActionTrigger asChild>

packages/react-reader/src/gallery/useAttachSnapshot.ts

@@ -0,0 +1,43 @@
+import { distinctUntilChanged, switchMap, tap } from "rxjs"
+
+import { map } from "rxjs"
+
+import { NEVER } from "rxjs"
+
+import { type SpineItem, isShallowEqual } from "@prose-reader/core"
+import { useSubscribe } from "reactjrx"
+import { filter } from "rxjs"
+import type { UseMeasureRect } from "../common/useMeasure"
+import { useReader } from "../context/useReader"
+import { hasGalleryEnhancer } from "../context/useReader"
+
+export const useAttachSnapshot = (
+  element: Element | null,
+  item: SpineItem,
+  measures: UseMeasureRect,
+) => {
+  const reader = useReader()
+  const readerWithGalleryEnhancer = hasGalleryEnhancer(reader)
+    ? reader
+    : undefined
+
+  useSubscribe(() => {
+    if (!readerWithGalleryEnhancer || !element) return NEVER
+
+    const itemReadyAndLayoutChanged$ = item.isReady$.pipe(
+      filter((isReady) => isReady),
+      map(() => item.layout.layoutInfo),
+      distinctUntilChanged(isShallowEqual),
+    )
+
+    return itemReadyAndLayoutChanged$.pipe(
+      switchMap(() =>
+        readerWithGalleryEnhancer?.gallery.snapshot(item, measures),
+      ),
+      tap((snapshot) => {
+        element.innerHTML = ""
+        element.appendChild(snapshot)
+      }),
+    )
+  }, [readerWithGalleryEnhancer, item, measures, element])
+}