haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-22 11:57:34 +00:00
Code Issues Releases Wiki Activity

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

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

* remove redundant code
This commit is contained in:
Aries
2024-08-13 20:28:03 +08:00
committed by GitHub
parent 37c3339467
commit d85915e5f1
1 changed files with 47 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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(() => {
if (fileType === 'image') return;
onCommitCancel && onCommitCancel();
}, [fileType, onCommitCancel]);
const moveToPrevImage = () => {
const imageItemsLength = imageItems.length;
setImageIndex((prevState) => (prevState + imageItemsLength - 1) % imageItemsLength);
};
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}
imageIndex={0}
imageItems={imageItems}
imageIndex={imageIndex}
closeImagePopup={onCommitCancel}
moveToPrevImage={() => {}}
moveToNextImage={() => {}}
moveToPrevImage={moveToPrevImage}
moveToNextImage={moveToNextImage}
/>
</ModalPortal>
);