@chayns-components/gallery 5.0.0-beta.456 → 5.0.0-beta.457

package/lib/components/Gallery.d.ts

@@ -2,10 +2,6 @@ import type { FileItem } from '@chayns-components/core/lib/types/file';
 import { FC } from 'react';
 import { GalleryViewMode } from '../types/gallery';
 export type GalleryProps = {
-    /**
-     * AccessToken of the user
-     */
-    accessToken: string;
     /**
      * Whether drag and drop is allowed or not
      */
@@ -34,10 +30,6 @@ export type GalleryProps = {
      *  Function to be executed when a file is removed
      */
     onRemove?: (file: FileItem) => void;
-    /**
-     * PersonId of the user
-     */
-    personId: string;
     /**
      * The mode how the images should be displayed.
      */

package/lib/components/Gallery.js

@@ -10,7 +10,6 @@ import GalleryItem from './gallery-item/GalleryItem';
 import { StyledGallery, StyledGalleryEditModeWrapper, StyledGalleryItemWrapper } from './Gallery.styles';
 const Gallery = _ref => {
   let {
-    accessToken,
     allowDragAndDrop = false,
     isEditMode = false,
     fileMinWidth = 100,
@@ -18,7 +17,6 @@ const Gallery = _ref => {
     onAdd,
     onFileCountChange,
     onRemove,
-    personId,
     viewMode = GalleryViewMode.GRID
   } = _ref;
   const [fileItems, setFileItems] = useState([]);
@@ -104,12 +102,10 @@ const Gallery = _ref => {
       }));
       void uploadFile({
         fileToUpload: file,
-        personId,
-        accessToken,
         callback: UploadedFile => handleUploadFileCallback(file, UploadedFile)
       });
     });
