@chayns-components/gallery 5.0.0-beta.261 → 5.0.0-beta.263
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.
|
@@ -12,7 +12,6 @@ var _AddFile = _interopRequireDefault(require("./add-file/AddFile"));
|
|
|
12
12
|
var _GalleryItem = _interopRequireDefault(require("./gallery-item/GalleryItem"));
|
|
13
13
|
var _Gallery = require("./Gallery.styles");
|
|
14
14
|
var _chaynsApi = require("chayns-api");
|
|
15
|
-
var _fileDialog = require("@chayns-components/core/lib/utils/fileDialog");
|
|
16
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
16
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
18
17
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -83,17 +82,6 @@ const Gallery = _ref => {
|
|
|
83
82
|
* Prepares files for previewUrl and upload
|
|
84
83
|
*/
|
|
85
84
|
(0, _react.useEffect)(() => {
|
|
86
|
-
const testFile = fileItems[0] && fileItems[0].file;
|
|
87
|
-
if (testFile) {
|
|
88
|
-
void (0, _fileDialog.getFileAsArrayBuffer)(testFile).then(result => {
|
|
89
|
-
console.log('USEEFFECT - file change', {
|
|
90
|
-
testFile,
|
|
91
|
-
result
|
|
92
|
-
});
|
|
93
|
-
}).catch(e => {
|
|
94
|
-
console.error('Error at USEEFFECT - file change', e);
|
|
95
|
-
});
|
|
96
|
-
}
|
|
97
85
|
const filesToGeneratePreview = fileItems.filter(file => file.file && !file.previewUrl && (file.state === 'none' || !file.state));
|
|
98
86
|
const filesToUpload = fileItems.filter(file => !file.uploadedFile && file.state !== 'uploading');
|
|
99
87
|
filesToGeneratePreview.forEach(file => {
|
|
@@ -157,17 +145,6 @@ const Gallery = _ref => {
|
|
|
157
145
|
(0, _react.useEffect)(() => {
|
|
158
146
|
if (files) {
|
|
159
147
|
const newFileItems = [];
|
|
160
|
-
const testFile = newFileItems[0] && newFileItems[0].file;
|
|
161
|
-
if (testFile) {
|
|
162
|
-
void (0, _fileDialog.getFileAsArrayBuffer)(testFile).then(result => {
|
|
163
|
-
console.log('USEEFFECT - file input', {
|
|
164
|
-
testFile,
|
|
165
|
-
result
|
|
166
|
-
});
|
|
167
|
-
}).catch(e => {
|
|
168
|
-
console.error('Error at USEEFFECT - file input', e);
|
|
169
|
-
});
|
|
170
|
-
}
|
|
171
148
|
files.forEach(file => {
|
|
172
149
|
newFileItems.push({
|
|
173
150
|
id: (0, _uuid.v4)(),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Gallery.js","names":["_core","require","_react","_interopRequireWildcard","_uuid","_file","_AddFile","_interopRequireDefault","_GalleryItem","_Gallery","_chaynsApi","_fileDialog","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Gallery","_ref","accessToken","allowDragAndDrop","isEditMode","fileMinWidth","files","onAdd","onFileCountChange","onRemove","personId","fileItems","setFileItems","useState","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","handleUploadFileCallback","useCallback","UploadedFile","uploadedFile","state","useEffect","length","testFile","getFileAsArrayBuffer","then","result","console","log","catch","e","error","filesToGeneratePreview","filter","filesToUpload","forEach","type","includes","generateVideoThumbnail","callback","generatePreviewUrl","uploadFile","fileToUpload","handleAddFiles","filesToAdd","newFileItems","filterDuplicateFile","newFile","push","uuidv4","url","undefined","handleDeleteFile","fileToDelete","filteredFiles","fileId","handleDrop","preventDefault","draggedFiles","Array","from","dataTransfer","openFiles","startIndex","findIndex","item","items","_item$uploadedFile$ur","_item$uploadedFile","_item$file","replace","mediaType","MediaType","VIDEO","IMAGE","openMedia","ratio","useMemo","_fileItems$0$uploaded","_fileItems$","Math","max","columns","combinedFilesLength","galleryContent","createElement","fileItem","onClick","shortedFiles","slice","index","remainingItemsLength","StyledGallery","StyledGalleryEditModeWrapper","onDragOver","onDrop","StyledGalleryItemWrapper","uploadedFileLength","displayName","_default","exports"],"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 React, { DragEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\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';\nimport { MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport { getFileAsArrayBuffer } from '@chayns-components/core/lib/utils/fileDialog';\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\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}) => {\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 testFile = fileItems[0] && fileItems[0].file;\n\n if (testFile) {\n void getFileAsArrayBuffer(testFile)\n .then((result) => {\n console.log('USEEFFECT - file change', { testFile, result });\n })\n .catch((e) => {\n console.error('Error at USEEFFECT - file change', e);\n });\n }\n\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 const testFile = newFileItems[0] && newFileItems[0].file;\n\n if (testFile) {\n void getFileAsArrayBuffer(testFile)\n .then((result) => {\n console.log('USEEFFECT - file input', { testFile, result });\n })\n .catch((e) => {\n console.error('Error at USEEFFECT - file input', e);\n });\n }\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: item.file?.type.includes('video/') ? MediaType.VIDEO : 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 /**\n * Returns the number of columns\n */\n const columns = useMemo(() => {\n const combinedFilesLength = fileItems.length;\n\n if (combinedFilesLength <= 1) {\n return '';\n }\n\n return `repeat(${combinedFilesLength === 3 ? 3 : 2}, 1fr)`;\n }, [fileItems.length]);\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 <GalleryItem\n key={file.id}\n fileItem={file}\n isEditMode={false}\n handleDeleteFile={handleDeleteFile}\n onClick={openFiles}\n remainingItemsLength={\n combinedFilesLength > 4 && index === 3 ? combinedFilesLength : undefined\n }\n />\n ));\n }, [fileItems, isEditMode, handleAddFiles, openFiles, handleDeleteFile]);\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 columns={columns}\n uploadedFileLength={fileItems.length}\n >\n {galleryContent}\n </StyledGalleryItemWrapper>\n )}\n </StyledGallery>\n ),\n [isEditMode, fileMinWidth, galleryContent, ratio, columns, fileItems.length, handleDrop]\n );\n};\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Gallery.js","names":["_core","require","_react","_interopRequireWildcard","_uuid","_file","_AddFile","_interopRequireDefault","_GalleryItem","_Gallery","_chaynsApi","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Gallery","_ref","accessToken","allowDragAndDrop","isEditMode","fileMinWidth","files","onAdd","onFileCountChange","onRemove","personId","fileItems","setFileItems","useState","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","handleUploadFileCallback","useCallback","UploadedFile","uploadedFile","state","useEffect","length","filesToGeneratePreview","filter","filesToUpload","forEach","type","includes","generateVideoThumbnail","callback","generatePreviewUrl","uploadFile","fileToUpload","handleAddFiles","filesToAdd","newFileItems","filterDuplicateFile","newFile","push","uuidv4","url","undefined","handleDeleteFile","fileToDelete","filteredFiles","fileId","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","openFiles","startIndex","findIndex","item","items","_item$uploadedFile$ur","_item$uploadedFile","_item$file","replace","mediaType","MediaType","VIDEO","IMAGE","openMedia","ratio","useMemo","_fileItems$0$uploaded","_fileItems$","Math","max","columns","combinedFilesLength","galleryContent","createElement","fileItem","onClick","shortedFiles","slice","index","remainingItemsLength","StyledGallery","StyledGalleryEditModeWrapper","onDragOver","onDrop","StyledGalleryItemWrapper","uploadedFileLength","displayName","_default","exports"],"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 React, { DragEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\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';\nimport { MediaType, openMedia, OpenMediaItem } from 'chayns-api';\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\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}) => {\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: item.file?.type.includes('video/') ? MediaType.VIDEO : 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 /**\n * Returns the number of columns\n */\n const columns = useMemo(() => {\n const combinedFilesLength = fileItems.length;\n\n if (combinedFilesLength <= 1) {\n return '';\n }\n\n return `repeat(${combinedFilesLength === 3 ? 3 : 2}, 1fr)`;\n }, [fileItems.length]);\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 <GalleryItem\n key={file.id}\n fileItem={file}\n isEditMode={false}\n handleDeleteFile={handleDeleteFile}\n onClick={openFiles}\n remainingItemsLength={\n combinedFilesLength > 4 && index === 3 ? combinedFilesLength : undefined\n }\n />\n ));\n }, [fileItems, isEditMode, handleAddFiles, openFiles, handleDeleteFile]);\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 columns={columns}\n uploadedFileLength={fileItems.length}\n >\n {galleryContent}\n </StyledGalleryItemWrapper>\n )}\n </StyledGallery>\n ),\n [isEditMode, fileMinWidth, galleryContent, ratio, columns, fileItems.length, handleDrop]\n );\n};\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/gallery",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.263",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"chayns",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"typescript": "^4.9.5"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@chayns-components/core": "^5.0.0-beta.
|
|
53
|
+
"@chayns-components/core": "^5.0.0-beta.263",
|
|
54
54
|
"@chayns/colors": "^2.0.0",
|
|
55
55
|
"chayns-api": "^1.0.38",
|
|
56
56
|
"clsx": "^1.2.1",
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
"publishConfig": {
|
|
66
66
|
"access": "public"
|
|
67
67
|
},
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "dc3ef24b1c98fb78cd29a484c268cbc00840be8b"
|
|
69
69
|
}
|