react-advanced-gallery
Version:
A customizable React image gallery component with Bootstrap styling, fullscreen mode, animations, and support for various media types
65 lines (64 loc) • 3.63 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useGallery } from '../hooks/useGallery';
import { GalleryConfig } from './GalleryConfig';
import { GalleryGrid } from './GalleryGrid';
import { FullscreenViewer } from './FullscreenViewer';
import { ImageUploader } from './ImageUploader';
// Generate a unique ID when needed
const generateId = () => `${Date.now()}-${Math.floor(Math.random() * 1000)}`;
export function ImageGallery({ images, layout = 'grid', animation = 'fade', thumbnailsPosition = 'bottom', enableZoom = true, onImageClick, onFavoriteToggle, onImageRemove, onImageUpload }) {
const { images: galleryImages, selectedImage, currentIndex, isFullscreenOpen, zoomLevel, layout: activeLayout, animation: activeAnimation, thumbnailsPosition: activeThumbnailsPosition, enableZoom: activeEnableZoom, openFullscreen, closeFullscreen, toggleFavorite, removeImage, navigateToImage, navigatePrev, navigateNext, zoomIn, zoomOut, addImages, updateConfig } = useGallery({
initialImages: images,
initialLayout: layout,
initialAnimation: animation,
initialThumbnailsPosition: thumbnailsPosition,
initialEnableZoom: enableZoom
});
const handleImageClick = (image) => {
openFullscreen(image);
if (onImageClick) {
onImageClick(image);
}
};
const handleFavoriteToggle = (image) => {
toggleFavorite(image);
if (onFavoriteToggle) {
onFavoriteToggle(image);
}
};
const handleImageRemove = (image) => {
removeImage(image);
if (onImageRemove) {
onImageRemove(image);
}
};
const handleImageUpload = (files) => {
// Create gallery items from the uploaded files
const newImages = files.map(file => {
const isVideo = file.type.startsWith('video/');
const url = URL.createObjectURL(file);
return {
id: generateId(),
src: url,
thumbnail: url,
alt: file.name,
title: file.name.split('.').slice(0, -1).join('.'),
description: isVideo ? 'Video file' : 'Image file',
type: isVideo ? 'video' : 'image',
isFavorite: false,
metadata: {
fileSize: `${(file.size / (1024 * 1024)).toFixed(1)} MB`,
dateTaken: new Date().toISOString()
}
};
});
addImages(newImages);
if (onImageUpload) {
onImageUpload(files);
}
};
const handleConfigChange = (newConfig) => {
updateConfig(newConfig);
};
return (_jsxs("div", { className: "rag-container", children: [_jsx(GalleryConfig, { layout: activeLayout, animation: activeAnimation, thumbnailsPosition: activeThumbnailsPosition, enableZoom: activeEnableZoom, onConfigChange: handleConfigChange }), _jsx(GalleryGrid, { items: galleryImages, layout: activeLayout, animation: activeAnimation, onImageClick: handleImageClick, onFavoriteToggle: handleFavoriteToggle, onImageRemove: handleImageRemove }), _jsx(ImageUploader, { onImageUpload: handleImageUpload }), isFullscreenOpen && selectedImage && (_jsx(FullscreenViewer, { isOpen: isFullscreenOpen, currentImage: selectedImage, images: galleryImages, currentIndex: currentIndex, zoomLevel: zoomLevel, onClose: closeFullscreen, onPrev: navigatePrev, onNext: navigateNext, onFavoriteToggle: handleFavoriteToggle, onImageRemove: handleImageRemove, onZoomIn: zoomIn, onZoomOut: zoomOut, onThumbnailClick: navigateToImage }))] }));
}