@chayns-components/core 5.3.2 → 5.3.7
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/lib/cjs/components/file-input/FileInput.js +13 -13
- package/lib/cjs/components/file-input/FileInput.js.map +1 -1
- package/lib/cjs/components/file-list/FileList.js +8 -4
- package/lib/cjs/components/file-list/FileList.js.map +1 -1
- package/lib/cjs/components/file-list/file-item/FileItem.js +54 -4
- package/lib/cjs/components/file-list/file-item/FileItem.js.map +1 -1
- package/lib/cjs/components/sharing-button/SharingButton.js +1 -0
- package/lib/cjs/components/sharing-button/SharingButton.js.map +1 -1
- package/lib/esm/components/file-input/FileInput.js +13 -13
- package/lib/esm/components/file-input/FileInput.js.map +1 -1
- package/lib/esm/components/file-list/FileList.js +8 -4
- package/lib/esm/components/file-list/FileList.js.map +1 -1
- package/lib/esm/components/file-list/file-item/FileItem.js +55 -5
- package/lib/esm/components/file-list/file-item/FileItem.js.map +1 -1
- package/lib/esm/components/sharing-button/SharingButton.js +1 -0
- package/lib/esm/components/sharing-button/SharingButton.js.map +1 -1
- package/lib/types/components/file-input/FileInput.d.ts +4 -0
- package/lib/types/components/file-list/FileList.d.ts +5 -0
- package/lib/types/components/file-list/file-item/FileItem.d.ts +1 -0
- package/package.json +2 -2
|
@@ -26,7 +26,8 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
26
26
|
onAdd,
|
|
27
27
|
fileSelectionPlaceholder = 'Dateien hochladen',
|
|
28
28
|
imageSelectPlaceholder,
|
|
29
|
-
shouldPreventImageUpload = false
|
|
29
|
+
shouldPreventImageUpload = false,
|
|
30
|
+
shouldAllowDownload
|
|
30
31
|
}, ref) => {
|
|
31
32
|
const [internalFiles, setInternalFiles] = (0, _react.useState)([]);
|
|
32
33
|
const [internalImages, setInternalImages] = (0, _react.useState)([]);
|
|
@@ -138,22 +139,20 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
138
139
|
return false;
|
|
139
140
|
}, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);
|
|
140
141
|
const filesToDisplay = (0, _react.useMemo)(() => {
|
|
141
|
-
const items = internalFiles.map(({
|
|
142
|
-
|
|
143
|
-
name,
|
|
144
|
-
size
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
name,
|
|
148
|
-
size,
|
|
149
|
-
mimeType: type
|
|
142
|
+
const items = internalFiles.map(file => ({
|
|
143
|
+
id: file.name,
|
|
144
|
+
name: file.name,
|
|
145
|
+
size: file.size,
|
|
146
|
+
mimeType: file.type,
|
|
147
|
+
source: file
|
|
150
148
|
}));
|
|
151
149
|
internalImages.forEach(image => {
|
|
152
150
|
items.push({
|
|
153
151
|
id: image.name ?? image.url,
|
|
154
152
|
name: image.name ?? image.url,
|
|
155
153
|
size: image.size ?? 0,
|
|
156
|
-
mimeType: 'image/png'
|
|
154
|
+
mimeType: 'image/png',
|
|
155
|
+
source: image.url
|
|
157
156
|
});
|
|
158
157
|
});
|
|
159
158
|
files === null || files === void 0 || files.forEach(file => {
|
|
@@ -174,8 +173,9 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
174
173
|
onAdd: handleAdd
|
|
175
174
|
}), /*#__PURE__*/_react.default.createElement(_FileList.default, {
|
|
176
175
|
files: filesToDisplay,
|
|
177
|
-
onRemove: handleDeleteFile
|
|
178
|
-
|
|
176
|
+
onRemove: handleDeleteFile,
|
|
177
|
+
shouldAllowDownload: shouldAllowDownload
|
|
178
|
+
})), [shouldPreventImageUpload, maxFiles, fileTypes, fileSelectionIcons, fileSelectionPlaceholder, imageSelectIcons, imageSelectPlaceholder, maxFileSizeInMB, internalIsDisabled, handleAdd, filesToDisplay, handleDeleteFile, shouldAllowDownload]);
|
|
179
179
|
});
|
|
180
180
|
FileInput.displayName = 'FileInput';
|
|
181
181
|
var _default = exports.default = FileInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.js","names":["_react","_interopRequireWildcard","require","_file","_FileInput","_FileList","_interopRequireDefault","_FileSelect","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TSIMG_FILE_TYPES","exports","STREAMINGSERVICE_FILE_TYPES","FileInput","forwardRef","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","shouldPreventImageUpload","ref","internalFiles","setInternalFiles","useState","internalImages","setInternalImages","handleInputClear","useImperativeHandle","clear","handleAddImages","useCallback","images","newImages","forEach","image","filterDuplicateFileUrls","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","isValidFileType","types","filterDuplicateFile","handleAdd","Array","isArray","handleDeleteFile","id","fileToDelete","filteredFiles","filter","name","filteredImages","internalIsDisabled","useMemo","filesToDisplay","items","map","type","size","mimeType","url","createElement","StyledFileInput","displayName","_default"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { StyledFileInput } from './FileInput.styles';\nimport FileList, { IFileItem } from '../file-list/FileList';\nimport FileSelect, { UploadedFile } from '../file-select/FileSelect';\n\nexport const TSIMG_FILE_TYPES =\n 'image/png, image/jpg, image/jpeg, image/gif, image/webp, image/svg+xml, image/avif';\n\nexport const STREAMINGSERVICE_FILE_TYPES =\n 'video/mp4, video/webm, video/avi, video/flv, video/wmv, video/mpg, video/quicktime';\n\nexport type FileInputProps = {\n /**\n * Already uploaded files to display.\n */\n files?: IFileItem[];\n /**\n * An array of icons that should be displayed inside the FileInput\n */\n fileSelectionIcons?: string[];\n /**\n * The text that should be displayed inside the FileInput.\n */\n fileSelectionPlaceholder?: string;\n /**\n * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n */\n fileTypes?: string;\n /**\n * The icon of the image selection.\n */\n imageSelectIcons?: string[];\n /**\n * If set, pictures can be select via Pixabay.\n */\n imageSelectPlaceholder?: string;\n /**\n * Whether the FileInput is disabled.\n */\n isDisabled?: boolean;\n /**\n * The maximum amount of Files that can be uploaded.\n */\n maxFiles?: number;\n /**\n * The maximum size of a file in MB.\n */\n maxFileSizeInMB?: number;\n /**\n * A function to be executed when files are added.\n */\n onAdd?: (files: File[] | UploadedFile[]) => void;\n /**\n * Function to be executed when the maximum amount of Files are reached.\n */\n onMaxFilesReached?: () => void;\n /**\n * A function to be executed when a file is removed.\n */\n onRemove?: (file: File | IFileItem | UploadedFile) => void;\n /**\n * Whether the image upload should be prevented.\n */\n shouldPreventImageUpload?: boolean;\n};\n\nexport type FileInputRef = {\n clear: () => void;\n};\n\nconst FileInput = forwardRef<FileInputRef, FileInputProps>(\n (\n {\n fileSelectionIcons = ['fa fa-upload'],\n imageSelectIcons = ['ts-image'],\n fileTypes,\n onMaxFilesReached,\n maxFiles,\n onRemove,\n files,\n isDisabled,\n maxFileSizeInMB,\n onAdd,\n fileSelectionPlaceholder = 'Dateien hochladen',\n imageSelectPlaceholder,\n shouldPreventImageUpload = false,\n },\n ref,\n ) => {\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n const [internalImages, setInternalImages] = useState<UploadedFile[]>([]);\n\n const handleInputClear = () => {\n setInternalFiles([]);\n setInternalImages([]);\n };\n\n useImperativeHandle(\n ref,\n () => ({\n clear: handleInputClear,\n }),\n [],\n );\n\n const handleAddImages = useCallback(\n (images: UploadedFile[]) => {\n const newImages: UploadedFile[] = [];\n\n images.forEach((image) => {\n if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n newImages.push(image);\n }\n });\n\n let tmp = newImages;\n\n if (maxFiles) {\n tmp = newImages.slice(\n 0,\n maxFiles -\n (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalImages((prevState) => [...prevState, ...tmp]);\n },\n [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n );\n\n const handleAddFiles = useCallback(\n (newFiles: File[]) => {\n const newFileItems: File[] = [];\n\n newFiles.forEach((file) => {\n if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n return;\n }\n\n if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n newFileItems.push(file);\n }\n });\n\n let tmp = newFileItems;\n\n if (maxFiles) {\n tmp = newFileItems.slice(\n 0,\n maxFiles - (internalFiles.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalFiles((prevState) => [...prevState, ...tmp]);\n },\n [fileTypes, files?.length, internalFiles, maxFiles, onAdd],\n );\n\n const handleAdd = useCallback(\n (newFiles: File[] | UploadedFile[]) => {\n if (Array.isArray(newFiles) && newFiles.length > 0) {\n if (newFiles[0] && 'url' in newFiles[0]) {\n handleAddImages(newFiles as UploadedFile[]);\n } else {\n handleAddFiles(newFiles as File[]);\n }\n }\n },\n [handleAddFiles, handleAddImages],\n );\n\n const handleDeleteFile = useCallback(\n (id: string) => {\n let fileToDelete: File | IFileItem | UploadedFile | undefined;\n\n const filteredFiles = internalFiles.filter((file) => {\n const { name } = file;\n\n if (name === id) {\n fileToDelete = file;\n }\n\n return name !== id;\n });\n\n setInternalFiles(filteredFiles);\n\n if (!fileToDelete) {\n const filteredImages = internalImages.filter((image) => {\n if (image.name === id) {\n fileToDelete = image;\n }\n\n return image.name !== id;\n });\n\n setInternalImages(filteredImages);\n }\n\n if (!fileToDelete) {\n files?.forEach((file) => {\n if (file.id === id || file.name === id) {\n fileToDelete = file;\n }\n });\n }\n\n if (!fileToDelete || typeof onRemove !== 'function') {\n return;\n }\n\n onRemove(fileToDelete);\n },\n [files, internalFiles, internalImages, onRemove],\n );\n\n const internalIsDisabled = useMemo(() => {\n if (isDisabled) {\n return true;\n }\n\n if (maxFiles) {\n if (internalFiles.length + internalImages.length >= maxFiles) {\n if (typeof onMaxFilesReached === 'function') {\n onMaxFilesReached();\n }\n\n return true;\n }\n }\n\n return false;\n }, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);\n\n const filesToDisplay: IFileItem[] = useMemo(() => {\n const items: IFileItem[] = internalFiles.map(({ type, name, size }) => ({\n id: name,\n name,\n size,\n mimeType: type,\n }));\n\n internalImages.forEach((image) => {\n items.push({\n id: image.name ?? image.url,\n name: image.name ?? image.url,\n size: image.size ?? 0,\n mimeType: 'image/png',\n });\n });\n\n files?.forEach((file) => {\n items.push(file);\n });\n\n return items;\n }, [files, internalFiles, internalImages]);\n\n return useMemo(\n () => (\n <StyledFileInput>\n <FileSelect\n shouldPreventImageUpload={shouldPreventImageUpload}\n maxFiles={maxFiles}\n fileTypes={fileTypes}\n fileSelectionIcons={fileSelectionIcons}\n fileSelectionPlaceholder={fileSelectionPlaceholder}\n imageSelectIcons={imageSelectIcons}\n imageSelectPlaceholder={imageSelectPlaceholder}\n maxFileSizeInMB={maxFileSizeInMB}\n isDisabled={internalIsDisabled}\n onAdd={handleAdd}\n />\n <FileList files={filesToDisplay} onRemove={handleDeleteFile} />\n </StyledFileInput>\n ),\n [\n shouldPreventImageUpload,\n maxFiles,\n fileTypes,\n fileSelectionIcons,\n fileSelectionPlaceholder,\n imageSelectIcons,\n imageSelectPlaceholder,\n maxFileSizeInMB,\n internalIsDisabled,\n handleAdd,\n filesToDisplay,\n handleDeleteFile,\n ],\n );\n },\n);\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"FileInput.js","names":["_react","_interopRequireWildcard","require","_file","_FileInput","_FileList","_interopRequireDefault","_FileSelect","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TSIMG_FILE_TYPES","exports","STREAMINGSERVICE_FILE_TYPES","FileInput","forwardRef","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","shouldPreventImageUpload","shouldAllowDownload","ref","internalFiles","setInternalFiles","useState","internalImages","setInternalImages","handleInputClear","useImperativeHandle","clear","handleAddImages","useCallback","images","newImages","forEach","image","filterDuplicateFileUrls","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","isValidFileType","types","filterDuplicateFile","handleAdd","Array","isArray","handleDeleteFile","id","fileToDelete","filteredFiles","filter","name","filteredImages","internalIsDisabled","useMemo","filesToDisplay","items","map","size","mimeType","type","source","url","createElement","StyledFileInput","displayName","_default"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { StyledFileInput } from './FileInput.styles';\nimport FileList, { IFileItem } from '../file-list/FileList';\nimport FileSelect, { UploadedFile } from '../file-select/FileSelect';\n\nexport const TSIMG_FILE_TYPES =\n 'image/png, image/jpg, image/jpeg, image/gif, image/webp, image/svg+xml, image/avif';\n\nexport const STREAMINGSERVICE_FILE_TYPES =\n 'video/mp4, video/webm, video/avi, video/flv, video/wmv, video/mpg, video/quicktime';\n\nexport type FileInputProps = {\n /**\n * Already uploaded files to display.\n */\n files?: IFileItem[];\n /**\n * An array of icons that should be displayed inside the FileInput\n */\n fileSelectionIcons?: string[];\n /**\n * The text that should be displayed inside the FileInput.\n */\n fileSelectionPlaceholder?: string;\n /**\n * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n */\n fileTypes?: string;\n /**\n * The icon of the image selection.\n */\n imageSelectIcons?: string[];\n /**\n * If set, pictures can be select via Pixabay.\n */\n imageSelectPlaceholder?: string;\n /**\n * Whether the FileInput is disabled.\n */\n isDisabled?: boolean;\n /**\n * The maximum amount of Files that can be uploaded.\n */\n maxFiles?: number;\n /**\n * The maximum size of a file in MB.\n */\n maxFileSizeInMB?: number;\n /**\n * A function to be executed when files are added.\n */\n onAdd?: (files: File[] | UploadedFile[]) => void;\n /**\n * Function to be executed when the maximum amount of Files are reached.\n */\n onMaxFilesReached?: () => void;\n /**\n * A function to be executed when a file is removed.\n */\n onRemove?: (file: File | IFileItem | UploadedFile) => void;\n /**\n * Whether the image upload should be prevented.\n */\n shouldPreventImageUpload?: boolean;\n /**\n * Whether to show a download icon for files that have a `source` set.\n */\n shouldAllowDownload?: boolean;\n};\n\nexport type FileInputRef = {\n clear: () => void;\n};\n\nconst FileInput = forwardRef<FileInputRef, FileInputProps>(\n (\n {\n fileSelectionIcons = ['fa fa-upload'],\n imageSelectIcons = ['ts-image'],\n fileTypes,\n onMaxFilesReached,\n maxFiles,\n onRemove,\n files,\n isDisabled,\n maxFileSizeInMB,\n onAdd,\n fileSelectionPlaceholder = 'Dateien hochladen',\n imageSelectPlaceholder,\n shouldPreventImageUpload = false,\n shouldAllowDownload,\n },\n ref,\n ) => {\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n const [internalImages, setInternalImages] = useState<UploadedFile[]>([]);\n\n const handleInputClear = () => {\n setInternalFiles([]);\n setInternalImages([]);\n };\n\n useImperativeHandle(\n ref,\n () => ({\n clear: handleInputClear,\n }),\n [],\n );\n\n const handleAddImages = useCallback(\n (images: UploadedFile[]) => {\n const newImages: UploadedFile[] = [];\n\n images.forEach((image) => {\n if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n newImages.push(image);\n }\n });\n\n let tmp = newImages;\n\n if (maxFiles) {\n tmp = newImages.slice(\n 0,\n maxFiles -\n (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalImages((prevState) => [...prevState, ...tmp]);\n },\n [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n );\n\n const handleAddFiles = useCallback(\n (newFiles: File[]) => {\n const newFileItems: File[] = [];\n\n newFiles.forEach((file) => {\n if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n return;\n }\n\n if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n newFileItems.push(file);\n }\n });\n\n let tmp = newFileItems;\n\n if (maxFiles) {\n tmp = newFileItems.slice(\n 0,\n maxFiles - (internalFiles.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalFiles((prevState) => [...prevState, ...tmp]);\n },\n [fileTypes, files?.length, internalFiles, maxFiles, onAdd],\n );\n\n const handleAdd = useCallback(\n (newFiles: File[] | UploadedFile[]) => {\n if (Array.isArray(newFiles) && newFiles.length > 0) {\n if (newFiles[0] && 'url' in newFiles[0]) {\n handleAddImages(newFiles as UploadedFile[]);\n } else {\n handleAddFiles(newFiles as File[]);\n }\n }\n },\n [handleAddFiles, handleAddImages],\n );\n\n const handleDeleteFile = useCallback(\n (id: string) => {\n let fileToDelete: File | IFileItem | UploadedFile | undefined;\n\n const filteredFiles = internalFiles.filter((file) => {\n const { name } = file;\n\n if (name === id) {\n fileToDelete = file;\n }\n\n return name !== id;\n });\n\n setInternalFiles(filteredFiles);\n\n if (!fileToDelete) {\n const filteredImages = internalImages.filter((image) => {\n if (image.name === id) {\n fileToDelete = image;\n }\n\n return image.name !== id;\n });\n\n setInternalImages(filteredImages);\n }\n\n if (!fileToDelete) {\n files?.forEach((file) => {\n if (file.id === id || file.name === id) {\n fileToDelete = file;\n }\n });\n }\n\n if (!fileToDelete || typeof onRemove !== 'function') {\n return;\n }\n\n onRemove(fileToDelete);\n },\n [files, internalFiles, internalImages, onRemove],\n );\n\n const internalIsDisabled = useMemo(() => {\n if (isDisabled) {\n return true;\n }\n\n if (maxFiles) {\n if (internalFiles.length + internalImages.length >= maxFiles) {\n if (typeof onMaxFilesReached === 'function') {\n onMaxFilesReached();\n }\n\n return true;\n }\n }\n\n return false;\n }, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);\n\n const filesToDisplay: IFileItem[] = useMemo(() => {\n const items: IFileItem[] = internalFiles.map((file) => ({\n id: file.name,\n name: file.name,\n size: file.size,\n mimeType: file.type,\n source: file,\n }));\n\n internalImages.forEach((image) => {\n items.push({\n id: image.name ?? image.url,\n name: image.name ?? image.url,\n size: image.size ?? 0,\n mimeType: 'image/png',\n source: image.url,\n });\n });\n\n files?.forEach((file) => {\n items.push(file);\n });\n\n return items;\n }, [files, internalFiles, internalImages]);\n\n return useMemo(\n () => (\n <StyledFileInput>\n <FileSelect\n shouldPreventImageUpload={shouldPreventImageUpload}\n maxFiles={maxFiles}\n fileTypes={fileTypes}\n fileSelectionIcons={fileSelectionIcons}\n fileSelectionPlaceholder={fileSelectionPlaceholder}\n imageSelectIcons={imageSelectIcons}\n imageSelectPlaceholder={imageSelectPlaceholder}\n maxFileSizeInMB={maxFileSizeInMB}\n isDisabled={internalIsDisabled}\n onAdd={handleAdd}\n />\n <FileList\n files={filesToDisplay}\n onRemove={handleDeleteFile}\n shouldAllowDownload={shouldAllowDownload}\n />\n </StyledFileInput>\n ),\n [\n shouldPreventImageUpload,\n maxFiles,\n fileTypes,\n fileSelectionIcons,\n fileSelectionPlaceholder,\n imageSelectIcons,\n imageSelectPlaceholder,\n maxFileSizeInMB,\n internalIsDisabled,\n handleAdd,\n filesToDisplay,\n handleDeleteFile,\n shouldAllowDownload,\n ],\n );\n },\n);\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -12,21 +12,25 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
12
12
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
13
13
|
const FileList = ({
|
|
14
14
|
files,
|
|
15
|
-
onRemove
|
|
15
|
+
onRemove,
|
|
16
|
+
shouldAllowDownload
|
|
16
17
|
}) => {
|
|
17
18
|
const content = (0, _react.useMemo)(() => files === null || files === void 0 ? void 0 : files.map(({
|
|
18
19
|
mimeType,
|
|
19
20
|
size,
|
|
20
21
|
name,
|
|
21
|
-
id
|
|
22
|
+
id,
|
|
23
|
+
source
|
|
22
24
|
}) => /*#__PURE__*/_react.default.createElement(_FileItem.default, {
|
|
23
25
|
key: id,
|
|
24
26
|
id: id,
|
|
25
27
|
name: name,
|
|
26
28
|
size: size,
|
|
27
29
|
mimeType: mimeType,
|
|
28
|
-
|
|
29
|
-
|
|
30
|
+
source: source,
|
|
31
|
+
onRemove: onRemove,
|
|
32
|
+
shouldAllowDownload: shouldAllowDownload
|
|
33
|
+
})), [files, onRemove, shouldAllowDownload]);
|
|
30
34
|
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FileList.StyledFileList, null, /*#__PURE__*/_react.default.createElement(_List.default, null, content)), [content]);
|
|
31
35
|
};
|
|
32
36
|
FileList.displayName = 'FileList';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileList.js","names":["_react","_interopRequireWildcard","require","_List","_interopRequireDefault","_FileList","_FileItem","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FileList","files","onRemove","content","useMemo","map","mimeType","size","name","id","createElement","key","StyledFileList","displayName","_default","exports"],"sources":["../../../../src/components/file-list/FileList.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport List from '../list/List';\nimport { StyledFileList } from './FileList.styles';\nimport FileItem from './file-item/FileItem';\n\nexport interface IFileItem {\n id: string;\n name: string;\n size?: number;\n mimeType: string;\n}\n\nexport type FileListProps = {\n /**\n * Already uploaded files to display.\n */\n files?: IFileItem[];\n /**\n * A function to be executed when a file is removed.\n */\n onRemove?: (id: IFileItem['id']) => void;\n};\n\nconst FileList: FC<FileListProps> = ({ files, onRemove }) => {\n const content = useMemo(\n () =>\n files?.map(({ mimeType, size, name, id }) => (\n <FileItem\n key={id}\n id={id}\n name={name}\n size={size}\n mimeType={mimeType}\n onRemove={onRemove}\n />\n )),\n [files, onRemove],\n );\n\n return useMemo(\n () => (\n <StyledFileList>\n <List>{content}</List>\n </StyledFileList>\n ),\n [content],\n );\n};\n\nFileList.displayName = 'FileList';\n\nexport default FileList;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAF,sBAAA,CAAAF,OAAA;AAA4C,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAM,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;
|
|
1
|
+
{"version":3,"file":"FileList.js","names":["_react","_interopRequireWildcard","require","_List","_interopRequireDefault","_FileList","_FileItem","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FileList","files","onRemove","shouldAllowDownload","content","useMemo","map","mimeType","size","name","id","source","createElement","key","StyledFileList","displayName","_default","exports"],"sources":["../../../../src/components/file-list/FileList.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport List from '../list/List';\nimport { StyledFileList } from './FileList.styles';\nimport FileItem from './file-item/FileItem';\n\nexport interface IFileItem {\n id: string;\n name: string;\n size?: number;\n mimeType: string;\n source?: string | File;\n}\n\nexport type FileListProps = {\n /**\n * Already uploaded files to display.\n */\n files?: IFileItem[];\n /**\n * A function to be executed when a file is removed.\n */\n onRemove?: (id: IFileItem['id']) => void;\n /**\n * Whether to show a download icon for files that have a `source` set.\n */\n shouldAllowDownload?: boolean;\n};\n\nconst FileList: FC<FileListProps> = ({ files, onRemove, shouldAllowDownload }) => {\n const content = useMemo(\n () =>\n files?.map(({ mimeType, size, name, id, source }) => (\n <FileItem\n key={id}\n id={id}\n name={name}\n size={size}\n mimeType={mimeType}\n source={source}\n onRemove={onRemove}\n shouldAllowDownload={shouldAllowDownload}\n />\n )),\n [files, onRemove, shouldAllowDownload],\n );\n\n return useMemo(\n () => (\n <StyledFileList>\n <List>{content}</List>\n </StyledFileList>\n ),\n [content],\n );\n};\n\nFileList.displayName = 'FileList';\n\nexport default FileList;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAF,sBAAA,CAAAF,OAAA;AAA4C,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAM,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAyB5C,MAAMgB,QAA2B,GAAGA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAAoB,CAAC,KAAK;EAC9E,MAAMC,OAAO,GAAG,IAAAC,cAAO,EACnB,MACIJ,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEK,GAAG,CAAC,CAAC;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAEC,EAAE;IAAEC;EAAO,CAAC,kBAC5CrC,MAAA,CAAAS,OAAA,CAAA6B,aAAA,CAAChC,SAAA,CAAAG,OAAQ;IACL8B,GAAG,EAAEH,EAAG;IACRA,EAAE,EAAEA,EAAG;IACPD,IAAI,EAAEA,IAAK;IACXD,IAAI,EAAEA,IAAK;IACXD,QAAQ,EAAEA,QAAS;IACnBI,MAAM,EAAEA,MAAO;IACfT,QAAQ,EAAEA,QAAS;IACnBC,mBAAmB,EAAEA;EAAoB,CAC5C,CACJ,CAAC,EACN,CAACF,KAAK,EAAEC,QAAQ,EAAEC,mBAAmB,CACzC,CAAC;EAED,OAAO,IAAAE,cAAO,EACV,mBACI/B,MAAA,CAAAS,OAAA,CAAA6B,aAAA,CAACjC,SAAA,CAAAmC,cAAc,qBACXxC,MAAA,CAAAS,OAAA,CAAA6B,aAAA,CAACnC,KAAA,CAAAM,OAAI,QAAEqB,OAAc,CACT,CACnB,EACD,CAACA,OAAO,CACZ,CAAC;AACL,CAAC;AAEDJ,QAAQ,CAACe,WAAW,GAAG,UAAU;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAlC,OAAA,GAEnBiB,QAAQ","ignoreList":[]}
|
|
@@ -16,7 +16,9 @@ const FileItem = ({
|
|
|
16
16
|
onRemove,
|
|
17
17
|
size,
|
|
18
18
|
name,
|
|
19
|
-
id
|
|
19
|
+
id,
|
|
20
|
+
source,
|
|
21
|
+
shouldAllowDownload
|
|
20
22
|
}) => {
|
|
21
23
|
const humanFileSize = (0, _react.useMemo)(() => {
|
|
22
24
|
if (typeof size === 'number') {
|
|
@@ -25,15 +27,63 @@ const FileItem = ({
|
|
|
25
27
|
return undefined;
|
|
26
28
|
}, [size]);
|
|
27
29
|
const icon = (0, _react.useMemo)(() => (0, _file.getIconByMimeType)(mimeType), [mimeType]);
|
|
30
|
+
const handleDownload = (0, _react.useCallback)(() => {
|
|
31
|
+
if (!source) return;
|
|
32
|
+
if (source instanceof File) {
|
|
33
|
+
const url = URL.createObjectURL(source);
|
|
34
|
+
const a = document.createElement('a');
|
|
35
|
+
a.href = url;
|
|
36
|
+
a.download = name;
|
|
37
|
+
document.body.appendChild(a);
|
|
38
|
+
a.click();
|
|
39
|
+
document.body.removeChild(a);
|
|
40
|
+
URL.revokeObjectURL(url);
|
|
41
|
+
} else {
|
|
42
|
+
// Try fetching as blob to force download. If CORS blocks it,
|
|
43
|
+
// fall back to opening the URL directly.
|
|
44
|
+
fetch(source).then(res => {
|
|
45
|
+
if (!res.ok) throw new Error('fetch failed');
|
|
46
|
+
return res.blob();
|
|
47
|
+
}).then(blob => {
|
|
48
|
+
const url = URL.createObjectURL(blob);
|
|
49
|
+
const a = document.createElement('a');
|
|
50
|
+
a.href = url;
|
|
51
|
+
a.download = name;
|
|
52
|
+
document.body.appendChild(a);
|
|
53
|
+
a.click();
|
|
54
|
+
document.body.removeChild(a);
|
|
55
|
+
URL.revokeObjectURL(url);
|
|
56
|
+
}).catch(() => {
|
|
57
|
+
// CORS or network error: fall back to direct link
|
|
58
|
+
const a = document.createElement('a');
|
|
59
|
+
a.href = source;
|
|
60
|
+
a.download = name;
|
|
61
|
+
a.rel = 'noopener noreferrer';
|
|
62
|
+
a.target = '_blank';
|
|
63
|
+
document.body.appendChild(a);
|
|
64
|
+
a.click();
|
|
65
|
+
document.body.removeChild(a);
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
}, [name, source]);
|
|
28
69
|
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FileItem.StyledFileItem, null, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
|
|
29
70
|
title: name,
|
|
30
71
|
subtitle: humanFileSize,
|
|
31
72
|
icons: [icon],
|
|
32
|
-
rightElements:
|
|
73
|
+
rightElements: /*#__PURE__*/_react.default.createElement("span", {
|
|
74
|
+
style: {
|
|
75
|
+
display: 'flex',
|
|
76
|
+
gap: '8px',
|
|
77
|
+
alignItems: 'center'
|
|
78
|
+
}
|
|
79
|
+
}, shouldAllowDownload && source && /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
80
|
+
icons: ['fa fa-download'],
|
|
81
|
+
onClick: handleDownload
|
|
82
|
+
}), typeof onRemove === 'function' && /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
33
83
|
icons: ['ts-wrong'],
|
|
34
84
|
onClick: () => onRemove(id)
|
|
35
|
-
})
|
|
36
|
-
})), [humanFileSize, icon, id, name, onRemove]);
|
|
85
|
+
}))
|
|
86
|
+
})), [handleDownload, humanFileSize, icon, id, name, onRemove, shouldAllowDownload, source]);
|
|
37
87
|
};
|
|
38
88
|
FileItem.displayName = 'FileList';
|
|
39
89
|
var _default = exports.default = FileItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileItem.js","names":["_react","_interopRequireWildcard","require","_file","_Icon","_interopRequireDefault","_ListItem","_FileItem","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FileItem","mimeType","onRemove","size","name","id","humanFileSize","useMemo","getHumanSize","undefined","icon","getIconByMimeType","createElement","StyledFileItem","title","subtitle","icons","rightElements","onClick","displayName","_default","exports"],"sources":["../../../../../src/components/file-list/file-item/FileItem.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport { getHumanSize, getIconByMimeType } from '../../../utils/file';\nimport Icon from '../../icon/Icon';\nimport ListItem from '../../list/list-item/ListItem';\nimport type { IFileItem } from '../FileList';\nimport { StyledFileItem } from './FileItem.styles';\n\nexport type FileItemProps = IFileItem & {\n onRemove?: (name: string) => void;\n};\n\nconst FileItem: FC<FileItemProps> = ({
|
|
1
|
+
{"version":3,"file":"FileItem.js","names":["_react","_interopRequireWildcard","require","_file","_Icon","_interopRequireDefault","_ListItem","_FileItem","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FileItem","mimeType","onRemove","size","name","id","source","shouldAllowDownload","humanFileSize","useMemo","getHumanSize","undefined","icon","getIconByMimeType","handleDownload","useCallback","File","url","URL","createObjectURL","a","document","createElement","href","download","body","appendChild","click","removeChild","revokeObjectURL","fetch","then","res","ok","Error","blob","catch","rel","target","StyledFileItem","title","subtitle","icons","rightElements","style","display","gap","alignItems","onClick","displayName","_default","exports"],"sources":["../../../../../src/components/file-list/file-item/FileItem.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { getHumanSize, getIconByMimeType } from '../../../utils/file';\nimport Icon from '../../icon/Icon';\nimport ListItem from '../../list/list-item/ListItem';\nimport type { IFileItem } from '../FileList';\nimport { StyledFileItem } from './FileItem.styles';\n\nexport type FileItemProps = IFileItem & {\n onRemove?: (name: string) => void;\n shouldAllowDownload?: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n mimeType,\n onRemove,\n size,\n name,\n id,\n source,\n shouldAllowDownload,\n}) => {\n const humanFileSize = useMemo(() => {\n if (typeof size === 'number') {\n return getHumanSize(size);\n }\n\n return undefined;\n }, [size]);\n\n const icon = useMemo(() => getIconByMimeType(mimeType), [mimeType]);\n\n const handleDownload = useCallback(() => {\n if (!source) return;\n\n if (source instanceof File) {\n const url = URL.createObjectURL(source);\n const a = document.createElement('a');\n a.href = url;\n a.download = name;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n } else {\n // Try fetching as blob to force download. If CORS blocks it,\n // fall back to opening the URL directly.\n fetch(source)\n .then((res) => {\n if (!res.ok) throw new Error('fetch failed');\n return res.blob();\n })\n .then((blob) => {\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = name;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n })\n .catch(() => {\n // CORS or network error: fall back to direct link\n const a = document.createElement('a');\n a.href = source;\n a.download = name;\n a.rel = 'noopener noreferrer';\n a.target = '_blank';\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n });\n }\n }, [name, source]);\n\n return useMemo(\n () => (\n <StyledFileItem>\n <ListItem\n title={name}\n subtitle={humanFileSize}\n icons={[icon]}\n rightElements={\n <span style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\n {shouldAllowDownload && source && (\n <Icon icons={['fa fa-download']} onClick={handleDownload} />\n )}\n {typeof onRemove === 'function' && (\n <Icon icons={['ts-wrong']} onClick={() => onRemove(id)} />\n )}\n </span>\n }\n />\n </StyledFileItem>\n ),\n [handleDownload, humanFileSize, icon, id, name, onRemove, shouldAllowDownload, source],\n );\n};\n\nFileItem.displayName = 'FileList';\n\nexport default FileItem;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SharingButton.js","names":["_react","_interopRequireDefault","require","_SharingContextMenu","_SharingButton","_Button","e","__esModule","default","SharingButton","link","alignment","container","children","isDisabled","contextMenuRef","React","useRef","isButtonDisabled","setIsButtonDisabled","useState","handleButtonClick","_contextMenuRef$curre","current","show","handleOnShow","handleOnHide","createElement","StyledSharingButtonContainer","ref","onShow","onHide","onClick","_default","exports"],"sources":["../../../../src/components/sharing-button/SharingButton.tsx"],"sourcesContent":["import React, { FunctionComponent, PropsWithChildren } from 'react';\nimport { ContextMenuRef } from '../context-menu/ContextMenu.types';\nimport SharingContextMenu, {\n SharingContextMenuProps,\n} from '../sharing-context-menu/SharingContextMenu';\nimport { StyledSharingButtonContainer } from './SharingButton.styles';\nimport Button from '../button/Button';\nimport { ButtonProps } from '../button/Button.types';\n\nexport type SharingButtonProps = PropsWithChildren<\n Pick<SharingContextMenuProps, 'link' | 'alignment' | 'container'> &\n Pick<ButtonProps, 'isDisabled'>\n>;\n\nconst SharingButton: FunctionComponent<SharingButtonProps> = ({\n link,\n alignment,\n container,\n children,\n isDisabled,\n}) => {\n const contextMenuRef = React.useRef<ContextMenuRef>(null);\n const [isButtonDisabled, setIsButtonDisabled] = React.useState(false);\n\n const handleButtonClick = () => {\n contextMenuRef.current?.show();\n };\n\n const handleOnShow = () => {\n setIsButtonDisabled(true);\n };\n\n const handleOnHide = () => {\n setIsButtonDisabled(false);\n };\n\n return (\n <StyledSharingButtonContainer>\n <SharingContextMenu\n link={link}\n alignment={alignment}\n container={container}\n ref={contextMenuRef}\n onShow={handleOnShow}\n onHide={handleOnHide}\n >\n <Button onClick={handleButtonClick} isDisabled={isButtonDisabled || isDisabled}>\n {children}\n </Button>\n </SharingContextMenu>\n </StyledSharingButtonContainer>\n );\n};\n\nexport default SharingButton;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,mBAAA,GAAAF,sBAAA,CAAAC,OAAA;AAGA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAAsC,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAQtC,MAAMG,aAAoD,GAAGA,CAAC;EAC1DC,IAAI;EACJC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC;AACJ,CAAC,KAAK;EACF,MAAMC,cAAc,GAAGC,cAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;EACzD,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGH,cAAK,CAACI,QAAQ,CAAC,KAAK,CAAC;EAErE,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;IAAA,IAAAC,qBAAA;IAC5B,CAAAA,qBAAA,GAAAP,cAAc,CAACQ,OAAO,cAAAD,qBAAA,eAAtBA,qBAAA,CAAwBE,IAAI,CAAC,CAAC;EAClC,CAAC;EAED,MAAMC,YAAY,GAAGA,CAAA,KAAM;IACvBN,mBAAmB,CAAC,IAAI,CAAC;EAC7B,CAAC;EAED,MAAMO,YAAY,GAAGA,CAAA,KAAM;IACvBP,mBAAmB,CAAC,KAAK,CAAC;EAC9B,CAAC;EAED,oBACInB,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACvB,cAAA,CAAAwB,4BAA4B,qBACzB5B,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACxB,mBAAA,CAAAK,OAAkB;IACfE,IAAI,EAAEA,IAAK;IACXC,SAAS,EAAEA,SAAU;IACrBC,SAAS,EAAEA,SAAU;IACrBiB,GAAG,EAAEd,cAAe;IACpBe,MAAM,
|
|
1
|
+
{"version":3,"file":"SharingButton.js","names":["_react","_interopRequireDefault","require","_SharingContextMenu","_SharingButton","_Button","e","__esModule","default","SharingButton","link","alignment","container","children","isDisabled","contextMenuRef","React","useRef","isButtonDisabled","setIsButtonDisabled","useState","handleButtonClick","_contextMenuRef$curre","current","show","handleOnShow","handleOnHide","createElement","StyledSharingButtonContainer","ref","shouldDisableClick","onShow","onHide","onClick","_default","exports"],"sources":["../../../../src/components/sharing-button/SharingButton.tsx"],"sourcesContent":["import React, { FunctionComponent, PropsWithChildren } from 'react';\nimport { ContextMenuRef } from '../context-menu/ContextMenu.types';\nimport SharingContextMenu, {\n SharingContextMenuProps,\n} from '../sharing-context-menu/SharingContextMenu';\nimport { StyledSharingButtonContainer } from './SharingButton.styles';\nimport Button from '../button/Button';\nimport { ButtonProps } from '../button/Button.types';\n\nexport type SharingButtonProps = PropsWithChildren<\n Pick<SharingContextMenuProps, 'link' | 'alignment' | 'container'> &\n Pick<ButtonProps, 'isDisabled'>\n>;\n\nconst SharingButton: FunctionComponent<SharingButtonProps> = ({\n link,\n alignment,\n container,\n children,\n isDisabled,\n}) => {\n const contextMenuRef = React.useRef<ContextMenuRef>(null);\n const [isButtonDisabled, setIsButtonDisabled] = React.useState(false);\n\n const handleButtonClick = () => {\n contextMenuRef.current?.show();\n };\n\n const handleOnShow = () => {\n setIsButtonDisabled(true);\n };\n\n const handleOnHide = () => {\n setIsButtonDisabled(false);\n };\n\n return (\n <StyledSharingButtonContainer>\n <SharingContextMenu\n link={link}\n alignment={alignment}\n container={container}\n ref={contextMenuRef}\n shouldDisableClick\n onShow={handleOnShow}\n onHide={handleOnHide}\n >\n <Button onClick={handleButtonClick} isDisabled={isButtonDisabled || isDisabled}>\n {children}\n </Button>\n </SharingContextMenu>\n </StyledSharingButtonContainer>\n );\n};\n\nexport default SharingButton;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,mBAAA,GAAAF,sBAAA,CAAAC,OAAA;AAGA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAAsC,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAQtC,MAAMG,aAAoD,GAAGA,CAAC;EAC1DC,IAAI;EACJC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC;AACJ,CAAC,KAAK;EACF,MAAMC,cAAc,GAAGC,cAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;EACzD,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGH,cAAK,CAACI,QAAQ,CAAC,KAAK,CAAC;EAErE,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;IAAA,IAAAC,qBAAA;IAC5B,CAAAA,qBAAA,GAAAP,cAAc,CAACQ,OAAO,cAAAD,qBAAA,eAAtBA,qBAAA,CAAwBE,IAAI,CAAC,CAAC;EAClC,CAAC;EAED,MAAMC,YAAY,GAAGA,CAAA,KAAM;IACvBN,mBAAmB,CAAC,IAAI,CAAC;EAC7B,CAAC;EAED,MAAMO,YAAY,GAAGA,CAAA,KAAM;IACvBP,mBAAmB,CAAC,KAAK,CAAC;EAC9B,CAAC;EAED,oBACInB,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACvB,cAAA,CAAAwB,4BAA4B,qBACzB5B,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACxB,mBAAA,CAAAK,OAAkB;IACfE,IAAI,EAAEA,IAAK;IACXC,SAAS,EAAEA,SAAU;IACrBC,SAAS,EAAEA,SAAU;IACrBiB,GAAG,EAAEd,cAAe;IACpBe,kBAAkB;IAClBC,MAAM,EAAEN,YAAa;IACrBO,MAAM,EAAEN;EAAa,gBAErB1B,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACtB,OAAA,CAAAG,OAAM;IAACyB,OAAO,EAAEZ,iBAAkB;IAACP,UAAU,EAAEI,gBAAgB,IAAIJ;EAAW,GAC1ED,QACG,CACQ,CACM,CAAC;AAEvC,CAAC;AAAC,IAAAqB,QAAA,GAAAC,OAAA,CAAA3B,OAAA,GAEaC,aAAa","ignoreList":[]}
|
|
@@ -18,7 +18,8 @@ const FileInput = /*#__PURE__*/forwardRef(({
|
|
|
18
18
|
onAdd,
|
|
19
19
|
fileSelectionPlaceholder = 'Dateien hochladen',
|
|
20
20
|
imageSelectPlaceholder,
|
|
21
|
-
shouldPreventImageUpload = false
|
|
21
|
+
shouldPreventImageUpload = false,
|
|
22
|
+
shouldAllowDownload
|
|
22
23
|
}, ref) => {
|
|
23
24
|
const [internalFiles, setInternalFiles] = useState([]);
|
|
24
25
|
const [internalImages, setInternalImages] = useState([]);
|
|
@@ -130,22 +131,20 @@ const FileInput = /*#__PURE__*/forwardRef(({
|
|
|
130
131
|
return false;
|
|
131
132
|
}, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);
|
|
132
133
|
const filesToDisplay = useMemo(() => {
|
|
133
|
-
const items = internalFiles.map(({
|
|
134
|
-
|
|
135
|
-
name,
|
|
136
|
-
size
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
name,
|
|
140
|
-
size,
|
|
141
|
-
mimeType: type
|
|
134
|
+
const items = internalFiles.map(file => ({
|
|
135
|
+
id: file.name,
|
|
136
|
+
name: file.name,
|
|
137
|
+
size: file.size,
|
|
138
|
+
mimeType: file.type,
|
|
139
|
+
source: file
|
|
142
140
|
}));
|
|
143
141
|
internalImages.forEach(image => {
|
|
144
142
|
items.push({
|
|
145
143
|
id: image.name ?? image.url,
|
|
146
144
|
name: image.name ?? image.url,
|
|
147
145
|
size: image.size ?? 0,
|
|
148
|
-
mimeType: 'image/png'
|
|
146
|
+
mimeType: 'image/png',
|
|
147
|
+
source: image.url
|
|
149
148
|
});
|
|
150
149
|
});
|
|
151
150
|
files?.forEach(file => {
|
|
@@ -166,8 +165,9 @@ const FileInput = /*#__PURE__*/forwardRef(({
|
|
|
166
165
|
onAdd: handleAdd
|
|
167
166
|
}), /*#__PURE__*/React.createElement(FileList, {
|
|
168
167
|
files: filesToDisplay,
|
|
169
|
-
onRemove: handleDeleteFile
|
|
170
|
-
|
|
168
|
+
onRemove: handleDeleteFile,
|
|
169
|
+
shouldAllowDownload: shouldAllowDownload
|
|
170
|
+
})), [shouldPreventImageUpload, maxFiles, fileTypes, fileSelectionIcons, fileSelectionPlaceholder, imageSelectIcons, imageSelectPlaceholder, maxFileSizeInMB, internalIsDisabled, handleAdd, filesToDisplay, handleDeleteFile, shouldAllowDownload]);
|
|
171
171
|
});
|
|
172
172
|
FileInput.displayName = 'FileInput';
|
|
173
173
|
export default FileInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.js","names":["React","forwardRef","useCallback","useImperativeHandle","useMemo","useState","filterDuplicateFile","filterDuplicateFileUrls","isValidFileType","StyledFileInput","FileList","FileSelect","TSIMG_FILE_TYPES","STREAMINGSERVICE_FILE_TYPES","FileInput","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","shouldPreventImageUpload","ref","internalFiles","setInternalFiles","internalImages","setInternalImages","handleInputClear","clear","handleAddImages","images","newImages","forEach","image","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","types","handleAdd","Array","isArray","handleDeleteFile","id","fileToDelete","filteredFiles","filter","name","filteredImages","internalIsDisabled","filesToDisplay","items","map","type","size","mimeType","url","createElement","displayName"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { StyledFileInput } from './FileInput.styles';\nimport FileList, { IFileItem } from '../file-list/FileList';\nimport FileSelect, { UploadedFile } from '../file-select/FileSelect';\n\nexport const TSIMG_FILE_TYPES =\n 'image/png, image/jpg, image/jpeg, image/gif, image/webp, image/svg+xml, image/avif';\n\nexport const STREAMINGSERVICE_FILE_TYPES =\n 'video/mp4, video/webm, video/avi, video/flv, video/wmv, video/mpg, video/quicktime';\n\nexport type FileInputProps = {\n /**\n * Already uploaded files to display.\n */\n files?: IFileItem[];\n /**\n * An array of icons that should be displayed inside the FileInput\n */\n fileSelectionIcons?: string[];\n /**\n * The text that should be displayed inside the FileInput.\n */\n fileSelectionPlaceholder?: string;\n /**\n * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n */\n fileTypes?: string;\n /**\n * The icon of the image selection.\n */\n imageSelectIcons?: string[];\n /**\n * If set, pictures can be select via Pixabay.\n */\n imageSelectPlaceholder?: string;\n /**\n * Whether the FileInput is disabled.\n */\n isDisabled?: boolean;\n /**\n * The maximum amount of Files that can be uploaded.\n */\n maxFiles?: number;\n /**\n * The maximum size of a file in MB.\n */\n maxFileSizeInMB?: number;\n /**\n * A function to be executed when files are added.\n */\n onAdd?: (files: File[] | UploadedFile[]) => void;\n /**\n * Function to be executed when the maximum amount of Files are reached.\n */\n onMaxFilesReached?: () => void;\n /**\n * A function to be executed when a file is removed.\n */\n onRemove?: (file: File | IFileItem | UploadedFile) => void;\n /**\n * Whether the image upload should be prevented.\n */\n shouldPreventImageUpload?: boolean;\n};\n\nexport type FileInputRef = {\n clear: () => void;\n};\n\nconst FileInput = forwardRef<FileInputRef, FileInputProps>(\n (\n {\n fileSelectionIcons = ['fa fa-upload'],\n imageSelectIcons = ['ts-image'],\n fileTypes,\n onMaxFilesReached,\n maxFiles,\n onRemove,\n files,\n isDisabled,\n maxFileSizeInMB,\n onAdd,\n fileSelectionPlaceholder = 'Dateien hochladen',\n imageSelectPlaceholder,\n shouldPreventImageUpload = false,\n },\n ref,\n ) => {\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n const [internalImages, setInternalImages] = useState<UploadedFile[]>([]);\n\n const handleInputClear = () => {\n setInternalFiles([]);\n setInternalImages([]);\n };\n\n useImperativeHandle(\n ref,\n () => ({\n clear: handleInputClear,\n }),\n [],\n );\n\n const handleAddImages = useCallback(\n (images: UploadedFile[]) => {\n const newImages: UploadedFile[] = [];\n\n images.forEach((image) => {\n if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n newImages.push(image);\n }\n });\n\n let tmp = newImages;\n\n if (maxFiles) {\n tmp = newImages.slice(\n 0,\n maxFiles -\n (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalImages((prevState) => [...prevState, ...tmp]);\n },\n [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n );\n\n const handleAddFiles = useCallback(\n (newFiles: File[]) => {\n const newFileItems: File[] = [];\n\n newFiles.forEach((file) => {\n if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n return;\n }\n\n if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n newFileItems.push(file);\n }\n });\n\n let tmp = newFileItems;\n\n if (maxFiles) {\n tmp = newFileItems.slice(\n 0,\n maxFiles - (internalFiles.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalFiles((prevState) => [...prevState, ...tmp]);\n },\n [fileTypes, files?.length, internalFiles, maxFiles, onAdd],\n );\n\n const handleAdd = useCallback(\n (newFiles: File[] | UploadedFile[]) => {\n if (Array.isArray(newFiles) && newFiles.length > 0) {\n if (newFiles[0] && 'url' in newFiles[0]) {\n handleAddImages(newFiles as UploadedFile[]);\n } else {\n handleAddFiles(newFiles as File[]);\n }\n }\n },\n [handleAddFiles, handleAddImages],\n );\n\n const handleDeleteFile = useCallback(\n (id: string) => {\n let fileToDelete: File | IFileItem | UploadedFile | undefined;\n\n const filteredFiles = internalFiles.filter((file) => {\n const { name } = file;\n\n if (name === id) {\n fileToDelete = file;\n }\n\n return name !== id;\n });\n\n setInternalFiles(filteredFiles);\n\n if (!fileToDelete) {\n const filteredImages = internalImages.filter((image) => {\n if (image.name === id) {\n fileToDelete = image;\n }\n\n return image.name !== id;\n });\n\n setInternalImages(filteredImages);\n }\n\n if (!fileToDelete) {\n files?.forEach((file) => {\n if (file.id === id || file.name === id) {\n fileToDelete = file;\n }\n });\n }\n\n if (!fileToDelete || typeof onRemove !== 'function') {\n return;\n }\n\n onRemove(fileToDelete);\n },\n [files, internalFiles, internalImages, onRemove],\n );\n\n const internalIsDisabled = useMemo(() => {\n if (isDisabled) {\n return true;\n }\n\n if (maxFiles) {\n if (internalFiles.length + internalImages.length >= maxFiles) {\n if (typeof onMaxFilesReached === 'function') {\n onMaxFilesReached();\n }\n\n return true;\n }\n }\n\n return false;\n }, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);\n\n const filesToDisplay: IFileItem[] = useMemo(() => {\n const items: IFileItem[] = internalFiles.map(({ type, name, size }) => ({\n id: name,\n name,\n size,\n mimeType: type,\n }));\n\n internalImages.forEach((image) => {\n items.push({\n id: image.name ?? image.url,\n name: image.name ?? image.url,\n size: image.size ?? 0,\n mimeType: 'image/png',\n });\n });\n\n files?.forEach((file) => {\n items.push(file);\n });\n\n return items;\n }, [files, internalFiles, internalImages]);\n\n return useMemo(\n () => (\n <StyledFileInput>\n <FileSelect\n shouldPreventImageUpload={shouldPreventImageUpload}\n maxFiles={maxFiles}\n fileTypes={fileTypes}\n fileSelectionIcons={fileSelectionIcons}\n fileSelectionPlaceholder={fileSelectionPlaceholder}\n imageSelectIcons={imageSelectIcons}\n imageSelectPlaceholder={imageSelectPlaceholder}\n maxFileSizeInMB={maxFileSizeInMB}\n isDisabled={internalIsDisabled}\n onAdd={handleAdd}\n />\n <FileList files={filesToDisplay} onRemove={handleDeleteFile} />\n </StyledFileInput>\n ),\n [\n shouldPreventImageUpload,\n maxFiles,\n fileTypes,\n fileSelectionIcons,\n fileSelectionPlaceholder,\n imageSelectIcons,\n imageSelectPlaceholder,\n maxFileSizeInMB,\n internalIsDisabled,\n handleAdd,\n filesToDisplay,\n handleDeleteFile,\n ],\n );\n },\n);\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,WAAW,EAAEC,mBAAmB,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC9F,SAASC,mBAAmB,EAAEC,uBAAuB,EAAEC,eAAe,QAAQ,kBAAkB;AAChG,SAASC,eAAe,QAAQ,oBAAoB;AACpD,OAAOC,QAAQ,MAAqB,uBAAuB;AAC3D,OAAOC,UAAU,MAAwB,2BAA2B;AAEpE,OAAO,MAAMC,gBAAgB,GACzB,oFAAoF;AAExF,OAAO,MAAMC,2BAA2B,GACpC,oFAAoF;AA6DxF,MAAMC,SAAS,gBAAGb,UAAU,CACxB,CACI;EACIc,kBAAkB,GAAG,CAAC,cAAc,CAAC;EACrCC,gBAAgB,GAAG,CAAC,UAAU,CAAC;EAC/BC,SAAS;EACTC,iBAAiB;EACjBC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,UAAU;EACVC,eAAe;EACfC,KAAK;EACLC,wBAAwB,GAAG,mBAAmB;EAC9CC,sBAAsB;EACtBC,wBAAwB,GAAG;AAC/B,CAAC,EACDC,GAAG,KACF;EACD,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGzB,QAAQ,CAAS,EAAE,CAAC;EAC9D,MAAM,CAAC0B,cAAc,EAAEC,iBAAiB,CAAC,GAAG3B,QAAQ,CAAiB,EAAE,CAAC;EAExE,MAAM4B,gBAAgB,GAAGA,CAAA,KAAM;IAC3BH,gBAAgB,CAAC,EAAE,CAAC;IACpBE,iBAAiB,CAAC,EAAE,CAAC;EACzB,CAAC;EAED7B,mBAAmB,CACfyB,GAAG,EACH,OAAO;IACHM,KAAK,EAAED;EACX,CAAC,CAAC,EACF,EACJ,CAAC;EAED,MAAME,eAAe,GAAGjC,WAAW,CAC9BkC,MAAsB,IAAK;IACxB,MAAMC,SAAyB,GAAG,EAAE;IAEpCD,MAAM,CAACE,OAAO,CAAEC,KAAK,IAAK;MACtB,IAAI,CAAChC,uBAAuB,CAAC;QAAEc,KAAK,EAAEU,cAAc;QAAES,OAAO,EAAED;MAAM,CAAC,CAAC,EAAE;QACrEF,SAAS,CAACI,IAAI,CAACF,KAAK,CAAC;MACzB;IACJ,CAAC,CAAC;IAEF,IAAIG,GAAG,GAAGL,SAAS;IAEnB,IAAIlB,QAAQ,EAAE;MACVuB,GAAG,GAAGL,SAAS,CAACM,KAAK,CACjB,CAAC,EACDxB,QAAQ,IACHU,aAAa,CAACe,MAAM,GAAGb,cAAc,CAACa,MAAM,IAAIvB,KAAK,EAAEuB,MAAM,IAAI,CAAC,CAAC,CAC5E,CAAC;IACL;IAEA,IAAIF,GAAG,CAACE,MAAM,GAAG,CAAC,IAAI,OAAOpB,KAAK,KAAK,UAAU,EAAE;MAC/CA,KAAK,CAACkB,GAAG,CAAC;IACd;IAEAV,iBAAiB,CAAEa,SAAS,IAAK,CAAC,GAAGA,SAAS,EAAE,GAAGH,GAAG,CAAC,CAAC;EAC5D,CAAC,EACD,CAACrB,KAAK,EAAEuB,MAAM,EAAEf,aAAa,CAACe,MAAM,EAAEb,cAAc,EAAEZ,QAAQ,EAAEK,KAAK,CACzE,CAAC;EAED,MAAMsB,cAAc,GAAG5C,WAAW,CAC7B6C,QAAgB,IAAK;IAClB,MAAMC,YAAoB,GAAG,EAAE;IAE/BD,QAAQ,CAACT,OAAO,CAAEW,IAAI,IAAK;MACvB,IAAIhC,SAAS,IAAI,CAACT,eAAe,CAAC;QAAEyC,IAAI;QAAEC,KAAK,EAAEjC;MAAU,CAAC,CAAC,EAAE;QAC3D;MACJ;MAEA,IAAIgC,IAAI,IAAI,CAAC3C,mBAAmB,CAAC;QAAEe,KAAK,EAAEQ,aAAa;QAAEW,OAAO,EAAES;MAAK,CAAC,CAAC,EAAE;QACvED,YAAY,CAACP,IAAI,CAACQ,IAAI,CAAC;MAC3B;IACJ,CAAC,CAAC;IAEF,IAAIP,GAAG,GAAGM,YAAY;IAEtB,IAAI7B,QAAQ,EAAE;MACVuB,GAAG,GAAGM,YAAY,CAACL,KAAK,CACpB,CAAC,EACDxB,QAAQ,IAAIU,aAAa,CAACe,MAAM,IAAIvB,KAAK,EAAEuB,MAAM,IAAI,CAAC,CAAC,CAC3D,CAAC;IACL;IAEA,IAAIF,GAAG,CAACE,MAAM,GAAG,CAAC,IAAI,OAAOpB,KAAK,KAAK,UAAU,EAAE;MAC/CA,KAAK,CAACkB,GAAG,CAAC;IACd;IAEAZ,gBAAgB,CAAEe,SAAS,IAAK,CAAC,GAAGA,SAAS,EAAE,GAAGH,GAAG,CAAC,CAAC;EAC3D,CAAC,EACD,CAACzB,SAAS,EAAEI,KAAK,EAAEuB,MAAM,EAAEf,aAAa,EAAEV,QAAQ,EAAEK,KAAK,CAC7D,CAAC;EAED,MAAM2B,SAAS,GAAGjD,WAAW,CACxB6C,QAAiC,IAAK;IACnC,IAAIK,KAAK,CAACC,OAAO,CAACN,QAAQ,CAAC,IAAIA,QAAQ,CAACH,MAAM,GAAG,CAAC,EAAE;MAChD,IAAIG,QAAQ,CAAC,CAAC,CAAC,IAAI,KAAK,IAAIA,QAAQ,CAAC,CAAC,CAAC,EAAE;QACrCZ,eAAe,CAACY,QAA0B,CAAC;MAC/C,CAAC,MAAM;QACHD,cAAc,CAACC,QAAkB,CAAC;MACtC;IACJ;EACJ,CAAC,EACD,CAACD,cAAc,EAAEX,eAAe,CACpC,CAAC;EAED,MAAMmB,gBAAgB,GAAGpD,WAAW,CAC/BqD,EAAU,IAAK;IACZ,IAAIC,YAAyD;IAE7D,MAAMC,aAAa,GAAG5B,aAAa,CAAC6B,MAAM,CAAET,IAAI,IAAK;MACjD,MAAM;QAAEU;MAAK,CAAC,GAAGV,IAAI;MAErB,IAAIU,IAAI,KAAKJ,EAAE,EAAE;QACbC,YAAY,GAAGP,IAAI;MACvB;MAEA,OAAOU,IAAI,KAAKJ,EAAE;IACtB,CAAC,CAAC;IAEFzB,gBAAgB,CAAC2B,aAAa,CAAC;IAE/B,IAAI,CAACD,YAAY,EAAE;MACf,MAAMI,cAAc,GAAG7B,cAAc,CAAC2B,MAAM,CAAEnB,KAAK,IAAK;QACpD,IAAIA,KAAK,CAACoB,IAAI,KAAKJ,EAAE,EAAE;UACnBC,YAAY,GAAGjB,KAAK;QACxB;QAEA,OAAOA,KAAK,CAACoB,IAAI,KAAKJ,EAAE;MAC5B,CAAC,CAAC;MAEFvB,iBAAiB,CAAC4B,cAAc,CAAC;IACrC;IAEA,IAAI,CAACJ,YAAY,EAAE;MACfnC,KAAK,EAAEiB,OAAO,CAAEW,IAAI,IAAK;QACrB,IAAIA,IAAI,CAACM,EAAE,KAAKA,EAAE,IAAIN,IAAI,CAACU,IAAI,KAAKJ,EAAE,EAAE;UACpCC,YAAY,GAAGP,IAAI;QACvB;MACJ,CAAC,CAAC;IACN;IAEA,IAAI,CAACO,YAAY,IAAI,OAAOpC,QAAQ,KAAK,UAAU,EAAE;MACjD;IACJ;IAEAA,QAAQ,CAACoC,YAAY,CAAC;EAC1B,CAAC,EACD,CAACnC,KAAK,EAAEQ,aAAa,EAAEE,cAAc,EAAEX,QAAQ,CACnD,CAAC;EAED,MAAMyC,kBAAkB,GAAGzD,OAAO,CAAC,MAAM;IACrC,IAAIkB,UAAU,EAAE;MACZ,OAAO,IAAI;IACf;IAEA,IAAIH,QAAQ,EAAE;MACV,IAAIU,aAAa,CAACe,MAAM,GAAGb,cAAc,CAACa,MAAM,IAAIzB,QAAQ,EAAE;QAC1D,IAAI,OAAOD,iBAAiB,KAAK,UAAU,EAAE;UACzCA,iBAAiB,CAAC,CAAC;QACvB;QAEA,OAAO,IAAI;MACf;IACJ;IAEA,OAAO,KAAK;EAChB,CAAC,EAAE,CAACW,aAAa,CAACe,MAAM,EAAEb,cAAc,CAACa,MAAM,EAAEtB,UAAU,EAAEH,QAAQ,EAAED,iBAAiB,CAAC,CAAC;EAE1F,MAAM4C,cAA2B,GAAG1D,OAAO,CAAC,MAAM;IAC9C,MAAM2D,KAAkB,GAAGlC,aAAa,CAACmC,GAAG,CAAC,CAAC;MAAEC,IAAI;MAAEN,IAAI;MAAEO;IAAK,CAAC,MAAM;MACpEX,EAAE,EAAEI,IAAI;MACRA,IAAI;MACJO,IAAI;MACJC,QAAQ,EAAEF;IACd,CAAC,CAAC,CAAC;IAEHlC,cAAc,CAACO,OAAO,CAAEC,KAAK,IAAK;MAC9BwB,KAAK,CAACtB,IAAI,CAAC;QACPc,EAAE,EAAEhB,KAAK,CAACoB,IAAI,IAAIpB,KAAK,CAAC6B,GAAG;QAC3BT,IAAI,EAAEpB,KAAK,CAACoB,IAAI,IAAIpB,KAAK,CAAC6B,GAAG;QAC7BF,IAAI,EAAE3B,KAAK,CAAC2B,IAAI,IAAI,CAAC;QACrBC,QAAQ,EAAE;MACd,CAAC,CAAC;IACN,CAAC,CAAC;IAEF9C,KAAK,EAAEiB,OAAO,CAAEW,IAAI,IAAK;MACrBc,KAAK,CAACtB,IAAI,CAACQ,IAAI,CAAC;IACpB,CAAC,CAAC;IAEF,OAAOc,KAAK;EAChB,CAAC,EAAE,CAAC1C,KAAK,EAAEQ,aAAa,EAAEE,cAAc,CAAC,CAAC;EAE1C,OAAO3B,OAAO,CACV,mBACIJ,KAAA,CAAAqE,aAAA,CAAC5D,eAAe,qBACZT,KAAA,CAAAqE,aAAA,CAAC1D,UAAU;IACPgB,wBAAwB,EAAEA,wBAAyB;IACnDR,QAAQ,EAAEA,QAAS;IACnBF,SAAS,EAAEA,SAAU;IACrBF,kBAAkB,EAAEA,kBAAmB;IACvCU,wBAAwB,EAAEA,wBAAyB;IACnDT,gBAAgB,EAAEA,gBAAiB;IACnCU,sBAAsB,EAAEA,sBAAuB;IAC/CH,eAAe,EAAEA,eAAgB;IACjCD,UAAU,EAAEuC,kBAAmB;IAC/BrC,KAAK,EAAE2B;EAAU,CACpB,CAAC,eACFnD,KAAA,CAAAqE,aAAA,CAAC3D,QAAQ;IAACW,KAAK,EAAEyC,cAAe;IAAC1C,QAAQ,EAAEkC;EAAiB,CAAE,CACjD,CACpB,EACD,CACI3B,wBAAwB,EACxBR,QAAQ,EACRF,SAAS,EACTF,kBAAkB,EAClBU,wBAAwB,EACxBT,gBAAgB,EAChBU,sBAAsB,EACtBH,eAAe,EACfsC,kBAAkB,EAClBV,SAAS,EACTW,cAAc,EACdR,gBAAgB,CAExB,CAAC;AACL,CACJ,CAAC;AAEDxC,SAAS,CAACwD,WAAW,GAAG,WAAW;AAEnC,eAAexD,SAAS","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"FileInput.js","names":["React","forwardRef","useCallback","useImperativeHandle","useMemo","useState","filterDuplicateFile","filterDuplicateFileUrls","isValidFileType","StyledFileInput","FileList","FileSelect","TSIMG_FILE_TYPES","STREAMINGSERVICE_FILE_TYPES","FileInput","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","shouldPreventImageUpload","shouldAllowDownload","ref","internalFiles","setInternalFiles","internalImages","setInternalImages","handleInputClear","clear","handleAddImages","images","newImages","forEach","image","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","types","handleAdd","Array","isArray","handleDeleteFile","id","fileToDelete","filteredFiles","filter","name","filteredImages","internalIsDisabled","filesToDisplay","items","map","size","mimeType","type","source","url","createElement","displayName"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { StyledFileInput } from './FileInput.styles';\nimport FileList, { IFileItem } from '../file-list/FileList';\nimport FileSelect, { UploadedFile } from '../file-select/FileSelect';\n\nexport const TSIMG_FILE_TYPES =\n 'image/png, image/jpg, image/jpeg, image/gif, image/webp, image/svg+xml, image/avif';\n\nexport const STREAMINGSERVICE_FILE_TYPES =\n 'video/mp4, video/webm, video/avi, video/flv, video/wmv, video/mpg, video/quicktime';\n\nexport type FileInputProps = {\n /**\n * Already uploaded files to display.\n */\n files?: IFileItem[];\n /**\n * An array of icons that should be displayed inside the FileInput\n */\n fileSelectionIcons?: string[];\n /**\n * The text that should be displayed inside the FileInput.\n */\n fileSelectionPlaceholder?: string;\n /**\n * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n */\n fileTypes?: string;\n /**\n * The icon of the image selection.\n */\n imageSelectIcons?: string[];\n /**\n * If set, pictures can be select via Pixabay.\n */\n imageSelectPlaceholder?: string;\n /**\n * Whether the FileInput is disabled.\n */\n isDisabled?: boolean;\n /**\n * The maximum amount of Files that can be uploaded.\n */\n maxFiles?: number;\n /**\n * The maximum size of a file in MB.\n */\n maxFileSizeInMB?: number;\n /**\n * A function to be executed when files are added.\n */\n onAdd?: (files: File[] | UploadedFile[]) => void;\n /**\n * Function to be executed when the maximum amount of Files are reached.\n */\n onMaxFilesReached?: () => void;\n /**\n * A function to be executed when a file is removed.\n */\n onRemove?: (file: File | IFileItem | UploadedFile) => void;\n /**\n * Whether the image upload should be prevented.\n */\n shouldPreventImageUpload?: boolean;\n /**\n * Whether to show a download icon for files that have a `source` set.\n */\n shouldAllowDownload?: boolean;\n};\n\nexport type FileInputRef = {\n clear: () => void;\n};\n\nconst FileInput = forwardRef<FileInputRef, FileInputProps>(\n (\n {\n fileSelectionIcons = ['fa fa-upload'],\n imageSelectIcons = ['ts-image'],\n fileTypes,\n onMaxFilesReached,\n maxFiles,\n onRemove,\n files,\n isDisabled,\n maxFileSizeInMB,\n onAdd,\n fileSelectionPlaceholder = 'Dateien hochladen',\n imageSelectPlaceholder,\n shouldPreventImageUpload = false,\n shouldAllowDownload,\n },\n ref,\n ) => {\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n const [internalImages, setInternalImages] = useState<UploadedFile[]>([]);\n\n const handleInputClear = () => {\n setInternalFiles([]);\n setInternalImages([]);\n };\n\n useImperativeHandle(\n ref,\n () => ({\n clear: handleInputClear,\n }),\n [],\n );\n\n const handleAddImages = useCallback(\n (images: UploadedFile[]) => {\n const newImages: UploadedFile[] = [];\n\n images.forEach((image) => {\n if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n newImages.push(image);\n }\n });\n\n let tmp = newImages;\n\n if (maxFiles) {\n tmp = newImages.slice(\n 0,\n maxFiles -\n (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalImages((prevState) => [...prevState, ...tmp]);\n },\n [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n );\n\n const handleAddFiles = useCallback(\n (newFiles: File[]) => {\n const newFileItems: File[] = [];\n\n newFiles.forEach((file) => {\n if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n return;\n }\n\n if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n newFileItems.push(file);\n }\n });\n\n let tmp = newFileItems;\n\n if (maxFiles) {\n tmp = newFileItems.slice(\n 0,\n maxFiles - (internalFiles.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalFiles((prevState) => [...prevState, ...tmp]);\n },\n [fileTypes, files?.length, internalFiles, maxFiles, onAdd],\n );\n\n const handleAdd = useCallback(\n (newFiles: File[] | UploadedFile[]) => {\n if (Array.isArray(newFiles) && newFiles.length > 0) {\n if (newFiles[0] && 'url' in newFiles[0]) {\n handleAddImages(newFiles as UploadedFile[]);\n } else {\n handleAddFiles(newFiles as File[]);\n }\n }\n },\n [handleAddFiles, handleAddImages],\n );\n\n const handleDeleteFile = useCallback(\n (id: string) => {\n let fileToDelete: File | IFileItem | UploadedFile | undefined;\n\n const filteredFiles = internalFiles.filter((file) => {\n const { name } = file;\n\n if (name === id) {\n fileToDelete = file;\n }\n\n return name !== id;\n });\n\n setInternalFiles(filteredFiles);\n\n if (!fileToDelete) {\n const filteredImages = internalImages.filter((image) => {\n if (image.name === id) {\n fileToDelete = image;\n }\n\n return image.name !== id;\n });\n\n setInternalImages(filteredImages);\n }\n\n if (!fileToDelete) {\n files?.forEach((file) => {\n if (file.id === id || file.name === id) {\n fileToDelete = file;\n }\n });\n }\n\n if (!fileToDelete || typeof onRemove !== 'function') {\n return;\n }\n\n onRemove(fileToDelete);\n },\n [files, internalFiles, internalImages, onRemove],\n );\n\n const internalIsDisabled = useMemo(() => {\n if (isDisabled) {\n return true;\n }\n\n if (maxFiles) {\n if (internalFiles.length + internalImages.length >= maxFiles) {\n if (typeof onMaxFilesReached === 'function') {\n onMaxFilesReached();\n }\n\n return true;\n }\n }\n\n return false;\n }, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);\n\n const filesToDisplay: IFileItem[] = useMemo(() => {\n const items: IFileItem[] = internalFiles.map((file) => ({\n id: file.name,\n name: file.name,\n size: file.size,\n mimeType: file.type,\n source: file,\n }));\n\n internalImages.forEach((image) => {\n items.push({\n id: image.name ?? image.url,\n name: image.name ?? image.url,\n size: image.size ?? 0,\n mimeType: 'image/png',\n source: image.url,\n });\n });\n\n files?.forEach((file) => {\n items.push(file);\n });\n\n return items;\n }, [files, internalFiles, internalImages]);\n\n return useMemo(\n () => (\n <StyledFileInput>\n <FileSelect\n shouldPreventImageUpload={shouldPreventImageUpload}\n maxFiles={maxFiles}\n fileTypes={fileTypes}\n fileSelectionIcons={fileSelectionIcons}\n fileSelectionPlaceholder={fileSelectionPlaceholder}\n imageSelectIcons={imageSelectIcons}\n imageSelectPlaceholder={imageSelectPlaceholder}\n maxFileSizeInMB={maxFileSizeInMB}\n isDisabled={internalIsDisabled}\n onAdd={handleAdd}\n />\n <FileList\n files={filesToDisplay}\n onRemove={handleDeleteFile}\n shouldAllowDownload={shouldAllowDownload}\n />\n </StyledFileInput>\n ),\n [\n shouldPreventImageUpload,\n maxFiles,\n fileTypes,\n fileSelectionIcons,\n fileSelectionPlaceholder,\n imageSelectIcons,\n imageSelectPlaceholder,\n maxFileSizeInMB,\n internalIsDisabled,\n handleAdd,\n filesToDisplay,\n handleDeleteFile,\n shouldAllowDownload,\n ],\n );\n },\n);\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -4,21 +4,25 @@ import { StyledFileList } from './FileList.styles';
|
|
|
4
4
|
import FileItem from './file-item/FileItem';
|
|
5
5
|
const FileList = ({
|
|
6
6
|
files,
|
|
7
|
-
onRemove
|
|
7
|
+
onRemove,
|
|
8
|
+
shouldAllowDownload
|
|
8
9
|
}) => {
|
|
9
10
|
const content = useMemo(() => files?.map(({
|
|
10
11
|
mimeType,
|
|
11
12
|
size,
|
|
12
13
|
name,
|
|
13
|
-
id
|
|
14
|
+
id,
|
|
15
|
+
source
|
|
14
16
|
}) => /*#__PURE__*/React.createElement(FileItem, {
|
|
15
17
|
key: id,
|
|
16
18
|
id: id,
|
|
17
19
|
name: name,
|
|
18
20
|
size: size,
|
|
19
21
|
mimeType: mimeType,
|
|
20
|
-
|
|
21
|
-
|
|
22
|
+
source: source,
|
|
23
|
+
onRemove: onRemove,
|
|
24
|
+
shouldAllowDownload: shouldAllowDownload
|
|
25
|
+
})), [files, onRemove, shouldAllowDownload]);
|
|
22
26
|
return useMemo(() => /*#__PURE__*/React.createElement(StyledFileList, null, /*#__PURE__*/React.createElement(List, null, content)), [content]);
|
|
23
27
|
};
|
|
24
28
|
FileList.displayName = 'FileList';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileList.js","names":["React","useMemo","List","StyledFileList","FileItem","FileList","files","onRemove","content","map","mimeType","size","name","id","createElement","key","displayName"],"sources":["../../../../src/components/file-list/FileList.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport List from '../list/List';\nimport { StyledFileList } from './FileList.styles';\nimport FileItem from './file-item/FileItem';\n\nexport interface IFileItem {\n id: string;\n name: string;\n size?: number;\n mimeType: string;\n}\n\nexport type FileListProps = {\n /**\n * Already uploaded files to display.\n */\n files?: IFileItem[];\n /**\n * A function to be executed when a file is removed.\n */\n onRemove?: (id: IFileItem['id']) => void;\n};\n\nconst FileList: FC<FileListProps> = ({ files, onRemove }) => {\n const content = useMemo(\n () =>\n files?.map(({ mimeType, size, name, id }) => (\n <FileItem\n key={id}\n id={id}\n name={name}\n size={size}\n mimeType={mimeType}\n onRemove={onRemove}\n />\n )),\n [files, onRemove],\n );\n\n return useMemo(\n () => (\n <StyledFileList>\n <List>{content}</List>\n </StyledFileList>\n ),\n [content],\n );\n};\n\nFileList.displayName = 'FileList';\n\nexport default FileList;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,OAAO,QAAQ,OAAO;AAC1C,OAAOC,IAAI,MAAM,cAAc;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,OAAOC,QAAQ,MAAM,sBAAsB;
|
|
1
|
+
{"version":3,"file":"FileList.js","names":["React","useMemo","List","StyledFileList","FileItem","FileList","files","onRemove","shouldAllowDownload","content","map","mimeType","size","name","id","source","createElement","key","displayName"],"sources":["../../../../src/components/file-list/FileList.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport List from '../list/List';\nimport { StyledFileList } from './FileList.styles';\nimport FileItem from './file-item/FileItem';\n\nexport interface IFileItem {\n id: string;\n name: string;\n size?: number;\n mimeType: string;\n source?: string | File;\n}\n\nexport type FileListProps = {\n /**\n * Already uploaded files to display.\n */\n files?: IFileItem[];\n /**\n * A function to be executed when a file is removed.\n */\n onRemove?: (id: IFileItem['id']) => void;\n /**\n * Whether to show a download icon for files that have a `source` set.\n */\n shouldAllowDownload?: boolean;\n};\n\nconst FileList: FC<FileListProps> = ({ files, onRemove, shouldAllowDownload }) => {\n const content = useMemo(\n () =>\n files?.map(({ mimeType, size, name, id, source }) => (\n <FileItem\n key={id}\n id={id}\n name={name}\n size={size}\n mimeType={mimeType}\n source={source}\n onRemove={onRemove}\n shouldAllowDownload={shouldAllowDownload}\n />\n )),\n [files, onRemove, shouldAllowDownload],\n );\n\n return useMemo(\n () => (\n <StyledFileList>\n <List>{content}</List>\n </StyledFileList>\n ),\n [content],\n );\n};\n\nFileList.displayName = 'FileList';\n\nexport default FileList;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,OAAO,QAAQ,OAAO;AAC1C,OAAOC,IAAI,MAAM,cAAc;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,OAAOC,QAAQ,MAAM,sBAAsB;AAyB3C,MAAMC,QAA2B,GAAGA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAAoB,CAAC,KAAK;EAC9E,MAAMC,OAAO,GAAGR,OAAO,CACnB,MACIK,KAAK,EAAEI,GAAG,CAAC,CAAC;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAEC,EAAE;IAAEC;EAAO,CAAC,kBAC5Cf,KAAA,CAAAgB,aAAA,CAACZ,QAAQ;IACLa,GAAG,EAAEH,EAAG;IACRA,EAAE,EAAEA,EAAG;IACPD,IAAI,EAAEA,IAAK;IACXD,IAAI,EAAEA,IAAK;IACXD,QAAQ,EAAEA,QAAS;IACnBI,MAAM,EAAEA,MAAO;IACfR,QAAQ,EAAEA,QAAS;IACnBC,mBAAmB,EAAEA;EAAoB,CAC5C,CACJ,CAAC,EACN,CAACF,KAAK,EAAEC,QAAQ,EAAEC,mBAAmB,CACzC,CAAC;EAED,OAAOP,OAAO,CACV,mBACID,KAAA,CAAAgB,aAAA,CAACb,cAAc,qBACXH,KAAA,CAAAgB,aAAA,CAACd,IAAI,QAAEO,OAAc,CACT,CACnB,EACD,CAACA,OAAO,CACZ,CAAC;AACL,CAAC;AAEDJ,QAAQ,CAACa,WAAW,GAAG,UAAU;AAEjC,eAAeb,QAAQ","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useMemo } from 'react';
|
|
1
|
+
import React, { useCallback, useMemo } from 'react';
|
|
2
2
|
import { getHumanSize, getIconByMimeType } from '../../../utils/file';
|
|
3
3
|
import Icon from '../../icon/Icon';
|
|
4
4
|
import ListItem from '../../list/list-item/ListItem';
|
|
@@ -8,7 +8,9 @@ const FileItem = ({
|
|
|
8
8
|
onRemove,
|
|
9
9
|
size,
|
|
10
10
|
name,
|
|
11
|
-
id
|
|
11
|
+
id,
|
|
12
|
+
source,
|
|
13
|
+
shouldAllowDownload
|
|
12
14
|
}) => {
|
|
13
15
|
const humanFileSize = useMemo(() => {
|
|
14
16
|
if (typeof size === 'number') {
|
|
@@ -17,15 +19,63 @@ const FileItem = ({
|
|
|
17
19
|
return undefined;
|
|
18
20
|
}, [size]);
|
|
19
21
|
const icon = useMemo(() => getIconByMimeType(mimeType), [mimeType]);
|
|
22
|
+
const handleDownload = useCallback(() => {
|
|
23
|
+
if (!source) return;
|
|
24
|
+
if (source instanceof File) {
|
|
25
|
+
const url = URL.createObjectURL(source);
|
|
26
|
+
const a = document.createElement('a');
|
|
27
|
+
a.href = url;
|
|
28
|
+
a.download = name;
|
|
29
|
+
document.body.appendChild(a);
|
|
30
|
+
a.click();
|
|
31
|
+
document.body.removeChild(a);
|
|
32
|
+
URL.revokeObjectURL(url);
|
|
33
|
+
} else {
|
|
34
|
+
// Try fetching as blob to force download. If CORS blocks it,
|
|
35
|
+
// fall back to opening the URL directly.
|
|
36
|
+
fetch(source).then(res => {
|
|
37
|
+
if (!res.ok) throw new Error('fetch failed');
|
|
38
|
+
return res.blob();
|
|
39
|
+
}).then(blob => {
|
|
40
|
+
const url = URL.createObjectURL(blob);
|
|
41
|
+
const a = document.createElement('a');
|
|
42
|
+
a.href = url;
|
|
43
|
+
a.download = name;
|
|
44
|
+
document.body.appendChild(a);
|
|
45
|
+
a.click();
|
|
46
|
+
document.body.removeChild(a);
|
|
47
|
+
URL.revokeObjectURL(url);
|
|
48
|
+
}).catch(() => {
|
|
49
|
+
// CORS or network error: fall back to direct link
|
|
50
|
+
const a = document.createElement('a');
|
|
51
|
+
a.href = source;
|
|
52
|
+
a.download = name;
|
|
53
|
+
a.rel = 'noopener noreferrer';
|
|
54
|
+
a.target = '_blank';
|
|
55
|
+
document.body.appendChild(a);
|
|
56
|
+
a.click();
|
|
57
|
+
document.body.removeChild(a);
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
}, [name, source]);
|
|
20
61
|
return useMemo(() => /*#__PURE__*/React.createElement(StyledFileItem, null, /*#__PURE__*/React.createElement(ListItem, {
|
|
21
62
|
title: name,
|
|
22
63
|
subtitle: humanFileSize,
|
|
23
64
|
icons: [icon],
|
|
24
|
-
rightElements:
|
|
65
|
+
rightElements: /*#__PURE__*/React.createElement("span", {
|
|
66
|
+
style: {
|
|
67
|
+
display: 'flex',
|
|
68
|
+
gap: '8px',
|
|
69
|
+
alignItems: 'center'
|
|
70
|
+
}
|
|
71
|
+
}, shouldAllowDownload && source && /*#__PURE__*/React.createElement(Icon, {
|
|
72
|
+
icons: ['fa fa-download'],
|
|
73
|
+
onClick: handleDownload
|
|
74
|
+
}), typeof onRemove === 'function' && /*#__PURE__*/React.createElement(Icon, {
|
|
25
75
|
icons: ['ts-wrong'],
|
|
26
76
|
onClick: () => onRemove(id)
|
|
27
|
-
})
|
|
28
|
-
})), [humanFileSize, icon, id, name, onRemove]);
|
|
77
|
+
}))
|
|
78
|
+
})), [handleDownload, humanFileSize, icon, id, name, onRemove, shouldAllowDownload, source]);
|
|
29
79
|
};
|
|
30
80
|
FileItem.displayName = 'FileList';
|
|
31
81
|
export default FileItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileItem.js","names":["React","useMemo","getHumanSize","getIconByMimeType","Icon","ListItem","StyledFileItem","FileItem","mimeType","onRemove","size","name","id","humanFileSize","undefined","icon","createElement","title","subtitle","icons","rightElements","onClick","displayName"],"sources":["../../../../../src/components/file-list/file-item/FileItem.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport { getHumanSize, getIconByMimeType } from '../../../utils/file';\nimport Icon from '../../icon/Icon';\nimport ListItem from '../../list/list-item/ListItem';\nimport type { IFileItem } from '../FileList';\nimport { StyledFileItem } from './FileItem.styles';\n\nexport type FileItemProps = IFileItem & {\n onRemove?: (name: string) => void;\n};\n\nconst FileItem: FC<FileItemProps> = ({
|
|
1
|
+
{"version":3,"file":"FileItem.js","names":["React","useCallback","useMemo","getHumanSize","getIconByMimeType","Icon","ListItem","StyledFileItem","FileItem","mimeType","onRemove","size","name","id","source","shouldAllowDownload","humanFileSize","undefined","icon","handleDownload","File","url","URL","createObjectURL","a","document","createElement","href","download","body","appendChild","click","removeChild","revokeObjectURL","fetch","then","res","ok","Error","blob","catch","rel","target","title","subtitle","icons","rightElements","style","display","gap","alignItems","onClick","displayName"],"sources":["../../../../../src/components/file-list/file-item/FileItem.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { getHumanSize, getIconByMimeType } from '../../../utils/file';\nimport Icon from '../../icon/Icon';\nimport ListItem from '../../list/list-item/ListItem';\nimport type { IFileItem } from '../FileList';\nimport { StyledFileItem } from './FileItem.styles';\n\nexport type FileItemProps = IFileItem & {\n onRemove?: (name: string) => void;\n shouldAllowDownload?: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n mimeType,\n onRemove,\n size,\n name,\n id,\n source,\n shouldAllowDownload,\n}) => {\n const humanFileSize = useMemo(() => {\n if (typeof size === 'number') {\n return getHumanSize(size);\n }\n\n return undefined;\n }, [size]);\n\n const icon = useMemo(() => getIconByMimeType(mimeType), [mimeType]);\n\n const handleDownload = useCallback(() => {\n if (!source) return;\n\n if (source instanceof File) {\n const url = URL.createObjectURL(source);\n const a = document.createElement('a');\n a.href = url;\n a.download = name;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n } else {\n // Try fetching as blob to force download. If CORS blocks it,\n // fall back to opening the URL directly.\n fetch(source)\n .then((res) => {\n if (!res.ok) throw new Error('fetch failed');\n return res.blob();\n })\n .then((blob) => {\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = name;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n })\n .catch(() => {\n // CORS or network error: fall back to direct link\n const a = document.createElement('a');\n a.href = source;\n a.download = name;\n a.rel = 'noopener noreferrer';\n a.target = '_blank';\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n });\n }\n }, [name, source]);\n\n return useMemo(\n () => (\n <StyledFileItem>\n <ListItem\n title={name}\n subtitle={humanFileSize}\n icons={[icon]}\n rightElements={\n <span style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\n {shouldAllowDownload && source && (\n <Icon icons={['fa fa-download']} onClick={handleDownload} />\n )}\n {typeof onRemove === 'function' && (\n <Icon icons={['ts-wrong']} onClick={() => onRemove(id)} />\n )}\n </span>\n }\n />\n </StyledFileItem>\n ),\n [handleDownload, humanFileSize, icon, id, name, onRemove, shouldAllowDownload, source],\n );\n};\n\nFileItem.displayName = 'FileList';\n\nexport default FileItem;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SharingButton.js","names":["React","SharingContextMenu","StyledSharingButtonContainer","Button","SharingButton","link","alignment","container","children","isDisabled","contextMenuRef","useRef","isButtonDisabled","setIsButtonDisabled","useState","handleButtonClick","current","show","handleOnShow","handleOnHide","createElement","ref","onShow","onHide","onClick"],"sources":["../../../../src/components/sharing-button/SharingButton.tsx"],"sourcesContent":["import React, { FunctionComponent, PropsWithChildren } from 'react';\nimport { ContextMenuRef } from '../context-menu/ContextMenu.types';\nimport SharingContextMenu, {\n SharingContextMenuProps,\n} from '../sharing-context-menu/SharingContextMenu';\nimport { StyledSharingButtonContainer } from './SharingButton.styles';\nimport Button from '../button/Button';\nimport { ButtonProps } from '../button/Button.types';\n\nexport type SharingButtonProps = PropsWithChildren<\n Pick<SharingContextMenuProps, 'link' | 'alignment' | 'container'> &\n Pick<ButtonProps, 'isDisabled'>\n>;\n\nconst SharingButton: FunctionComponent<SharingButtonProps> = ({\n link,\n alignment,\n container,\n children,\n isDisabled,\n}) => {\n const contextMenuRef = React.useRef<ContextMenuRef>(null);\n const [isButtonDisabled, setIsButtonDisabled] = React.useState(false);\n\n const handleButtonClick = () => {\n contextMenuRef.current?.show();\n };\n\n const handleOnShow = () => {\n setIsButtonDisabled(true);\n };\n\n const handleOnHide = () => {\n setIsButtonDisabled(false);\n };\n\n return (\n <StyledSharingButtonContainer>\n <SharingContextMenu\n link={link}\n alignment={alignment}\n container={container}\n ref={contextMenuRef}\n onShow={handleOnShow}\n onHide={handleOnHide}\n >\n <Button onClick={handleButtonClick} isDisabled={isButtonDisabled || isDisabled}>\n {children}\n </Button>\n </SharingContextMenu>\n </StyledSharingButtonContainer>\n );\n};\n\nexport default SharingButton;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAgD,OAAO;AAEnE,OAAOC,kBAAkB,MAElB,4CAA4C;AACnD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,OAAOC,MAAM,MAAM,kBAAkB;AAQrC,MAAMC,aAAoD,GAAGA,CAAC;EAC1DC,IAAI;EACJC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC;AACJ,CAAC,KAAK;EACF,MAAMC,cAAc,GAAGV,KAAK,CAACW,MAAM,CAAiB,IAAI,CAAC;EACzD,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGb,KAAK,CAACc,QAAQ,CAAC,KAAK,CAAC;EAErE,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;IAC5BL,cAAc,CAACM,OAAO,EAAEC,IAAI,CAAC,CAAC;EAClC,CAAC;EAED,MAAMC,YAAY,GAAGA,CAAA,KAAM;IACvBL,mBAAmB,CAAC,IAAI,CAAC;EAC7B,CAAC;EAED,MAAMM,YAAY,GAAGA,CAAA,KAAM;IACvBN,mBAAmB,CAAC,KAAK,CAAC;EAC9B,CAAC;EAED,oBACIb,KAAA,CAAAoB,aAAA,CAAClB,4BAA4B,qBACzBF,KAAA,CAAAoB,aAAA,CAACnB,kBAAkB;IACfI,IAAI,EAAEA,IAAK;IACXC,SAAS,EAAEA,SAAU;IACrBC,SAAS,EAAEA,SAAU;IACrBc,GAAG,EAAEX,cAAe;IACpBY,MAAM,
|
|
1
|
+
{"version":3,"file":"SharingButton.js","names":["React","SharingContextMenu","StyledSharingButtonContainer","Button","SharingButton","link","alignment","container","children","isDisabled","contextMenuRef","useRef","isButtonDisabled","setIsButtonDisabled","useState","handleButtonClick","current","show","handleOnShow","handleOnHide","createElement","ref","shouldDisableClick","onShow","onHide","onClick"],"sources":["../../../../src/components/sharing-button/SharingButton.tsx"],"sourcesContent":["import React, { FunctionComponent, PropsWithChildren } from 'react';\nimport { ContextMenuRef } from '../context-menu/ContextMenu.types';\nimport SharingContextMenu, {\n SharingContextMenuProps,\n} from '../sharing-context-menu/SharingContextMenu';\nimport { StyledSharingButtonContainer } from './SharingButton.styles';\nimport Button from '../button/Button';\nimport { ButtonProps } from '../button/Button.types';\n\nexport type SharingButtonProps = PropsWithChildren<\n Pick<SharingContextMenuProps, 'link' | 'alignment' | 'container'> &\n Pick<ButtonProps, 'isDisabled'>\n>;\n\nconst SharingButton: FunctionComponent<SharingButtonProps> = ({\n link,\n alignment,\n container,\n children,\n isDisabled,\n}) => {\n const contextMenuRef = React.useRef<ContextMenuRef>(null);\n const [isButtonDisabled, setIsButtonDisabled] = React.useState(false);\n\n const handleButtonClick = () => {\n contextMenuRef.current?.show();\n };\n\n const handleOnShow = () => {\n setIsButtonDisabled(true);\n };\n\n const handleOnHide = () => {\n setIsButtonDisabled(false);\n };\n\n return (\n <StyledSharingButtonContainer>\n <SharingContextMenu\n link={link}\n alignment={alignment}\n container={container}\n ref={contextMenuRef}\n shouldDisableClick\n onShow={handleOnShow}\n onHide={handleOnHide}\n >\n <Button onClick={handleButtonClick} isDisabled={isButtonDisabled || isDisabled}>\n {children}\n </Button>\n </SharingContextMenu>\n </StyledSharingButtonContainer>\n );\n};\n\nexport default SharingButton;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAgD,OAAO;AAEnE,OAAOC,kBAAkB,MAElB,4CAA4C;AACnD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,OAAOC,MAAM,MAAM,kBAAkB;AAQrC,MAAMC,aAAoD,GAAGA,CAAC;EAC1DC,IAAI;EACJC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC;AACJ,CAAC,KAAK;EACF,MAAMC,cAAc,GAAGV,KAAK,CAACW,MAAM,CAAiB,IAAI,CAAC;EACzD,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGb,KAAK,CAACc,QAAQ,CAAC,KAAK,CAAC;EAErE,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;IAC5BL,cAAc,CAACM,OAAO,EAAEC,IAAI,CAAC,CAAC;EAClC,CAAC;EAED,MAAMC,YAAY,GAAGA,CAAA,KAAM;IACvBL,mBAAmB,CAAC,IAAI,CAAC;EAC7B,CAAC;EAED,MAAMM,YAAY,GAAGA,CAAA,KAAM;IACvBN,mBAAmB,CAAC,KAAK,CAAC;EAC9B,CAAC;EAED,oBACIb,KAAA,CAAAoB,aAAA,CAAClB,4BAA4B,qBACzBF,KAAA,CAAAoB,aAAA,CAACnB,kBAAkB;IACfI,IAAI,EAAEA,IAAK;IACXC,SAAS,EAAEA,SAAU;IACrBC,SAAS,EAAEA,SAAU;IACrBc,GAAG,EAAEX,cAAe;IACpBY,kBAAkB;IAClBC,MAAM,EAAEL,YAAa;IACrBM,MAAM,EAAEL;EAAa,gBAErBnB,KAAA,CAAAoB,aAAA,CAACjB,MAAM;IAACsB,OAAO,EAAEV,iBAAkB;IAACN,UAAU,EAAEG,gBAAgB,IAAIH;EAAW,GAC1ED,QACG,CACQ,CACM,CAAC;AAEvC,CAAC;AAED,eAAeJ,aAAa","ignoreList":[]}
|
|
@@ -56,6 +56,10 @@ export type FileInputProps = {
|
|
|
56
56
|
* Whether the image upload should be prevented.
|
|
57
57
|
*/
|
|
58
58
|
shouldPreventImageUpload?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* Whether to show a download icon for files that have a `source` set.
|
|
61
|
+
*/
|
|
62
|
+
shouldAllowDownload?: boolean;
|
|
59
63
|
};
|
|
60
64
|
export type FileInputRef = {
|
|
61
65
|
clear: () => void;
|
|
@@ -4,6 +4,7 @@ export interface IFileItem {
|
|
|
4
4
|
name: string;
|
|
5
5
|
size?: number;
|
|
6
6
|
mimeType: string;
|
|
7
|
+
source?: string | File;
|
|
7
8
|
}
|
|
8
9
|
export type FileListProps = {
|
|
9
10
|
/**
|
|
@@ -14,6 +15,10 @@ export type FileListProps = {
|
|
|
14
15
|
* A function to be executed when a file is removed.
|
|
15
16
|
*/
|
|
16
17
|
onRemove?: (id: IFileItem['id']) => void;
|
|
18
|
+
/**
|
|
19
|
+
* Whether to show a download icon for files that have a `source` set.
|
|
20
|
+
*/
|
|
21
|
+
shouldAllowDownload?: boolean;
|
|
17
22
|
};
|
|
18
23
|
declare const FileList: FC<FileListProps>;
|
|
19
24
|
export default FileList;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.3.
|
|
3
|
+
"version": "5.3.7",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -88,5 +88,5 @@
|
|
|
88
88
|
"publishConfig": {
|
|
89
89
|
"access": "public"
|
|
90
90
|
},
|
|
91
|
-
"gitHead": "
|
|
91
|
+
"gitHead": "1b6b4f1e7f48467f25d43bf32c270ddcbb7b3236"
|
|
92
92
|
}
|