feature - enable move to prev/next image when preview image in metadata (#6547)

* feature - enable move to prev/next image when preview image in metadata

* remove redundant code

frontend/src/metadata/metadata-view/components/cell-editor/file-name-editor.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { ModalPortal } from '@seafile/sf-metadata-ui-component';
 import { PRIVATE_COLUMN_KEY } from '../../_basic';
@@ -6,7 +6,39 @@ import { Utils } from '../../../../utils/utils';
 import ImageDialog from '../../../../components/dialog/image-dialog';
 import { siteRoot, thumbnailSizeForOriginal } from '../../../../utils/constants';
 
-const FileNameEditor = ({ column, record, onCommitCancel }) => {
+const FileNameEditor = ({ column, record, table, onCommitCancel }) => {
+  const [imageIndex, setImageIndex] = useState(0);
+
+  const imageItems = useMemo(() => {
+    const repoID = window.sfMetadataContext.getSetting('repoID');
+
+    return table.rows
+      .filter(row => Utils.imageCheck(row[PRIVATE_COLUMN_KEY.FILE_NAME]))
+      .map(item => {
+        const fileName = item[PRIVATE_COLUMN_KEY.FILE_NAME];
+        const parentDir = item[PRIVATE_COLUMN_KEY.PARENT_DIR];
+        const path = Utils.encodePath(Utils.joinPath(parentDir, fileName));
+        const fileExt = fileName.substr(fileName.lastIndexOf('.') + 1).toLowerCase();
+        const isGIF = fileExt === 'gif';
+        const useThumbnail = window.sfMetadataContext.getSetting('repoInfo')?.encrypted;
+        const basePath = `${siteRoot}${useThumbnail && !isGIF ? 'thumbnail' : 'repo'}/${repoID}`;
+        const src = `${basePath}/${useThumbnail && !isGIF ? thumbnailSizeForOriginal : 'raw'}${path}`;
+
+        return {
+          name: fileName,
+          url: `${siteRoot}lib/${repoID}/file${path}`,
+          src: src,
+        };
+      });
+  }, [table]);
+
+  useEffect(() => {
+    if (imageItems.length > 0) {
+      const index = imageItems.findIndex(item => item.name === record[PRIVATE_COLUMN_KEY.FILE_NAME]);
+      if (index > -1) setImageIndex(index);
+    }
+  }, [imageItems, record]);
+
   const _isDir = useMemo(() => {
     const isDirValue = record[PRIVATE_COLUMN_KEY.IS_DIR];
     if (typeof isDirValue === 'string') return isDirValue.toUpperCase() === 'TRUE';
@@ -49,32 +81,25 @@ const FileNameEditor = ({ column, record, onCommitCancel }) => {
     return `${siteRoot}lib/${repoID}/file${path}`;
   }, [path, repoID]);
 
-  useEffect(() => {
+  const moveToPrevImage = () => {
-    if (fileType === 'image') return;
+    const imageItemsLength = imageItems.length;
-    onCommitCancel && onCommitCancel();
+    setImageIndex((prevState) => (prevState + imageItemsLength - 1) % imageItemsLength);
-  }, [fileType, onCommitCancel]);
+  };
+
+  const moveToNextImage = () => {
+    const imageItemsLength = imageItems.length;
+    setImageIndex((prevState) => (prevState + 1) % imageItemsLength);
+  };
 
   if (fileType === 'image') {
-    const fileExt = fileName.substr(fileName.lastIndexOf('.') + 1).toLowerCase();
-    const isGIF = fileExt === 'gif';
-    const useThumbnail = window.sfMetadataContext.getSetting('repoInfo')?.encrypted;
-    let src = '';
-    if (useThumbnail && !isGIF) {
-      src = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForOriginal}${path}`;
-    } else {
-      src = `${siteRoot}repo/${repoID}/raw${path}`;
-    }
-    const images = [
-      { 'name': fileName, 'url': url, 'src': src },
-    ];
     return (
       <ModalPortal>
         <ImageDialog
-          imageItems={images}
+          imageItems={imageItems}
-          imageIndex={0}
+          imageIndex={imageIndex}
           closeImagePopup={onCommitCancel}
-          moveToPrevImage={() => {}}
+          moveToPrevImage={moveToPrevImage}
-          moveToNextImage={() => {}}
+          moveToNextImage={moveToNextImage}
         />
       </ModalPortal>
     );