@chayns-components/gallery 5.0.0-beta.113 → 5.0.0-beta.115

package/lib/api/image/imageUpload.d.ts

@@ -1,4 +1,4 @@
-import type { Image } from '../../types/files';
+import type { UploadedImage } from '../../utils/file';
 interface ImageUpload {
     accessToken: string;
     file: File | string;
@@ -10,5 +10,5 @@ interface ImageUpload {
 /**
  * Uploads an image to the tsimg cloud service
  */
-export declare const imageUpload: ({ accessToken, file, referenceId, personId, siteId, url, }: ImageUpload) => Promise<Image>;
+export declare const imageUpload: ({ accessToken, file, referenceId, personId, siteId, url, }: ImageUpload) => Promise<UploadedImage>;
 export {};

package/lib/api/image/imageUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"imageUpload.js","names":["imageUpload","_ref","accessToken","file","referenceId","personId","siteId","url","headers","Headers","Accept","set","body","JSON","stringify","getFileArrayBuffer","response","fetch","method","ok","json","Error","status","exports","Promise","resolve","reject","reader","FileReader","onload","e","_e$target","target","result","onerror","readAsArrayBuffer"],"sources":["../../../src/api/image/imageUpload.ts"],"sourcesContent":["import type { Image } from '../../types/files';\n\ninterface ImageUpload {\n    accessToken: string;\n    file: File | string;\n    referenceId?: string;\n    personId: string;\n    siteId?: string;\n    url?: string;\n}\n\n/**\n * Uploads an image to the tsimg cloud service\n */\nexport const imageUpload = async ({\n    accessToken,\n    file,\n    referenceId,\n    personId,\n    siteId,\n    url = 'https://api.tsimg.cloud/image',\n}: ImageUpload): Promise<Image> => {\n    const headers = new Headers({ Accept: 'application/json' });\n\n    if (referenceId) headers.set('X-Reference-Id', referenceId);\n    if (personId) headers.set('X-Person-Id', personId);\n    if (siteId) headers.set('X-Site-Id', siteId);\n\n    headers.set('Authorization', `bearer ${accessToken}`);\n\n    let body: string | ArrayBuffer;\n\n    if (typeof file === 'string') {\n        headers.set('Content-Type', 'application/json');\n        body = JSON.stringify({ url: file });\n    } else {\n        headers.set('Content-Type', 'image/*');\n        body = await getFileArrayBuffer(file);\n    }\n\n    const response = await fetch(url, { method: 'POST', body, headers });\n\n    if (response.ok) {\n        return (await response.json()) as Promise<Image>;\n    }\n\n    throw Error(`Uploading the image failed with status code ${response.status}.`);\n};\n\nconst getFileArrayBuffer = (file: File): Promise<string | ArrayBuffer> =>\n    new Promise((resolve, reject) => {\n        const reader = new FileReader();\n        reader.onload = (e) => {\n            if (e.target?.result) {\n                resolve(e.target.result);\n            } else {\n                reject(Error('Could not get array buffer.'));\n            }\n        };\n        reader.onerror = reject;\n        reader.readAsArrayBuffer(file);\n    });\n"],"mappings":";;;;;;AAWA;AACA;AACA;AACO,MAAMA,WAAW,GAAG,MAAAC,IAAA,IAOQ;EAAA,IAPD;IAC9BC,WAAW;IACXC,IAAI;IACJC,WAAW;IACXC,QAAQ;IACRC,MAAM;IACNC,GAAG,GAAG;EACG,CAAC,GAAAN,IAAA;EACV,MAAMO,OAAO,GAAG,IAAIC,OAAO,CAAC;IAAEC,MAAM,EAAE;EAAmB,CAAC,CAAC;EAE3D,IAAIN,WAAW,EAAEI,OAAO,CAACG,GAAG,CAAC,gBAAgB,EAAEP,WAAW,CAAC;EAC3D,IAAIC,QAAQ,EAAEG,OAAO,CAACG,GAAG,CAAC,aAAa,EAAEN,QAAQ,CAAC;EAClD,IAAIC,MAAM,EAAEE,OAAO,CAACG,GAAG,CAAC,WAAW,EAAEL,MAAM,CAAC;EAE5CE,OAAO,CAACG,GAAG,CAAC,eAAe,EAAG,UAAST,WAAY,EAAC,CAAC;EAErD,IAAIU,IAA0B;EAE9B,IAAI,OAAOT,IAAI,KAAK,QAAQ,EAAE;IAC1BK,OAAO,CAACG,GAAG,CAAC,cAAc,EAAE,kBAAkB,CAAC;IAC/CC,IAAI,GAAGC,IAAI,CAACC,SAAS,CAAC;MAAEP,GAAG,EAAEJ;IAAK,CAAC,CAAC;EACxC,CAAC,MAAM;IACHK,OAAO,CAACG,GAAG,CAAC,cAAc,EAAE,SAAS,CAAC;IACtCC,IAAI,GAAG,MAAMG,kBAAkB,CAACZ,IAAI,CAAC;EACzC;EAEA,MAAMa,QAAQ,GAAG,MAAMC,KAAK,CAACV,GAAG,EAAE;IAAEW,MAAM,EAAE,MAAM;IAAEN,IAAI;IAAEJ;EAAQ,CAAC,CAAC;EAEpE,IAAIQ,QAAQ,CAACG,EAAE,EAAE;IACb,OAAQ,MAAMH,QAAQ,CAACI,IAAI,EAAE;EACjC;EAEA,MAAMC,KAAK,CAAE,+CAA8CL,QAAQ,CAACM,MAAO,GAAE,CAAC;AAClF,CAAC;AAACC,OAAA,CAAAvB,WAAA,GAAAA,WAAA;AAEF,MAAMe,kBAAkB,GAAIZ,IAAU,IAClC,IAAIqB,OAAO,CAAC,CAACC,OAAO,EAAEC,MAAM,KAAK;EAC7B,MAAMC,MAAM,GAAG,IAAIC,UAAU,EAAE;EAC/BD,MAAM,CAACE,MAAM,GAAIC,CAAC,IAAK;IAAA,IAAAC,SAAA;IACnB,KAAAA,SAAA,GAAID,CAAC,CAACE,MAAM,cAAAD,SAAA,eAARA,SAAA,CAAUE,MAAM,EAAE;MAClBR,OAAO,CAACK,CAAC,CAACE,MAAM,CAACC,MAAM,CAAC;IAC5B,CAAC,MAAM;MACHP,MAAM,CAACL,KAAK,CAAC,6BAA6B,CAAC,CAAC;IAChD;EACJ,CAAC;EACDM,MAAM,CAACO,OAAO,GAAGR,MAAM;EACvBC,MAAM,CAACQ,iBAAiB,CAAChC,IAAI,CAAC;AAClC,CAAC,CAAC"}
+{"version":3,"file":"imageUpload.js","names":["imageUpload","_ref","accessToken","file","referenceId","personId","siteId","url","headers","Headers","Accept","set","body","JSON","stringify","getFileArrayBuffer","response","fetch","method","ok","json","Error","status","exports","Promise","resolve","reject","reader","FileReader","onload","e","_e$target","target","result","onerror","readAsArrayBuffer"],"sources":["../../../src/api/image/imageUpload.ts"],"sourcesContent":["import type { UploadedImage } from '../../utils/file';\n\ninterface ImageUpload {\n    accessToken: string;\n    file: File | string;\n    referenceId?: string;\n    personId: string;\n    siteId?: string;\n    url?: string;\n}\n\n/**\n * Uploads an image to the tsimg cloud service\n */\nexport const imageUpload = async ({\n    accessToken,\n    file,\n    referenceId,\n    personId,\n    siteId,\n    url = 'https://api.tsimg.cloud/image',\n}: ImageUpload): Promise<UploadedImage> => {\n    const headers = new Headers({ Accept: 'application/json' });\n\n    if (referenceId) headers.set('X-Reference-Id', referenceId);\n    if (personId) headers.set('X-Person-Id', personId);\n    if (siteId) headers.set('X-Site-Id', siteId);\n\n    headers.set('Authorization', `bearer ${accessToken}`);\n\n    let body: string | ArrayBuffer;\n\n    if (typeof file === 'string') {\n        headers.set('Content-Type', 'application/json');\n        body = JSON.stringify({ url: file });\n    } else {\n        headers.set('Content-Type', 'image/*');\n        body = await getFileArrayBuffer(file);\n    }\n\n    const response = await fetch(url, { method: 'POST', body, headers });\n\n    if (response.ok) {\n        return (await response.json()) as Promise<UploadedImage>;\n    }\n\n    throw Error(`Uploading the image failed with status code ${response.status}.`);\n};\n\nconst getFileArrayBuffer = (file: File): Promise<string | ArrayBuffer> =>\n    new Promise((resolve, reject) => {\n        const reader = new FileReader();\n        reader.onload = (e) => {\n            if (e.target?.result) {\n                resolve(e.target.result);\n            } else {\n                reject(Error('Could not get array buffer.'));\n            }\n        };\n        reader.onerror = reject;\n        reader.readAsArrayBuffer(file);\n    });\n"],"mappings":";;;;;;AAWA;AACA;AACA;AACO,MAAMA,WAAW,GAAG,MAAAC,IAAA,IAOgB;EAAA,IAPT;IAC9BC,WAAW;IACXC,IAAI;IACJC,WAAW;IACXC,QAAQ;IACRC,MAAM;IACNC,GAAG,GAAG;EACG,CAAC,GAAAN,IAAA;EACV,MAAMO,OAAO,GAAG,IAAIC,OAAO,CAAC;IAAEC,MAAM,EAAE;EAAmB,CAAC,CAAC;EAE3D,IAAIN,WAAW,EAAEI,OAAO,CAACG,GAAG,CAAC,gBAAgB,EAAEP,WAAW,CAAC;EAC3D,IAAIC,QAAQ,EAAEG,OAAO,CAACG,GAAG,CAAC,aAAa,EAAEN,QAAQ,CAAC;EAClD,IAAIC,MAAM,EAAEE,OAAO,CAACG,GAAG,CAAC,WAAW,EAAEL,MAAM,CAAC;EAE5CE,OAAO,CAACG,GAAG,CAAC,eAAe,EAAG,UAAST,WAAY,EAAC,CAAC;EAErD,IAAIU,IAA0B;EAE9B,IAAI,OAAOT,IAAI,KAAK,QAAQ,EAAE;IAC1BK,OAAO,CAACG,GAAG,CAAC,cAAc,EAAE,kBAAkB,CAAC;IAC/CC,IAAI,GAAGC,IAAI,CAACC,SAAS,CAAC;MAAEP,GAAG,EAAEJ;IAAK,CAAC,CAAC;EACxC,CAAC,MAAM;IACHK,OAAO,CAACG,GAAG,CAAC,cAAc,EAAE,SAAS,CAAC;IACtCC,IAAI,GAAG,MAAMG,kBAAkB,CAACZ,IAAI,CAAC;EACzC;EAEA,MAAMa,QAAQ,GAAG,MAAMC,KAAK,CAACV,GAAG,EAAE;IAAEW,MAAM,EAAE,MAAM;IAAEN,IAAI;IAAEJ;EAAQ,CAAC,CAAC;EAEpE,IAAIQ,QAAQ,CAACG,EAAE,EAAE;IACb,OAAQ,MAAMH,QAAQ,CAACI,IAAI,EAAE;EACjC;EAEA,MAAMC,KAAK,CAAE,+CAA8CL,QAAQ,CAACM,MAAO,GAAE,CAAC;AAClF,CAAC;AAACC,OAAA,CAAAvB,WAAA,GAAAA,WAAA;AAEF,MAAMe,kBAAkB,GAAIZ,IAAU,IAClC,IAAIqB,OAAO,CAAC,CAACC,OAAO,EAAEC,MAAM,KAAK;EAC7B,MAAMC,MAAM,GAAG,IAAIC,UAAU,EAAE;EAC/BD,MAAM,CAACE,MAAM,GAAIC,CAAC,IAAK;IAAA,IAAAC,SAAA;IACnB,KAAAA,SAAA,GAAID,CAAC,CAACE,MAAM,cAAAD,SAAA,eAARA,SAAA,CAAUE,MAAM,EAAE;MAClBR,OAAO,CAACK,CAAC,CAACE,MAAM,CAACC,MAAM,CAAC;IAC5B,CAAC,MAAM;MACHP,MAAM,CAACL,KAAK,CAAC,6BAA6B,CAAC,CAAC;IAChD;EACJ,CAAC;EACDM,MAAM,CAACO,OAAO,GAAGR,MAAM;EACvBC,MAAM,CAACQ,iBAAiB,CAAChC,IAAI,CAAC;AAClC,CAAC,CAAC"}

package/lib/components/Gallery.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import type { Files, UploadedFile } from '../types/files';
+import type { ExternalFile, UploadedFile } from '../types/files';
 export type GalleryProps = {
     /**
      * AccessToken of the user
@@ -16,7 +16,7 @@ export type GalleryProps = {
     /**
      *  Images and videos which should be displayed
      */
-    files?: Files[];
+    files?: ExternalFile[];
     /**
      *  Function to be executed when files are added
      */

package/lib/components/Gallery.js

@@ -23,6 +23,8 @@ const Gallery = _ref => {
     personId
   } = _ref;
   const [uploadedFiles, setUploadedFiles] = (0, _react.useState)([]);
+  const [externalFiles, setExternalFiles] = (0, _react.useState)([]);
+  const combinedFiles = (0, _react.useMemo)(() => [...externalFiles, ...uploadedFiles], [externalFiles, uploadedFiles]);
 
   /**
    * Merge external files with uploaded files
@@ -31,7 +33,7 @@ const Gallery = _ref => {
     if (!files || !Array.isArray(files)) {
       return;
     }
-    const externalFiles = files.map(file => {
+    const newExternalFiles = files.map(file => {
       if ('thumbnailUrl' in file) {
         return {
           id: file.id,
@@ -39,36 +41,37 @@ const Gallery = _ref => {
           thumbnailUrl: file.url
         };
       }
-      const {
-        base,
-        route
-      } = (0, _file.getBaseAndRoute)(file.url);
       return {
-        key: route,
-        base
+        id: file.id,
+        url: file.url
       };
     });
-    setUploadedFiles(prevState => [...prevState, ...externalFiles]);
+    setExternalFiles(newExternalFiles);
   }, [files]);
 
   /**
    * This function deletes a selected file from the file list
    */
-  const handleDeleteFile = (0, _react.useCallback)(key => {
+  const handleDeleteFile = (0, _react.useCallback)(url => {
     let fileToDelete;
+    const externalFileToDelete = externalFiles.find(file => file.url === url);
+    if (externalFileToDelete && typeof onRemove === 'function') {
+      onRemove(externalFileToDelete);
+      return;
+    }
     const filteredFiles = uploadedFiles.filter(file => {
-      const fileKey = 'thumbnailUrl' in file ? file.id : file.key;
-      if (fileKey === key) {
+      const fileUrl = file.url;
+      if (fileUrl === url) {
         fileToDelete = file;
       }
-      return fileKey !== key;
+      return fileUrl !== url;
     });
     setUploadedFiles(filteredFiles);
     if (!fileToDelete || !onRemove) {
       return;
     }
     onRemove(fileToDelete);
-  }, [onRemove, setUploadedFiles, uploadedFiles]);
+  }, [externalFiles, onRemove, uploadedFiles]);
 
   /**
    * This function handles the drag and drop
@@ -101,27 +104,27 @@ const Gallery = _ref => {
    * Returns the ratio of the single file
    */
   const ratio = (0, _react.useMemo)(() => {
-    var _uploadedFiles$0$rati, _uploadedFiles$;
+    var _combinedFiles$0$rati, _combinedFiles$;
     return (
       // If the length is 1, the ratio or at least 1 is returned
-      uploadedFiles.length === 1 ? Math.max((_uploadedFiles$0$rati = (_uploadedFiles$ = uploadedFiles[0]) === null || _uploadedFiles$ === void 0 ? void 0 : _uploadedFiles$.ratio) !== null && _uploadedFiles$0$rati !== void 0 ? _uploadedFiles$0$rati : 1, 1) : 1
+      combinedFiles.length === 1 ? Math.max((_combinedFiles$0$rati = (_combinedFiles$ = combinedFiles[0]) === null || _combinedFiles$ === void 0 ? void 0 : _combinedFiles$.ratio) !== null && _combinedFiles$0$rati !== void 0 ? _combinedFiles$0$rati : 1, 1) : 1
     );
-  }, [uploadedFiles]);
+  }, [combinedFiles]);
 
   /**
    * Returns the number of columns
    */
   const columns = (0, _react.useMemo)(() => {
-    const uploadedFilesLength = uploadedFiles.length;
-    if (uploadedFilesLength <= 1) {
+    const combinedFilesLength = combinedFiles.length;
+    if (combinedFilesLength <= 1) {
       return '';
     }
-    return `repeat(${uploadedFilesLength === 3 ? 3 : 2}, 1fr)`;
-  }, [uploadedFiles]);
+    return `repeat(${combinedFilesLength === 3 ? 3 : 2}, 1fr)`;
+  }, [combinedFiles]);
   const galleryContent = (0, _react.useMemo)(() => {
-    const uploadedFilesLength = uploadedFiles.length;
+    const combinedFilesLength = combinedFiles.length;
     if (isEditMode) {
-      const items = uploadedFiles.map(file => /*#__PURE__*/_react.default.createElement(_GalleryItem.default, {
+      const items = combinedFiles.map(file => /*#__PURE__*/_react.default.createElement(_GalleryItem.default, {
         uploadedFile: file,
         isEditMode: true,
         ratio: ratio,
@@ -136,22 +139,22 @@ const Gallery = _ref => {
       }));
       return items;
     }
-    const shortedFiles = uploadedFiles.slice(0, 4);
+    const shortedFiles = combinedFiles.slice(0, 4);
     return shortedFiles.map((file, index) => /*#__PURE__*/_react.default.createElement(_GalleryItem.default, {
       uploadedFile: file,
       isEditMode: false,
       ratio: ratio,
       handleDeleteFile: handleDeleteFile,
-      remainingItemsLength: uploadedFilesLength > 4 && index === 3 ? uploadedFilesLength : undefined
+      remainingItemsLength: combinedFilesLength > 4 && index === 3 ? combinedFilesLength : undefined
     }));
-  }, [accessToken, handleDeleteFile, isEditMode, onAdd, personId, ratio, uploadedFiles]);
+  }, [combinedFiles, isEditMode, uploadedFiles, onAdd, personId, accessToken, ratio, handleDeleteFile]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Gallery.StyledGallery, null, isEditMode ? /*#__PURE__*/_react.default.createElement(_Gallery.StyledGalleryEditModeWrapper, {
     onDragOver: e => e.preventDefault(),
     onDrop: e => void handleDrop(e)
   }, galleryContent) : /*#__PURE__*/_react.default.createElement(_Gallery.StyledGalleryItemWrapper, {
     columns: columns,
-    uploadedFileLength: uploadedFiles.length
-  }, galleryContent)), [isEditMode, galleryContent, columns, uploadedFiles.length, handleDrop]);
+    uploadedFileLength: combinedFiles.length
+  }, galleryContent)), [isEditMode, galleryContent, columns, combinedFiles.length, handleDrop]);
 };
 Gallery.displayName = 'Gallery';
 var _default = Gallery;

package/lib/components/Gallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.js","names":["_react","_interopRequireWildcard","require","_file","_AddFile","_interopRequireDefault","_GalleryItem","_Gallery","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","files","onAdd","onRemove","personId","uploadedFiles","setUploadedFiles","useState","useEffect","Array","isArray","externalFiles","map","file","id","url","thumbnailUrl","base","route","getBaseAndRoute","prevState","handleDeleteFile","useCallback","fileToDelete","filteredFiles","filter","fileKey","handleDrop","e","preventDefault","draggedFiles","from","dataTransfer","updatedFiles","uploadFiles","filesToUpload","newUniqueFiles","filterDuplicateFiles","oldFiles","newFiles","ratio","useMemo","_uploadedFiles$0$rati","_uploadedFiles$","length","Math","max","columns","uploadedFilesLength","galleryContent","items","createElement","uploadedFile","push","shortedFiles","slice","index","remainingItemsLength","undefined","StyledGallery","StyledGalleryEditModeWrapper","onDragOver","onDrop","StyledGalleryItemWrapper","uploadedFileLength","displayName","_default","exports"],"sources":["../../src/components/Gallery.tsx"],"sourcesContent":["import React, { DragEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { Files, UploadedFile } from '../types/files';\nimport { filterDuplicateFiles, getBaseAndRoute, uploadFiles } 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     *  Images and videos which should be displayed\n     */\n    files?: Files[];\n    /**\n     *  Function to be executed when files are added\n     */\n    onAdd?: (files: UploadedFile[]) => void;\n    /**\n     *  Function to be executed when a file is removed\n     */\n    onRemove?: (file: UploadedFile) => 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    files,\n    onAdd,\n    onRemove,\n    personId,\n}) => {\n    const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);\n\n    /**\n     * Merge external files with uploaded files\n     */\n    useEffect(() => {\n        if (!files || !Array.isArray(files)) {\n            return;\n        }\n\n        const externalFiles: UploadedFile[] = files.map((file) => {\n            if ('thumbnailUrl' in file) {\n                return {\n                    id: file.id,\n                    url: file.url,\n                    thumbnailUrl: file.url,\n                };\n            }\n\n            const { base, route } = getBaseAndRoute(file.url);\n\n            return {\n                key: route,\n                base,\n            };\n        });\n\n        setUploadedFiles((prevState) => [...prevState, ...externalFiles]);\n    }, [files]);\n\n    /**\n     * This function deletes a selected file from the file list\n     */\n    const handleDeleteFile = useCallback(\n        (key: number | string) => {\n            let fileToDelete: UploadedFile | undefined;\n\n            const filteredFiles = uploadedFiles.filter((file) => {\n                const fileKey = 'thumbnailUrl' in file ? file.id : file.key;\n\n                if (fileKey === key) {\n                    fileToDelete = file;\n                }\n\n                return fileKey !== key;\n            });\n\n            setUploadedFiles(filteredFiles);\n\n            if (!fileToDelete || !onRemove) {\n                return;\n            }\n\n            onRemove(fileToDelete);\n        },\n        [onRemove, setUploadedFiles, uploadedFiles]\n    );\n\n    /**\n     * This function handles the drag and drop\n     */\n    const handleDrop = useCallback(\n        async (e: DragEvent<HTMLDivElement>) => {\n            if (!allowDragAndDrop) {\n                return;\n            }\n\n            e.preventDefault();\n            const draggedFiles = Array.from(e.dataTransfer.files);\n\n            const updatedFiles = await uploadFiles({\n                accessToken,\n                filesToUpload: draggedFiles,\n                personId,\n            });\n\n            const { newUniqueFiles } = filterDuplicateFiles({\n                oldFiles: uploadedFiles,\n                newFiles: updatedFiles,\n            });\n\n            setUploadedFiles((prevState) => [...prevState, ...newUniqueFiles]);\n\n            if (!onAdd) {\n                return;\n            }\n\n            onAdd(newUniqueFiles);\n        },\n        [accessToken, allowDragAndDrop, onAdd, personId, uploadedFiles]\n    );\n\n    /**\n     * Returns the ratio of the single file\n     */\n    const ratio = useMemo(\n        () =>\n            // If the length is 1, the ratio or at least 1 is returned\n            uploadedFiles.length === 1 ? Math.max(uploadedFiles[0]?.ratio ?? 1, 1) : 1,\n        [uploadedFiles]\n    );\n\n    /**\n     * Returns the number of columns\n     */\n    const columns = useMemo(() => {\n        const uploadedFilesLength = uploadedFiles.length;\n\n        if (uploadedFilesLength <= 1) {\n            return '';\n        }\n\n        return `repeat(${uploadedFilesLength === 3 ? 3 : 2}, 1fr)`;\n    }, [uploadedFiles]);\n\n    const galleryContent = useMemo(() => {\n        const uploadedFilesLength = uploadedFiles.length;\n\n        if (isEditMode) {\n            const items = uploadedFiles.map((file) => (\n                <GalleryItem\n                    uploadedFile={file}\n                    isEditMode\n                    ratio={ratio}\n                    handleDeleteFile={handleDeleteFile}\n                />\n            ));\n\n            items.push(\n                <AddFile\n                    setUploadedFiles={setUploadedFiles}\n                    uploadedFiles={uploadedFiles}\n                    onAdd={onAdd}\n                    personId={personId}\n                    accessToken={accessToken}\n                />\n            );\n\n            return items;\n        }\n\n        const shortedFiles = uploadedFiles.slice(0, 4);\n\n        return shortedFiles.map((file, index) => (\n            <GalleryItem\n                uploadedFile={file}\n                isEditMode={false}\n                ratio={ratio}\n                handleDeleteFile={handleDeleteFile}\n                remainingItemsLength={\n                    uploadedFilesLength > 4 && index === 3 ? uploadedFilesLength : undefined\n                }\n            />\n        ));\n    }, [accessToken, handleDeleteFile, isEditMode, onAdd, personId, ratio, uploadedFiles]);\n\n    return useMemo(\n        () => (\n            <StyledGallery>\n                {isEditMode ? (\n                    <StyledGalleryEditModeWrapper\n                        onDragOver={(e) => e.preventDefault()}\n                        onDrop={(e) => void handleDrop(e)}\n                    >\n                        {galleryContent}\n                    </StyledGalleryEditModeWrapper>\n                ) : (\n                    <StyledGalleryItemWrapper\n                        columns={columns}\n                        uploadedFileLength={uploadedFiles.length}\n                    >\n                        {galleryContent}\n                    </StyledGalleryItemWrapper>\n                )}\n            </StyledGallery>\n        ),\n        [isEditMode, galleryContent, columns, uploadedFiles.length, handleDrop]\n    );\n};\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":"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"}
+{"version":3,"file":"Gallery.js","names":["_react","_interopRequireWildcard","require","_file","_AddFile","_interopRequireDefault","_GalleryItem","_Gallery","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","files","onAdd","onRemove","personId","uploadedFiles","setUploadedFiles","useState","externalFiles","setExternalFiles","combinedFiles","useMemo","useEffect","Array","isArray","newExternalFiles","map","file","id","url","thumbnailUrl","handleDeleteFile","useCallback","fileToDelete","externalFileToDelete","find","filteredFiles","filter","fileUrl","handleDrop","e","preventDefault","draggedFiles","from","dataTransfer","updatedFiles","uploadFiles","filesToUpload","newUniqueFiles","filterDuplicateFiles","oldFiles","newFiles","prevState","ratio","_combinedFiles$0$rati","_combinedFiles$","length","Math","max","columns","combinedFilesLength","galleryContent","items","createElement","uploadedFile","push","shortedFiles","slice","index","remainingItemsLength","undefined","StyledGallery","StyledGalleryEditModeWrapper","onDragOver","onDrop","StyledGalleryItemWrapper","uploadedFileLength","displayName","_default","exports"],"sources":["../../src/components/Gallery.tsx"],"sourcesContent":["import React, { DragEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { ExternalFile, UploadedFile } from '../types/files';\nimport { filterDuplicateFiles, uploadFiles } 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     *  Images and videos which should be displayed\n     */\n    files?: ExternalFile[];\n    /**\n     *  Function to be executed when files are added\n     */\n    onAdd?: (files: UploadedFile[]) => void;\n    /**\n     *  Function to be executed when a file is removed\n     */\n    onRemove?: (file: UploadedFile) => 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    files,\n    onAdd,\n    onRemove,\n    personId,\n}) => {\n    const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);\n    const [externalFiles, setExternalFiles] = useState<UploadedFile[]>([]);\n\n    const combinedFiles = useMemo(\n        () => [...externalFiles, ...uploadedFiles],\n        [externalFiles, uploadedFiles]\n    );\n\n    /**\n     * Merge external files with uploaded files\n     */\n    useEffect(() => {\n        if (!files || !Array.isArray(files)) {\n            return;\n        }\n\n        const newExternalFiles: UploadedFile[] = files.map((file) => {\n            if ('thumbnailUrl' in file) {\n                return {\n                    id: file.id,\n                    url: file.url,\n                    thumbnailUrl: file.url,\n                };\n            }\n\n            return {\n                id: file.id,\n                url: file.url,\n            };\n        });\n\n        setExternalFiles(newExternalFiles);\n    }, [files]);\n\n    /**\n     * This function deletes a selected file from the file list\n     */\n    const handleDeleteFile = useCallback(\n        (url: string) => {\n            let fileToDelete: UploadedFile | undefined;\n\n            const externalFileToDelete = externalFiles.find((file) => file.url === url);\n\n            if (externalFileToDelete && typeof onRemove === 'function') {\n                onRemove(externalFileToDelete);\n\n                return;\n            }\n\n            const filteredFiles = uploadedFiles.filter((file) => {\n                const fileUrl = file.url;\n\n                if (fileUrl === url) {\n                    fileToDelete = file;\n                }\n\n                return fileUrl !== url;\n            });\n\n            setUploadedFiles(filteredFiles);\n\n            if (!fileToDelete || !onRemove) {\n                return;\n            }\n\n            onRemove(fileToDelete);\n        },\n        [externalFiles, onRemove, uploadedFiles]\n    );\n\n    /**\n     * This function handles the drag and drop\n     */\n    const handleDrop = useCallback(\n        async (e: DragEvent<HTMLDivElement>) => {\n            if (!allowDragAndDrop) {\n                return;\n            }\n\n            e.preventDefault();\n            const draggedFiles = Array.from(e.dataTransfer.files);\n\n            const updatedFiles = await uploadFiles({\n                accessToken,\n                filesToUpload: draggedFiles,\n                personId,\n            });\n\n            const { newUniqueFiles } = filterDuplicateFiles({\n                oldFiles: uploadedFiles,\n                newFiles: updatedFiles,\n            });\n\n            setUploadedFiles((prevState) => [...prevState, ...newUniqueFiles]);\n\n            if (!onAdd) {\n                return;\n            }\n\n            onAdd(newUniqueFiles);\n        },\n        [accessToken, allowDragAndDrop, onAdd, personId, uploadedFiles]\n    );\n\n    /**\n     * Returns the ratio of the single file\n     */\n    const ratio = useMemo(\n        () =>\n            // If the length is 1, the ratio or at least 1 is returned\n            combinedFiles.length === 1 ? Math.max(combinedFiles[0]?.ratio ?? 1, 1) : 1,\n        [combinedFiles]\n    );\n\n    /**\n     * Returns the number of columns\n     */\n    const columns = useMemo(() => {\n        const combinedFilesLength = combinedFiles.length;\n\n        if (combinedFilesLength <= 1) {\n            return '';\n        }\n\n        return `repeat(${combinedFilesLength === 3 ? 3 : 2}, 1fr)`;\n    }, [combinedFiles]);\n\n    const galleryContent = useMemo(() => {\n        const combinedFilesLength = combinedFiles.length;\n\n        if (isEditMode) {\n            const items = combinedFiles.map((file) => (\n                <GalleryItem\n                    uploadedFile={file}\n                    isEditMode\n                    ratio={ratio}\n                    handleDeleteFile={handleDeleteFile}\n                />\n            ));\n\n            items.push(\n                <AddFile\n                    setUploadedFiles={setUploadedFiles}\n                    uploadedFiles={uploadedFiles}\n                    onAdd={onAdd}\n                    personId={personId}\n                    accessToken={accessToken}\n                />\n            );\n\n            return items;\n        }\n\n        const shortedFiles = combinedFiles.slice(0, 4);\n\n        return shortedFiles.map((file, index) => (\n            <GalleryItem\n                uploadedFile={file}\n                isEditMode={false}\n                ratio={ratio}\n                handleDeleteFile={handleDeleteFile}\n                remainingItemsLength={\n                    combinedFilesLength > 4 && index === 3 ? combinedFilesLength : undefined\n                }\n            />\n        ));\n    }, [\n        combinedFiles,\n        isEditMode,\n        uploadedFiles,\n        onAdd,\n        personId,\n        accessToken,\n        ratio,\n        handleDeleteFile,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledGallery>\n                {isEditMode ? (\n                    <StyledGalleryEditModeWrapper\n                        onDragOver={(e) => e.preventDefault()}\n                        onDrop={(e) => void handleDrop(e)}\n                    >\n                        {galleryContent}\n                    </StyledGalleryEditModeWrapper>\n                ) : (\n                    <StyledGalleryItemWrapper\n                        columns={columns}\n                        uploadedFileLength={combinedFiles.length}\n                    >\n                        {galleryContent}\n                    </StyledGalleryItemWrapper>\n                )}\n            </StyledGallery>\n        ),\n        [isEditMode, galleryContent, columns, combinedFiles.length, handleDrop]\n    );\n};\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,YAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AAI0B,SAAAG,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAX,wBAAAO,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAQ,KAAA,GAAAL,wBAAA,CAAAC,WAAA,OAAAI,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,CAAAT,OAAA,GAAAF,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AAiC1B,MAAMW,OAAyB,GAAGC,IAAA,IAQ5B;EAAA,IAR6B;IAC/BC,WAAW;IACXC,gBAAgB,GAAG,KAAK;IACxBC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC,KAAK;IACLC,QAAQ;IACRC;EACJ,CAAC,GAAAP,IAAA;EACG,MAAM,CAACQ,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAC,eAAQ,EAAiB,EAAE,CAAC;EACtE,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAF,eAAQ,EAAiB,EAAE,CAAC;EAEtE,MAAMG,aAAa,GAAG,IAAAC,cAAO,EACzB,MAAM,CAAC,GAAGH,aAAa,EAAE,GAAGH,aAAa,CAAC,EAC1C,CAACG,aAAa,EAAEH,aAAa,CAAC,CACjC;;EAED;AACJ;AACA;EACI,IAAAO,gBAAS,EAAC,MAAM;IACZ,IAAI,CAACX,KAAK,IAAI,CAACY,KAAK,CAACC,OAAO,CAACb,KAAK,CAAC,EAAE;MACjC;IACJ;IAEA,MAAMc,gBAAgC,GAAGd,KAAK,CAACe,GAAG,CAAEC,IAAI,IAAK;MACzD,IAAI,cAAc,IAAIA,IAAI,EAAE;QACxB,OAAO;UACHC,EAAE,EAAED,IAAI,CAACC,EAAE;UACXC,GAAG,EAAEF,IAAI,CAACE,GAAG;UACbC,YAAY,EAAEH,IAAI,CAACE;QACvB,CAAC;MACL;MAEA,OAAO;QACHD,EAAE,EAAED,IAAI,CAACC,EAAE;QACXC,GAAG,EAAEF,IAAI,CAACE;MACd,CAAC;IACL,CAAC,CAAC;IAEFV,gBAAgB,CAACM,gBAAgB,CAAC;EACtC,CAAC,EAAE,CAACd,KAAK,CAAC,CAAC;;EAEX;AACJ;AACA;EACI,MAAMoB,gBAAgB,GAAG,IAAAC,kBAAW,EAC/BH,GAAW,IAAK;IACb,IAAII,YAAsC;IAE1C,MAAMC,oBAAoB,GAAGhB,aAAa,CAACiB,IAAI,CAAER,IAAI,IAAKA,IAAI,CAACE,GAAG,KAAKA,GAAG,CAAC;IAE3E,IAAIK,oBAAoB,IAAI,OAAOrB,QAAQ,KAAK,UAAU,EAAE;MACxDA,QAAQ,CAACqB,oBAAoB,CAAC;MAE9B;IACJ;IAEA,MAAME,aAAa,GAAGrB,aAAa,CAACsB,MAAM,CAAEV,IAAI,IAAK;MACjD,MAAMW,OAAO,GAAGX,IAAI,CAACE,GAAG;MAExB,IAAIS,OAAO,KAAKT,GAAG,EAAE;QACjBI,YAAY,GAAGN,IAAI;MACvB;MAEA,OAAOW,OAAO,KAAKT,GAAG;IAC1B,CAAC,CAAC;IAEFb,gBAAgB,CAACoB,aAAa,CAAC;IAE/B,IAAI,CAACH,YAAY,IAAI,CAACpB,QAAQ,EAAE;MAC5B;IACJ;IAEAA,QAAQ,CAACoB,YAAY,CAAC;EAC1B,CAAC,EACD,CAACf,aAAa,EAAEL,QAAQ,EAAEE,aAAa,CAAC,CAC3C;;EAED;AACJ;AACA;EACI,MAAMwB,UAAU,GAAG,IAAAP,kBAAW,EAC1B,MAAOQ,CAA4B,IAAK;IACpC,IAAI,CAAC/B,gBAAgB,EAAE;MACnB;IACJ;IAEA+B,CAAC,CAACC,cAAc,EAAE;IAClB,MAAMC,YAAY,GAAGnB,KAAK,CAACoB,IAAI,CAACH,CAAC,CAACI,YAAY,CAACjC,KAAK,CAAC;IAErD,MAAMkC,YAAY,GAAG,MAAM,IAAAC,iBAAW,EAAC;MACnCtC,WAAW;MACXuC,aAAa,EAAEL,YAAY;MAC3B5B;IACJ,CAAC,CAAC;IAEF,MAAM;MAAEkC;IAAe,CAAC,GAAG,IAAAC,0BAAoB,EAAC;MAC5CC,QAAQ,EAAEnC,aAAa;MACvBoC,QAAQ,EAAEN;IACd,CAAC,CAAC;IAEF7B,gBAAgB,CAAEoC,SAAS,IAAK,CAAC,GAAGA,SAAS,EAAE,GAAGJ,cAAc,CAAC,CAAC;IAElE,IAAI,CAACpC,KAAK,EAAE;MACR;IACJ;IAEAA,KAAK,CAACoC,cAAc,CAAC;EACzB,CAAC,EACD,CAACxC,WAAW,EAAEC,gBAAgB,EAAEG,KAAK,EAAEE,QAAQ,EAAEC,aAAa,CAAC,CAClE;;EAED;AACJ;AACA;EACI,MAAMsC,KAAK,GAAG,IAAAhC,cAAO,EACjB;IAAA,IAAAiC,qBAAA,EAAAC,eAAA;IAAA;MACI;MACAnC,aAAa,CAACoC,MAAM,KAAK,CAAC,GAAGC,IAAI,CAACC,GAAG,EAAAJ,qBAAA,IAAAC,eAAA,GAACnC,aAAa,CAAC,CAAC,CAAC,cAAAmC,eAAA,uBAAhBA,eAAA,CAAkBF,KAAK,cAAAC,qBAAA,cAAAA,qBAAA,GAAI,CAAC,EAAE,CAAC,CAAC,GAAG;IAAC;EAAA,GAC9E,CAAClC,aAAa,CAAC,CAClB;;EAED;AACJ;AACA;EACI,MAAMuC,OAAO,GAAG,IAAAtC,cAAO,EAAC,MAAM;IAC1B,MAAMuC,mBAAmB,GAAGxC,aAAa,CAACoC,MAAM;IAEhD,IAAII,mBAAmB,IAAI,CAAC,EAAE;MAC1B,OAAO,EAAE;IACb;IAEA,OAAQ,UAASA,mBAAmB,KAAK,CAAC,GAAG,CAAC,GAAG,CAAE,QAAO;EAC9D,CAAC,EAAE,CAACxC,aAAa,CAAC,CAAC;EAEnB,MAAMyC,cAAc,GAAG,IAAAxC,cAAO,EAAC,MAAM;IACjC,MAAMuC,mBAAmB,GAAGxC,aAAa,CAACoC,MAAM;IAEhD,IAAI9C,UAAU,EAAE;MACZ,MAAMoD,KAAK,GAAG1C,aAAa,CAACM,GAAG,CAAEC,IAAI,iBACjCnD,MAAA,CAAAU,OAAA,CAAA6E,aAAA,CAACjF,YAAA,CAAAI,OAAW;QACR8E,YAAY,EAAErC,IAAK;QACnBjB,UAAU;QACV2C,KAAK,EAAEA,KAAM;QACbtB,gBAAgB,EAAEA;MAAiB,EAE1C,CAAC;MAEF+B,KAAK,CAACG,IAAI,eACNzF,MAAA,CAAAU,OAAA,CAAA6E,aAAA,CAACnF,QAAA,CAAAM,OAAO;QACJ8B,gBAAgB,EAAEA,gBAAiB;QACnCD,aAAa,EAAEA,aAAc;QAC7BH,KAAK,EAAEA,KAAM;QACbE,QAAQ,EAAEA,QAAS;QACnBN,WAAW,EAAEA;MAAY,EAC3B,CACL;MAED,OAAOsD,KAAK;IAChB;IAEA,MAAMI,YAAY,GAAG9C,aAAa,CAAC+C,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;IAE9C,OAAOD,YAAY,CAACxC,GAAG,CAAC,CAACC,IAAI,EAAEyC,KAAK,kBAChC5F,MAAA,CAAAU,OAAA,CAAA6E,aAAA,CAACjF,YAAA,CAAAI,OAAW;MACR8E,YAAY,EAAErC,IAAK;MACnBjB,UAAU,EAAE,KAAM;MAClB2C,KAAK,EAAEA,KAAM;MACbtB,gBAAgB,EAAEA,gBAAiB;MACnCsC,oBAAoB,EAChBT,mBAAmB,GAAG,CAAC,IAAIQ,KAAK,KAAK,CAAC,GAAGR,mBAAmB,GAAGU;IAClE,EAER,CAAC;EACN,CAAC,EAAE,CACClD,aAAa,EACbV,UAAU,EACVK,aAAa,EACbH,KAAK,EACLE,QAAQ,EACRN,WAAW,EACX6C,KAAK,EACLtB,gBAAgB,CACnB,CAAC;EAEF,OAAO,IAAAV,cAAO,EACV,mBACI7C,MAAA,CAAAU,OAAA,CAAA6E,aAAA,CAAChF,QAAA,CAAAwF,aAAa,QACT7D,UAAU,gBACPlC,MAAA,CAAAU,OAAA,CAAA6E,aAAA,CAAChF,QAAA,CAAAyF,4BAA4B;IACzBC,UAAU,EAAGjC,CAAC,IAAKA,CAAC,CAACC,cAAc,EAAG;IACtCiC,MAAM,EAAGlC,CAAC,IAAK,KAAKD,UAAU,CAACC,CAAC;EAAE,GAEjCqB,cAAc,CACY,gBAE/BrF,MAAA,CAAAU,OAAA,CAAA6E,aAAA,CAAChF,QAAA,CAAA4F,wBAAwB;IACrBhB,OAAO,EAAEA,OAAQ;IACjBiB,kBAAkB,EAAExD,aAAa,CAACoC;EAAO,GAExCK,cAAc,CAEtB,CAER,EACD,CAACnD,UAAU,EAAEmD,cAAc,EAAEF,OAAO,EAAEvC,aAAa,CAACoC,MAAM,EAAEjB,UAAU,CAAC,CAC1E;AACL,CAAC;AAEDjC,OAAO,CAACuE,WAAW,GAAG,SAAS;AAAC,IAAAC,QAAA,GAEjBxE,OAAO;AAAAyE,OAAA,CAAA7F,OAAA,GAAA4F,QAAA"}

package/lib/components/gallery-item/GalleryItem.d.ts

@@ -16,7 +16,7 @@ export type GalleryItemProps = {
     /**
      *  Function to be executed wehen a file is deleted
      */
-    handleDeleteFile: (key: number | string) => void;
+    handleDeleteFile: (url: string) => void;
     /**
      *  Length of the uploaded files
      */

package/lib/components/gallery-item/GalleryItem.js

@@ -17,8 +17,6 @@ const GalleryItem = _ref => {
     ratio,
     remainingItemsLength
   } = _ref;
-  const fileKey = 'thumbnailUrl' in uploadedFile ? uploadedFile.id : uploadedFile.key;
-
   /**
    * This function opens a selected file
    */
@@ -32,10 +30,10 @@ const GalleryItem = _ref => {
 
     // @ts-expect-error: Type is correct here
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-    void chayns.openImage([`${file.base}/${file.key}`], 0);
+    void chayns.openImage([file.url], 0);
   }, []);
   return /*#__PURE__*/_react.default.createElement(_GalleryItem.StyledGalleryItem, null, isEditMode && /*#__PURE__*/_react.default.createElement(_GalleryItem.StyledGalleryItemDeleteButton, {
-    onClick: () => handleDeleteFile(fileKey)
+    onClick: () => handleDeleteFile(uploadedFile.url)
   }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
     size: 20,
     icons: ['ts-wrong']
@@ -53,7 +51,7 @@ const GalleryItem = _ref => {
     ratio: ratio,
     onClick: () => openSelectedFile(uploadedFile),
     draggable: false,
-    src: `${uploadedFile.base}/${uploadedFile.key}`
+    src: uploadedFile.url
   }), remainingItemsLength && /*#__PURE__*/_react.default.createElement(_GalleryItem.StyledGalleryItemMoreItemsIndicator, null, /*#__PURE__*/_react.default.createElement("p", null, `+ ${remainingItemsLength - 3}`)));
 };
 GalleryItem.displayName = 'GalleryItem';

package/lib/components/gallery-item/GalleryItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryItem.js","names":["_core","require","_react","_interopRequireWildcard","_GalleryItem","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","GalleryItem","_ref","uploadedFile","handleDeleteFile","isEditMode","ratio","remainingItemsLength","fileKey","id","openSelectedFile","useCallback","file","chayns","openVideo","url","openImage","base","createElement","StyledGalleryItem","StyledGalleryItemDeleteButton","onClick","Icon","size","icons","StyledGalleryItemVideoWrapper","StyledGalleryItemPlayIcon","StyledGalleryItemVideo","src","type","StyledGalleryItemImage","draggable","StyledGalleryItemMoreItemsIndicator","displayName","_default","exports"],"sources":["../../../src/components/gallery-item/GalleryItem.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport React, { FC, useCallback } from 'react';\nimport type { UploadedFile } from '../../types/files';\nimport {\n    StyledGalleryItem,\n    StyledGalleryItemDeleteButton,\n    StyledGalleryItemImage,\n    StyledGalleryItemMoreItemsIndicator,\n    StyledGalleryItemPlayIcon,\n    StyledGalleryItemVideo,\n    StyledGalleryItemVideoWrapper,\n} from './GalleryItem.styles';\n\nexport type GalleryItemProps = {\n    /**\n     *  Images and videos which should be displayed\n     */\n    uploadedFile: UploadedFile;\n    /**\n     *  Whether images and videos can be edited\n     */\n    isEditMode: boolean;\n    /**\n     *  Ratio of the images and videos\n     */\n    ratio: number;\n    /**\n     *  Function to be executed wehen a file is deleted\n     */\n    handleDeleteFile: (key: number | string) => void;\n    /**\n     *  Length of the uploaded files\n     */\n    remainingItemsLength?: number;\n};\n\nconst GalleryItem: FC<GalleryItemProps> = ({\n    uploadedFile,\n    handleDeleteFile,\n    isEditMode,\n    ratio,\n    remainingItemsLength,\n}) => {\n    const fileKey = 'thumbnailUrl' in uploadedFile ? uploadedFile.id : uploadedFile.key;\n\n    /**\n     * This function opens a selected file\n     */\n    const openSelectedFile = useCallback((file: UploadedFile) => {\n        if ('thumbnailUrl' in file) {\n            // @ts-expect-error: Type is correct here\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access\n            void chayns.openVideo(file.url);\n\n            return;\n        }\n\n        // @ts-expect-error: Type is correct here\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access\n        void chayns.openImage([`${file.base}/${file.key}`], 0);\n    }, []);\n\n    return (\n        <StyledGalleryItem>\n            {isEditMode && (\n                <StyledGalleryItemDeleteButton onClick={() => handleDeleteFile(fileKey)}>\n                    <Icon size={20} icons={['ts-wrong']} />\n                </StyledGalleryItemDeleteButton>\n            )}\n            {'thumbnailUrl' in uploadedFile ? (\n                <StyledGalleryItemVideoWrapper onClick={() => openSelectedFile(uploadedFile)}>\n                    <StyledGalleryItemPlayIcon>\n                        <Icon size={30} icons={['fa fa-play']} />\n                    </StyledGalleryItemPlayIcon>\n                    <StyledGalleryItemVideo ratio={ratio}>\n                        <source src={uploadedFile.url} type=\"video/mp4\" />\n                    </StyledGalleryItemVideo>\n                </StyledGalleryItemVideoWrapper>\n            ) : (\n                <StyledGalleryItemImage\n                    ratio={ratio}\n                    onClick={() => openSelectedFile(uploadedFile)}\n                    draggable={false}\n                    src={`${uploadedFile.base}/${uploadedFile.key}`}\n                />\n            )}\n            {remainingItemsLength && (\n                <StyledGalleryItemMoreItemsIndicator>\n                    <p>{`+ ${remainingItemsLength - 3}`}</p>\n                </StyledGalleryItemMoreItemsIndicator>\n            )}\n        </StyledGalleryItem>\n    );\n};\n\nGalleryItem.displayName = 'GalleryItem';\n\nexport default GalleryItem;\n"],"mappings":"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"}
+{"version":3,"file":"GalleryItem.js","names":["_core","require","_react","_interopRequireWildcard","_GalleryItem","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","GalleryItem","_ref","uploadedFile","handleDeleteFile","isEditMode","ratio","remainingItemsLength","openSelectedFile","useCallback","file","chayns","openVideo","url","openImage","createElement","StyledGalleryItem","StyledGalleryItemDeleteButton","onClick","Icon","size","icons","StyledGalleryItemVideoWrapper","StyledGalleryItemPlayIcon","StyledGalleryItemVideo","src","type","StyledGalleryItemImage","draggable","StyledGalleryItemMoreItemsIndicator","displayName","_default","exports"],"sources":["../../../src/components/gallery-item/GalleryItem.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport React, { FC, useCallback } from 'react';\nimport type { UploadedFile } from '../../types/files';\nimport {\n    StyledGalleryItem,\n    StyledGalleryItemDeleteButton,\n    StyledGalleryItemImage,\n    StyledGalleryItemMoreItemsIndicator,\n    StyledGalleryItemPlayIcon,\n    StyledGalleryItemVideo,\n    StyledGalleryItemVideoWrapper,\n} from './GalleryItem.styles';\n\nexport type GalleryItemProps = {\n    /**\n     *  Images and videos which should be displayed\n     */\n    uploadedFile: UploadedFile;\n    /**\n     *  Whether images and videos can be edited\n     */\n    isEditMode: boolean;\n    /**\n     *  Ratio of the images and videos\n     */\n    ratio: number;\n    /**\n     *  Function to be executed wehen a file is deleted\n     */\n    handleDeleteFile: (url: string) => void;\n    /**\n     *  Length of the uploaded files\n     */\n    remainingItemsLength?: number;\n};\n\nconst GalleryItem: FC<GalleryItemProps> = ({\n    uploadedFile,\n    handleDeleteFile,\n    isEditMode,\n    ratio,\n    remainingItemsLength,\n}) => {\n    /**\n     * This function opens a selected file\n     */\n    const openSelectedFile = useCallback((file: UploadedFile) => {\n        if ('thumbnailUrl' in file) {\n            // @ts-expect-error: Type is correct here\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access\n            void chayns.openVideo(file.url);\n\n            return;\n        }\n\n        // @ts-expect-error: Type is correct here\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access\n        void chayns.openImage([file.url], 0);\n    }, []);\n\n    return (\n        <StyledGalleryItem>\n            {isEditMode && (\n                <StyledGalleryItemDeleteButton onClick={() => handleDeleteFile(uploadedFile.url)}>\n                    <Icon size={20} icons={['ts-wrong']} />\n                </StyledGalleryItemDeleteButton>\n            )}\n            {'thumbnailUrl' in uploadedFile ? (\n                <StyledGalleryItemVideoWrapper onClick={() => openSelectedFile(uploadedFile)}>\n                    <StyledGalleryItemPlayIcon>\n                        <Icon size={30} icons={['fa fa-play']} />\n                    </StyledGalleryItemPlayIcon>\n                    <StyledGalleryItemVideo ratio={ratio}>\n                        <source src={uploadedFile.url} type=\"video/mp4\" />\n                    </StyledGalleryItemVideo>\n                </StyledGalleryItemVideoWrapper>\n            ) : (\n                <StyledGalleryItemImage\n                    ratio={ratio}\n                    onClick={() => openSelectedFile(uploadedFile)}\n                    draggable={false}\n                    src={uploadedFile.url}\n                />\n            )}\n            {remainingItemsLength && (\n                <StyledGalleryItemMoreItemsIndicator>\n                    <p>{`+ ${remainingItemsLength - 3}`}</p>\n                </StyledGalleryItemMoreItemsIndicator>\n            )}\n        </StyledGalleryItem>\n    );\n};\n\nGalleryItem.displayName = 'GalleryItem';\n\nexport default GalleryItem;\n"],"mappings":"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"}

package/lib/types/files.d.ts

@@ -6,8 +6,8 @@ export interface Video {
     ratio?: number;
 }
 export interface Image {
-    key: string;
-    base: string;
+    id?: string;
+    url: string;
     meta?: Meta;
     ratio?: number;
 }
@@ -16,9 +16,5 @@ export interface Meta {
     width: string;
     height: string;
 }
-export interface ImageUrl {
-    id?: number;
-    url: string;
-}
-export type Files = Omit<Video, 'originalVideoQuality'> | ImageUrl;
+export type ExternalFile = Omit<Video, 'originalVideoQuality'> | Image;
 export type UploadedFile = Video | Image;

package/lib/types/files.js.map

@@ -1 +1 @@
-{"version":3,"file":"files.js","names":[],"sources":["../../src/types/files.ts"],"sourcesContent":["export interface Video {\n    id: number;\n    originalVideoQuality?: string;\n    thumbnailUrl: string;\n    url: string;\n    ratio?: number;\n}\n\nexport interface Image {\n    key: string;\n    base: string;\n    meta?: Meta;\n    ratio?: number;\n}\n\nexport interface Meta {\n    preview: string;\n    width: string;\n    height: string;\n}\n\nexport interface ImageUrl {\n    id?: number;\n    url: string;\n}\n\nexport type Files = Omit<Video, 'originalVideoQuality'> | ImageUrl;\n\nexport type UploadedFile = Video | Image;\n"],"mappings":""}
+{"version":3,"file":"files.js","names":[],"sources":["../../src/types/files.ts"],"sourcesContent":["export interface Video {\n    id: number;\n    originalVideoQuality?: string;\n    thumbnailUrl: string;\n    url: string;\n    ratio?: number;\n}\n\nexport interface Image {\n    id?: string;\n    url: string;\n    meta?: Meta;\n    ratio?: number;\n}\n\nexport interface Meta {\n    preview: string;\n    width: string;\n    height: string;\n}\n\nexport type ExternalFile = Omit<Video, 'originalVideoQuality'> | Image;\n\nexport type UploadedFile = Video | Image;\n"],"mappings":""}

package/lib/utils/file.d.ts

@@ -1,4 +1,4 @@
-import type { UploadedFile } from '../types/files';
+import type { Meta, UploadedFile } from '../types/files';
 interface SelectFilesOptions {
     type: string;
     multiple: boolean;
@@ -13,10 +13,11 @@ export declare const filterDuplicateFiles: ({ oldFiles, newFiles }: FilterDuplic
     filteredFiles: UploadedFile[];
     newUniqueFiles: UploadedFile[];
 };
-export declare const getBaseAndRoute: (url: string) => {
+export interface UploadedImage {
+    key: string;
     base: string;
-    route: string;
-};
+    meta?: Meta;
+}
 interface UploadFilesOptions {
     filesToUpload: File[];
     accessToken: string;

package/lib/utils/file.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uploadFiles = exports.selectFiles = exports.getBaseAndRoute = exports.filterDuplicateFiles = exports.convertFileListToArray = void 0;
+exports.uploadFiles = exports.selectFiles = exports.filterDuplicateFiles = exports.convertFileListToArray = void 0;
 var _imageUpload = require("../api/image/imageUpload");
 var _videoUpload = require("../api/video/videoUpload");
 const selectFiles = _ref => {
@@ -56,41 +56,16 @@ const filterDuplicateFiles = _ref2 => {
   const seenKeys = new Set();
   const filteredFiles = [];
   oldFiles.forEach(file => {
-    let key;
-    if ('id' in file) {
-      key = file.id.toString();
-    } else {
-      key = file.key;
-    }
-    seenKeys.add(key);
+    var _file$id$toString, _file$id;
+    seenKeys.add((_file$id$toString = (_file$id = file.id) === null || _file$id === void 0 ? void 0 : _file$id.toString()) !== null && _file$id$toString !== void 0 ? _file$id$toString : file.url);
     filteredFiles.push(file);
   });
   const newUniqueFiles = [];
   newFiles.forEach(file => {
-    let key;
-    if ('id' in file) {
-      key = file.id.toString();
-    } else {
-      key = file.key;
-    }
-    const oldFile = oldFiles.find(f => {
-      if ('id' in f && 'id' in file) {
-        return f.id === file.id;
-      }
-      if ('key' in f && 'key' in file) {
-        return f.key === file.key;
-      }
-      return null;
-    });
-    const alreadyAdded = newUniqueFiles.find(f => {
-      if ('id' in f && 'id' in file) {
-        return f.id === file.id;
-      }
-      if ('key' in f && 'key' in file) {
-        return f.key === file.key;
-      }
-      return null;
-    });
+    var _file$id$toString2, _file$id2;
+    const key = (_file$id$toString2 = (_file$id2 = file.id) === null || _file$id2 === void 0 ? void 0 : _file$id2.toString()) !== null && _file$id$toString2 !== void 0 ? _file$id$toString2 : file.url;
+    const oldFile = oldFiles.find(f => f.id === file.id);
+    const alreadyAdded = newUniqueFiles.find(f => f.id === file.id);
     if (!oldFile && !alreadyAdded) {
       seenKeys.add(key);
       newUniqueFiles.push(file);
@@ -102,16 +77,6 @@ const filterDuplicateFiles = _ref2 => {
   };
 };
 exports.filterDuplicateFiles = filterDuplicateFiles;
-const getBaseAndRoute = url => {
-  const urlObject = new URL(url);
-  const base = urlObject.origin;
-  const route = urlObject.pathname;
-  return {
-    base,
-    route
-  };
-};
-exports.getBaseAndRoute = getBaseAndRoute;
 /**
  * Upload files
  */
@@ -152,7 +117,13 @@ const uploadFiles = async _ref3 => {
     file: image,
     personId
   }));
-  newUploadedFiles = newUploadedFiles.concat(await Promise.all(imageUploadPromises));
+  const uploadedImages = await Promise.all(imageUploadPromises);
+  const newImages = uploadedImages.map(file => ({
+    url: `${file.base}/${file.key}`,
+    id: file.key,
+    meta: file.meta
+  }));
+  newUploadedFiles = newUploadedFiles.concat(newImages);
   return newUploadedFiles;
 };
 exports.uploadFiles = uploadFiles;

package/lib/utils/file.js.map

@@ -1 +1 @@
-{"version":3,"file":"file.js","names":["_imageUpload","require","_videoUpload","selectFiles","_ref","type","multiple","Promise","resolve","input","document","createElement","accept","style","visibility","width","height","display","body","appendChild","addEventListener","event","removeChild","target","files","click","exports","convertFileListToArray","fileList","filesArray","i","length","file","item","push","filterDuplicateFiles","_ref2","oldFiles","newFiles","seenKeys","Set","filteredFiles","forEach","key","id","toString","add","newUniqueFiles","oldFile","find","f","alreadyAdded","getBaseAndRoute","url","urlObject","URL","base","origin","route","pathname","uploadFiles","_ref3","filesToUpload","personId","accessToken","videos","filter","_ref4","includes","images","_ref5","newUploadedFiles","videoUploadPromises","map","video","videoUpload","concat","all","flat","imageUploadPromises","image","imageUpload"],"sources":["../../src/utils/file.ts"],"sourcesContent":["import { imageUpload } from '../api/image/imageUpload';\nimport { videoUpload } from '../api/video/videoUpload';\nimport type { Image, UploadedFile, Video } from '../types/files';\n\ninterface SelectFilesOptions {\n    type: string;\n    multiple: boolean;\n}\n\nexport const selectFiles = ({ type, multiple }: SelectFilesOptions): Promise<null | FileList> =>\n    new Promise((resolve) => {\n        const input = document.createElement('input');\n        input.type = 'file';\n\n        if (type !== '*/*' && type) {\n            input.accept = type;\n        }\n\n        if (multiple) {\n            input.multiple = true;\n        }\n\n        input.style.visibility = 'none';\n        input.style.width = '0';\n        input.style.height = '0';\n        input.style.display = 'none';\n\n        document.body.appendChild(input);\n\n        input.addEventListener('change', (event) => {\n            document.body.removeChild(input);\n\n            const target = event.target as HTMLInputElement;\n            const { files } = target;\n\n            resolve(files);\n        });\n\n        input.click();\n    });\n\nexport const convertFileListToArray = (fileList: FileList): File[] => {\n    const filesArray = [];\n    for (let i = 0; i < fileList.length; i++) {\n        const file = fileList.item(i);\n\n        if (file) {\n            filesArray.push(file);\n        }\n    }\n\n    return filesArray;\n};\n\ninterface FilterDuplicateFilesOptions {\n    oldFiles: UploadedFile[];\n    newFiles: UploadedFile[];\n}\n\nexport const filterDuplicateFiles = ({ oldFiles, newFiles }: FilterDuplicateFilesOptions) => {\n    const seenKeys = new Set<string>();\n    const filteredFiles: UploadedFile[] = [];\n\n    oldFiles.forEach((file) => {\n        let key: string;\n        if ('id' in file) {\n            key = file.id.toString();\n        } else {\n            key = file.key;\n        }\n\n        seenKeys.add(key);\n        filteredFiles.push(file);\n    });\n\n    const newUniqueFiles: UploadedFile[] = [];\n\n    newFiles.forEach((file) => {\n        let key: string;\n        if ('id' in file) {\n            key = file.id.toString();\n        } else {\n            key = file.key;\n        }\n\n        const oldFile = oldFiles.find((f) => {\n            if ('id' in f && 'id' in file) {\n                return f.id === file.id;\n            }\n\n            if ('key' in f && 'key' in file) {\n                return f.key === file.key;\n            }\n\n            return null;\n        });\n\n        const alreadyAdded = newUniqueFiles.find((f) => {\n            if ('id' in f && 'id' in file) {\n                return f.id === file.id;\n            }\n\n            if ('key' in f && 'key' in file) {\n                return f.key === file.key;\n            }\n\n            return null;\n        });\n\n        if (!oldFile && !alreadyAdded) {\n            seenKeys.add(key);\n            newUniqueFiles.push(file);\n        }\n    });\n\n    return { filteredFiles, newUniqueFiles };\n};\n\nexport const getBaseAndRoute = (url: string) => {\n    const urlObject = new URL(url);\n    const base = urlObject.origin;\n    const route = urlObject.pathname;\n\n    return { base, route };\n};\n\ninterface UploadFilesOptions {\n    filesToUpload: File[];\n    accessToken: string;\n    personId: string;\n}\n\n/**\n * Upload files\n */\nexport const uploadFiles = async ({\n    filesToUpload,\n    personId,\n    accessToken,\n}: UploadFilesOptions): Promise<UploadedFile[]> => {\n    if (!filesToUpload) {\n        return [];\n    }\n\n    const videos = filesToUpload.filter(({ type }) => type.includes('video/'));\n    const images = filesToUpload.filter(({ type }) => type.includes('image/'));\n    let newUploadedFiles: UploadedFile[] = [];\n\n    // Upload videos\n    const videoUploadPromises: Promise<Video>[] = videos.map((video) =>\n        videoUpload({ accessToken, file: video })\n    );\n\n    newUploadedFiles = newUploadedFiles.concat(await Promise.all(videoUploadPromises));\n    newUploadedFiles = newUploadedFiles.flat();\n\n    // Upload images\n    const imageUploadPromises: Promise<Image>[] = images.map((image) =>\n        imageUpload({\n            accessToken,\n            file: image,\n            personId,\n        })\n    );\n\n    newUploadedFiles = newUploadedFiles.concat(await Promise.all(imageUploadPromises));\n\n    return newUploadedFiles;\n};\n"],"mappings":"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"}
+{"version":3,"file":"file.js","names":["_imageUpload","require","_videoUpload","selectFiles","_ref","type","multiple","Promise","resolve","input","document","createElement","accept","style","visibility","width","height","display","body","appendChild","addEventListener","event","removeChild","target","files","click","exports","convertFileListToArray","fileList","filesArray","i","length","file","item","push","filterDuplicateFiles","_ref2","oldFiles","newFiles","seenKeys","Set","filteredFiles","forEach","_file$id$toString","_file$id","add","id","toString","url","newUniqueFiles","_file$id$toString2","_file$id2","key","oldFile","find","f","alreadyAdded","uploadFiles","_ref3","filesToUpload","personId","accessToken","videos","filter","_ref4","includes","images","_ref5","newUploadedFiles","videoUploadPromises","map","video","videoUpload","concat","all","flat","imageUploadPromises","image","imageUpload","uploadedImages","newImages","base","meta"],"sources":["../../src/utils/file.ts"],"sourcesContent":["import { imageUpload } from '../api/image/imageUpload';\nimport { videoUpload } from '../api/video/videoUpload';\nimport type { Meta, UploadedFile, Video } from '../types/files';\n\ninterface SelectFilesOptions {\n    type: string;\n    multiple: boolean;\n}\n\nexport const selectFiles = ({ type, multiple }: SelectFilesOptions): Promise<null | FileList> =>\n    new Promise((resolve) => {\n        const input = document.createElement('input');\n        input.type = 'file';\n\n        if (type !== '*/*' && type) {\n            input.accept = type;\n        }\n\n        if (multiple) {\n            input.multiple = true;\n        }\n\n        input.style.visibility = 'none';\n        input.style.width = '0';\n        input.style.height = '0';\n        input.style.display = 'none';\n\n        document.body.appendChild(input);\n\n        input.addEventListener('change', (event) => {\n            document.body.removeChild(input);\n\n            const target = event.target as HTMLInputElement;\n            const { files } = target;\n\n            resolve(files);\n        });\n\n        input.click();\n    });\n\nexport const convertFileListToArray = (fileList: FileList): File[] => {\n    const filesArray = [];\n    for (let i = 0; i < fileList.length; i++) {\n        const file = fileList.item(i);\n\n        if (file) {\n            filesArray.push(file);\n        }\n    }\n\n    return filesArray;\n};\n\ninterface FilterDuplicateFilesOptions {\n    oldFiles: UploadedFile[];\n    newFiles: UploadedFile[];\n}\n\nexport const filterDuplicateFiles = ({ oldFiles, newFiles }: FilterDuplicateFilesOptions) => {\n    const seenKeys = new Set<string>();\n    const filteredFiles: UploadedFile[] = [];\n\n    oldFiles.forEach((file) => {\n        seenKeys.add(file.id?.toString() ?? file.url);\n        filteredFiles.push(file);\n    });\n\n    const newUniqueFiles: UploadedFile[] = [];\n\n    newFiles.forEach((file) => {\n        const key = file.id?.toString() ?? file.url;\n\n        const oldFile = oldFiles.find((f) => f.id === file.id);\n\n        const alreadyAdded = newUniqueFiles.find((f) => f.id === file.id);\n\n        if (!oldFile && !alreadyAdded) {\n            seenKeys.add(key);\n            newUniqueFiles.push(file);\n        }\n    });\n\n    return { filteredFiles, newUniqueFiles };\n};\n\nexport interface UploadedImage {\n    key: string;\n    base: string;\n    meta?: Meta;\n}\n\ninterface UploadFilesOptions {\n    filesToUpload: File[];\n    accessToken: string;\n    personId: string;\n}\n\n/**\n * Upload files\n */\nexport const uploadFiles = async ({\n    filesToUpload,\n    personId,\n    accessToken,\n}: UploadFilesOptions): Promise<UploadedFile[]> => {\n    if (!filesToUpload) {\n        return [];\n    }\n\n    const videos = filesToUpload.filter(({ type }) => type.includes('video/'));\n    const images = filesToUpload.filter(({ type }) => type.includes('image/'));\n    let newUploadedFiles: UploadedFile[] = [];\n\n    // Upload videos\n    const videoUploadPromises: Promise<Video>[] = videos.map((video) =>\n        videoUpload({ accessToken, file: video })\n    );\n\n    newUploadedFiles = newUploadedFiles.concat(await Promise.all(videoUploadPromises));\n    newUploadedFiles = newUploadedFiles.flat();\n\n    // Upload images\n    const imageUploadPromises: Promise<UploadedImage>[] = images.map((image) =>\n        imageUpload({\n            accessToken,\n            file: image,\n            personId,\n        })\n    );\n\n    const uploadedImages: UploadedImage[] = await Promise.all(imageUploadPromises);\n    const newImages: UploadedFile[] = uploadedImages.map((file) => ({\n        url: `${file.base}/${file.key}`,\n        id: file.key,\n        meta: file.meta,\n    }));\n\n    newUploadedFiles = newUploadedFiles.concat(newImages);\n\n    return newUploadedFiles;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAQO,MAAME,WAAW,GAAGC,IAAA;EAAA,IAAC;IAAEC,IAAI;IAAEC;EAA6B,CAAC,GAAAF,IAAA;EAAA,OAC9D,IAAIG,OAAO,CAAEC,OAAO,IAAK;IACrB,MAAMC,KAAK,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;IAC7CF,KAAK,CAACJ,IAAI,GAAG,MAAM;IAEnB,IAAIA,IAAI,KAAK,KAAK,IAAIA,IAAI,EAAE;MACxBI,KAAK,CAACG,MAAM,GAAGP,IAAI;IACvB;IAEA,IAAIC,QAAQ,EAAE;MACVG,KAAK,CAACH,QAAQ,GAAG,IAAI;IACzB;IAEAG,KAAK,CAACI,KAAK,CAACC,UAAU,GAAG,MAAM;IAC/BL,KAAK,CAACI,KAAK,CAACE,KAAK,GAAG,GAAG;IACvBN,KAAK,CAACI,KAAK,CAACG,MAAM,GAAG,GAAG;IACxBP,KAAK,CAACI,KAAK,CAACI,OAAO,GAAG,MAAM;IAE5BP,QAAQ,CAACQ,IAAI,CAACC,WAAW,CAACV,KAAK,CAAC;IAEhCA,KAAK,CAACW,gBAAgB,CAAC,QAAQ,EAAGC,KAAK,IAAK;MACxCX,QAAQ,CAACQ,IAAI,CAACI,WAAW,CAACb,KAAK,CAAC;MAEhC,MAAMc,MAAM,GAAGF,KAAK,CAACE,MAA0B;MAC/C,MAAM;QAAEC;MAAM,CAAC,GAAGD,MAAM;MAExBf,OAAO,CAACgB,KAAK,CAAC;IAClB,CAAC,CAAC;IAEFf,KAAK,CAACgB,KAAK,EAAE;EACjB,CAAC,CAAC;AAAA;AAACC,OAAA,CAAAvB,WAAA,GAAAA,WAAA;AAEA,MAAMwB,sBAAsB,GAAIC,QAAkB,IAAa;EAClE,MAAMC,UAAU,GAAG,EAAE;EACrB,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGF,QAAQ,CAACG,MAAM,EAAED,CAAC,EAAE,EAAE;IACtC,MAAME,IAAI,GAAGJ,QAAQ,CAACK,IAAI,CAACH,CAAC,CAAC;IAE7B,IAAIE,IAAI,EAAE;MACNH,UAAU,CAACK,IAAI,CAACF,IAAI,CAAC;IACzB;EACJ;EAEA,OAAOH,UAAU;AACrB,CAAC;AAACH,OAAA,CAAAC,sBAAA,GAAAA,sBAAA;AAOK,MAAMQ,oBAAoB,GAAGC,KAAA,IAAyD;EAAA,IAAxD;IAAEC,QAAQ;IAAEC;EAAsC,CAAC,GAAAF,KAAA;EACpF,MAAMG,QAAQ,GAAG,IAAIC,GAAG,EAAU;EAClC,MAAMC,aAA6B,GAAG,EAAE;EAExCJ,QAAQ,CAACK,OAAO,CAAEV,IAAI,IAAK;IAAA,IAAAW,iBAAA,EAAAC,QAAA;IACvBL,QAAQ,CAACM,GAAG,EAAAF,iBAAA,IAAAC,QAAA,GAACZ,IAAI,CAACc,EAAE,cAAAF,QAAA,uBAAPA,QAAA,CAASG,QAAQ,EAAE,cAAAJ,iBAAA,cAAAA,iBAAA,GAAIX,IAAI,CAACgB,GAAG,CAAC;IAC7CP,aAAa,CAACP,IAAI,CAACF,IAAI,CAAC;EAC5B,CAAC,CAAC;EAEF,MAAMiB,cAA8B,GAAG,EAAE;EAEzCX,QAAQ,CAACI,OAAO,CAAEV,IAAI,IAAK;IAAA,IAAAkB,kBAAA,EAAAC,SAAA;IACvB,MAAMC,GAAG,IAAAF,kBAAA,IAAAC,SAAA,GAAGnB,IAAI,CAACc,EAAE,cAAAK,SAAA,uBAAPA,SAAA,CAASJ,QAAQ,EAAE,cAAAG,kBAAA,cAAAA,kBAAA,GAAIlB,IAAI,CAACgB,GAAG;IAE3C,MAAMK,OAAO,GAAGhB,QAAQ,CAACiB,IAAI,CAAEC,CAAC,IAAKA,CAAC,CAACT,EAAE,KAAKd,IAAI,CAACc,EAAE,CAAC;IAEtD,MAAMU,YAAY,GAAGP,cAAc,CAACK,IAAI,CAAEC,CAAC,IAAKA,CAAC,CAACT,EAAE,KAAKd,IAAI,CAACc,EAAE,CAAC;IAEjE,IAAI,CAACO,OAAO,IAAI,CAACG,YAAY,EAAE;MAC3BjB,QAAQ,CAACM,GAAG,CAACO,GAAG,CAAC;MACjBH,cAAc,CAACf,IAAI,CAACF,IAAI,CAAC;IAC7B;EACJ,CAAC,CAAC;EAEF,OAAO;IAAES,aAAa;IAAEQ;EAAe,CAAC;AAC5C,CAAC;AAACvB,OAAA,CAAAS,oBAAA,GAAAA,oBAAA;AAcF;AACA;AACA;AACO,MAAMsB,WAAW,GAAG,MAAAC,KAAA,IAIwB;EAAA,IAJjB;IAC9BC,aAAa;IACbC,QAAQ;IACRC;EACgB,CAAC,GAAAH,KAAA;EACjB,IAAI,CAACC,aAAa,EAAE;IAChB,OAAO,EAAE;EACb;EAEA,MAAMG,MAAM,GAAGH,aAAa,CAACI,MAAM,CAACC,KAAA;IAAA,IAAC;MAAE3D;IAAK,CAAC,GAAA2D,KAAA;IAAA,OAAK3D,IAAI,CAAC4D,QAAQ,CAAC,QAAQ,CAAC;EAAA,EAAC;EAC1E,MAAMC,MAAM,GAAGP,aAAa,CAACI,MAAM,CAACI,KAAA;IAAA,IAAC;MAAE9D;IAAK,CAAC,GAAA8D,KAAA;IAAA,OAAK9D,IAAI,CAAC4D,QAAQ,CAAC,QAAQ,CAAC;EAAA,EAAC;EAC1E,IAAIG,gBAAgC,GAAG,EAAE;;EAEzC;EACA,MAAMC,mBAAqC,GAAGP,MAAM,CAACQ,GAAG,CAAEC,KAAK,IAC3D,IAAAC,wBAAW,EAAC;IAAEX,WAAW;IAAE7B,IAAI,EAAEuC;EAAM,CAAC,CAAC,CAC5C;EAEDH,gBAAgB,GAAGA,gBAAgB,CAACK,MAAM,CAAC,MAAMlE,OAAO,CAACmE,GAAG,CAACL,mBAAmB,CAAC,CAAC;EAClFD,gBAAgB,GAAGA,gBAAgB,CAACO,IAAI,EAAE;;EAE1C;EACA,MAAMC,mBAA6C,GAAGV,MAAM,CAACI,GAAG,CAAEO,KAAK,IACnE,IAAAC,wBAAW,EAAC;IACRjB,WAAW;IACX7B,IAAI,EAAE6C,KAAK;IACXjB;EACJ,CAAC,CAAC,CACL;EAED,MAAMmB,cAA+B,GAAG,MAAMxE,OAAO,CAACmE,GAAG,CAACE,mBAAmB,CAAC;EAC9E,MAAMI,SAAyB,GAAGD,cAAc,CAACT,GAAG,CAAEtC,IAAI,KAAM;IAC5DgB,GAAG,EAAG,GAAEhB,IAAI,CAACiD,IAAK,IAAGjD,IAAI,CAACoB,GAAI,EAAC;IAC/BN,EAAE,EAAEd,IAAI,CAACoB,GAAG;IACZ8B,IAAI,EAAElD,IAAI,CAACkD;EACf,CAAC,CAAC,CAAC;EAEHd,gBAAgB,GAAGA,gBAAgB,CAACK,MAAM,CAACO,SAAS,CAAC;EAErD,OAAOZ,gBAAgB;AAC3B,CAAC;AAAC1C,OAAA,CAAA+B,WAAA,GAAAA,WAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/gallery",
-    "version": "5.0.0-beta.113",
+    "version": "5.0.0-beta.115",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -63,5 +63,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "3b93d0b2a8b029871d09b92a4c0e8bb82c4316b2"
+    "gitHead": "8c4005946545d966aa88d30382f609a382d3955b"
 }