@chayns-components/gallery 5.0.0-beta.1310 → 5.0.0-beta.1312

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -284,7 +284,10 @@ const Gallery = ({
284
284
  return shortedFiles.map((file, index) => {
285
285
  let imageRatio = 1;
286
286
  if (viewMode === _gallery.GalleryViewMode.GRID) {
287
- if (combinedFilesLength === 2 && (index === 0 || index === 1)) {
287
+ if (combinedFilesLength === 1) {
288
+ var _fileItems$2;
289
+ imageRatio = ((_fileItems$2 = fileItems[0]) === null || _fileItems$2 === void 0 || (_fileItems$2 = _fileItems$2.uploadedFile) === null || _fileItems$2 === void 0 ? void 0 : _fileItems$2.ratio) ?? 1;
290
+ } else if (combinedFilesLength === 2 && (index === 0 || index === 1)) {
288
291
  imageRatio = 0.5;
289
292
  } else if (index === 0 && combinedFilesLength > 2 || combinedFilesLength === 3 && (index === 1 || index === 2)) {
290
293
  imageRatio = 1.5;
@@ -1 +1 @@
1
- {"version":3,"file":"Gallery.js","names":["_core","require","_chaynsApi","_react","_interopRequireWildcard","_uuid","_gallery","_file","_AddFile","_interopRequireDefault","_GalleryItem","_Gallery","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Gallery","allowDragAndDrop","doubleFileDialogMessage","isEditMode","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","viewMode","GalleryViewMode","GRID","fileItems","setFileItems","useState","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","callDuplicateFileDialog","useCallback","createDialog","type","DialogType","ALERT","text","handleUploadFileCallback","uploadedFile","updatedState","_prevFile$uploadedFil","url","undefined","prevElement","find","newUploadedFile","state","tmp","forEach","updatedFile","push","useEffect","length","filesToGeneratePreview","filter","filesToUpload","includes","generateVideoThumbnail","callback","generatePreviewUrl","uploadFile","fileToUpload","UploadedFile","handleAddFiles","filesToAdd","newFileItems","filterDuplicateFile","newFile","uuidv4","slice","updatedItems","prevItem","newItem","item","concat","some","handleDeleteFile","fileToDelete","filteredFiles","fileId","handleDrop","preventDefault","draggedFiles","Array","from","dataTransfer","openFiles","startIndex","findIndex","items","_item$uploadedFile","replace","mediaType","MediaType","VIDEO","IMAGE","openMedia","ratio","useMemo","_fileItems$","Math","max","galleryContent","combinedFilesLength","createElement","key","fileItem","onClick","shortedFiles","index","imageRatio","remainingItemsLength","StyledGallery","StyledGalleryEditModeWrapper","$fileMinWidth","onDragOver","onDrop","StyledGalleryItemWrapper","$ratio","$uploadedFileLength","$viewMode","displayName","_default","exports"],"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 * 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 * Whether images and videos can be edited\n */\n isEditMode?: boolean;\n /**\n * The maximum amount of images and videos that can be uploaded.\n */\n maxFiles?: number;\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 maxFiles,\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 const prevElement = prevState.find(\n ({ uploadedFile: newUploadedFile }) =>\n newUploadedFile?.url === uploadedFile?.url,\n );\n\n if (!prevElement) {\n onAdd({\n file: uploadedFile,\n id: file.id,\n });\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 let tmp = newFileItems;\n\n if (maxFiles) {\n tmp = newFileItems.slice(0, maxFiles - (fileItems.length + filesToAdd.length - 1));\n }\n\n setFileItems((prevState) => [...prevState, ...tmp]);\n },\n [fileItems, maxFiles],\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 if (maxFiles && maxFiles <= combinedFilesLength) {\n return items;\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, maxFiles, 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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","ignoreList":[]}
1
+ {"version":3,"file":"Gallery.js","names":["_core","require","_chaynsApi","_react","_interopRequireWildcard","_uuid","_gallery","_file","_AddFile","_interopRequireDefault","_GalleryItem","_Gallery","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Gallery","allowDragAndDrop","doubleFileDialogMessage","isEditMode","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","viewMode","GalleryViewMode","GRID","fileItems","setFileItems","useState","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","callDuplicateFileDialog","useCallback","createDialog","type","DialogType","ALERT","text","handleUploadFileCallback","uploadedFile","updatedState","_prevFile$uploadedFil","url","undefined","prevElement","find","newUploadedFile","state","tmp","forEach","updatedFile","push","useEffect","length","filesToGeneratePreview","filter","filesToUpload","includes","generateVideoThumbnail","callback","generatePreviewUrl","uploadFile","fileToUpload","UploadedFile","handleAddFiles","filesToAdd","newFileItems","filterDuplicateFile","newFile","uuidv4","slice","updatedItems","prevItem","newItem","item","concat","some","handleDeleteFile","fileToDelete","filteredFiles","fileId","handleDrop","preventDefault","draggedFiles","Array","from","dataTransfer","openFiles","startIndex","findIndex","items","_item$uploadedFile","replace","mediaType","MediaType","VIDEO","IMAGE","openMedia","ratio","useMemo","_fileItems$","Math","max","galleryContent","combinedFilesLength","createElement","key","fileItem","onClick","shortedFiles","index","imageRatio","_fileItems$2","remainingItemsLength","StyledGallery","StyledGalleryEditModeWrapper","$fileMinWidth","onDragOver","onDrop","StyledGalleryItemWrapper","$ratio","$uploadedFileLength","$viewMode","displayName","_default","exports"],"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 * 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 * Whether images and videos can be edited\n */\n isEditMode?: boolean;\n /**\n * The maximum amount of images and videos that can be uploaded.\n */\n maxFiles?: number;\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 maxFiles,\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 const prevElement = prevState.find(\n ({ uploadedFile: newUploadedFile }) =>\n newUploadedFile?.url === uploadedFile?.url,\n );\n\n if (!prevElement) {\n onAdd({\n file: uploadedFile,\n id: file.id,\n });\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 let tmp = newFileItems;\n\n if (maxFiles) {\n tmp = newFileItems.slice(0, maxFiles - (fileItems.length + filesToAdd.length - 1));\n }\n\n setFileItems((prevState) => [...prevState, ...tmp]);\n },\n [fileItems, maxFiles],\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 if (maxFiles && maxFiles <= combinedFilesLength) {\n return items;\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 === 1) {\n imageRatio = fileItems[0]?.uploadedFile?.ratio ?? 1;\n } else 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, maxFiles, 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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","ignoreList":[]}
@@ -271,7 +271,9 @@ const Gallery = ({
271
271
  return shortedFiles.map((file, index) => {
272
272
  let imageRatio = 1;
273
273
  if (viewMode === GalleryViewMode.GRID) {
274
- if (combinedFilesLength === 2 && (index === 0 || index === 1)) {
274
+ if (combinedFilesLength === 1) {
275
+ imageRatio = fileItems[0]?.uploadedFile?.ratio ?? 1;
276
+ } else if (combinedFilesLength === 2 && (index === 0 || index === 1)) {
275
277
  imageRatio = 0.5;
276
278
  } else if (index === 0 && combinedFilesLength > 2 || combinedFilesLength === 3 && (index === 1 || index === 2)) {
277
279
  imageRatio = 1.5;
@@ -1 +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","allowDragAndDrop","doubleFileDialogMessage","isEditMode","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","viewMode","GRID","fileItems","setFileItems","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","callDuplicateFileDialog","type","ALERT","text","handleUploadFileCallback","uploadedFile","updatedState","url","undefined","prevElement","find","newUploadedFile","state","tmp","forEach","updatedFile","push","length","filesToGeneratePreview","filter","filesToUpload","includes","callback","fileToUpload","UploadedFile","handleAddFiles","filesToAdd","newFileItems","newFile","slice","updatedItems","prevItem","newItem","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","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 * 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 * Whether images and videos can be edited\n */\n isEditMode?: boolean;\n /**\n * The maximum amount of images and videos that can be uploaded.\n */\n maxFiles?: number;\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 maxFiles,\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 const prevElement = prevState.find(\n ({ uploadedFile: newUploadedFile }) =>\n newUploadedFile?.url === uploadedFile?.url,\n );\n\n if (!prevElement) {\n onAdd({\n file: uploadedFile,\n id: file.id,\n });\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 let tmp = newFileItems;\n\n if (maxFiles) {\n tmp = newFileItems.slice(0, maxFiles - (fileItems.length + filesToAdd.length - 1));\n }\n\n setFileItems((prevState) => [...prevState, ...tmp]);\n },\n [fileItems, maxFiles],\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 if (maxFiles && maxFiles <= combinedFilesLength) {\n return items;\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, maxFiles, 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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","ignoreList":[]}
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","allowDragAndDrop","doubleFileDialogMessage","isEditMode","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","viewMode","GRID","fileItems","setFileItems","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","callDuplicateFileDialog","type","ALERT","text","handleUploadFileCallback","uploadedFile","updatedState","url","undefined","prevElement","find","newUploadedFile","state","tmp","forEach","updatedFile","push","length","filesToGeneratePreview","filter","filesToUpload","includes","callback","fileToUpload","UploadedFile","handleAddFiles","filesToAdd","newFileItems","newFile","slice","updatedItems","prevItem","newItem","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","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 * 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 * Whether images and videos can be edited\n */\n isEditMode?: boolean;\n /**\n * The maximum amount of images and videos that can be uploaded.\n */\n maxFiles?: number;\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 maxFiles,\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 const prevElement = prevState.find(\n ({ uploadedFile: newUploadedFile }) =>\n newUploadedFile?.url === uploadedFile?.url,\n );\n\n if (!prevElement) {\n onAdd({\n file: uploadedFile,\n id: file.id,\n });\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 let tmp = newFileItems;\n\n if (maxFiles) {\n tmp = newFileItems.slice(0, maxFiles - (fileItems.length + filesToAdd.length - 1));\n }\n\n setFileItems((prevState) => [...prevState, ...tmp]);\n },\n [fileItems, maxFiles],\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 if (maxFiles && maxFiles <= combinedFilesLength) {\n return items;\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 === 1) {\n imageRatio = fileItems[0]?.uploadedFile?.ratio ?? 1;\n } else 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, maxFiles, 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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","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/gallery",
3
- "version": "5.0.0-beta.1310",
3
+ "version": "5.0.0-beta.1312",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -70,7 +70,7 @@
70
70
  "typescript": "^5.9.3"
71
71
  },
72
72
  "dependencies": {
73
- "@chayns-components/core": "^5.0.0-beta.1310",
73
+ "@chayns-components/core": "^5.0.0-beta.1312",
74
74
  "uuid": "^10.0.0"
75
75
  },
76
76
  "peerDependencies": {
@@ -83,5 +83,5 @@
83
83
  "publishConfig": {
84
84
  "access": "public"
85
85
  },
86
- "gitHead": "8ec65939cdce7962e8503da53fd71ba75fefefcf"
86
+ "gitHead": "aa2b5805a5b05bf85baecab8a9b513971ecdf244"
87
87
  }