-  }, [accessToken, fileItems, handleUploadFileCallback, personId]);
+  }, [fileItems, handleUploadFileCallback]);
 
   /**
    * This function formats and adds files to fileItems

package/lib/components/Gallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.js","names":["uploadFile","MediaType","openMedia","React","useCallback","useEffect","useMemo","useState","v4","uuidv4","GalleryViewMode","filterDuplicateFile","generatePreviewUrl","generateVideoThumbnail","AddFile","GalleryItem","StyledGallery","StyledGalleryEditModeWrapper","StyledGalleryItemWrapper","Gallery","_ref","accessToken","allowDragAndDrop","isEditMode","fileMinWidth","files","onAdd","onFileCountChange","onRemove","personId","viewMode","GRID","fileItems","setFileItems","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","handleUploadFileCallback","UploadedFile","uploadedFile","state","length","filesToGeneratePreview","filter","filesToUpload","forEach","type","includes","callback","fileToUpload","handleAddFiles","filesToAdd","newFileItems","newFile","push","url","undefined","handleDeleteFile","fileToDelete","filteredFiles","fileId","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","openFiles","startIndex","findIndex","item","items","replace","mediaType","VIDEO","IMAGE","ratio","Math","max","galleryContent","combinedFilesLength","createElement","key","fileItem","onClick","shortedFiles","slice","index","imageRatio","remainingItemsLength","onDragOver","onDrop","uploadedFileLength","displayName"],"sources":["../../src/components/Gallery.tsx"],"sourcesContent":["import { uploadFile } from '@chayns-components/core';\nimport type { FileItem, Image, Video } from '@chayns-components/core/lib/types/file'; // TODO: Check why absolute import is needed\nimport { 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     * AccessToken of the user\n     */\n    accessToken: string;\n    /**\n     * Whether drag and drop is allowed or not\n     */\n    allowDragAndDrop?: boolean;\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     * PersonId of the user\n     */\n    personId: string;\n    /**\n     * The mode how the images should be displayed.\n     */\n    viewMode?: GalleryViewMode;\n};\n\nconst Gallery: FC<GalleryProps> = ({\n    accessToken,\n    allowDragAndDrop = false,\n    isEditMode = false,\n    fileMinWidth = 100,\n    files,\n    onAdd,\n    onFileCountChange,\n    onRemove,\n    personId,\n    viewMode = GalleryViewMode.GRID,\n}) => {\n    const [fileItems, setFileItems] = useState<FileItem[]>([]);\n\n    /**\n     * This function adds a previewUrl to fileItems\n     */\n    const handlePreviewUrlCallback = (previewUrl: string, file: FileItem) => {\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    /**\n     * This function adds uploaded files to fileItems\n     */\n    const handleUploadFileCallback = useCallback(\n        (file: FileItem, UploadedFile: Video | Image) => {\n            setFileItems((prevState) =>\n                prevState.map((prevFile) => {\n                    if (prevFile.id === file.id) {\n                        if (typeof onAdd === 'function') {\n                            onAdd({\n                                ...prevFile,\n                                uploadedFile: UploadedFile,\n                                state: 'uploaded',\n                            });\n                        }\n\n                        return {\n                            ...prevFile,\n                            uploadedFile: UploadedFile,\n                            state: 'uploaded',\n                        };\n                    }\n                    return prevFile;\n                }),\n            );\n        },\n        [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                personId,\n                accessToken,\n                callback: (UploadedFile) => handleUploadFileCallback(file, UploadedFile),\n            });\n        });\n    }, [accessToken, fileItems, handleUploadFileCallback, personId]);\n\n    /**\n     * This function formats and adds files to fileItems\n     */\n    const handleAddFiles = useCallback(\n        (filesToAdd: File[]) => {\n            const newFileItems: FileItem[] = [];\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: FileItem[] = [];\n\n            files.forEach((file) => {\n                newFileItems.push({\n                    id: uuidv4(),\n                    uploadedFile: file.uploadedFile,\n                    file: file.file,\n                    state: file.uploadedFile ? 'uploaded' : 'none',\n                    previewUrl: file.uploadedFile ? file.uploadedFile.url : undefined,\n                });\n            });\n\n            setFileItems((prevState) => [...prevState, ...newFileItems]);\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) {\n                    fileToDelete = file;\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: FileItem) => {\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","MediaType","openMedia","React","useCallback","useEffect","useMemo","useState","v4","uuidv4","GalleryViewMode","filterDuplicateFile","generatePreviewUrl","generateVideoThumbnail","AddFile","GalleryItem","StyledGallery","StyledGalleryEditModeWrapper","StyledGalleryItemWrapper","Gallery","_ref","allowDragAndDrop","isEditMode","fileMinWidth","files","onAdd","onFileCountChange","onRemove","viewMode","GRID","fileItems","setFileItems","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","handleUploadFileCallback","UploadedFile","uploadedFile","state","length","filesToGeneratePreview","filter","filesToUpload","forEach","type","includes","callback","fileToUpload","handleAddFiles","filesToAdd","newFileItems","newFile","push","url","undefined","handleDeleteFile","fileToDelete","filteredFiles","fileId","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","openFiles","startIndex","findIndex","item","items","replace","mediaType","VIDEO","IMAGE","ratio","Math","max","galleryContent","combinedFilesLength","createElement","key","fileItem","onClick","shortedFiles","slice","index","imageRatio","remainingItemsLength","onDragOver","onDrop","uploadedFileLength","displayName"],"sources":["../../src/components/Gallery.tsx"],"sourcesContent":["import { uploadFile } from '@chayns-components/core';\nimport type { FileItem, Image, Video } from '@chayns-components/core/lib/types/file'; // TODO: Check why absolute import is needed\nimport { 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     *  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    isEditMode = false,\n    fileMinWidth = 100,\n    files,\n    onAdd,\n    onFileCountChange,\n    onRemove,\n    viewMode = GalleryViewMode.GRID,\n}) => {\n    const [fileItems, setFileItems] = useState<FileItem[]>([]);\n\n    /**\n     * This function adds a previewUrl to fileItems\n     */\n    const handlePreviewUrlCallback = (previewUrl: string, file: FileItem) => {\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    /**\n     * This function adds uploaded files to fileItems\n     */\n    const handleUploadFileCallback = useCallback(\n        (file: FileItem, UploadedFile: Video | Image) => {\n            setFileItems((prevState) =>\n                prevState.map((prevFile) => {\n                    if (prevFile.id === file.id) {\n                        if (typeof onAdd === 'function') {\n                            onAdd({\n                                ...prevFile,\n                                uploadedFile: UploadedFile,\n                                state: 'uploaded',\n                            });\n                        }\n\n                        return {\n                            ...prevFile,\n                            uploadedFile: UploadedFile,\n                            state: 'uploaded',\n                        };\n                    }\n                    return prevFile;\n                }),\n            );\n        },\n        [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: FileItem[] = [];\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: FileItem[] = [];\n\n            files.forEach((file) => {\n                newFileItems.push({\n                    id: uuidv4(),\n                    uploadedFile: file.uploadedFile,\n                    file: file.file,\n                    state: file.uploadedFile ? 'uploaded' : 'none',\n                    previewUrl: file.uploadedFile ? file.uploadedFile.url : undefined,\n                });\n            });\n\n            setFileItems((prevState) => [...prevState, ...newFileItems]);\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) {\n                    fileToDelete = file;\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: FileItem) => {\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.456",
+    "version": "5.0.0-beta.457",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -57,7 +57,8 @@
         "typescript": "^5.3.3"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.456"
+        "@chayns-components/core": "^5.0.0-beta.457",
+        "uuid": "^9.0.1"
     },
     "peerDependencies": {
         "chayns-api": ">=1.0.50",
@@ -69,5 +70,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "703953eb5eba477163504a0acf90495d559446ff"
+    "gitHead": "14f7fd7ff2e7c85c81793db66efc02482cdbd527"
 }