@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.
- package/README.md +4 -15
- package/lib/cjs/components/Gallery.js +319 -0
- package/lib/cjs/components/Gallery.js.map +1 -0
- package/lib/cjs/components/Gallery.styles.js +93 -0
- package/lib/cjs/components/Gallery.styles.js.map +1 -0
- package/lib/cjs/components/add-file/AddFile.js +32 -0
- package/lib/cjs/components/add-file/AddFile.js.map +1 -0
- package/lib/cjs/components/add-file/AddFile.styles.js +23 -0
- package/lib/cjs/components/add-file/AddFile.styles.js.map +1 -0
- package/lib/cjs/components/gallery-item/GalleryItem.js +44 -0
- package/lib/cjs/components/gallery-item/GalleryItem.js.map +1 -0
- package/lib/cjs/components/gallery-item/GalleryItem.styles.js +51 -0
- package/lib/cjs/components/gallery-item/GalleryItem.styles.js.map +1 -0
- package/lib/cjs/components/gallery-item/media-item/MediaItem.js +52 -0
- package/lib/cjs/components/gallery-item/media-item/MediaItem.js.map +1 -0
- package/lib/cjs/components/gallery-item/media-item/MediaItem.styles.js +62 -0
- package/lib/cjs/components/gallery-item/media-item/MediaItem.styles.js.map +1 -0
- package/lib/cjs/components/gallery-item/preview-item/PreviewItem.js +45 -0
- package/lib/cjs/components/gallery-item/preview-item/PreviewItem.js.map +1 -0
- package/lib/cjs/components/gallery-item/preview-item/PreviewItem.styles.js +43 -0
- package/lib/cjs/components/gallery-item/preview-item/PreviewItem.styles.js.map +1 -0
- package/lib/cjs/index.js +21 -0
- package/lib/cjs/index.js.map +1 -0
- package/lib/cjs/types/gallery.js +12 -0
- package/lib/cjs/types/gallery.js.map +1 -0
- package/lib/cjs/utils/file.js +51 -0
- package/lib/cjs/utils/file.js.map +1 -0
- package/lib/esm/components/Gallery.js +305 -0
- package/lib/esm/components/Gallery.js.map +1 -0
- package/lib/esm/components/Gallery.styles.js +86 -0
- package/lib/esm/components/Gallery.styles.js.map +1 -0
- package/lib/esm/components/add-file/AddFile.js +25 -0
- package/lib/esm/components/add-file/AddFile.js.map +1 -0
- package/lib/esm/components/add-file/AddFile.styles.js +16 -0
- package/lib/esm/components/add-file/AddFile.styles.js.map +1 -0
- package/lib/esm/components/gallery-item/GalleryItem.js +36 -0
- package/lib/esm/components/gallery-item/GalleryItem.js.map +1 -0
- package/lib/esm/components/gallery-item/GalleryItem.styles.js +44 -0
- package/lib/esm/components/gallery-item/GalleryItem.styles.js.map +1 -0
- package/lib/esm/components/gallery-item/media-item/MediaItem.js +42 -0
- package/lib/esm/components/gallery-item/media-item/MediaItem.js.map +1 -0
- package/lib/esm/components/gallery-item/media-item/MediaItem.styles.js +55 -0
- package/lib/esm/components/gallery-item/media-item/MediaItem.styles.js.map +1 -0
- package/lib/esm/components/gallery-item/preview-item/PreviewItem.js +38 -0
- package/lib/esm/components/gallery-item/preview-item/PreviewItem.js.map +1 -0
- package/lib/esm/components/gallery-item/preview-item/PreviewItem.styles.js +36 -0
- package/lib/esm/components/gallery-item/preview-item/PreviewItem.styles.js.map +1 -0
- package/lib/esm/index.js +5 -0
- package/lib/esm/index.js.map +1 -0
- package/lib/esm/types/gallery.js +6 -0
- package/lib/esm/types/gallery.js.map +1 -0
- package/lib/esm/utils/file.js +41 -0
- package/lib/esm/utils/file.js.map +1 -0
- package/lib/types/components/Gallery.d.ts +47 -0
- package/lib/types/components/Gallery.styles.d.ts +10 -0
- package/lib/types/components/add-file/AddFile.d.ts +9 -0
- package/lib/types/components/add-file/AddFile.styles.d.ts +4 -0
- package/lib/{components → types/components}/gallery-item/GalleryItem.d.ts +10 -6
- package/lib/types/components/gallery-item/GalleryItem.styles.d.ts +5 -0
- package/lib/types/components/gallery-item/media-item/MediaItem.d.ts +22 -0
- package/lib/types/components/gallery-item/media-item/MediaItem.styles.d.ts +16 -0
- package/lib/types/components/gallery-item/preview-item/PreviewItem.d.ts +14 -0
- package/lib/types/components/gallery-item/preview-item/PreviewItem.styles.d.ts +10 -0
- package/lib/types/index.d.ts +2 -0
- package/lib/types/types/gallery.d.ts +4 -0
- package/lib/types/utils/file.d.ts +17 -0
- package/package.json +49 -29
- package/lib/api/image/post.d.ts +0 -16
- package/lib/api/image/post.js +0 -34
- package/lib/api/image/post.js.map +0 -1
- package/lib/api/video/post.d.ts +0 -16
- package/lib/api/video/post.js +0 -30
- package/lib/api/video/post.js.map +0 -1
- package/lib/components/Gallery.d.ts +0 -34
- package/lib/components/Gallery.js +0 -163
- package/lib/components/Gallery.js.map +0 -1
- package/lib/components/Gallery.styles.d.ts +0 -6
- package/lib/components/Gallery.styles.js +0 -40
- package/lib/components/Gallery.styles.js.map +0 -1
- package/lib/components/add-file/AddFile.d.ts +0 -26
- package/lib/components/add-file/AddFile.js +0 -83
- package/lib/components/add-file/AddFile.js.map +0 -1
- package/lib/components/add-file/AddFile.styles.d.ts +0 -4
- package/lib/components/add-file/AddFile.styles.js +0 -31
- package/lib/components/add-file/AddFile.styles.js.map +0 -1
- package/lib/components/gallery-item/GalleryItem.js +0 -60
- package/lib/components/gallery-item/GalleryItem.js.map +0 -1
- package/lib/components/gallery-item/GalleryItem.styles.d.ts +0 -17
- package/lib/components/gallery-item/GalleryItem.styles.js +0 -107
- package/lib/components/gallery-item/GalleryItem.styles.js.map +0 -1
- package/lib/index.d.ts +0 -4
- package/lib/index.js +0 -40
- package/lib/index.js.map +0 -1
- package/lib/types/file.d.ts +0 -20
- package/lib/types/file.js +0 -6
- package/lib/types/file.js.map +0 -1
- package/lib/utils/file.d.ts +0 -17
- package/lib/utils/file.js +0 -92
- package/lib/utils/file.js.map +0 -1
- package/lib/utils/upload.d.ts +0 -8
- package/lib/utils/upload.js +0 -56
- 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"}
|
package/lib/api/video/post.d.ts
DELETED
|
@@ -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 {};
|
package/lib/api/video/post.js
DELETED
|
@@ -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>;
|