@visns-studio/visns-components 5.13.7 → 5.13.8

package/package.json

@@ -88,7 +88,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.13.7",
+    "version": "5.13.8",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/Gallery.jsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
     SortableContainer,
     SortableElement,
     sortableHandle,
 } from 'react-sortable-hoc';
 import { GripVertical as ChevronVertical, Edit as Pencil, Trash2 as TrashCan } from 'lucide-react';
+import ImageModal from './ImageModal';
 import styles from './styles/Gallery.module.css';
 
 // Drag handle component
@@ -24,7 +25,7 @@ const truncateText = (text, maxLength) => {
 
 // Sortable gallery item
 const SortableGalleryItem = SortableElement(
-    ({ value, handleEdit, handleDelete, showDescription = true }) => {
+    ({ value, handleEdit, handleDelete, showDescription = true, onImageClick }) => {
         const imageUrl = value.image_url || value.file_url;
         const title =
             value.file_title || value.label || value.file_name || 'Untitled';
@@ -34,7 +35,11 @@ const SortableGalleryItem = SortableElement(
             <div className={styles.galleryItem}>
                 <DragHandle />
 
-                <div className={styles.galleryImage}>
+                <div 
+                    className={styles.galleryImage}
+                    onClick={() => onImageClick && onImageClick(value)}
+                    style={{ cursor: onImageClick ? 'pointer' : 'default' }}
+                >
                     {imageUrl ? (
                         <img src={imageUrl} alt={title} />
                     ) : (
@@ -95,6 +100,30 @@ const SortableGalleryItem = SortableElement(
 
 // Sortable gallery container
 const Gallery = SortableContainer(({ items, handleEdit, handleDelete, showDescription = true }) => {
+    const [modalOpen, setModalOpen] = React.useState(false);
+    const [currentImageIndex, setCurrentImageIndex] = React.useState(0);
+
+    const handleImageClick = (clickedImage) => {
+        const imageIndex = items.findIndex(item => item.id === clickedImage.id);
+        setCurrentImageIndex(imageIndex);
+        setModalOpen(true);
+    };
+
+    const handleNextImage = () => {
+        setCurrentImageIndex((prevIndex) => 
+            prevIndex < items.length - 1 ? prevIndex + 1 : 0
+        );
+    };
+
+    const handlePrevImage = () => {
+        setCurrentImageIndex((prevIndex) => 
+            prevIndex > 0 ? prevIndex - 1 : items.length - 1
+        );
+    };
+
+    const handleCloseModal = () => {
+        setModalOpen(false);
+    };
     if (!items || items.length === 0) {
         return (
             <div className={styles.galleryEmpty}>
@@ -130,18 +159,29 @@ const Gallery = SortableContainer(({ items, handleEdit, handleDelete, showDescri
     }
 
     return (
-        <div className={styles.galleryGrid}>
-            {items.map((value, index) => (
-                <SortableGalleryItem
-                    key={`item-${index}`}
-                    index={index}
-                    value={value}
-                    handleEdit={handleEdit}
-                    handleDelete={handleDelete}
-                    showDescription={showDescription}
-                />
-            ))}
-        </div>
+        <>
+            <div className={styles.galleryGrid}>
+                {items.map((value, index) => (
+                    <SortableGalleryItem
+                        key={`item-${index}`}
+                        index={index}
+                        value={value}
+                        handleEdit={handleEdit}
+                        handleDelete={handleDelete}
+                        showDescription={showDescription}
+                        onImageClick={handleImageClick}
+                    />
+                ))}
+            </div>
+            <ImageModal
+                isOpen={modalOpen}
+                onClose={handleCloseModal}
+                images={items}
+                currentIndex={currentImageIndex}
+                onNext={handleNextImage}
+                onPrevious={handlePrevImage}
+            />
+        </>
     );
 });
 

package/src/components/ImageModal.jsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useCallback } from 'react';
+import { X as CloseIcon, ChevronLeft, ChevronRight } from 'lucide-react';
+import styles from './styles/ImageModal.module.css';
+
+const ImageModal = ({
+    isOpen,
+    onClose,
+    images,
+    currentIndex,
+    onNext,
+    onPrevious,
+    showNavigation = true
+}) => {
+    const handleKeyDown = useCallback((e) => {
+        if (!isOpen) return;
+        
+        switch (e.key) {
+            case 'Escape':
+                onClose();
+                break;
+            case 'ArrowLeft':
+                e.preventDefault();
+                onPrevious();
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                onNext();
+                break;
+            default:
+                break;
+        }
+    }, [isOpen, onClose, onNext, onPrevious]);
+
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = 'unset';
+        }
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = 'unset';
+        };
+    }, [isOpen, handleKeyDown]);
+
+    if (!isOpen || !images || images.length === 0) {
+        return null;
+    }
+
+    const currentImage = images[currentIndex];
+    const imageUrl = currentImage?.image_url || currentImage?.file_url;
+    const title = currentImage?.file_title || currentImage?.label || currentImage?.file_name || 'Untitled';
+    const description = currentImage?.file_description || '';
+
+    const handleBackdropClick = (e) => {
+        if (e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+
+    return (
+        <div className={styles.modalOverlay} onClick={handleBackdropClick}>
+            <div className={styles.modalContent}>
+                <button
+                    className={styles.closeButton}
+                    onClick={onClose}
+                    aria-label="Close modal"
+                >
+                    <CloseIcon size={24} />
+                </button>
+
+                {showNavigation && images.length > 1 && (
+                    <>
+                        <button
+                            className={`${styles.navButton} ${styles.prevButton}`}
+                            onClick={onPrevious}
+                            aria-label="Previous image"
+                            disabled={currentIndex === 0}
+                        >
+                            <ChevronLeft size={32} />
+                        </button>
+                        <button
+                            className={`${styles.navButton} ${styles.nextButton}`}
+                            onClick={onNext}
+                            aria-label="Next image"
+                            disabled={currentIndex === images.length - 1}
+                        >
+                            <ChevronRight size={32} />
+                        </button>
+                    </>
+                )}
+
+                <div className={styles.imageContainer}>
+                    <img
+                        src={imageUrl}
+                        alt={title}
+                        className={styles.modalImage}
+                        loading="lazy"
+                    />
+                </div>
+
+                <div className={styles.imageInfo}>
+                    <h3 className={styles.imageTitle}>{title}</h3>
+                    {description && (
+                        <p className={styles.imageDescription}>{description}</p>
+                    )}
+                    {images.length > 1 && (
+                        <div className={styles.imageCounter}>
+                            {currentIndex + 1} of {images.length}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ImageModal;

package/src/components/styles/ImageModal.module.css

@@ -0,0 +1,181 @@
+.modalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.9);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: 20px;
+}
+
+.modalContent {
+    position: relative;
+    max-width: 95vw;
+    max-height: 95vh;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.closeButton {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: rgba(255, 255, 255, 0.9);
+    border: none;
+    border-radius: 50%;
+    width: 44px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 1001;
+    transition: all 0.2s ease;
+}
+
+.closeButton:hover {
+    background: rgba(255, 255, 255, 1);
+    transform: scale(1.1);
+}
+
+.navButton {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(255, 255, 255, 0.9);
+    border: none;
+    border-radius: 50%;
+    width: 56px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 1001;
+    transition: all 0.2s ease;
+}
+
+.navButton:hover {
+    background: rgba(255, 255, 255, 1);
+    transform: translateY(-50%) scale(1.1);
+}
+
+.navButton:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.navButton:disabled:hover {
+    background: rgba(255, 255, 255, 0.9);
+    transform: translateY(-50%) scale(1);
+}
+
+.prevButton {
+    left: 20px;
+}
+
+.nextButton {
+    right: 20px;
+}
+
+.imageContainer {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
+}
+
+.modalImage {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+}
+
+.imageInfo {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    right: 20px;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 16px;
+    border-radius: 8px;
+    text-align: center;
+    max-width: 500px;
+    margin: 0 auto;
+}
+
+.imageTitle {
+    margin: 0 0 8px 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: white;
+}
+
+.imageDescription {
+    margin: 0 0 8px 0;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.9);
+    line-height: 1.4;
+}
+
+.imageCounter {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.7);
+    margin: 0;
+}
+
+/* Mobile responsive styles */
+@media (max-width: 768px) {
+    .modalOverlay {
+        padding: 10px;
+    }
+    
+    .closeButton {
+        top: 10px;
+        right: 10px;
+        width: 40px;
+        height: 40px;
+    }
+    
+    .navButton {
+        width: 48px;
+        height: 48px;
+    }
+    
+    .prevButton {
+        left: 10px;
+    }
+    
+    .nextButton {
+        right: 10px;
+    }
+    
+    .imageInfo {
+        bottom: 10px;
+        left: 10px;
+        right: 10px;
+        padding: 12px;
+    }
+    
+    .imageTitle {
+        font-size: 16px;
+    }
+    
+    .imageDescription {
+        font-size: 13px;
+    }
+}

package/src/index.js

@@ -34,6 +34,7 @@ import DataGridSearch from './components/controls/DataGridSearch';
 import AutoRefreshControls from './components/controls/AutoRefreshControls';
 import AudioPlayer from './components/controls/AudioPlayer';
 import GalleryModal from './components/modals/GalleryModal';
+import ImageModal from './components/ImageModal';
 import DatePickerPortal from './components/utils/DatePickerPortal';
 export * from './components/columns/ColumnRenderers.jsx';
 
@@ -110,6 +111,7 @@ export {
     Field,
     Form,
     GalleryModal,
+    ImageModal,
     GenericAuth,
     GenericClientPortal,
     GenericDashboard,