@chayns-components/gallery 5.0.0-beta.132 → 5.0.0-beta.1320

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 (102) hide show
  1. package/README.md +4 -15
  2. package/lib/cjs/components/Gallery.js +319 -0
  3. package/lib/cjs/components/Gallery.js.map +1 -0
  4. package/lib/cjs/components/Gallery.styles.js +93 -0
  5. package/lib/cjs/components/Gallery.styles.js.map +1 -0
  6. package/lib/cjs/components/add-file/AddFile.js +32 -0
  7. package/lib/cjs/components/add-file/AddFile.js.map +1 -0
  8. package/lib/cjs/components/add-file/AddFile.styles.js +23 -0
  9. package/lib/cjs/components/add-file/AddFile.styles.js.map +1 -0
  10. package/lib/cjs/components/gallery-item/GalleryItem.js +44 -0
  11. package/lib/cjs/components/gallery-item/GalleryItem.js.map +1 -0
  12. package/lib/cjs/components/gallery-item/GalleryItem.styles.js +51 -0
  13. package/lib/cjs/components/gallery-item/GalleryItem.styles.js.map +1 -0
  14. package/lib/cjs/components/gallery-item/media-item/MediaItem.js +52 -0
  15. package/lib/cjs/components/gallery-item/media-item/MediaItem.js.map +1 -0
  16. package/lib/cjs/components/gallery-item/media-item/MediaItem.styles.js +62 -0
  17. package/lib/cjs/components/gallery-item/media-item/MediaItem.styles.js.map +1 -0
  18. package/lib/cjs/components/gallery-item/preview-item/PreviewItem.js +45 -0
  19. package/lib/cjs/components/gallery-item/preview-item/PreviewItem.js.map +1 -0
  20. package/lib/cjs/components/gallery-item/preview-item/PreviewItem.styles.js +43 -0
  21. package/lib/cjs/components/gallery-item/preview-item/PreviewItem.styles.js.map +1 -0
  22. package/lib/cjs/index.js +21 -0
  23. package/lib/cjs/index.js.map +1 -0
  24. package/lib/cjs/types/gallery.js +12 -0
  25. package/lib/cjs/types/gallery.js.map +1 -0
  26. package/lib/cjs/utils/file.js +51 -0
  27. package/lib/cjs/utils/file.js.map +1 -0
  28. package/lib/esm/components/Gallery.js +305 -0
  29. package/lib/esm/components/Gallery.js.map +1 -0
  30. package/lib/esm/components/Gallery.styles.js +86 -0
  31. package/lib/esm/components/Gallery.styles.js.map +1 -0
  32. package/lib/esm/components/add-file/AddFile.js +25 -0
  33. package/lib/esm/components/add-file/AddFile.js.map +1 -0
  34. package/lib/esm/components/add-file/AddFile.styles.js +16 -0
  35. package/lib/esm/components/add-file/AddFile.styles.js.map +1 -0
  36. package/lib/esm/components/gallery-item/GalleryItem.js +36 -0
  37. package/lib/esm/components/gallery-item/GalleryItem.js.map +1 -0
  38. package/lib/esm/components/gallery-item/GalleryItem.styles.js +44 -0
  39. package/lib/esm/components/gallery-item/GalleryItem.styles.js.map +1 -0
  40. package/lib/esm/components/gallery-item/media-item/MediaItem.js +42 -0
  41. package/lib/esm/components/gallery-item/media-item/MediaItem.js.map +1 -0
  42. package/lib/esm/components/gallery-item/media-item/MediaItem.styles.js +55 -0
  43. package/lib/esm/components/gallery-item/media-item/MediaItem.styles.js.map +1 -0
  44. package/lib/esm/components/gallery-item/preview-item/PreviewItem.js +38 -0
  45. package/lib/esm/components/gallery-item/preview-item/PreviewItem.js.map +1 -0
  46. package/lib/esm/components/gallery-item/preview-item/PreviewItem.styles.js +36 -0
  47. package/lib/esm/components/gallery-item/preview-item/PreviewItem.styles.js.map +1 -0
  48. package/lib/esm/index.js +5 -0
  49. package/lib/esm/index.js.map +1 -0
  50. package/lib/esm/types/gallery.js +6 -0
  51. package/lib/esm/types/gallery.js.map +1 -0
  52. package/lib/esm/utils/file.js +41 -0
  53. package/lib/esm/utils/file.js.map +1 -0
  54. package/lib/types/components/Gallery.d.ts +47 -0
  55. package/lib/types/components/Gallery.styles.d.ts +10 -0
  56. package/lib/types/components/add-file/AddFile.d.ts +9 -0
  57. package/lib/types/components/add-file/AddFile.styles.d.ts +4 -0
  58. package/lib/{components → types/components}/gallery-item/GalleryItem.d.ts +10 -6
  59. package/lib/types/components/gallery-item/GalleryItem.styles.d.ts +5 -0
  60. package/lib/types/components/gallery-item/media-item/MediaItem.d.ts +22 -0
  61. package/lib/types/components/gallery-item/media-item/MediaItem.styles.d.ts +16 -0
  62. package/lib/types/components/gallery-item/preview-item/PreviewItem.d.ts +14 -0
  63. package/lib/types/components/gallery-item/preview-item/PreviewItem.styles.d.ts +10 -0
  64. package/lib/types/index.d.ts +2 -0
  65. package/lib/types/types/gallery.d.ts +4 -0
  66. package/lib/types/utils/file.d.ts +17 -0
  67. package/package.json +49 -29
  68. package/lib/api/image/post.d.ts +0 -16
  69. package/lib/api/image/post.js +0 -34
  70. package/lib/api/image/post.js.map +0 -1
  71. package/lib/api/video/post.d.ts +0 -16
  72. package/lib/api/video/post.js +0 -30
  73. package/lib/api/video/post.js.map +0 -1
  74. package/lib/components/Gallery.d.ts +0 -34
  75. package/lib/components/Gallery.js +0 -163
  76. package/lib/components/Gallery.js.map +0 -1
  77. package/lib/components/Gallery.styles.d.ts +0 -6
  78. package/lib/components/Gallery.styles.js +0 -40
  79. package/lib/components/Gallery.styles.js.map +0 -1
  80. package/lib/components/add-file/AddFile.d.ts +0 -26
  81. package/lib/components/add-file/AddFile.js +0 -83
  82. package/lib/components/add-file/AddFile.js.map +0 -1
  83. package/lib/components/add-file/AddFile.styles.d.ts +0 -4
  84. package/lib/components/add-file/AddFile.styles.js +0 -31
  85. package/lib/components/add-file/AddFile.styles.js.map +0 -1
  86. package/lib/components/gallery-item/GalleryItem.js +0 -60
  87. package/lib/components/gallery-item/GalleryItem.js.map +0 -1
  88. package/lib/components/gallery-item/GalleryItem.styles.d.ts +0 -17
  89. package/lib/components/gallery-item/GalleryItem.styles.js +0 -107
  90. package/lib/components/gallery-item/GalleryItem.styles.js.map +0 -1
  91. package/lib/index.d.ts +0 -4
  92. package/lib/index.js +0 -40
  93. package/lib/index.js.map +0 -1
  94. package/lib/types/file.d.ts +0 -20
  95. package/lib/types/file.js +0 -6
  96. package/lib/types/file.js.map +0 -1
  97. package/lib/utils/file.d.ts +0 -17
  98. package/lib/utils/file.js +0 -92
  99. package/lib/utils/file.js.map +0 -1
  100. package/lib/utils/upload.d.ts +0 -8
  101. package/lib/utils/upload.js +0 -56
  102. package/lib/utils/upload.js.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"post.js","names":["_file","require","postImage","_ref","accessToken","file","personId","body","getFileAsArrayBuffer","response","fetch","headers","Accept","Authorization","method","ok","json","Error","status","exports"],"sources":["../../../src/api/image/post.ts"],"sourcesContent":["import type { Meta } from '../../types/file';\nimport { getFileAsArrayBuffer } from '../../utils/file';\n\nexport interface PostImageResult {\n key: string;\n base: string;\n meta?: Meta;\n}\n\ninterface PostImageOptions {\n accessToken: string;\n file: File;\n personId: string;\n}\n\n/**\n * Uploads an image to the tsimg cloud service\n */\nexport const postImage = async ({\n accessToken,\n file,\n personId,\n}: PostImageOptions): Promise<PostImageResult> => {\n const body = await getFileAsArrayBuffer(file);\n\n const response = await fetch('https://api.tsimg.cloud/image', {\n body,\n headers: {\n Accept: 'application/json',\n Authorization: `bearer ${accessToken}`,\n 'Content-Type': 'image/*',\n 'X-Person-Id': personId,\n },\n method: 'POST',\n });\n\n if (response.ok) {\n return (await response.json()) as PostImageResult;\n }\n\n throw Error(`Failed to POST image (status code: ${response.status}).`);\n};\n"],"mappings":";;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AAcA;AACA;AACA;AACO,MAAMC,SAAS,GAAG,MAAAC,IAAA,IAIyB;EAAA,IAJlB;IAC5BC,WAAW;IACXC,IAAI;IACJC;EACc,CAAC,GAAAH,IAAA;EACf,MAAMI,IAAI,GAAG,MAAM,IAAAC,0BAAoB,EAACH,IAAI,CAAC;EAE7C,MAAMI,QAAQ,GAAG,MAAMC,KAAK,CAAC,+BAA+B,EAAE;IAC1DH,IAAI;IACJI,OAAO,EAAE;MACLC,MAAM,EAAE,kBAAkB;MAC1BC,aAAa,EAAG,UAAST,WAAY,EAAC;MACtC,cAAc,EAAE,SAAS;MACzB,aAAa,EAAEE;IACnB,CAAC;IACDQ,MAAM,EAAE;EACZ,CAAC,CAAC;EAEF,IAAIL,QAAQ,CAACM,EAAE,EAAE;IACb,OAAQ,MAAMN,QAAQ,CAACO,IAAI,EAAE;EACjC;EAEA,MAAMC,KAAK,CAAE,sCAAqCR,QAAQ,CAACS,MAAO,IAAG,CAAC;AAC1E,CAAC;AAACC,OAAA,CAAAjB,SAAA,GAAAA,SAAA"}
@@ -1,16 +0,0 @@
1
- export interface PostVideoResult {
2
- id: number;
3
- originalVideoQuality: string;
4
- thumbnailUrl: string;
5
- url: string;
6
- urlMP4: string;
7
- }
8
- interface PostVideoOptions {
9
- accessToken: string;
10
- file: File | Blob;
11
- }
12
- /**
13
- * Uploads a video to the streaming service
14
- */
15
- export declare const postVideo: ({ accessToken, file, }: PostVideoOptions) => Promise<PostVideoResult>;
16
- export {};
@@ -1,30 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.postVideo = void 0;
7
- /**
8
- * Uploads a video to the streaming service
9
- */
10
- const postVideo = async _ref => {
11
- let {
12
- accessToken,
13
- file
14
- } = _ref;
15
- const formData = new FormData();
16
- formData.append('files', file);
17
- const response = await fetch('https://streamingservice.chayns.space/video?disableIntercom=true', {
18
- body: formData,
19
- headers: {
20
- Authorization: `Bearer ${accessToken}`
21
- },
22
- method: 'POST'
23
- });
24
- if (response.ok) {
25
- return await response.json();
26
- }
27
- throw Error(`Failed to POST video (status code: ${response.status}).`);
28
- };
29
- exports.postVideo = postVideo;
30
- //# sourceMappingURL=post.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"post.js","names":["postVideo","_ref","accessToken","file","formData","FormData","append","response","fetch","body","headers","Authorization","method","ok","json","Error","status","exports"],"sources":["../../../src/api/video/post.ts"],"sourcesContent":["export interface PostVideoResult {\n id: number;\n originalVideoQuality: string;\n thumbnailUrl: string;\n url: string;\n urlMP4: string;\n}\n\ninterface PostVideoOptions {\n accessToken: string;\n file: File | Blob;\n}\n\n/**\n * Uploads a video to the streaming service\n */\nexport const postVideo = async ({\n accessToken,\n file,\n}: PostVideoOptions): Promise<PostVideoResult> => {\n const formData = new FormData();\n\n formData.append('files', file);\n const response = await fetch(\n 'https://streamingservice.chayns.space/video?disableIntercom=true',\n {\n body: formData,\n headers: {\n Authorization: `Bearer ${accessToken}`,\n },\n method: 'POST',\n }\n );\n\n if (response.ok) {\n return (await response.json()) as PostVideoResult;\n }\n\n throw Error(`Failed to POST video (status code: ${response.status}).`);\n};\n"],"mappings":";;;;;;AAaA;AACA;AACA;AACO,MAAMA,SAAS,GAAG,MAAAC,IAAA,IAGyB;EAAA,IAHlB;IAC5BC,WAAW;IACXC;EACc,CAAC,GAAAF,IAAA;EACf,MAAMG,QAAQ,GAAG,IAAIC,QAAQ,EAAE;EAE/BD,QAAQ,CAACE,MAAM,CAAC,OAAO,EAAEH,IAAI,CAAC;EAC9B,MAAMI,QAAQ,GAAG,MAAMC,KAAK,CACxB,kEAAkE,EAClE;IACIC,IAAI,EAAEL,QAAQ;IACdM,OAAO,EAAE;MACLC,aAAa,EAAG,UAAST,WAAY;IACzC,CAAC;IACDU,MAAM,EAAE;EACZ,CAAC,CACJ;EAED,IAAIL,QAAQ,CAACM,EAAE,EAAE;IACb,OAAQ,MAAMN,QAAQ,CAACO,IAAI,EAAE;EACjC;EAEA,MAAMC,KAAK,CAAE,sCAAqCR,QAAQ,CAACS,MAAO,IAAG,CAAC;AAC1E,CAAC;AAACC,OAAA,CAAAjB,SAAA,GAAAA,SAAA"}
@@ -1,34 +0,0 @@
1
- import { FC } from 'react';
2
- import type { ExternalFile, UploadedFile } from '../types/file';
3
- export type GalleryProps = {
4
- /**
5
- * AccessToken of the user
6
- */
7
- accessToken: string;
8
- /**
9
- * Whether drag and drop is allowed or not
10
- */
11
- allowDragAndDrop?: boolean;
12
- /**
13
- * Whether images and videos can be edited
14
- */
15
- isEditMode?: boolean;
16
- /**
17
- * Images and videos which should be displayed
18
- */
19
- files?: ExternalFile[];
20
- /**
21
- * Function to be executed when files are added
22
- */
23
- onAdd?: (files: UploadedFile[]) => void;
24
- /**
25
- * Function to be executed when a file is removed
26
- */
27
- onRemove?: (file: UploadedFile) => void;
28
- /**
29
- * PersonId of the user
30
- */
31
- personId: string;
32
- };
33
- declare const Gallery: FC<GalleryProps>;
34
- export default Gallery;
@@ -1,163 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _react = _interopRequireWildcard(require("react"));
8
- var _file = require("../utils/file");
9
- var _upload = require("../utils/upload");
10
- var _AddFile = _interopRequireDefault(require("./add-file/AddFile"));
11
- var _GalleryItem = _interopRequireDefault(require("./gallery-item/GalleryItem"));
12
- var _Gallery = require("./Gallery.styles");
13
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
16
- const Gallery = _ref => {
17
- let {
18
- accessToken,
19
- allowDragAndDrop = false,
20
- isEditMode = false,
21
- files,
22
- onAdd,
23
- onRemove,
24
- personId
25
- } = _ref;
26
- const [uploadedFiles, setUploadedFiles] = (0, _react.useState)([]);
27
- const [externalFiles, setExternalFiles] = (0, _react.useState)([]);
28
- const combinedFiles = (0, _react.useMemo)(() => [...externalFiles, ...uploadedFiles], [externalFiles, uploadedFiles]);
29
-
30
- /**
31
- * Merge external files with uploaded files
32
- */
33
- (0, _react.useEffect)(() => {
34
- if (!files || !Array.isArray(files)) {
35
- return;
36
- }
37
- const newExternalFiles = files.map(file => {
38
- if ('thumbnailUrl' in file) {
39
- return {
40
- id: file.id,
41
- url: file.url,
42
- thumbnailUrl: file.url
43
- };
44
- }
45
- return {
46
- id: file.id,
47
- url: file.url
48
- };
49
- });
50
- setExternalFiles(newExternalFiles);
51
- }, [files]);
52
-
53
- /**
54
- * This function deletes a selected file from the file list
55
- */
56
- const handleDeleteFile = (0, _react.useCallback)(url => {
57
- let fileToDelete;
58
- const externalFileToDelete = externalFiles.find(file => file.url === url);
59
- if (externalFileToDelete && typeof onRemove === 'function') {
60
- onRemove(externalFileToDelete);
61
- return;
62
- }
63
- const filteredFiles = uploadedFiles.filter(file => {
64
- const fileUrl = file.url;
65
- if (fileUrl === url) {
66
- fileToDelete = file;
67
- }
68
- return fileUrl !== url;
69
- });
70
- setUploadedFiles(filteredFiles);
71
- if (!fileToDelete || !onRemove) {
72
- return;
73
- }
74
- onRemove(fileToDelete);
75
- }, [externalFiles, onRemove, uploadedFiles]);
76
-
77
- /**
78
- * This function handles the drag and drop
79
- */
80
- const handleDrop = (0, _react.useCallback)(async e => {
81
- if (!allowDragAndDrop) {
82
- return;
83
- }
84
- e.preventDefault();
85
- const draggedFiles = Array.from(e.dataTransfer.files);
86
- const updatedFiles = await (0, _upload.uploadFiles)({
87
- accessToken,
88
- filesToUpload: draggedFiles,
89
- personId
90
- });
91
- const {
92
- newUniqueFiles
93
- } = (0, _file.filterDuplicateFiles)({
94
- oldFiles: uploadedFiles,
95
- newFiles: updatedFiles
96
- });
97
- setUploadedFiles(prevState => [...prevState, ...newUniqueFiles]);
98
- if (!onAdd) {
99
- return;
100
- }
101
- onAdd(newUniqueFiles);
102
- }, [accessToken, allowDragAndDrop, onAdd, personId, uploadedFiles]);
103
-
104
- /**
105
- * Returns the ratio of the single file
106
- */
107
- const ratio = (0, _react.useMemo)(() => {
108
- var _combinedFiles$0$rati, _combinedFiles$;
109
- return (
110
- // If the length is 1, the ratio or at least 1 is returned
111
- 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
112
- );
113
- }, [combinedFiles]);
114
-
115
- /**
116
- * Returns the number of columns
117
- */
118
- const columns = (0, _react.useMemo)(() => {
119
- const combinedFilesLength = combinedFiles.length;
120
- if (combinedFilesLength <= 1) {
121
- return '';
122
- }
123
- return `repeat(${combinedFilesLength === 3 ? 3 : 2}, 1fr)`;
124
- }, [combinedFiles]);
125
- const galleryContent = (0, _react.useMemo)(() => {
126
- const combinedFilesLength = combinedFiles.length;
127
- if (isEditMode) {
128
- const items = combinedFiles.map(file => /*#__PURE__*/_react.default.createElement(_GalleryItem.default, {
129
- uploadedFile: file,
130
- isEditMode: true,
131
- ratio: ratio,
132
- handleDeleteFile: handleDeleteFile
133
- }));
134
- items.push( /*#__PURE__*/_react.default.createElement(_AddFile.default, {
135
- setUploadedFiles: setUploadedFiles,
136
- uploadedFiles: uploadedFiles,
137
- onAdd: onAdd,
138
- personId: personId,
139
- accessToken: accessToken
140
- }));
141
- return items;
142
- }
143
- const shortedFiles = combinedFiles.slice(0, 4);
144
- return shortedFiles.map((file, index) => /*#__PURE__*/_react.default.createElement(_GalleryItem.default, {
145
- uploadedFile: file,
146
- isEditMode: false,
147
- ratio: ratio,
148
- handleDeleteFile: handleDeleteFile,
149
- remainingItemsLength: combinedFilesLength > 4 && index === 3 ? combinedFilesLength : undefined
150
- }));
151
- }, [combinedFiles, isEditMode, uploadedFiles, onAdd, personId, accessToken, ratio, handleDeleteFile]);
152
- return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Gallery.StyledGallery, null, isEditMode ? /*#__PURE__*/_react.default.createElement(_Gallery.StyledGalleryEditModeWrapper, {
153
- onDragOver: e => e.preventDefault(),
154
- onDrop: e => void handleDrop(e)
155
- }, galleryContent) : /*#__PURE__*/_react.default.createElement(_Gallery.StyledGalleryItemWrapper, {
156
- columns: columns,
157
- uploadedFileLength: combinedFiles.length
158
- }, galleryContent)), [isEditMode, galleryContent, columns, combinedFiles.length, handleDrop]);
159
- };
160
- Gallery.displayName = 'Gallery';
161
- var _default = Gallery;
162
- exports.default = _default;
163
- //# sourceMappingURL=Gallery.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Gallery.js","names":["_react","_interopRequireWildcard","require","_file","_upload","_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/file';\nimport { filterDuplicateFiles } from '../utils/file';\nimport { uploadFiles } from '../utils/upload';\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":"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"}
@@ -1,6 +0,0 @@
1
- export declare const StyledGallery: import("styled-components").StyledComponent<"div", any, {}, never>;
2
- export declare const StyledGalleryItemWrapper: import("styled-components").StyledComponent<"div", any, {
3
- columns: string;
4
- uploadedFileLength: number;
5
- }, never>;
6
- export declare const StyledGalleryEditModeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -1,40 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.StyledGalleryItemWrapper = exports.StyledGalleryEditModeWrapper = exports.StyledGallery = void 0;
7
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
8
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
9
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
10
- const StyledGallery = _styledComponents.default.div``;
11
- exports.StyledGallery = StyledGallery;
12
- const StyledGalleryItemWrapper = _styledComponents.default.div`
13
- ${_ref => {
14
- let {
15
- columns,
16
- uploadedFileLength
17
- } = _ref;
18
- return uploadedFileLength > 1 && (0, _styledComponents.css)`
19
- display: grid;
20
- grid-template-columns: ${columns};
21
- row-gap: 5px;
22
- column-gap: 5px;
23
- `;
24
- }}
25
- `;
26
- exports.StyledGalleryItemWrapper = StyledGalleryItemWrapper;
27
- const StyledGalleryEditModeWrapper = _styledComponents.default.div`
28
- display: flex;
29
- flex-direction: row;
30
- flex-wrap: wrap;
31
- row-gap: 10px;
32
- column-gap: 10px;
33
- padding: 15px;
34
-
35
- & > * {
36
- flex-basis: calc(25% - 7.5px);
37
- }
38
- `;
39
- exports.StyledGalleryEditModeWrapper = StyledGalleryEditModeWrapper;
40
- //# sourceMappingURL=Gallery.styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Gallery.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledGallery","styled","div","exports","StyledGalleryItemWrapper","_ref","columns","uploadedFileLength","css","StyledGalleryEditModeWrapper"],"sources":["../../src/components/Gallery.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nexport const StyledGallery = styled.div``;\n\nexport const StyledGalleryItemWrapper = styled.div<{ columns: string; uploadedFileLength: number }>`\n ${({ columns, uploadedFileLength }) =>\n uploadedFileLength > 1 &&\n css`\n display: grid;\n grid-template-columns: ${columns};\n row-gap: 5px;\n column-gap: 5px;\n `}\n`;\n\nexport const StyledGalleryEditModeWrapper = styled.div`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n row-gap: 10px;\n column-gap: 10px;\n padding: 15px;\n\n & > * {\n flex-basis: calc(25% - 7.5px);\n }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,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,SAAAH,wBAAAO,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,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,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAEzC,MAAMW,aAAa,GAAGC,yBAAM,CAACC,GAAI,EAAC;AAACC,OAAA,CAAAH,aAAA,GAAAA,aAAA;AAEnC,MAAMI,wBAAwB,GAAGH,yBAAM,CAACC,GAAqD;AACpG,MAAMG,IAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC;EAAmB,CAAC,GAAAF,IAAA;EAAA,OAC9BE,kBAAkB,GAAG,CAAC,IACtB,IAAAC,qBAAG,CAAC;AACZ;AACA,qCAAqCF,OAAQ;AAC7C;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAACH,OAAA,CAAAC,wBAAA,GAAAA,wBAAA;AAEK,MAAMK,4BAA4B,GAAGR,yBAAM,CAACC,GAAI;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAM,4BAAA,GAAAA,4BAAA"}
@@ -1,26 +0,0 @@
1
- import { Dispatch, FC, SetStateAction } from 'react';
2
- import type { UploadedFile } from '../../types/file';
3
- export type AddFileProps = {
4
- /**
5
- * Function to add files to the uploaded files
6
- */
7
- setUploadedFiles: Dispatch<SetStateAction<UploadedFile[]>>;
8
- /**
9
- * Images and videos which should be displayed
10
- */
11
- uploadedFiles: UploadedFile[];
12
- /**
13
- * Function to be executed when files are added
14
- */
15
- onAdd?: (files: UploadedFile[]) => void;
16
- /**
17
- * PersonId of the user
18
- */
19
- personId: string;
20
- /**
21
- * AccessToken of the user
22
- */
23
- accessToken: string;
24
- };
25
- declare const AddFile: FC<AddFileProps>;
26
- export default AddFile;
@@ -1,83 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _core = require("@chayns-components/core");
8
- var _react = _interopRequireWildcard(require("react"));
9
- var _file = require("../../utils/file");
10
- var _upload = require("../../utils/upload");
11
- var _AddFile = require("./AddFile.styles");
12
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
13
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
14
- const AddFile = _ref => {
15
- let {
16
- setUploadedFiles,
17
- uploadedFiles,
18
- onAdd,
19
- accessToken,
20
- personId
21
- } = _ref;
22
- /**
23
- * Open a dialog to select files
24
- */
25
- const openSelectDialog = (0, _react.useCallback)(async () => {
26
- const selectedFiles = await (0, _file.selectFiles)({
27
- multiple: true,
28
- type: 'image/*, video/*'
29
- });
30
- if (!selectedFiles || selectedFiles.length <= 0) {
31
- return;
32
- }
33
- const fileArray = (0, _file.convertFileListToArray)(selectedFiles);
34
-
35
- // Filters files to use only under 64MB
36
- const filteredFileArray = fileArray.filter(_ref2 => {
37
- let {
38
- size,
39
- type
40
- } = _ref2;
41
- const sizeInMB = size / 1024 / 1024;
42
- if (type.includes('video/') && sizeInMB > 500) {
43
- return false;
44
- }
45
- return !(type.includes('image/') && sizeInMB > 64);
46
- });
47
- if (fileArray.length !== filteredFileArray.length) {
48
- // ToDo show dialog that some files are to big
49
- }
50
- if (filteredFileArray.length === 0) {
51
- // ToDo show dialog that all files are to big
52
-
53
- return;
54
- }
55
- const updatedFiles = await (0, _upload.uploadFiles)({
56
- filesToUpload: filteredFileArray,
57
- personId,
58
- accessToken
59
- });
60
- const {
61
- newUniqueFiles
62
- } = (0, _file.filterDuplicateFiles)({
63
- oldFiles: uploadedFiles,
64
- newFiles: updatedFiles
65
- });
66
- if (onAdd) {
67
- onAdd(newUniqueFiles);
68
- }
69
- setUploadedFiles(prevState => [...prevState, ...newUniqueFiles]);
70
- }, [accessToken, onAdd, personId, setUploadedFiles, uploadedFiles]);
71
- return /*#__PURE__*/_react.default.createElement(_AddFile.StyledAddFile, {
72
- key: "addButton"
73
- }, /*#__PURE__*/_react.default.createElement(_AddFile.StyledAddFIleIconWrapper, {
74
- onClick: () => void openSelectDialog()
75
- }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
76
- size: 40,
77
- icons: ['fa fa-plus']
78
- })));
79
- };
80
- AddFile.displayName = 'AddFile';
81
- var _default = AddFile;
82
- exports.default = _default;
83
- //# sourceMappingURL=AddFile.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AddFile.js","names":["_core","require","_react","_interopRequireWildcard","_file","_upload","_AddFile","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","AddFile","_ref","setUploadedFiles","uploadedFiles","onAdd","accessToken","personId","openSelectDialog","useCallback","selectedFiles","selectFiles","multiple","type","length","fileArray","convertFileListToArray","filteredFileArray","filter","_ref2","size","sizeInMB","includes","updatedFiles","uploadFiles","filesToUpload","newUniqueFiles","filterDuplicateFiles","oldFiles","newFiles","prevState","createElement","StyledAddFile","StyledAddFIleIconWrapper","onClick","Icon","icons","displayName","_default","exports"],"sources":["../../../src/components/add-file/AddFile.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport React, { Dispatch, FC, SetStateAction, useCallback } from 'react';\nimport type { UploadedFile } from '../../types/file';\nimport { convertFileListToArray, filterDuplicateFiles, selectFiles } from '../../utils/file';\nimport { uploadFiles } from '../../utils/upload';\nimport { StyledAddFile, StyledAddFIleIconWrapper } from './AddFile.styles';\n\nexport type AddFileProps = {\n /**\n * Function to add files to the uploaded files\n */\n setUploadedFiles: Dispatch<SetStateAction<UploadedFile[]>>;\n /**\n * Images and videos which should be displayed\n */\n uploadedFiles: UploadedFile[];\n /**\n * Function to be executed when files are added\n */\n onAdd?: (files: UploadedFile[]) => void;\n /**\n * PersonId of the user\n */\n personId: string;\n /**\n * AccessToken of the user\n */\n accessToken: string;\n};\n\nconst AddFile: FC<AddFileProps> = ({\n setUploadedFiles,\n uploadedFiles,\n onAdd,\n accessToken,\n personId,\n}) => {\n /**\n * Open a dialog to select files\n */\n const openSelectDialog = useCallback(async () => {\n const selectedFiles = await selectFiles({\n multiple: true,\n type: 'image/*, video/*',\n });\n\n if (!selectedFiles || selectedFiles.length <= 0) {\n return;\n }\n\n const fileArray = convertFileListToArray(selectedFiles);\n\n // Filters files to use only under 64MB\n const filteredFileArray = fileArray.filter(({ size, type }) => {\n const sizeInMB = size / 1024 / 1024;\n\n if (type.includes('video/') && sizeInMB > 500) {\n return false;\n }\n\n return !(type.includes('image/') && sizeInMB > 64);\n });\n\n if (fileArray.length !== filteredFileArray.length) {\n // ToDo show dialog that some files are to big\n }\n\n if (filteredFileArray.length === 0) {\n // ToDo show dialog that all files are to big\n\n return;\n }\n\n const updatedFiles = await uploadFiles({\n filesToUpload: filteredFileArray,\n personId,\n accessToken,\n });\n\n const { newUniqueFiles } = filterDuplicateFiles({\n oldFiles: uploadedFiles,\n newFiles: updatedFiles,\n });\n\n if (onAdd) {\n onAdd(newUniqueFiles);\n }\n\n setUploadedFiles((prevState) => [...prevState, ...newUniqueFiles]);\n }, [accessToken, onAdd, personId, setUploadedFiles, uploadedFiles]);\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":"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"}
@@ -1,4 +0,0 @@
1
- export declare const StyledAddFile: import("styled-components").StyledComponent<"div", any, {}, never>;
2
- export declare const StyledAddFIleIconWrapper: import("styled-components").StyledComponent<"button", any, {
3
- theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
4
- }, never>;
@@ -1,31 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.StyledAddFile = exports.StyledAddFIleIconWrapper = void 0;
7
- var _styledComponents = _interopRequireDefault(require("styled-components"));
8
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
9
- const StyledAddFile = _styledComponents.default.div`
10
- position: relative;
11
- `;
12
- exports.StyledAddFile = StyledAddFile;
13
- const StyledAddFIleIconWrapper = _styledComponents.default.button`
14
- background-color: ${_ref => {
15
- let {
16
- theme
17
- } = _ref;
18
- return theme['101'];
19
- }};
20
- box-shadow: 0 0 0 1px
21
- rgba(${_ref2 => {
22
- let {
23
- theme
24
- } = _ref2;
25
- return theme['009-rgb'];
26
- }}, 0.08) inset;
27
- width: 100%;
28
- aspect-ratio: 1 / 1;
29
- `;
30
- exports.StyledAddFIleIconWrapper = StyledAddFIleIconWrapper;
31
- //# sourceMappingURL=AddFile.styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AddFile.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledAddFile","styled","div","exports","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,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,aAAa,GAAGC,yBAAM,CAACC,GAAI;AACxC;AACA,CAAC;AAACC,OAAA,CAAAH,aAAA,GAAAA,aAAA;AAIK,MAAMI,wBAAwB,GAAGH,yBAAM,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;AAACJ,OAAA,CAAAC,wBAAA,GAAAA,wBAAA"}
@@ -1,60 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _core = require("@chayns-components/core");
8
- var _react = _interopRequireWildcard(require("react"));
9
- var _GalleryItem = require("./GalleryItem.styles");
10
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
11
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
12
- const GalleryItem = _ref => {
13
- let {
14
- uploadedFile,
15
- handleDeleteFile,
16
- isEditMode,
17
- ratio,
18
- remainingItemsLength
19
- } = _ref;
20
- /**
21
- * This function opens a selected file
22
- */
23
- const openSelectedFile = (0, _react.useCallback)(file => {
24
- if ('thumbnailUrl' in file) {
25
- // @ts-expect-error: Type is correct here
26
- // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
27
- void chayns.openVideo(file.url);
28
- return;
29
- }
30
-
31
- // @ts-expect-error: Type is correct here
32
- // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
33
- void chayns.openImage([file.url], 0);
34
- }, []);
35
- return /*#__PURE__*/_react.default.createElement(_GalleryItem.StyledGalleryItem, null, isEditMode && /*#__PURE__*/_react.default.createElement(_GalleryItem.StyledGalleryItemDeleteButton, {
36
- onClick: () => handleDeleteFile(uploadedFile.url)
37
- }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
38
- size: 20,
39
- icons: ['ts-wrong']
40
- })), 'thumbnailUrl' in uploadedFile ? /*#__PURE__*/_react.default.createElement(_GalleryItem.StyledGalleryItemVideoWrapper, {
41
- onClick: () => openSelectedFile(uploadedFile)
42
- }, /*#__PURE__*/_react.default.createElement(_GalleryItem.StyledGalleryItemPlayIcon, null, /*#__PURE__*/_react.default.createElement(_core.Icon, {
43
- size: 30,
44
- icons: ['fa fa-play']
45
- })), /*#__PURE__*/_react.default.createElement(_GalleryItem.StyledGalleryItemVideo, {
46
- ratio: ratio
47
- }, /*#__PURE__*/_react.default.createElement("source", {
48
- src: uploadedFile.url,
49
- type: "video/mp4"
50
- }))) : /*#__PURE__*/_react.default.createElement(_GalleryItem.StyledGalleryItemImage, {
51
- ratio: ratio,
52
- onClick: () => openSelectedFile(uploadedFile),
53
- draggable: false,
54
- src: uploadedFile.url
55
- }), remainingItemsLength && /*#__PURE__*/_react.default.createElement(_GalleryItem.StyledGalleryItemMoreItemsIndicator, null, /*#__PURE__*/_react.default.createElement("p", null, `+ ${remainingItemsLength - 3}`)));
56
- };
57
- GalleryItem.displayName = 'GalleryItem';
58
- var _default = GalleryItem;
59
- exports.default = _default;
60
- //# sourceMappingURL=GalleryItem.js.map
@@ -1 +0,0 @@
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","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/file';\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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"}
@@ -1,17 +0,0 @@
1
- export declare const StyledGalleryItem: import("styled-components").StyledComponent<"div", any, {}, never>;
2
- export declare const StyledGalleryItemDeleteButton: import("styled-components").StyledComponent<"button", any, {
3
- theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
4
- }, never>;
5
- export declare const StyledGalleryItemVideoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
6
- export declare const StyledGalleryItemImage: import("styled-components").StyledComponent<"img", any, {
7
- ratio: number;
8
- } & {
9
- theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
10
- }, never>;
11
- export declare const StyledGalleryItemVideo: import("styled-components").StyledComponent<"video", any, {
12
- ratio: number;
13
- } & {
14
- theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
15
- }, never>;
16
- export declare const StyledGalleryItemPlayIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
17
- export declare const StyledGalleryItemMoreItemsIndicator: import("styled-components").StyledComponent<"div", any, {}, never>;