@chayns-components/gallery 5.0.0-beta.576 → 5.0.0-beta.579

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.
Files changed (79) hide show
  1. package/lib/cjs/components/Gallery.js +309 -0
  2. package/lib/cjs/components/Gallery.js.map +1 -0
  3. package/lib/cjs/components/Gallery.styles.js +92 -0
  4. package/lib/cjs/components/Gallery.styles.js.map +1 -0
  5. package/lib/cjs/components/add-file/AddFile.js +33 -0
  6. package/lib/cjs/components/add-file/AddFile.js.map +1 -0
  7. package/lib/cjs/components/add-file/AddFile.styles.js +23 -0
  8. package/lib/cjs/components/add-file/AddFile.styles.js.map +1 -0
  9. package/lib/cjs/components/gallery-item/GalleryItem.js +43 -0
  10. package/lib/cjs/components/gallery-item/GalleryItem.js.map +1 -0
  11. package/lib/cjs/components/gallery-item/GalleryItem.styles.js +51 -0
  12. package/lib/cjs/components/gallery-item/GalleryItem.styles.js.map +1 -0
  13. package/lib/cjs/components/gallery-item/media-item/MediaItem.js +52 -0
  14. package/lib/cjs/components/gallery-item/media-item/MediaItem.js.map +1 -0
  15. package/lib/cjs/components/gallery-item/media-item/MediaItem.styles.js +62 -0
  16. package/lib/cjs/components/gallery-item/media-item/MediaItem.styles.js.map +1 -0
  17. package/lib/cjs/components/gallery-item/preview-item/PreviewItem.js +45 -0
  18. package/lib/cjs/components/gallery-item/preview-item/PreviewItem.js.map +1 -0
  19. package/lib/cjs/components/gallery-item/preview-item/PreviewItem.styles.js +43 -0
  20. package/lib/cjs/components/gallery-item/preview-item/PreviewItem.styles.js.map +1 -0
  21. package/lib/cjs/index.js +21 -0
  22. package/lib/cjs/index.js.map +1 -0
  23. package/lib/cjs/types/gallery.js +12 -0
  24. package/lib/cjs/types/gallery.js.map +1 -0
  25. package/lib/cjs/utils/file.js +51 -0
  26. package/lib/cjs/utils/file.js.map +1 -0
  27. package/lib/esm/components/Gallery.js.map +1 -0
  28. package/lib/esm/components/Gallery.styles.js.map +1 -0
  29. package/lib/esm/components/add-file/AddFile.js.map +1 -0
  30. package/lib/esm/components/add-file/AddFile.styles.js.map +1 -0
  31. package/lib/esm/components/gallery-item/GalleryItem.js.map +1 -0
  32. package/lib/esm/components/gallery-item/GalleryItem.styles.js.map +1 -0
  33. package/lib/esm/components/gallery-item/media-item/MediaItem.js.map +1 -0
  34. package/lib/esm/components/gallery-item/media-item/MediaItem.styles.js.map +1 -0
  35. package/lib/esm/components/gallery-item/preview-item/PreviewItem.js.map +1 -0
  36. package/lib/esm/components/gallery-item/preview-item/PreviewItem.styles.js.map +1 -0
  37. package/lib/esm/index.js.map +1 -0
  38. package/lib/esm/types/gallery.js.map +1 -0
  39. package/lib/esm/utils/file.js.map +1 -0
  40. package/lib/{components → types/components}/add-file/AddFile.styles.d.ts +1 -1
  41. package/lib/{components → types/components}/gallery-item/GalleryItem.d.ts +1 -1
  42. package/lib/{components → types/components}/gallery-item/GalleryItem.styles.d.ts +1 -1
  43. package/lib/{components → types/components}/gallery-item/media-item/MediaItem.d.ts +1 -1
  44. package/lib/{components → types/components}/gallery-item/media-item/MediaItem.styles.d.ts +3 -3
  45. package/lib/{components → types/components}/gallery-item/preview-item/PreviewItem.d.ts +1 -1
  46. package/lib/{components → types/components}/gallery-item/preview-item/PreviewItem.styles.d.ts +2 -2
  47. package/package.json +17 -7
  48. package/lib/components/Gallery.js.map +0 -1
  49. package/lib/components/Gallery.styles.js.map +0 -1
  50. package/lib/components/add-file/AddFile.js.map +0 -1
  51. package/lib/components/add-file/AddFile.styles.js.map +0 -1
  52. package/lib/components/gallery-item/GalleryItem.js.map +0 -1
  53. package/lib/components/gallery-item/GalleryItem.styles.js.map +0 -1
  54. package/lib/components/gallery-item/media-item/MediaItem.js.map +0 -1
  55. package/lib/components/gallery-item/media-item/MediaItem.styles.js.map +0 -1
  56. package/lib/components/gallery-item/preview-item/PreviewItem.js.map +0 -1
  57. package/lib/components/gallery-item/preview-item/PreviewItem.styles.js.map +0 -1
  58. package/lib/index.js.map +0 -1
  59. package/lib/types/gallery.js.map +0 -1
  60. package/lib/utils/file.js.map +0 -1
  61. /package/lib/{components → esm/components}/Gallery.js +0 -0
  62. /package/lib/{components → esm/components}/Gallery.styles.js +0 -0
  63. /package/lib/{components → esm/components}/add-file/AddFile.js +0 -0
  64. /package/lib/{components → esm/components}/add-file/AddFile.styles.js +0 -0
  65. /package/lib/{components → esm/components}/gallery-item/GalleryItem.js +0 -0
  66. /package/lib/{components → esm/components}/gallery-item/GalleryItem.styles.js +0 -0
  67. /package/lib/{components → esm/components}/gallery-item/media-item/MediaItem.js +0 -0
  68. /package/lib/{components → esm/components}/gallery-item/media-item/MediaItem.styles.js +0 -0
  69. /package/lib/{components → esm/components}/gallery-item/preview-item/PreviewItem.js +0 -0
  70. /package/lib/{components → esm/components}/gallery-item/preview-item/PreviewItem.styles.js +0 -0
  71. /package/lib/{index.js → esm/index.js} +0 -0
  72. /package/lib/{types → esm/types}/gallery.js +0 -0
  73. /package/lib/{utils → esm/utils}/file.js +0 -0
  74. /package/lib/{components → types/components}/Gallery.d.ts +0 -0
  75. /package/lib/{components → types/components}/Gallery.styles.d.ts +0 -0
  76. /package/lib/{components → types/components}/add-file/AddFile.d.ts +0 -0
  77. /package/lib/{index.d.ts → types/index.d.ts} +0 -0
  78. /package/lib/types/{gallery.d.ts → types/gallery.d.ts} +0 -0
  79. /package/lib/{utils → types/utils}/file.d.ts +0 -0
@@ -1,4 +1,4 @@
1
- import type { InternalFileItem } from '@chayns-components/core/lib/types/file';
1
+ import { type InternalFileItem } from '@chayns-components/core';
2
2
  import { FC } from 'react';
