@chayns-components/gallery 5.0.0-beta.470 → 5.0.0-beta.471

package/lib/components/Gallery.js

@@ -92,10 +92,16 @@ const Gallery = _ref => {
   useEffect(() => {
     const filesToGeneratePreview = fileItems.filter(file => file.file && !file.previewUrl && (file.state === 'none' || !file.state));
     const filesToUpload = fileItems.filter(file => !file.uploadedFile && file.state !== 'uploading');
+    console.log('Gallery', {
+      filesToGeneratePreview,
+      filesToUpload,
+      fileItems
+    });
     filesToGeneratePreview.forEach(file => {
       if (!file.file) {
         return;
       }
+      console.log('filesToGeneratePreview:', file);
       if (file.file.type.includes('video/')) {
         generateVideoThumbnail({
           file: file.file,

package/lib/components/Gallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.js","names":["uploadFile","createDialog","DialogType","MediaType","openMedia","React","useCallback","useEffect","useMemo","useState","v4","uuidv4","GalleryViewMode","filterDuplicateFile","generatePreviewUrl","generateVideoThumbnail","AddFile","GalleryItem","StyledGallery","StyledGalleryEditModeWrapper","StyledGalleryItemWrapper","Gallery","_ref","allowDragAndDrop","doubleFileDialogMessage","isEditMode","fileMinWidth","files","onAdd","onFileCountChange","onRemove","viewMode","GRID","fileItems","setFileItems","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","callDuplicateFileDialog","type","ALERT","text","handleUploadFileCallback","uploadedFile","updatedState","url","undefined","state","tmp","forEach","updatedFile","push","length","filesToGeneratePreview","filter","filesToUpload","includes","callback","fileToUpload","UploadedFile","handleAddFiles","filesToAdd","newFileItems","newFile","updatedItems","prevItem","newItem","find","item","concat","some","handleDeleteFile","fileToDelete","filteredFiles","fileId","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","openFiles","startIndex","findIndex","items","replace","mediaType","VIDEO","IMAGE","ratio","Math","max","galleryContent","combinedFilesLength","createElement","key","fileItem","onClick","shortedFiles","slice","index","imageRatio","remainingItemsLength","$fileMinWidth","onDragOver","onDrop","$ratio","$uploadedFileLength","$viewMode","displayName"],"sources":["../../src/components/Gallery.tsx"],"sourcesContent":["import {\n    Image,\n    uploadFile,\n    Video,\n    type FileItem,\n    type InternalFileItem,\n} from '@chayns-components/core';\nimport { createDialog, DialogType, MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport React, { DragEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { GalleryViewMode } from '../types/gallery';\nimport { filterDuplicateFile, generatePreviewUrl, generateVideoThumbnail } from '../utils/file';\nimport AddFile from './add-file/AddFile';\nimport GalleryItem from './gallery-item/GalleryItem';\nimport {\n    StyledGallery,\n    StyledGalleryEditModeWrapper,\n    StyledGalleryItemWrapper,\n} from './Gallery.styles';\n\nexport type GalleryProps = {\n    /**\n     * Whether drag and drop is allowed or not\n     */\n    allowDragAndDrop?: boolean;\n    /**\n     * The message that should be displayed if a File is already given.\n     */\n    doubleFileDialogMessage?: string;\n    /**\n     *  Whether images and videos can be edited\n     */\n    isEditMode?: boolean;\n    /**\n     * The minimum width of a file in the edit mode\n     */\n    fileMinWidth?: number;\n    /**\n     *  Images and videos which should be displayed\n     */\n    files?: FileItem[];\n    /**\n     *  Function to be executed when files are added and uploaded\n     */\n    onAdd?: (file: FileItem) => void;\n    /**\n     * Function to be executed when the count of files are changed. Needed to check if all files are uploaded\n     */\n    onFileCountChange?: (fileCount: number) => void;\n    /**\n     *  Function to be executed when a file is removed\n     */\n    onRemove?: (file: FileItem) => void;\n    /**\n     * The mode how the images should be displayed.\n     */\n    viewMode?: GalleryViewMode;\n};\n\nconst Gallery: FC<GalleryProps> = ({\n    allowDragAndDrop = false,\n    doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',\n    isEditMode = false,\n    fileMinWidth = 100,\n    files,\n    onAdd,\n    onFileCountChange,\n    onRemove,\n    viewMode = GalleryViewMode.GRID,\n}) => {\n    const [fileItems, setFileItems] = useState<InternalFileItem[]>([]);\n\n    /**\n     * This function adds a previewUrl to fileItems\n     */\n    const handlePreviewUrlCallback = (previewUrl: string, file: InternalFileItem) => {\n        setFileItems((prevState) =>\n            prevState.map((prevFile) => {\n                if (prevFile.id === file.id) {\n                    return { ...prevFile, previewUrl };\n                }\n                return prevFile;\n            }),\n        );\n    };\n\n    const callDuplicateFileDialog = useCallback(() => {\n        createDialog({ type: DialogType.ALERT, text: doubleFileDialogMessage });\n    }, [doubleFileDialogMessage]);\n\n    /**\n     * This function adds uploaded files to fileItems\n     */\n    const handleUploadFileCallback = useCallback(\n        (file: InternalFileItem, uploadedFile: Video | Image) => {\n            setFileItems((prevState) => {\n                const updatedState = prevState.map((prevFile) => {\n                    if (prevFile.uploadedFile?.url === uploadedFile.url) {\n                        callDuplicateFileDialog();\n\n                        return undefined;\n                    }\n\n                    if (prevFile.id === file.id) {\n                        if (typeof onAdd === 'function') {\n                            onAdd({\n                                file: uploadedFile,\n                                id: file.id,\n                            });\n                        }\n\n                        return {\n                            ...prevFile,\n                            uploadedFile,\n                            state: 'uploaded',\n                        };\n                    }\n\n                    return prevFile;\n                });\n\n                const tmp: InternalFileItem[] = [];\n\n                updatedState.forEach((updatedFile) => {\n                    if (updatedFile !== undefined) {\n                        tmp.push(updatedFile as InternalFileItem);\n                    }\n                });\n\n                return tmp ?? [];\n            });\n        },\n        [callDuplicateFileDialog, onAdd],\n    );\n\n    /**\n     * Returns the current count to check if all files are uploaded\n     */\n    useEffect(() => {\n        if (typeof onFileCountChange === 'function') {\n            onFileCountChange(fileItems.length);\n        }\n    }, [fileItems.length, onFileCountChange]);\n\n    /**\n     * Prepares files for previewUrl and upload\n     */\n    useEffect(() => {\n        const filesToGeneratePreview = fileItems.filter(\n            (file) => file.file && !file.previewUrl && (file.state === 'none' || !file.state),\n        );\n\n        const filesToUpload = fileItems.filter(\n            (file) => !file.uploadedFile && file.state !== 'uploading',\n        );\n\n        filesToGeneratePreview.forEach((file) => {\n            if (!file.file) {\n                return;\n            }\n\n            if (file.file.type.includes('video/')) {\n                generateVideoThumbnail({\n                    file: file.file,\n                    callback: (previewUrl) => handlePreviewUrlCallback(previewUrl, file),\n                });\n\n                return;\n            }\n\n            generatePreviewUrl({\n                file: file.file,\n                callback: (previewUrl) => handlePreviewUrlCallback(previewUrl, file),\n            });\n        });\n\n        filesToUpload.forEach((file) => {\n            setFileItems((prevState) =>\n                prevState.map((prevFile) => {\n                    if (prevFile.id === file.id) {\n                        return { ...prevFile, state: 'uploading' };\n                    }\n                    return prevFile;\n                }),\n            );\n\n            void uploadFile({\n                fileToUpload: file,\n                callback: (UploadedFile) => handleUploadFileCallback(file, UploadedFile),\n            });\n        });\n    }, [fileItems, handleUploadFileCallback]);\n\n    /**\n     * This function formats and adds files to fileItems\n     */\n    const handleAddFiles = useCallback(\n        (filesToAdd: File[]) => {\n            const newFileItems: InternalFileItem[] = [];\n\n            filesToAdd.forEach((file) => {\n                if (file && !filterDuplicateFile({ files: fileItems, newFile: file })) {\n                    newFileItems.push({\n                        id: uuidv4(),\n                        file,\n                        state: 'none',\n                    });\n                }\n            });\n\n            setFileItems((prevState) => [...prevState, ...newFileItems]);\n        },\n        [fileItems],\n    );\n\n    /**\n     * This function adds external files to fileItems\n     */\n    useEffect(() => {\n        if (files) {\n            const newFileItems: InternalFileItem[] = [];\n\n            files.forEach((file) => {\n                newFileItems.push({\n                    id: file.id ?? uuidv4(),\n                    uploadedFile: file.file,\n                    file: undefined,\n                    state: 'uploaded',\n                    previewUrl: undefined,\n                });\n            });\n\n            setFileItems((prevState) => {\n                const updatedItems = prevState.map((prevItem) => {\n                    const newItem = newFileItems.find(\n                        (item) =>\n                            item.uploadedFile &&\n                            item.uploadedFile.url ===\n                                (prevItem.uploadedFile && prevItem.uploadedFile.url),\n                    );\n                    return newItem || prevItem;\n                });\n\n                return updatedItems.concat(\n                    newFileItems.filter(\n                        (newItem) =>\n                            !prevState.some(\n                                (prevItem) =>\n                                    prevItem.uploadedFile &&\n                                    newItem.uploadedFile &&\n                                    prevItem.uploadedFile.url === newItem.uploadedFile.url,\n                            ),\n                    ),\n                );\n            });\n        }\n    }, [files]);\n\n    /**\n     * This function deletes a selected file from the file list\n     */\n    const handleDeleteFile = useCallback(\n        (id?: string) => {\n            let fileToDelete: FileItem | undefined;\n\n            const filteredFiles = fileItems.filter((file) => {\n                const fileId = file.id;\n\n                if (fileId === id && file.uploadedFile) {\n                    fileToDelete = { file: file.uploadedFile, id };\n                }\n\n                return fileId !== id;\n            });\n\n            setFileItems(filteredFiles);\n\n            if (!fileToDelete || typeof onRemove !== 'function') {\n                return;\n            }\n\n            onRemove(fileToDelete);\n        },\n        [fileItems, onRemove],\n    );\n\n    /**\n     * This function handles the drag and drop\n     */\n    const handleDrop = useCallback(\n        (e: DragEvent<HTMLDivElement>) => {\n            if (!allowDragAndDrop) {\n                return;\n            }\n\n            e.preventDefault();\n            const draggedFiles = Array.from(e.dataTransfer.files);\n\n            handleAddFiles(draggedFiles);\n        },\n        [allowDragAndDrop, handleAddFiles],\n    );\n\n    /**\n     * Opens the files in a slideShow\n     */\n    const openFiles = useCallback(\n        (file: InternalFileItem) => {\n            const startIndex = fileItems.findIndex((item) => item.id === file.id);\n\n            const items: OpenMediaItem[] = fileItems.map((item) => ({\n                url: item.uploadedFile?.url.replace('_0.mp4', '.mp4') ?? '',\n                mediaType:\n                    item.uploadedFile && 'thumbnailUrl' in item.uploadedFile\n                        ? MediaType.VIDEO\n                        : MediaType.IMAGE,\n            }));\n\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            void openMedia({ items, startIndex });\n        },\n        [fileItems],\n    );\n\n    /**\n     * Returns the ratio of the single file\n     */\n    const ratio = useMemo(() => {\n        switch (fileItems.length) {\n            case 0:\n                return 0;\n            case 1:\n                return Math.max(fileItems[0]?.uploadedFile?.ratio ?? 1, 1);\n            case 2:\n                return 2;\n            case 3:\n                return 3;\n            default:\n                return 1;\n        }\n    }, [fileItems]);\n\n    const galleryContent = useMemo(() => {\n        const combinedFilesLength = fileItems.length;\n\n        if (isEditMode) {\n            const items = fileItems.map((file) => (\n                <GalleryItem\n                    key={file.id}\n                    fileItem={file}\n                    isEditMode\n                    onClick={openFiles}\n                    handleDeleteFile={handleDeleteFile}\n                />\n            ));\n\n            items.push(<AddFile key=\"add_file\" onAdd={handleAddFiles} />);\n\n            return items;\n        }\n\n        const shortedFiles = fileItems.slice(0, 4);\n\n        return shortedFiles.map((file, index) => {\n            let imageRatio = 1;\n\n            if (viewMode === GalleryViewMode.GRID) {\n                if (combinedFilesLength === 2 && (index === 0 || index === 1)) {\n                    imageRatio = 0.5;\n                } else if (\n                    (index === 0 && combinedFilesLength > 2) ||\n                    (combinedFilesLength === 3 && (index === 1 || index === 2))\n                ) {\n                    imageRatio = 1.5;\n                }\n            }\n\n            return (\n                <GalleryItem\n                    key={file.id}\n                    fileItem={file}\n                    isEditMode={false}\n                    handleDeleteFile={handleDeleteFile}\n                    onClick={openFiles}\n                    ratio={imageRatio}\n                    remainingItemsLength={\n                        combinedFilesLength > 4 && index === 3 ? combinedFilesLength : undefined\n                    }\n                />\n            );\n        });\n    }, [fileItems, isEditMode, handleAddFiles, openFiles, handleDeleteFile, viewMode]);\n\n    return useMemo(\n        () => (\n            <StyledGallery>\n                {isEditMode ? (\n                    <StyledGalleryEditModeWrapper\n                        $fileMinWidth={fileMinWidth}\n                        onDragOver={(e) => e.preventDefault()}\n                        onDrop={(e) => void handleDrop(e)}\n                    >\n                        {galleryContent}\n                    </StyledGalleryEditModeWrapper>\n                ) : (\n                    <StyledGalleryItemWrapper\n                        $ratio={ratio}\n                        $uploadedFileLength={fileItems.length}\n                        $viewMode={viewMode}\n                    >\n                        {galleryContent}\n                    </StyledGalleryItemWrapper>\n                )}\n            </StyledGallery>\n        ),\n        [isEditMode, fileMinWidth, galleryContent, ratio, fileItems.length, viewMode, handleDrop],\n    );\n};\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":"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"}
+{"version":3,"file":"Gallery.js","names":["uploadFile","createDialog","DialogType","MediaType","openMedia","React","useCallback","useEffect","useMemo","useState","v4","uuidv4","GalleryViewMode","filterDuplicateFile","generatePreviewUrl","generateVideoThumbnail","AddFile","GalleryItem","StyledGallery","StyledGalleryEditModeWrapper","StyledGalleryItemWrapper","Gallery","_ref","allowDragAndDrop","doubleFileDialogMessage","isEditMode","fileMinWidth","files","onAdd","onFileCountChange","onRemove","viewMode","GRID","fileItems","setFileItems","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","callDuplicateFileDialog","type","ALERT","text","handleUploadFileCallback","uploadedFile","updatedState","url","undefined","state","tmp","forEach","updatedFile","push","length","filesToGeneratePreview","filter","filesToUpload","console","log","includes","callback","fileToUpload","UploadedFile","handleAddFiles","filesToAdd","newFileItems","newFile","updatedItems","prevItem","newItem","find","item","concat","some","handleDeleteFile","fileToDelete","filteredFiles","fileId","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","openFiles","startIndex","findIndex","items","replace","mediaType","VIDEO","IMAGE","ratio","Math","max","galleryContent","combinedFilesLength","createElement","key","fileItem","onClick","shortedFiles","slice","index","imageRatio","remainingItemsLength","$fileMinWidth","onDragOver","onDrop","$ratio","$uploadedFileLength","$viewMode","displayName"],"sources":["../../src/components/Gallery.tsx"],"sourcesContent":["import {\n    Image,\n    uploadFile,\n    Video,\n    type FileItem,\n    type InternalFileItem,\n} from '@chayns-components/core';\nimport { createDialog, DialogType, MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport React, { DragEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { GalleryViewMode } from '../types/gallery';\nimport { filterDuplicateFile, generatePreviewUrl, generateVideoThumbnail } from '../utils/file';\nimport AddFile from './add-file/AddFile';\nimport GalleryItem from './gallery-item/GalleryItem';\nimport {\n    StyledGallery,\n    StyledGalleryEditModeWrapper,\n    StyledGalleryItemWrapper,\n} from './Gallery.styles';\n\nexport type GalleryProps = {\n    /**\n     * Whether drag and drop is allowed or not\n     */\n    allowDragAndDrop?: boolean;\n    /**\n     * The message that should be displayed if a File is already given.\n     */\n    doubleFileDialogMessage?: string;\n    /**\n     *  Whether images and videos can be edited\n     */\n    isEditMode?: boolean;\n    /**\n     * The minimum width of a file in the edit mode\n     */\n    fileMinWidth?: number;\n    /**\n     *  Images and videos which should be displayed\n     */\n    files?: FileItem[];\n    /**\n     *  Function to be executed when files are added and uploaded\n     */\n    onAdd?: (file: FileItem) => void;\n    /**\n     * Function to be executed when the count of files are changed. Needed to check if all files are uploaded\n     */\n    onFileCountChange?: (fileCount: number) => void;\n    /**\n     *  Function to be executed when a file is removed\n     */\n    onRemove?: (file: FileItem) => void;\n    /**\n     * The mode how the images should be displayed.\n     */\n    viewMode?: GalleryViewMode;\n};\n\nconst Gallery: FC<GalleryProps> = ({\n    allowDragAndDrop = false,\n    doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',\n    isEditMode = false,\n    fileMinWidth = 100,\n    files,\n    onAdd,\n    onFileCountChange,\n    onRemove,\n    viewMode = GalleryViewMode.GRID,\n}) => {\n    const [fileItems, setFileItems] = useState<InternalFileItem[]>([]);\n\n    /**\n     * This function adds a previewUrl to fileItems\n     */\n    const handlePreviewUrlCallback = (previewUrl: string, file: InternalFileItem) => {\n        setFileItems((prevState) =>\n            prevState.map((prevFile) => {\n                if (prevFile.id === file.id) {\n                    return { ...prevFile, previewUrl };\n                }\n                return prevFile;\n            }),\n        );\n    };\n\n    const callDuplicateFileDialog = useCallback(() => {\n        createDialog({ type: DialogType.ALERT, text: doubleFileDialogMessage });\n    }, [doubleFileDialogMessage]);\n\n    /**\n     * This function adds uploaded files to fileItems\n     */\n    const handleUploadFileCallback = useCallback(\n        (file: InternalFileItem, uploadedFile: Video | Image) => {\n            setFileItems((prevState) => {\n                const updatedState = prevState.map((prevFile) => {\n                    if (prevFile.uploadedFile?.url === uploadedFile.url) {\n                        callDuplicateFileDialog();\n\n                        return undefined;\n                    }\n\n                    if (prevFile.id === file.id) {\n                        if (typeof onAdd === 'function') {\n                            onAdd({\n                                file: uploadedFile,\n                                id: file.id,\n                            });\n                        }\n\n                        return {\n                            ...prevFile,\n                            uploadedFile,\n                            state: 'uploaded',\n                        };\n                    }\n\n                    return prevFile;\n                });\n\n                const tmp: InternalFileItem[] = [];\n\n                updatedState.forEach((updatedFile) => {\n                    if (updatedFile !== undefined) {\n                        tmp.push(updatedFile as InternalFileItem);\n                    }\n                });\n\n                return tmp ?? [];\n            });\n        },\n        [callDuplicateFileDialog, onAdd],\n    );\n\n    /**\n     * Returns the current count to check if all files are uploaded\n     */\n    useEffect(() => {\n        if (typeof onFileCountChange === 'function') {\n            onFileCountChange(fileItems.length);\n        }\n    }, [fileItems.length, onFileCountChange]);\n\n    /**\n     * Prepares files for previewUrl and upload\n     */\n    useEffect(() => {\n        const filesToGeneratePreview = fileItems.filter(\n            (file) => file.file && !file.previewUrl && (file.state === 'none' || !file.state),\n        );\n\n        const filesToUpload = fileItems.filter(\n            (file) => !file.uploadedFile && file.state !== 'uploading',\n        );\n\n        console.log('Gallery', { filesToGeneratePreview, filesToUpload, fileItems });\n\n        filesToGeneratePreview.forEach((file) => {\n            if (!file.file) {\n                return;\n            }\n\n            console.log('filesToGeneratePreview:', file);\n\n            if (file.file.type.includes('video/')) {\n                generateVideoThumbnail({\n                    file: file.file,\n                    callback: (previewUrl) => handlePreviewUrlCallback(previewUrl, file),\n                });\n\n                return;\n            }\n\n            generatePreviewUrl({\n                file: file.file,\n                callback: (previewUrl) => handlePreviewUrlCallback(previewUrl, file),\n            });\n        });\n\n        filesToUpload.forEach((file) => {\n            setFileItems((prevState) =>\n                prevState.map((prevFile) => {\n                    if (prevFile.id === file.id) {\n                        return { ...prevFile, state: 'uploading' };\n                    }\n                    return prevFile;\n                }),\n            );\n\n            void uploadFile({\n                fileToUpload: file,\n                callback: (UploadedFile) => handleUploadFileCallback(file, UploadedFile),\n            });\n        });\n    }, [fileItems, handleUploadFileCallback]);\n\n    /**\n     * This function formats and adds files to fileItems\n     */\n    const handleAddFiles = useCallback(\n        (filesToAdd: File[]) => {\n            const newFileItems: InternalFileItem[] = [];\n\n            filesToAdd.forEach((file) => {\n                if (file && !filterDuplicateFile({ files: fileItems, newFile: file })) {\n                    newFileItems.push({\n                        id: uuidv4(),\n                        file,\n                        state: 'none',\n                    });\n                }\n            });\n\n            setFileItems((prevState) => [...prevState, ...newFileItems]);\n        },\n        [fileItems],\n    );\n\n    /**\n     * This function adds external files to fileItems\n     */\n    useEffect(() => {\n        if (files) {\n            const newFileItems: InternalFileItem[] = [];\n\n            files.forEach((file) => {\n                newFileItems.push({\n                    id: file.id ?? uuidv4(),\n                    uploadedFile: file.file,\n                    file: undefined,\n                    state: 'uploaded',\n                    previewUrl: undefined,\n                });\n            });\n\n            setFileItems((prevState) => {\n                const updatedItems = prevState.map((prevItem) => {\n                    const newItem = newFileItems.find(\n                        (item) =>\n                            item.uploadedFile &&\n                            item.uploadedFile.url ===\n                                (prevItem.uploadedFile && prevItem.uploadedFile.url),\n                    );\n                    return newItem || prevItem;\n                });\n\n                return updatedItems.concat(\n                    newFileItems.filter(\n                        (newItem) =>\n                            !prevState.some(\n                                (prevItem) =>\n                                    prevItem.uploadedFile &&\n                                    newItem.uploadedFile &&\n                                    prevItem.uploadedFile.url === newItem.uploadedFile.url,\n                            ),\n                    ),\n                );\n            });\n        }\n    }, [files]);\n\n    /**\n     * This function deletes a selected file from the file list\n     */\n    const handleDeleteFile = useCallback(\n        (id?: string) => {\n            let fileToDelete: FileItem | undefined;\n\n            const filteredFiles = fileItems.filter((file) => {\n                const fileId = file.id;\n\n                if (fileId === id && file.uploadedFile) {\n                    fileToDelete = { file: file.uploadedFile, id };\n                }\n\n                return fileId !== id;\n            });\n\n            setFileItems(filteredFiles);\n\n            if (!fileToDelete || typeof onRemove !== 'function') {\n                return;\n            }\n\n            onRemove(fileToDelete);\n        },\n        [fileItems, onRemove],\n    );\n\n    /**\n     * This function handles the drag and drop\n     */\n    const handleDrop = useCallback(\n        (e: DragEvent<HTMLDivElement>) => {\n            if (!allowDragAndDrop) {\n                return;\n            }\n\n            e.preventDefault();\n            const draggedFiles = Array.from(e.dataTransfer.files);\n\n            handleAddFiles(draggedFiles);\n        },\n        [allowDragAndDrop, handleAddFiles],\n    );\n\n    /**\n     * Opens the files in a slideShow\n     */\n    const openFiles = useCallback(\n        (file: InternalFileItem) => {\n            const startIndex = fileItems.findIndex((item) => item.id === file.id);\n\n            const items: OpenMediaItem[] = fileItems.map((item) => ({\n                url: item.uploadedFile?.url.replace('_0.mp4', '.mp4') ?? '',\n                mediaType:\n                    item.uploadedFile && 'thumbnailUrl' in item.uploadedFile\n                        ? MediaType.VIDEO\n                        : MediaType.IMAGE,\n            }));\n\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            void openMedia({ items, startIndex });\n        },\n        [fileItems],\n    );\n\n    /**\n     * Returns the ratio of the single file\n     */\n    const ratio = useMemo(() => {\n        switch (fileItems.length) {\n            case 0:\n                return 0;\n            case 1:\n                return Math.max(fileItems[0]?.uploadedFile?.ratio ?? 1, 1);\n            case 2:\n                return 2;\n            case 3:\n                return 3;\n            default:\n                return 1;\n        }\n    }, [fileItems]);\n\n    const galleryContent = useMemo(() => {\n        const combinedFilesLength = fileItems.length;\n\n        if (isEditMode) {\n            const items = fileItems.map((file) => (\n                <GalleryItem\n                    key={file.id}\n                    fileItem={file}\n                    isEditMode\n                    onClick={openFiles}\n                    handleDeleteFile={handleDeleteFile}\n                />\n            ));\n\n            items.push(<AddFile key=\"add_file\" onAdd={handleAddFiles} />);\n\n            return items;\n        }\n\n        const shortedFiles = fileItems.slice(0, 4);\n\n        return shortedFiles.map((file, index) => {\n            let imageRatio = 1;\n\n            if (viewMode === GalleryViewMode.GRID) {\n                if (combinedFilesLength === 2 && (index === 0 || index === 1)) {\n                    imageRatio = 0.5;\n                } else if (\n                    (index === 0 && combinedFilesLength > 2) ||\n                    (combinedFilesLength === 3 && (index === 1 || index === 2))\n                ) {\n                    imageRatio = 1.5;\n                }\n            }\n\n            return (\n                <GalleryItem\n                    key={file.id}\n                    fileItem={file}\n                    isEditMode={false}\n                    handleDeleteFile={handleDeleteFile}\n                    onClick={openFiles}\n                    ratio={imageRatio}\n                    remainingItemsLength={\n                        combinedFilesLength > 4 && index === 3 ? combinedFilesLength : undefined\n                    }\n                />\n            );\n        });\n    }, [fileItems, isEditMode, handleAddFiles, openFiles, handleDeleteFile, viewMode]);\n\n    return useMemo(\n        () => (\n            <StyledGallery>\n                {isEditMode ? (\n                    <StyledGalleryEditModeWrapper\n                        $fileMinWidth={fileMinWidth}\n                        onDragOver={(e) => e.preventDefault()}\n                        onDrop={(e) => void handleDrop(e)}\n                    >\n                        {galleryContent}\n                    </StyledGalleryEditModeWrapper>\n                ) : (\n                    <StyledGalleryItemWrapper\n                        $ratio={ratio}\n                        $uploadedFileLength={fileItems.length}\n                        $viewMode={viewMode}\n                    >\n                        {galleryContent}\n                    </StyledGalleryItemWrapper>\n                )}\n            </StyledGallery>\n        ),\n        [isEditMode, fileMinWidth, galleryContent, ratio, fileItems.length, viewMode, handleDrop],\n    );\n};\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/gallery",
-    "version": "5.0.0-beta.470",
+    "version": "5.0.0-beta.471",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -70,5 +70,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "23402f3f25399df243dc2d4daa89fe50020953a0"
+    "gitHead": "b8631c386cb8a13a4a49d69468398ecdd9bc774a"
 }