haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-25 14:50:29 +00:00
Code Issues Releases Wiki Activity

add delete button to image previwer in gallery (#7170)

Browse Source 
* add delete button to image previwer in gallery

* delete the last image and display the first one

* fix bug - delete the last image

* feat: optimize code

---------

Co-authored-by: zhouwenxuan <aries@Mac.local>
Co-authored-by: 杨国璇 <ygx@192.168.1.7>
This commit is contained in:
Aries
2024-12-14 19:29:24 +08:00
committed by GitHub
parent f07dfc65cb
commit cbc84274b1
1 changed files with 29 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/metadata/views/gallery/main.js
View File

@@ -275,15 +275,17 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore }) => {
setSelectedImages(prev => prev.length < 2 ? [image] : [...prev]);
}, [imageItems]);
const moveToPrevImage = () => {
const moveToPrevImage = useCallback(() => {
const imageItemsLength = imageItems.length;
setImageIndex((prevState) => (prevState + imageItemsLength - 1) % imageItemsLength);
};
setSelectedImages([imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength]]);
}, [imageItems, imageIndex]);
const moveToNextImage = () => {
const moveToNextImage = useCallback(() => {
const imageItemsLength = imageItems.length;
setImageIndex((prevState) => (prevState + 1) % imageItemsLength);
};
setSelectedImages([imageItems[(imageIndex + 1) % imageItemsLength]]);
}, [imageItems, imageIndex]);
const handleImageSelection = useCallback((selectedImages) => {
setSelectedImages(selectedImages);
@@ -340,6 +342,28 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore }) => {
}
}, [handleImageSelection, updateSelectedImage]);
const deleteImage = useCallback(() => {
const image = selectedImages[0];
const index = imageItems.findIndex(item => item.id === image.id);
onDelete(selectedImages);
const newImageItems = imageItems.filter(item => item.id !== image.id);
let newSelectedImage;
if (newImageItems.length === 0) {
setSelectedImages([]);
setIsImagePopupOpen(false);
setImageIndex(0);
} else {
const newIndex = index >= newImageItems.length ? 0 : index;
newSelectedImage = newImageItems[newIndex];
setImageIndex(newIndex);
}
setSelectedImages(newSelectedImage ? [newSelectedImage] : []);
updateSelectedImage(newSelectedImage);
}, [selectedImages, imageItems, onDelete, updateSelectedImage]);
return (
<>
<div
@@ -385,6 +409,7 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore }) => {
closeImagePopup={closeImagePopup}
moveToPrevImage={moveToPrevImage}
moveToNextImage={moveToNextImage}
onDeleteImage={deleteImage}
/>
</ModalPortal>
)}