3
3
  export type MediaItemProps = {
4
4
  /**
@@ -263,7 +263,7 @@ export declare const StyledMotionMediaItem: import("styled-components").IStyledC
263
263
  } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
264
264
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
265
265
  }, {
266
- theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
266
+ theme: import("@chayns-components/core/lib/types/components/color-scheme-provider/ColorSchemeProvider").Theme;
267
267
  }>> & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
268
268
  export declare const StyledMediaItemVideoWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
269
269
  $ratio: number;
@@ -272,9 +272,9 @@ export declare const StyledMediaItemImageWrapper: import("styled-components").IS
272
272
  $ratio: number;
273
273
  }>>;
274
274
  export declare const StyledMediaItemImage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
275
- theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
275
+ theme: import("@chayns-components/core/lib/types/components/color-scheme-provider/ColorSchemeProvider").Theme;
276
276
  }>>;
277
277
  export declare const StyledMediaItemVideo: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, {
278
- theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
278
+ theme: import("@chayns-components/core/lib/types/components/color-scheme-provider/ColorSchemeProvider").Theme;
279
279
  }>>;
280
280
  export declare const StyledMediaItemPlayIcon: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
@@ -1,4 +1,4 @@
1
- import type { InternalFileItem } from '@chayns-components/core/lib/types/file';
1
+ import { InternalFileItem } from '@chayns-components/core';
2
2
  import { FC } from 'react';
3
3
  export type PreviewItemProps = {
4
4
  /**
@@ -263,12 +263,12 @@ export declare const StyledMotionPreviewItem: import("styled-components").IStyle
263
263
  } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
264
264
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
265
265
  }, {
266
- theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
266
+ theme: import("@chayns-components/core/lib/types/components/color-scheme-provider/ColorSchemeProvider").Theme;
267
267
  }>> & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
268
268
  export declare const StyledPreviewItemImageWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
269
269
  $ratio: number;
270
270
  }>>;
271
271
  export declare const StyledPreviewItemImage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
272
- theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
272
+ theme: import("@chayns-components/core/lib/types/components/color-scheme-provider/ColorSchemeProvider").Theme;
273
273
  }>>;
274
274
  export declare const StyledPreviewItemLoadingIcon: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/gallery",
3
- "version": "5.0.0-beta.576",
3
+ "version": "5.0.0-beta.579",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -17,8 +17,16 @@
17
17
  "author": "Tobit.Software",
18
18
  "homepage": "https://github.com/TobitSoftware/chayns-components/tree/main/packages/gallery#readme",
19
19
  "license": "MIT",
20
- "main": "lib/index.js",
21
- "types": "lib/index.d.ts",
20
+ "main": "lib/cjs/index.js",
21
+ "module": "lib/esm/index.js",
22
+ "types": "lib/types/index.d.ts",
23
+ "exports": {
24
+ ".": {
25
+ "require": "./lib/cjs/index.js",
26
+ "import": "./lib/esm/index.js",
27
+ "types": "./lib/types/index.d.ts"
28
+ }
29
+ },
22
30
  "directories": {
23
31
  "lib": "lib",
24
32
  "test": "__tests__"
@@ -31,9 +39,10 @@
31
39
  "url": "git+https://github.com/TobitSoftware/chayns-components.git"
32
40
  },
33
41
  "scripts": {
34
- "build": "npm run build:js && npm run build:types",
35
- "build:js": "babel src --out-dir lib --extensions=.ts,.tsx --source-maps --ignore=src/stories",
42
+ "build": "npm run build:cjs && npm run build:esm && npm run build:types",
36
43
  "build:types": "tsc",
44
+ "build:cjs": "cross-env NODE_ENV=cjs babel src --out-dir lib/cjs --extensions=.ts,.tsx --source-maps --ignore=src/stories",
45
+ "build:esm": "cross-env NODE_ENV=esm babel src --out-dir lib/esm --extensions=.ts,.tsx --source-maps --ignore=src/stories",
37
46
  "prepublishOnly": "npm run build"
38
47
  },
39
48
  "bugs": {
@@ -50,6 +59,7 @@
50
59
  "@types/styled-components": "^5.1.34",
51
60
  "@types/uuid": "^9.0.8",
52
61
  "babel-loader": "^9.1.3",
62
+ "cross-env": "^7.0.3",
53
63
  "lerna": "^8.1.2",
54
64
  "react": "^18.2.0",
55
65
  "react-dom": "^18.2.0",
@@ -57,7 +67,7 @@
57
67
  "typescript": "^5.4.5"
58
68
  },
59
69
  "dependencies": {
60
- "@chayns-components/core": "^5.0.0-beta.576",
70
+ "@chayns-components/core": "^5.0.0-beta.578",
61
71
  "uuid": "^9.0.1"
62
72
  },
63
73
  "peerDependencies": {
@@ -70,5 +80,5 @@
70
80
  "publishConfig": {
71
81
  "access": "public"
72
82
  },
73
- "gitHead": "5fe12cdde4f5d793599bc158b4757b8e4acf9789"
83
+ "gitHead": "c3d65c0781ca6b8e053ccc6ce359b1074b0fcb1e"
74
84
  }
@@ -1 +0,0 @@
1
- {"version":3,"file":"Gallery.js","names":["uploadFile","createDialog","DialogType","MediaType","openMedia","React","useCallback","useEffect","useMemo","useState","v4","uuidv4","GalleryViewMode","filterDuplicateFile","generatePreviewUrl","generateVideoThumbnail","AddFile","GalleryItem","StyledGallery","StyledGalleryEditModeWrapper","StyledGalleryItemWrapper","Gallery","_ref","allowDragAndDrop","doubleFileDialogMessage","isEditMode","fileMinWidth","files","onAdd","onFileCountChange","onRemove","viewMode","GRID","fileItems","setFileItems","handlePreviewUrlCallback","previewUrl","file","prevState","map","prevFile","id","callDuplicateFileDialog","type","ALERT","text","handleUploadFileCallback","uploadedFile","updatedState","url","undefined","prevElement","find","_ref2","newUploadedFile","state","tmp","forEach","updatedFile","push","length","filesToGeneratePreview","filter","filesToUpload","includes","callback","fileToUpload","UploadedFile","handleAddFiles","filesToAdd","newFileItems","newFile","updatedItems","prevItem","newItem","item","concat","some","handleDeleteFile","fileToDelete","filteredFiles","fileId","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","openFiles","startIndex","findIndex","items","replace","mediaType","VIDEO","IMAGE","ratio","Math","max","galleryContent","combinedFilesLength","createElement","key","fileItem","onClick","shortedFiles","slice","index","imageRatio","remainingItemsLength","$fileMinWidth","onDragOver","onDrop","$ratio","$uploadedFileLength","$viewMode","displayName"],"sources":["../../src/components/Gallery.tsx"],"sourcesContent":["import {\n Image,\n uploadFile,\n Video,\n type FileItem,\n type InternalFileItem,\n} from '@chayns-components/core';\nimport { createDialog, DialogType, MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport React, { DragEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { GalleryViewMode } from '../types/gallery';\nimport { filterDuplicateFile, generatePreviewUrl, generateVideoThumbnail } from '../utils/file';\nimport AddFile from './add-file/AddFile';\nimport GalleryItem from './gallery-item/GalleryItem';\nimport {\n StyledGallery,\n StyledGalleryEditModeWrapper,\n StyledGalleryItemWrapper,\n} from './Gallery.styles';\n\nexport type GalleryProps = {\n /**\n * Whether drag and drop is allowed or not\n */\n allowDragAndDrop?: boolean;\n /**\n * The message that should be displayed if a File is already given.\n */\n doubleFileDialogMessage?: string;\n /**\n * Whether images and videos can be edited\n */\n isEditMode?: boolean;\n /**\n * The minimum width of a file in the edit mode\n */\n fileMinWidth?: number;\n /**\n * Images and videos which should be displayed\n */\n files?: FileItem[];\n /**\n * Function to be executed when files are added and uploaded\n */\n onAdd?: (file: FileItem) => void;\n /**\n * Function to be executed when the count of files are changed. Needed to check if all files are uploaded\n */\n onFileCountChange?: (fileCount: number) => void;\n /**\n * Function to be executed when a file is removed\n */\n onRemove?: (file: FileItem) => void;\n /**\n * The mode how the images should be displayed.\n */\n viewMode?: GalleryViewMode;\n};\n\nconst Gallery: FC<GalleryProps> = ({\n allowDragAndDrop = false,\n doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',\n isEditMode = false,\n fileMinWidth = 100,\n files,\n onAdd,\n onFileCountChange,\n onRemove,\n viewMode = GalleryViewMode.GRID,\n}) => {\n const [fileItems, setFileItems] = useState<InternalFileItem[]>([]);\n\n /**\n * This function adds a previewUrl to fileItems\n */\n const handlePreviewUrlCallback = (previewUrl: string, file: InternalFileItem) => {\n setFileItems((prevState) =>\n prevState.map((prevFile) => {\n if (prevFile.id === file.id) {\n return { ...prevFile, previewUrl };\n }\n return prevFile;\n }),\n );\n };\n\n const callDuplicateFileDialog = useCallback(() => {\n createDialog({ type: DialogType.ALERT, text: doubleFileDialogMessage });\n }, [doubleFileDialogMessage]);\n\n /**\n * This function adds uploaded files to fileItems\n */\n const handleUploadFileCallback = useCallback(\n (file: InternalFileItem, uploadedFile: Video | Image) => {\n setFileItems((prevState) => {\n const updatedState = prevState.map((prevFile) => {\n if (prevFile.uploadedFile?.url === uploadedFile.url) {\n callDuplicateFileDialog();\n\n return undefined;\n }\n\n if (prevFile.id === file.id) {\n if (typeof onAdd === 'function') {\n const prevElement = prevState.find(\n ({ uploadedFile: newUploadedFile }) =>\n newUploadedFile?.url === uploadedFile?.url,\n );\n\n if (!prevElement) {\n onAdd({\n file: uploadedFile,\n id: file.id,\n });\n }\n }\n\n return {\n ...prevFile,\n uploadedFile,\n state: 'uploaded',\n };\n }\n\n return prevFile;\n });\n\n const tmp: InternalFileItem[] = [];\n\n updatedState.forEach((updatedFile) => {\n if (updatedFile !== undefined) {\n tmp.push(updatedFile as InternalFileItem);\n }\n });\n\n return tmp ?? [];\n });\n },\n [callDuplicateFileDialog, onAdd],\n );\n\n /**\n * Returns the current count to check if all files are uploaded\n */\n useEffect(() => {\n if (typeof onFileCountChange === 'function') {\n onFileCountChange(fileItems.length);\n }\n }, [fileItems.length, onFileCountChange]);\n\n /**\n * Prepares files for previewUrl and upload\n */\n useEffect(() => {\n const filesToGeneratePreview = fileItems.filter(\n (file) => file.file && !file.previewUrl && (file.state === 'none' || !file.state),\n );\n\n const filesToUpload = fileItems.filter(\n (file) => !file.uploadedFile && file.state !== 'uploading',\n );\n\n filesToGeneratePreview.forEach((file) => {\n if (!file.file) {\n return;\n }\n\n if (file.file.type.includes('video/')) {\n generateVideoThumbnail({\n file: file.file,\n callback: (previewUrl) => handlePreviewUrlCallback(previewUrl, file),\n });\n\n return;\n }\n\n generatePreviewUrl({\n file: file.file,\n callback: (previewUrl) => handlePreviewUrlCallback(previewUrl, file),\n });\n });\n\n filesToUpload.forEach((file) => {\n setFileItems((prevState) =>\n prevState.map((prevFile) => {\n if (prevFile.id === file.id) {\n return { ...prevFile, state: 'uploading' };\n }\n return prevFile;\n }),\n );\n\n void uploadFile({\n fileToUpload: file,\n callback: (UploadedFile) => handleUploadFileCallback(file, UploadedFile),\n });\n });\n }, [fileItems, handleUploadFileCallback]);\n\n /**\n * This function formats and adds files to fileItems\n */\n const handleAddFiles = useCallback(\n (filesToAdd: File[]) => {\n const newFileItems: InternalFileItem[] = [];\n\n filesToAdd.forEach((file) => {\n if (file && !filterDuplicateFile({ files: fileItems, newFile: file })) {\n newFileItems.push({\n id: uuidv4(),\n file,\n state: 'none',\n });\n }\n });\n\n setFileItems((prevState) => [...prevState, ...newFileItems]);\n },\n [fileItems],\n );\n\n /**\n * This function adds external files to fileItems\n */\n useEffect(() => {\n if (files) {\n const newFileItems: InternalFileItem[] = [];\n\n files.forEach((file) => {\n newFileItems.push({\n id: file.id ?? uuidv4(),\n uploadedFile: file.file,\n file: undefined,\n state: 'uploaded',\n previewUrl: undefined,\n });\n });\n\n setFileItems((prevState) => {\n const updatedItems = prevState.map((prevItem) => {\n const newItem = newFileItems.find(\n (item) =>\n item.uploadedFile &&\n item.uploadedFile.url ===\n (prevItem.uploadedFile && prevItem.uploadedFile.url),\n );\n return newItem || prevItem;\n });\n\n return updatedItems.concat(\n newFileItems.filter(\n (newItem) =>\n !prevState.some(\n (prevItem) =>\n prevItem.uploadedFile &&\n newItem.uploadedFile &&\n prevItem.uploadedFile.url === newItem.uploadedFile.url,\n ),\n ),\n );\n });\n }\n }, [files]);\n\n /**\n * This function deletes a selected file from the file list\n */\n const handleDeleteFile = useCallback(\n (id?: string) => {\n let fileToDelete: FileItem | undefined;\n\n const filteredFiles = fileItems.filter((file) => {\n const fileId = file.id;\n\n if (fileId === id && file.uploadedFile) {\n fileToDelete = { file: file.uploadedFile, id };\n }\n\n return fileId !== id;\n });\n\n setFileItems(filteredFiles);\n\n if (!fileToDelete || typeof onRemove !== 'function') {\n return;\n }\n\n onRemove(fileToDelete);\n },\n [fileItems, onRemove],\n );\n\n /**\n * This function handles the drag and drop\n */\n const handleDrop = useCallback(\n (e: DragEvent<HTMLDivElement>) => {\n if (!allowDragAndDrop) {\n return;\n }\n\n e.preventDefault();\n const draggedFiles = Array.from(e.dataTransfer.files);\n\n handleAddFiles(draggedFiles);\n },\n [allowDragAndDrop, handleAddFiles],\n );\n\n /**\n * Opens the files in a slideShow\n */\n const openFiles = useCallback(\n (file: InternalFileItem) => {\n const startIndex = fileItems.findIndex((item) => item.id === file.id);\n\n const items: OpenMediaItem[] = fileItems.map((item) => ({\n url: item.uploadedFile?.url.replace('_0.mp4', '.mp4') ?? '',\n mediaType:\n item.uploadedFile && 'thumbnailUrl' in item.uploadedFile\n ? MediaType.VIDEO\n : MediaType.IMAGE,\n }));\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n void openMedia({ items, startIndex });\n },\n [fileItems],\n );\n\n /**\n * Returns the ratio of the single file\n */\n const ratio = useMemo(() => {\n switch (fileItems.length) {\n case 0:\n return 0;\n case 1:\n return Math.max(fileItems[0]?.uploadedFile?.ratio ?? 1, 1);\n case 2:\n return 2;\n case 3:\n return 3;\n default:\n return 1;\n }\n }, [fileItems]);\n\n const galleryContent = useMemo(() => {\n const combinedFilesLength = fileItems.length;\n\n if (isEditMode) {\n const items = fileItems.map((file) => (\n <GalleryItem\n key={file.id}\n fileItem={file}\n isEditMode\n onClick={openFiles}\n handleDeleteFile={handleDeleteFile}\n />\n ));\n\n items.push(<AddFile key=\"add_file\" onAdd={handleAddFiles} />);\n\n return items;\n }\n\n const shortedFiles = fileItems.slice(0, 4);\n\n return shortedFiles.map((file, index) => {\n let imageRatio = 1;\n\n if (viewMode === GalleryViewMode.GRID) {\n if (combinedFilesLength === 2 && (index === 0 || index === 1)) {\n imageRatio = 0.5;\n } else if (\n (index === 0 && combinedFilesLength > 2) ||\n (combinedFilesLength === 3 && (index === 1 || index === 2))\n ) {\n imageRatio = 1.5;\n }\n }\n\n return (\n <GalleryItem\n key={file.id}\n fileItem={file}\n isEditMode={false}\n handleDeleteFile={handleDeleteFile}\n onClick={openFiles}\n ratio={imageRatio}\n remainingItemsLength={\n combinedFilesLength > 4 && index === 3 ? combinedFilesLength : undefined\n }\n />\n );\n });\n }, [fileItems, isEditMode, handleAddFiles, openFiles, handleDeleteFile, viewMode]);\n\n return useMemo(\n () => (\n <StyledGallery>\n {isEditMode ? (\n <StyledGalleryEditModeWrapper\n $fileMinWidth={fileMinWidth}\n onDragOver={(e) => e.preventDefault()}\n onDrop={(e) => void handleDrop(e)}\n >\n {galleryContent}\n </StyledGalleryEditModeWrapper>\n ) : (\n <StyledGalleryItemWrapper\n $ratio={ratio}\n $uploadedFileLength={fileItems.length}\n $viewMode={viewMode}\n >\n {galleryContent}\n </StyledGalleryItemWrapper>\n )}\n </StyledGallery>\n ),\n [isEditMode, fileMinWidth, galleryContent, ratio, fileItems.length, viewMode, handleDrop],\n );\n};\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":"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","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Gallery.styles.js","names":["styled","css","GalleryViewMode","StyledGallery","div","StyledGalleryItemWrapper","_ref","$viewMode","$uploadedFileLength","GRID","_ref2","$ratio","StyledGalleryEditModeWrapper","_ref3","$fileMinWidth"],"sources":["../../src/components/Gallery.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { GalleryViewMode } from '../types/gallery';\n\nexport const StyledGallery = styled.div``;\n\nexport const StyledGalleryItemWrapper = styled.div<{\n $uploadedFileLength: number;\n $ratio: number;\n $viewMode: GalleryViewMode;\n}>`\n display: grid;\n gap: 5px;\n\n ${({ $viewMode, $uploadedFileLength }) => {\n if ($viewMode === GalleryViewMode.GRID) {\n return css`\n > div:first-child {\n grid-column: 1 / -1;\n }\n\n ${() => {\n switch ($uploadedFileLength) {\n case 1:\n return css`\n grid-template-columns: 1fr;\n `;\n case 2:\n return css`\n grid-template-columns: repeat(2, 1fr);\n > div:first-child {\n grid-column: span 1;\n }\n `;\n case 3:\n return css`\n grid-template-columns: repeat(2, 1fr);\n > div:first-child {\n grid-column: span 2;\n }\n `;\n default:\n return css`\n grid-template-columns: repeat(3, minmax(0, 1fr));\n > div:not(:first-child) {\n grid-column: span 1;\n }\n `;\n }\n }}\n `;\n }\n\n switch ($uploadedFileLength) {\n case 1:\n return css`\n grid-template-columns: 1fr;\n `;\n case 2:\n return css`\n grid-template-columns: repeat(2, 1fr);\n `;\n case 3:\n return css`\n grid-template-columns: repeat(3, 1fr);\n `;\n default:\n return css`\n grid-template-columns: repeat(2, 1fr);\n > div:nth-child(-n + 2) {\n grid-row: 1;\n }\n `;\n }\n }}\n\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\nexport const StyledGalleryEditModeWrapper = styled.div<{\n $fileMinWidth: number;\n}>`\n display: grid;\n grid-template-columns: ${({ $fileMinWidth }) =>\n `repeat(auto-fill, minmax(${$fileMinWidth}px, 1fr))`};\n grid-auto-rows: 1fr;\n gap: 6px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,eAAe,QAAQ,kBAAkB;AAElD,OAAO,MAAMC,aAAa,GAAGH,MAAM,CAACI,GAAI,EAAC;AAEzC,OAAO,MAAMC,wBAAwB,GAAGL,MAAM,CAACI,GAI5C;AACH;AACA;AACA;AACA,MAAME,IAAA,IAAwC;EAAA,IAAvC;IAAEC,SAAS;IAAEC;EAAoB,CAAC,GAAAF,IAAA;EACjC,IAAIC,SAAS,KAAKL,eAAe,CAACO,IAAI,EAAE;IACpC,OAAOR,GAAI;AACvB;AACA;AACA;AACA;AACA,kBAAkB,MAAM;MACJ,QAAQO,mBAAmB;QACvB,KAAK,CAAC;UACF,OAAOP,GAAI;AACvC;AACA,6BAA6B;QACL,KAAK,CAAC;UACF,OAAOA,GAAI;AACvC;AACA;AACA;AACA;AACA,6BAA6B;QACL,KAAK,CAAC;UACF,OAAOA,GAAI;AACvC;AACA;AACA;AACA;AACA,6BAA6B;QACL;UACI,OAAOA,GAAI;AACvC;AACA;AACA;AACA;AACA,6BAA6B;MACT;IACJ,CAAE;AAClB,aAAa;EACL;EAEA,QAAQO,mBAAmB;IACvB,KAAK,CAAC;MACF,OAAOP,GAAI;AAC3B;AACA,iBAAiB;IACL,KAAK,CAAC;MACF,OAAOA,GAAI;AAC3B;AACA,iBAAiB;IACL,KAAK,CAAC;MACF,OAAOA,GAAI;AAC3B;AACA,iBAAiB;IACL;MACI,OAAOA,GAAI;AAC3B;AACA;AACA;AACA;AACA,iBAAiB;EACT;AACJ,CAAE;AACN;AACA,oBAAoBS,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA,CAAC;AAC3C,CAAC;AAED,OAAO,MAAMC,4BAA4B,GAAGZ,MAAM,CAACI,GAEhD;AACH;AACA,6BAA6BS,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OACtC,4BAA2BC,aAAc,WAAU;AAAA,CAAC;AAC7D;AACA;AACA,CAAC","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"AddFile.js","names":["Icon","selectFiles","React","useCallback","StyledAddFile","StyledAddFIleIconWrapper","AddFile","_ref","onAdd","openSelectDialog","files","multiple","type","createElement","key","onClick","size","icons","displayName"],"sources":["../../../src/components/add-file/AddFile.tsx"],"sourcesContent":["import { Icon, selectFiles } from '@chayns-components/core';\nimport React, { FC, useCallback } from 'react';\nimport { StyledAddFile, StyledAddFIleIconWrapper } from './AddFile.styles';\n\nexport type AddFileProps = {\n /**\n * Function to be executed when files are added\n */\n onAdd: (files: File[]) => void;\n};\n\nconst AddFile: FC<AddFileProps> = ({ onAdd }) => {\n const openSelectDialog = useCallback(async () => {\n const files = await selectFiles({\n multiple: true,\n type: 'image/*, video/*',\n });\n\n onAdd(files);\n }, [onAdd]);\n\n return (\n <StyledAddFile key=\"addButton\">\n <StyledAddFIleIconWrapper onClick={() => void openSelectDialog()}>\n <Icon size={40} icons={['fa fa-plus']} />\n </StyledAddFIleIconWrapper>\n </StyledAddFile>\n );\n};\n\nAddFile.displayName = 'AddFile';\n\nexport default AddFile;\n"],"mappings":"AAAA,SAASA,IAAI,EAAEC,WAAW,QAAQ,yBAAyB;AAC3D,OAAOC,KAAK,IAAQC,WAAW,QAAQ,OAAO;AAC9C,SAASC,aAAa,EAAEC,wBAAwB,QAAQ,kBAAkB;AAS1E,MAAMC,OAAyB,GAAGC,IAAA,IAAe;EAAA,IAAd;IAAEC;EAAM,CAAC,GAAAD,IAAA;EACxC,MAAME,gBAAgB,GAAGN,WAAW,CAAC,YAAY;IAC7C,MAAMO,KAAK,GAAG,MAAMT,WAAW,CAAC;MAC5BU,QAAQ,EAAE,IAAI;MACdC,IAAI,EAAE;IACV,CAAC,CAAC;IAEFJ,KAAK,CAACE,KAAK,CAAC;EAChB,CAAC,EAAE,CAACF,KAAK,CAAC,CAAC;EAEX,oBACIN,KAAA,CAAAW,aAAA,CAACT,aAAa;IAACU,GAAG,EAAC;EAAW,gBAC1BZ,KAAA,CAAAW,aAAA,CAACR,wBAAwB;IAACU,OAAO,EAAEA,CAAA,KAAM,KAAKN,gBAAgB,CAAC;EAAE,gBAC7DP,KAAA,CAAAW,aAAA,CAACb,IAAI;IAACgB,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,YAAY;EAAE,CAAE,CAClB,CACf,CAAC;AAExB,CAAC;AAEDX,OAAO,CAACY,WAAW,GAAG,SAAS;AAE/B,eAAeZ,OAAO","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"AddFile.styles.js","names":["styled","StyledAddFile","div","StyledAddFIleIconWrapper","button","_ref","theme","_ref2"],"sources":["../../../src/components/add-file/AddFile.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledAddFile = styled.div`\n position: relative;\n`;\n\ntype StyledAddFIleIconWrapperProps = WithTheme<unknown>;\n\nexport const StyledAddFIleIconWrapper = styled.button<StyledAddFIleIconWrapperProps>`\n background-color: ${({ theme }: StyledAddFIleIconWrapperProps) => theme['101']};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledAddFIleIconWrapperProps) => theme['009-rgb']}, 0.08) inset;\n width: 100%;\n aspect-ratio: 1 / 1;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,aAAa,GAAGD,MAAM,CAACE,GAAI;AACxC;AACA,CAAC;AAID,OAAO,MAAMC,wBAAwB,GAAGH,MAAM,CAACI,MAAsC;AACrF,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF;AACA,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAqC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC9E;AACA;AACA,CAAC","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"GalleryItem.js","names":["Icon","AnimatePresence","React","useMemo","StyledGalleryItem","StyledGalleryItemDeleteButton","StyledGalleryItemMoreItemsIndicator","MediaItem","PreviewItem","GalleryItem","_ref","fileItem","handleDeleteFile","isEditMode","ratio","remainingItemsLength","onClick","createElement","id","size","icons","state","previewUrl","uploadedFile","initial","key","openSelectedFile","displayName"],"sources":["../../../src/components/gallery-item/GalleryItem.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport type { InternalFileItem } from '@chayns-components/core/lib/types/file';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { FC, useMemo } from 'react';\nimport {\n StyledGalleryItem,\n StyledGalleryItemDeleteButton,\n StyledGalleryItemMoreItemsIndicator,\n} from './GalleryItem.styles';\nimport MediaItem from './media-item/MediaItem';\nimport PreviewItem from './preview-item/PreviewItem';\n\nexport type GalleryItemProps = {\n /**\n * Images and videos which should be displayed\n */\n fileItem: InternalFileItem;\n /**\n * Whether images and videos can be edited\n */\n isEditMode: boolean;\n /**\n * Function to be executed when a file is deleted\n */\n handleDeleteFile: (id?: string) => void;\n /**\n * The ratio of the image\n */\n ratio?: number;\n /**\n * Length of the uploaded files\n */\n remainingItemsLength?: number;\n /**\n * Function to be executed if a file should be opened\n */\n onClick: (file: InternalFileItem) => void;\n};\n\nconst GalleryItem: FC<GalleryItemProps> = ({\n fileItem,\n handleDeleteFile,\n isEditMode,\n ratio = 1,\n remainingItemsLength,\n onClick,\n}) =>\n useMemo(\n () => (\n <StyledGalleryItem>\n {isEditMode && (\n <StyledGalleryItemDeleteButton onClick={() => handleDeleteFile(fileItem.id)}>\n <Icon size={20} icons={['ts-wrong']} />\n </StyledGalleryItemDeleteButton>\n )}\n {!fileItem.state ||\n fileItem.state === 'none' ||\n (!fileItem.previewUrl && !fileItem.uploadedFile) ? null : (\n <AnimatePresence initial={false}>\n {fileItem.state === 'uploading' ? (\n <PreviewItem\n ratio={ratio}\n key={`uploading_${fileItem.id ?? ''}`}\n fileItem={fileItem}\n />\n ) : (\n <MediaItem\n key={`uploaded_${fileItem.id ?? ''}`}\n fileItem={fileItem}\n isEditMode={isEditMode}\n ratio={ratio}\n openSelectedFile={onClick}\n />\n )}\n </AnimatePresence>\n )}\n {remainingItemsLength && (\n <StyledGalleryItemMoreItemsIndicator>\n <p>{`+ ${remainingItemsLength - 3}`}</p>\n </StyledGalleryItemMoreItemsIndicator>\n )}\n </StyledGalleryItem>\n ),\n [fileItem, handleDeleteFile, isEditMode, onClick, ratio, remainingItemsLength],\n );\n\nGalleryItem.displayName = 'GalleryItem';\n\nexport default GalleryItem;\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,yBAAyB;AAE9C,SAASC,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAAQC,OAAO,QAAQ,OAAO;AAC1C,SACIC,iBAAiB,EACjBC,6BAA6B,EAC7BC,mCAAmC,QAChC,sBAAsB;AAC7B,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,OAAOC,WAAW,MAAM,4BAA4B;AA6BpD,MAAMC,WAAiC,GAAGC,IAAA;EAAA,IAAC;IACvCC,QAAQ;IACRC,gBAAgB;IAChBC,UAAU;IACVC,KAAK,GAAG,CAAC;IACTC,oBAAoB;IACpBC;EACJ,CAAC,GAAAN,IAAA;EAAA,OACGP,OAAO,CACH,mBACID,KAAA,CAAAe,aAAA,CAACb,iBAAiB,QACbS,UAAU,iBACPX,KAAA,CAAAe,aAAA,CAACZ,6BAA6B;IAACW,OAAO,EAAEA,CAAA,KAAMJ,gBAAgB,CAACD,QAAQ,CAACO,EAAE;EAAE,gBACxEhB,KAAA,CAAAe,aAAA,CAACjB,IAAI;IAACmB,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,UAAU;EAAE,CAAE,CACX,CAClC,EACA,CAACT,QAAQ,CAACU,KAAK,IAChBV,QAAQ,CAACU,KAAK,KAAK,MAAM,IACxB,CAACV,QAAQ,CAACW,UAAU,IAAI,CAACX,QAAQ,CAACY,YAAa,GAAG,IAAI,gBACnDrB,KAAA,CAAAe,aAAA,CAAChB,eAAe;IAACuB,OAAO,EAAE;EAAM,GAC3Bb,QAAQ,CAACU,KAAK,KAAK,WAAW,gBAC3BnB,KAAA,CAAAe,aAAA,CAACT,WAAW;IACRM,KAAK,EAAEA,KAAM;IACbW,GAAG,EAAG,aAAYd,QAAQ,CAACO,EAAE,IAAI,EAAG,EAAE;IACtCP,QAAQ,EAAEA;EAAS,CACtB,CAAC,gBAEFT,KAAA,CAAAe,aAAA,CAACV,SAAS;IACNkB,GAAG,EAAG,YAAWd,QAAQ,CAACO,EAAE,IAAI,EAAG,EAAE;IACrCP,QAAQ,EAAEA,QAAS;IACnBE,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbY,gBAAgB,EAAEV;EAAQ,CAC7B,CAEQ,CACpB,EACAD,oBAAoB,iBACjBb,KAAA,CAAAe,aAAA,CAACX,mCAAmC,qBAChCJ,KAAA,CAAAe,aAAA,YAAK,KAAIF,oBAAoB,GAAG,CAAE,EAAK,CACN,CAE1B,CACtB,EACD,CAACJ,QAAQ,EAAEC,gBAAgB,EAAEC,UAAU,EAAEG,OAAO,EAAEF,KAAK,EAAEC,oBAAoB,CACjF,CAAC;AAAA;AAELN,WAAW,CAACkB,WAAW,GAAG,aAAa;AAEvC,eAAelB,WAAW","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"GalleryItem.styles.js","names":["styled","StyledGalleryItem","div","StyledGalleryItemDeleteButton","button","_ref","theme","_ref2","StyledGalleryItemMoreItemsIndicator"],"sources":["../../../src/components/gallery-item/GalleryItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledGalleryItem = styled.div`\n display: flex;\n position: relative;\n height: 100%;\n width: 100%;\n`;\n\ntype StyledGalleryItemDeleteButtonProps = WithTheme<unknown>;\n\nexport const StyledGalleryItemDeleteButton = styled.button<StyledGalleryItemDeleteButtonProps>`\n background-color: rgba(\n ${({ theme }: StyledGalleryItemDeleteButtonProps) => theme['000-rgb']},\n 0.75\n );\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledGalleryItemDeleteButtonProps) => theme['009-rgb']}, 0.08) inset;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 2;\n height: 30px;\n width: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nexport const StyledGalleryItemMoreItemsIndicator = styled.div`\n position: absolute;\n z-index: 2;\n height: 100%;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n backdrop-filter: brightness(40%);\n\n p {\n font-size: 40px;\n color: white;\n }\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAAI;AAC5C;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,6BAA6B,GAAGH,MAAM,CAACI,MAA2C;AAC/F;AACA,UAAUC,IAAA;EAAA,IAAC;IAAEC;EAA0C,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAED;EAA0C,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACnF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,mCAAmC,GAAGR,MAAM,CAACE,GAAI;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"MediaItem.js","names":["Icon","React","StyledMediaItemImage","StyledMediaItemImageWrapper","StyledMediaItemPlayIcon","StyledMediaItemVideo","StyledMediaItemVideoWrapper","StyledMotionMediaItem","MediaItem","_ref","fileItem","isEditMode","openSelectedFile","ratio","createElement","animate","opacity","initial","exit","transition","duration","uploadedFile","onClick","$ratio","size","icons","poster","thumbnailUrl","src","url","type","draggable","displayName"],"sources":["../../../../src/components/gallery-item/media-item/MediaItem.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport type { InternalFileItem } from '@chayns-components/core/lib/types/file';\nimport React, { FC } from 'react';\nimport {\n StyledMediaItemImage,\n StyledMediaItemImageWrapper,\n StyledMediaItemPlayIcon,\n StyledMediaItemVideo,\n StyledMediaItemVideoWrapper,\n StyledMotionMediaItem,\n} from './MediaItem.styles';\n\nexport type MediaItemProps = {\n /**\n * Images and videos which should be displayed\n */\n fileItem: InternalFileItem;\n /**\n * Whether images and videos can be edited\n */\n isEditMode: boolean;\n /**\n * Function to be executed when a file is selected\n */\n openSelectedFile: (file: InternalFileItem) => void;\n /**\n * The ratio of the image\n */\n ratio: number;\n};\n\nconst MediaItem: FC<MediaItemProps> = ({ fileItem, isEditMode, openSelectedFile, ratio }) => (\n <StyledMotionMediaItem\n animate={{ opacity: 1 }}\n initial={{ opacity: 0 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 3.2 }}\n >\n {fileItem.uploadedFile && 'thumbnailUrl' in fileItem.uploadedFile ? (\n <StyledMediaItemVideoWrapper onClick={() => openSelectedFile(fileItem)} $ratio={ratio}>\n <StyledMediaItemPlayIcon>\n <Icon size={isEditMode ? 30 : 50} icons={['fa fa-play']} />\n </StyledMediaItemPlayIcon>\n <StyledMediaItemVideo poster={fileItem.uploadedFile.thumbnailUrl}>\n <source src={fileItem.uploadedFile.url} type=\"video/mp4\" />\n </StyledMediaItemVideo>\n </StyledMediaItemVideoWrapper>\n ) : (\n <StyledMediaItemImageWrapper onClick={() => openSelectedFile(fileItem)} $ratio={ratio}>\n <StyledMediaItemImage draggable={false} src={fileItem.uploadedFile?.url} />\n </StyledMediaItemImageWrapper>\n )}\n </StyledMotionMediaItem>\n);\n\nMediaItem.displayName = 'MediaItem';\n\nexport default MediaItem;\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,yBAAyB;AAE9C,OAAOC,KAAK,MAAc,OAAO;AACjC,SACIC,oBAAoB,EACpBC,2BAA2B,EAC3BC,uBAAuB,EACvBC,oBAAoB,EACpBC,2BAA2B,EAC3BC,qBAAqB,QAClB,oBAAoB;AAqB3B,MAAMC,SAA6B,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC,UAAU;IAAEC,gBAAgB;IAAEC;EAAM,CAAC,GAAAJ,IAAA;EAAA,oBACpFR,KAAA,CAAAa,aAAA,CAACP,qBAAqB;IAClBQ,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxBC,OAAO,EAAE;MAAED,OAAO,EAAE;IAAE,CAAE;IACxBE,IAAI,EAAE;MAAEF,OAAO,EAAE;IAAE,CAAE;IACrBG,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,GAE7BV,QAAQ,CAACW,YAAY,IAAI,cAAc,IAAIX,QAAQ,CAACW,YAAY,gBAC7DpB,KAAA,CAAAa,aAAA,CAACR,2BAA2B;IAACgB,OAAO,EAAEA,CAAA,KAAMV,gBAAgB,CAACF,QAAQ,CAAE;IAACa,MAAM,EAAEV;EAAM,gBAClFZ,KAAA,CAAAa,aAAA,CAACV,uBAAuB,qBACpBH,KAAA,CAAAa,aAAA,CAACd,IAAI;IAACwB,IAAI,EAAEb,UAAU,GAAG,EAAE,GAAG,EAAG;IAACc,KAAK,EAAE,CAAC,YAAY;EAAE,CAAE,CACrC,CAAC,eAC1BxB,KAAA,CAAAa,aAAA,CAACT,oBAAoB;IAACqB,MAAM,EAAEhB,QAAQ,CAACW,YAAY,CAACM;EAAa,gBAC7D1B,KAAA,CAAAa,aAAA;IAAQc,GAAG,EAAElB,QAAQ,CAACW,YAAY,CAACQ,GAAI;IAACC,IAAI,EAAC;EAAW,CAAE,CACxC,CACG,CAAC,gBAE9B7B,KAAA,CAAAa,aAAA,CAACX,2BAA2B;IAACmB,OAAO,EAAEA,CAAA,KAAMV,gBAAgB,CAACF,QAAQ,CAAE;IAACa,MAAM,EAAEV;EAAM,gBAClFZ,KAAA,CAAAa,aAAA,CAACZ,oBAAoB;IAAC6B,SAAS,EAAE,KAAM;IAACH,GAAG,EAAElB,QAAQ,CAACW,YAAY,EAAEQ;EAAI,CAAE,CACjD,CAEd,CAAC;AAAA,CAC3B;AAEDrB,SAAS,CAACwB,WAAW,GAAG,WAAW;AAEnC,eAAexB,SAAS","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"MediaItem.styles.js","names":["motion","styled","StyledMotionMediaItem","div","StyledMediaItemVideoWrapper","_ref","$ratio","StyledMediaItemImageWrapper","_ref2","StyledMediaItemImage","img","_ref3","theme","_ref4","StyledMediaItemVideo","video","_ref5","_ref6","StyledMediaItemPlayIcon"],"sources":["../../../../src/components/gallery-item/media-item/MediaItem.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionMediaItem = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledMediaItemVideoWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\nexport const StyledMediaItemImageWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledMediaItemVideoProps = WithTheme<unknown>;\n\ntype StyledMediaItemImageProps = WithTheme<unknown>;\n\nexport const StyledMediaItemImage = styled.img<StyledMediaItemImageProps>`\n background-color: ${({ theme }: StyledMediaItemImageProps) => theme['101']};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemImageProps) => theme['009-rgb']}, 0.08)\n inset;\n z-index: 1;\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nexport const StyledMediaItemVideo = styled.video<StyledMediaItemVideoProps>`\n background-color: ${({ theme }: StyledMediaItemVideoProps) => theme['101']};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemVideoProps) => theme['009-rgb']}, 0.08)\n inset;\n width: 100%;\n object-fit: cover;\n`;\n\nexport const StyledMediaItemPlayIcon = styled.div`\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,qBAAqB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAsB;AAC5E;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGH,MAAM,CAACE,GAAwB;AAC1E;AACA;AACA;AACA,oBAAoBE,IAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,IAAA;EAAA,OAAKC,MAAM;AAAA,CAAC;AAC3C,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGN,MAAM,CAACE,GAAwB;AAC1E;AACA;AACA;AACA,oBAAoBK,KAAA;EAAA,IAAC;IAAEF;EAAO,CAAC,GAAAE,KAAA;EAAA,OAAKF,MAAM;AAAA,CAAC;AAC3C,CAAC;AAMD,OAAO,MAAMG,oBAAoB,GAAGR,MAAM,CAACS,GAA+B;AAC1E,wBAAwBC,KAAA;EAAA,IAAC;IAAEC;EAAiC,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC/E,iCAAiCC,KAAA;EAAA,IAAC;IAAED;EAAiC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5F;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,oBAAoB,GAAGb,MAAM,CAACc,KAAiC;AAC5E,wBAAwBC,KAAA;EAAA,IAAC;IAAEJ;EAAiC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC/E,iCAAiCK,KAAA;EAAA,IAAC;IAAEL;EAAiC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5F;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMM,uBAAuB,GAAGjB,MAAM,CAACE,GAAI;AAClD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"PreviewItem.js","names":["SmallWaitCursor","React","StyledMotionPreviewItem","StyledPreviewItemImage","StyledPreviewItemImageWrapper","StyledPreviewItemLoadingIcon","PreviewItem","_ref","fileItem","ratio","createElement","animate","opacity","initial","exit","transition","duration","delay","style","position","$ratio","shouldHideWaitCursor","shouldHideBackground","draggable","src","previewUrl","displayName"],"sources":["../../../../src/components/gallery-item/preview-item/PreviewItem.tsx"],"sourcesContent":["import { SmallWaitCursor } from '@chayns-components/core';\nimport type { InternalFileItem } from '@chayns-components/core/lib/types/file';\nimport React, { FC } from 'react';\nimport {\n StyledMotionPreviewItem,\n StyledPreviewItemImage,\n StyledPreviewItemImageWrapper,\n StyledPreviewItemLoadingIcon,\n} from './PreviewItem.styles';\n\nexport type PreviewItemProps = {\n /**\n * Images and videos which should be displayed\n */\n fileItem: InternalFileItem;\n /**\n * The ratio of the image\n */\n ratio: number;\n};\n\nconst PreviewItem: FC<PreviewItemProps> = ({ fileItem, ratio }) => (\n <StyledMotionPreviewItem\n animate={{ opacity: 1 }}\n initial={{ opacity: 0 }}\n exit={{\n opacity: 0,\n transition: { duration: 3.2, delay: 3.2 },\n }}\n transition={{ duration: 3.2 }}\n style={{ position: 'absolute' }}\n >\n <StyledPreviewItemImageWrapper $ratio={ratio}>\n <StyledPreviewItemLoadingIcon>\n <SmallWaitCursor shouldHideWaitCursor={false} shouldHideBackground />\n </StyledPreviewItemLoadingIcon>\n <StyledPreviewItemImage draggable={false} src={fileItem.previewUrl} />\n </StyledPreviewItemImageWrapper>\n </StyledMotionPreviewItem>\n);\n\nPreviewItem.displayName = 'PreviewItem';\n\nexport default PreviewItem;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,yBAAyB;AAEzD,OAAOC,KAAK,MAAc,OAAO;AACjC,SACIC,uBAAuB,EACvBC,sBAAsB,EACtBC,6BAA6B,EAC7BC,4BAA4B,QACzB,sBAAsB;AAa7B,MAAMC,WAAiC,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAAF,IAAA;EAAA,oBAC1DN,KAAA,CAAAS,aAAA,CAACR,uBAAuB;IACpBS,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxBC,OAAO,EAAE;MAAED,OAAO,EAAE;IAAE,CAAE;IACxBE,IAAI,EAAE;MACFF,OAAO,EAAE,CAAC;MACVG,UAAU,EAAE;QAAEC,QAAQ,EAAE,GAAG;QAAEC,KAAK,EAAE;MAAI;IAC5C,CAAE;IACFF,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI,CAAE;IAC9BE,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAW;EAAE,gBAEhClB,KAAA,CAAAS,aAAA,CAACN,6BAA6B;IAACgB,MAAM,EAAEX;EAAM,gBACzCR,KAAA,CAAAS,aAAA,CAACL,4BAA4B,qBACzBJ,KAAA,CAAAS,aAAA,CAACV,eAAe;IAACqB,oBAAoB,EAAE,KAAM;IAACC,oBAAoB;EAAA,CAAE,CAC1C,CAAC,eAC/BrB,KAAA,CAAAS,aAAA,CAACP,sBAAsB;IAACoB,SAAS,EAAE,KAAM;IAACC,GAAG,EAAEhB,QAAQ,CAACiB;EAAW,CAAE,CAC1C,CACV,CAAC;AAAA,CAC7B;AAEDnB,WAAW,CAACoB,WAAW,GAAG,aAAa;AAEvC,eAAepB,WAAW","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"PreviewItem.styles.js","names":["motion","styled","StyledMotionPreviewItem","div","StyledPreviewItemImageWrapper","_ref","$ratio","StyledPreviewItemImage","img","_ref2","theme","_ref3","StyledPreviewItemLoadingIcon"],"sources":["../../../../src/components/gallery-item/preview-item/PreviewItem.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionPreviewItem = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledPreviewItemImageWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledPreviewItemImageProps = WithTheme<unknown>;\n\nexport const StyledPreviewItemImage = styled.img<StyledPreviewItemImageProps>`\n background-color: ${({ theme }: StyledPreviewItemImageProps) => theme['101']};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledPreviewItemImageProps) => theme['009-rgb']}, 0.08) inset;\n z-index: 1;\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nexport const StyledPreviewItemLoadingIcon = styled.div`\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAsB;AAC9E;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGH,MAAM,CAACE,GAAwB;AAC5E;AACA;AACA;AACA,oBAAoBE,IAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,IAAA;EAAA,OAAKC,MAAM;AAAA,CAAC;AAC3C,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGN,MAAM,CAACO,GAAiC;AAC9E,wBAAwBC,KAAA;EAAA,IAAC;IAAEC;EAAmC,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACjF;AACA,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAmC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,4BAA4B,GAAGX,MAAM,CAACE,GAAI;AACvD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
package/lib/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","names":["default","Gallery","GalleryViewMode"],"sources":["../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Gallery } from './components/Gallery';\nexport { GalleryViewMode } from './types/gallery';\n"],"mappings":"AAAA;;AAEA,SAASA,OAAO,IAAIC,OAAO,QAAQ,sBAAsB;AACzD,SAASC,eAAe,QAAQ,iBAAiB","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"gallery.js","names":["GalleryViewMode"],"sources":["../../src/types/gallery.ts"],"sourcesContent":["export enum GalleryViewMode {\n SQUARE,\n GRID,\n}\n"],"mappings":"AAAA,WAAYA,eAAe,0BAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"file.js","names":["filterDuplicateFile","_ref","newFile","files","duplicates","filter","_ref2","file","name","size","length","generatePreviewUrl","_ref3","callback","reader","FileReader","onload","event","previewUrl","target","result","readAsDataURL","generateVideoThumbnail","_ref4","canvas","document","createElement","video","autoplay","muted","src","URL","createObjectURL","onloadeddata","ctx","getContext","width","videoWidth","height","videoHeight","drawImage","pause","toDataURL"],"sources":["../../src/utils/file.ts"],"sourcesContent":["import type { InternalFileItem } from '@chayns-components/core';\n\ninterface FilerDuplicateFileOptions {\n files: InternalFileItem[];\n newFile: File;\n}\n\nexport const filterDuplicateFile = ({ newFile, files }: FilerDuplicateFileOptions) => {\n const duplicates = files.filter(\n ({ file }) => file && file.name === newFile.name && file.size === newFile.size,\n );\n\n return duplicates.length > 0;\n};\n\ninterface GeneratePreviewUrlOptions {\n file: File;\n callback: (previewUrl: string) => void;\n}\n\nexport const generatePreviewUrl = ({ callback, file }: GeneratePreviewUrlOptions): void => {\n const reader = new FileReader();\n\n reader.onload = (event) => {\n const previewUrl = event.target?.result as string;\n\n callback(previewUrl);\n };\n\n reader.readAsDataURL(file);\n};\n\ninterface GenerateVideoThumbnailOptions {\n file: File;\n callback: (previewUrl: string) => void;\n}\n\nexport const generateVideoThumbnail = ({ file, callback }: GenerateVideoThumbnailOptions) => {\n const canvas = document.createElement('canvas');\n const video = document.createElement('video');\n\n // this is important\n video.autoplay = true;\n video.muted = true;\n video.src = URL.createObjectURL(file);\n\n video.onloadeddata = () => {\n const ctx = canvas.getContext('2d');\n\n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n\n ctx?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);\n video.pause();\n\n callback(canvas.toDataURL('image/png'));\n };\n};\n"],"mappings":"AAOA,OAAO,MAAMA,mBAAmB,GAAGC,IAAA,IAAmD;EAAA,IAAlD;IAAEC,OAAO;IAAEC;EAAiC,CAAC,GAAAF,IAAA;EAC7E,MAAMG,UAAU,GAAGD,KAAK,CAACE,MAAM,CAC3BC,KAAA;IAAA,IAAC;MAAEC;IAAK,CAAC,GAAAD,KAAA;IAAA,OAAKC,IAAI,IAAIA,IAAI,CAACC,IAAI,KAAKN,OAAO,CAACM,IAAI,IAAID,IAAI,CAACE,IAAI,KAAKP,OAAO,CAACO,IAAI;EAAA,CAClF,CAAC;EAED,OAAOL,UAAU,CAACM,MAAM,GAAG,CAAC;AAChC,CAAC;AAOD,OAAO,MAAMC,kBAAkB,GAAGC,KAAA,IAAyD;EAAA,IAAxD;IAAEC,QAAQ;IAAEN;EAAgC,CAAC,GAAAK,KAAA;EAC5E,MAAME,MAAM,GAAG,IAAIC,UAAU,CAAC,CAAC;EAE/BD,MAAM,CAACE,MAAM,GAAIC,KAAK,IAAK;IACvB,MAAMC,UAAU,GAAGD,KAAK,CAACE,MAAM,EAAEC,MAAgB;IAEjDP,QAAQ,CAACK,UAAU,CAAC;EACxB,CAAC;EAEDJ,MAAM,CAACO,aAAa,CAACd,IAAI,CAAC;AAC9B,CAAC;AAOD,OAAO,MAAMe,sBAAsB,GAAGC,KAAA,IAAuD;EAAA,IAAtD;IAAEhB,IAAI;IAAEM;EAAwC,CAAC,GAAAU,KAAA;EACpF,MAAMC,MAAM,GAAGC,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC;EAC/C,MAAMC,KAAK,GAAGF,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;;EAE7C;EACAC,KAAK,CAACC,QAAQ,GAAG,IAAI;EACrBD,KAAK,CAACE,KAAK,GAAG,IAAI;EAClBF,KAAK,CAACG,GAAG,GAAGC,GAAG,CAACC,eAAe,CAACzB,IAAI,CAAC;EAErCoB,KAAK,CAACM,YAAY,GAAG,MAAM;IACvB,MAAMC,GAAG,GAAGV,MAAM,CAACW,UAAU,CAAC,IAAI,CAAC;IAEnCX,MAAM,CAACY,KAAK,GAAGT,KAAK,CAACU,UAAU;IAC/Bb,MAAM,CAACc,MAAM,GAAGX,KAAK,CAACY,WAAW;IAEjCL,GAAG,EAAEM,SAAS,CAACb,KAAK,EAAE,CAAC,EAAE,CAAC,EAAEA,KAAK,CAACU,UAAU,EAAEV,KAAK,CAACY,WAAW,CAAC;IAChEZ,KAAK,CAACc,KAAK,CAAC,CAAC;IAEb5B,QAAQ,CAACW,MAAM,CAACkB,SAAS,CAAC,WAAW,CAAC,CAAC;EAC3C,CAAC;AACL,CAAC","ignoreList":[]}
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes