update file manager

lama_cleaner/app/src/components/FileManager/FileManager.tsx

@@ -1,6 +1,15 @@
-import React, { ReactNode, useEffect, useMemo, useState } from 'react'
+import React, {
+  SyntheticEvent,
+  useEffect,
+  useMemo,
+  useState,
+  useCallback,
+  useRef,
+} from 'react'
 import PhotoAlbum, { RenderPhoto } from 'react-photo-album'
+import * as ScrollArea from '@radix-ui/react-scroll-area'
 import Modal from '../shared/Modal'
+import Button from '../shared/Button'
 
 interface Photo {
   src: string
@@ -36,12 +45,35 @@ const renderPhoto: RenderPhoto = ({
 interface Props {
   show: boolean
   onClose: () => void
-  onPhotoClick: (filename: string) => void
+  onPhotoClick(filename: string): void
+  photoWidth: number
 }
 
 export default function FileManager(props: Props) {
-  const { show, onClose, onPhotoClick } = props
+  const { show, onClose, onPhotoClick, photoWidth } = props
   const [filenames, setFileNames] = useState<Filename[]>([])
+  const [scrollTop, setScrollTop] = useState(0)
+  const [closeScrollTop, setCloseScrollTop] = useState(0)
+
+  useEffect(() => {
+    if (!show) {
+      setCloseScrollTop(scrollTop)
+    }
+  }, [show, scrollTop])
+
+  const onRefChange = useCallback(
+    (node: HTMLDivElement) => {
+      if (node !== null) {
+        if (show) {
+          setTimeout(() => {
+            // TODO: without timeout, scrollTo not work, why?
+            node.scrollTo({ top: closeScrollTop, left: 0 })
+          }, 100)
+        }
+      }
+    },
+    [show, closeScrollTop]
+  )
 
   const onClick = ({ index }: { index: number }) => {
     onPhotoClick(filenames[index].name)
@@ -59,9 +91,13 @@ export default function FileManager(props: Props) {
     fetchData()
   }, [])
 
+  const onScroll = (event: SyntheticEvent) => {
+    setScrollTop(event.currentTarget.scrollTop)
+  }
+
   const photos = useMemo(() => {
     return filenames.map((filename: Filename) => {
-      const width = 256
+      const width = photoWidth
       const height = filename.height * (width / filename.width)
       const src = `/media_thumbnail/${filename.name}?width=${width}&height=${height}`
       return { src, height, width }
@@ -71,20 +107,39 @@ export default function FileManager(props: Props) {
   return (
     <Modal
       onClose={onClose}
-      title="Files"
+      title={`Files(${photos.length})`}
       className="file-manager-modal"
       show={show}
     >
-      <div className="file-manager">
-        <PhotoAlbum
-          layout="columns"
-          photos={photos}
-          renderPhoto={renderPhoto}
-          spacing={6}
-          padding={4}
-          onClick={onClick}
-        />
-      </div>
+      <ScrollArea.Root className="ScrollAreaRoot">
+        <ScrollArea.Viewport
+          className="ScrollAreaViewport"
+          onScroll={onScroll}
+          ref={onRefChange}
+        >
+          <PhotoAlbum
+            layout="columns"
+            photos={photos}
+            renderPhoto={renderPhoto}
+            spacing={8}
+            padding={8}
+            onClick={onClick}
+          />
+        </ScrollArea.Viewport>
+        <ScrollArea.Scrollbar
+          className="ScrollAreaScrollbar"
+          orientation="vertical"
+        >
+          <ScrollArea.Thumb className="ScrollAreaThumb" />
+        </ScrollArea.Scrollbar>
+        <ScrollArea.Scrollbar
+          className="ScrollAreaScrollbar"
+          orientation="horizontal"
+        >
+          <ScrollArea.Thumb className="ScrollAreaThumb" />
+        </ScrollArea.Scrollbar>
+        <ScrollArea.Corner className="ScrollAreaCorner" />
+      </ScrollArea.Root>
     </Modal>
   )
 }