@chayns-components/core 5.3.5 → 5.3.8
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 +12 -5
- package/lib/cjs/components/file-list/FileList.js.map +1 -1
- package/lib/cjs/components/file-list/file-item/FileItem.js +93 -6
- package/lib/cjs/components/file-list/file-item/FileItem.js.map +1 -1
- package/lib/cjs/components/file-list/file-item/FileItem.styles.js +10 -1
- package/lib/cjs/components/file-list/file-item/FileItem.styles.js.map +1 -1
- package/lib/cjs/constants/textStrings.js +10 -0
- package/lib/cjs/constants/textStrings.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 +12 -5
- package/lib/esm/components/file-list/FileList.js.map +1 -1
- package/lib/esm/components/file-list/file-item/FileItem.js +95 -8
- package/lib/esm/components/file-list/file-item/FileItem.js.map +1 -1
- package/lib/esm/components/file-list/file-item/FileItem.styles.js +9 -0
- package/lib/esm/components/file-list/file-item/FileItem.styles.js.map +1 -1
- package/lib/esm/constants/textStrings.js +10 -0
- package/lib/esm/constants/textStrings.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/lib/types/components/file-list/file-item/FileItem.styles.d.ts +1 -0
- package/lib/types/constants/textStrings.d.ts +10 -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":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,WAAA,GAAAD,sBAAA,CAAAJ,OAAA;AAAqE,SAAAI,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAP,wBAAAO,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAX,uBAAA,YAAAA,CAAAO,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;AAE9D,MAAMgB,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GACzB,oFAAoF;AAEjF,MAAME,2BAA2B,GAAAD,OAAA,CAAAC,2BAAA,GACpC,oFAAoF;AA6DxF,MAAMC,SAAS,gBAAG,IAAAC,iBAAU,EACxB,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,GAAG,IAAAC,eAAQ,EAAS,EAAE,CAAC;EAC9D,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAF,eAAQ,EAAiB,EAAE,CAAC;EAExE,MAAMG,gBAAgB,GAAGA,CAAA,KAAM;IAC3BJ,gBAAgB,CAAC,EAAE,CAAC;IACpBG,iBAAiB,CAAC,EAAE,CAAC;EACzB,CAAC;EAED,IAAAE,0BAAmB,EACfP,GAAG,EACH,OAAO;IACHQ,KAAK,EAAEF;EACX,CAAC,CAAC,EACF,EACJ,CAAC;EAED,MAAMG,eAAe,GAAG,IAAAC,kBAAW,EAC9BC,MAAsB,IAAK;IACxB,MAAMC,SAAyB,GAAG,EAAE;IAEpCD,MAAM,CAACE,OAAO,CAAEC,KAAK,IAAK;MACtB,IAAI,CAAC,IAAAC,6BAAuB,EAAC;QAAEtB,KAAK,EAAEW,cAAc;QAAEY,OAAO,EAAEF;MAAM,CAAC,CAAC,EAAE;QACrEF,SAAS,CAACK,IAAI,CAACH,KAAK,CAAC;MACzB;IACJ,CAAC,CAAC;IAEF,IAAII,GAAG,GAAGN,SAAS;IAEnB,IAAIrB,QAAQ,EAAE;MACV2B,GAAG,GAAGN,SAAS,CAACO,KAAK,CACjB,CAAC,EACD5B,QAAQ,IACHU,aAAa,CAACmB,MAAM,GAAGhB,cAAc,CAACgB,MAAM,IAAI,CAAA3B,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAE2B,MAAM,KAAI,CAAC,CAAC,CAC5E,CAAC;IACL;IAEA,IAAIF,GAAG,CAACE,MAAM,GAAG,CAAC,IAAI,OAAOxB,KAAK,KAAK,UAAU,EAAE;MAC/CA,KAAK,CAACsB,GAAG,CAAC;IACd;IAEAb,iBAAiB,CAAEgB,SAAS,IAAK,CAAC,GAAGA,SAAS,EAAE,GAAGH,GAAG,CAAC,CAAC;EAC5D,CAAC,EACD,CAACzB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAE2B,MAAM,EAAEnB,aAAa,CAACmB,MAAM,EAAEhB,cAAc,EAAEb,QAAQ,EAAEK,KAAK,CACzE,CAAC;EAED,MAAM0B,cAAc,GAAG,IAAAZ,kBAAW,EAC7Ba,QAAgB,IAAK;IAClB,MAAMC,YAAoB,GAAG,EAAE;IAE/BD,QAAQ,CAACV,OAAO,CAAEY,IAAI,IAAK;MACvB,IAAIpC,SAAS,IAAI,CAAC,IAAAqC,qBAAe,EAAC;QAAED,IAAI;QAAEE,KAAK,EAAEtC;MAAU,CAAC,CAAC,EAAE;QAC3D;MACJ;MAEA,IAAIoC,IAAI,IAAI,CAAC,IAAAG,yBAAmB,EAAC;QAAEnC,KAAK,EAAEQ,aAAa;QAAEe,OAAO,EAAES;MAAK,CAAC,CAAC,EAAE;QACvED,YAAY,CAACP,IAAI,CAACQ,IAAI,CAAC;MAC3B;IACJ,CAAC,CAAC;IAEF,IAAIP,GAAG,GAAGM,YAAY;IAEtB,IAAIjC,QAAQ,EAAE;MACV2B,GAAG,GAAGM,YAAY,CAACL,KAAK,CACpB,CAAC,EACD5B,QAAQ,IAAIU,aAAa,CAACmB,MAAM,IAAI,CAAA3B,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAE2B,MAAM,KAAI,CAAC,CAAC,CAC3D,CAAC;IACL;IAEA,IAAIF,GAAG,CAACE,MAAM,GAAG,CAAC,IAAI,OAAOxB,KAAK,KAAK,UAAU,EAAE;MAC/CA,KAAK,CAACsB,GAAG,CAAC;IACd;IAEAhB,gBAAgB,CAAEmB,SAAS,IAAK,CAAC,GAAGA,SAAS,EAAE,GAAGH,GAAG,CAAC,CAAC;EAC3D,CAAC,EACD,CAAC7B,SAAS,EAAEI,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAE2B,MAAM,EAAEnB,aAAa,EAAEV,QAAQ,EAAEK,KAAK,CAC7D,CAAC;EAED,MAAMiC,SAAS,GAAG,IAAAnB,kBAAW,EACxBa,QAAiC,IAAK;IACnC,IAAIO,KAAK,CAACC,OAAO,CAACR,QAAQ,CAAC,IAAIA,QAAQ,CAACH,MAAM,GAAG,CAAC,EAAE;MAChD,IAAIG,QAAQ,CAAC,CAAC,CAAC,IAAI,KAAK,IAAIA,QAAQ,CAAC,CAAC,CAAC,EAAE;QACrCd,eAAe,CAACc,QAA0B,CAAC;MAC/C,CAAC,MAAM;QACHD,cAAc,CAACC,QAAkB,CAAC;MACtC;IACJ;EACJ,CAAC,EACD,CAACD,cAAc,EAAEb,eAAe,CACpC,CAAC;EAED,MAAMuB,gBAAgB,GAAG,IAAAtB,kBAAW,EAC/BuB,EAAU,IAAK;IACZ,IAAIC,YAAyD;IAE7D,MAAMC,aAAa,GAAGlC,aAAa,CAACmC,MAAM,CAAEX,IAAI,IAAK;MACjD,MAAM;QAAEY;MAAK,CAAC,GAAGZ,IAAI;MAErB,IAAIY,IAAI,KAAKJ,EAAE,EAAE;QACbC,YAAY,GAAGT,IAAI;MACvB;MAEA,OAAOY,IAAI,KAAKJ,EAAE;IACtB,CAAC,CAAC;IAEF/B,gBAAgB,CAACiC,aAAa,CAAC;IAE/B,IAAI,CAACD,YAAY,EAAE;MACf,MAAMI,cAAc,GAAGlC,cAAc,CAACgC,MAAM,CAAEtB,KAAK,IAAK;QACpD,IAAIA,KAAK,CAACuB,IAAI,KAAKJ,EAAE,EAAE;UACnBC,YAAY,GAAGpB,KAAK;QACxB;QAEA,OAAOA,KAAK,CAACuB,IAAI,KAAKJ,EAAE;MAC5B,CAAC,CAAC;MAEF5B,iBAAiB,CAACiC,cAAc,CAAC;IACrC;IAEA,IAAI,CAACJ,YAAY,EAAE;MACfzC,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEoB,OAAO,CAAEY,IAAI,IAAK;QACrB,IAAIA,IAAI,CAACQ,EAAE,KAAKA,EAAE,IAAIR,IAAI,CAACY,IAAI,KAAKJ,EAAE,EAAE;UACpCC,YAAY,GAAGT,IAAI;QACvB;MACJ,CAAC,CAAC;IACN;IAEA,IAAI,CAACS,YAAY,IAAI,OAAO1C,QAAQ,KAAK,UAAU,EAAE;MACjD;IACJ;IAEAA,QAAQ,CAAC0C,YAAY,CAAC;EAC1B,CAAC,EACD,CAACzC,KAAK,EAAEQ,aAAa,EAAEG,cAAc,EAAEZ,QAAQ,CACnD,CAAC;EAED,MAAM+C,kBAAkB,GAAG,IAAAC,cAAO,EAAC,MAAM;IACrC,IAAI9C,UAAU,EAAE;MACZ,OAAO,IAAI;IACf;IAEA,IAAIH,QAAQ,EAAE;MACV,IAAIU,aAAa,CAACmB,MAAM,GAAGhB,cAAc,CAACgB,MAAM,IAAI7B,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,CAACmB,MAAM,EAAEhB,cAAc,CAACgB,MAAM,EAAE1B,UAAU,EAAEH,QAAQ,EAAED,iBAAiB,CAAC,CAAC;EAE1F,MAAMmD,cAA2B,GAAG,IAAAD,cAAO,EAAC,MAAM;IAC9C,MAAME,KAAkB,GAAGzC,aAAa,CAAC0C,GAAG,CAAC,CAAC;MAAEC,IAAI;MAAEP,IAAI;MAAEQ;IAAK,CAAC,MAAM;MACpEZ,EAAE,EAAEI,IAAI;MACRA,IAAI;MACJQ,IAAI;MACJC,QAAQ,EAAEF;IACd,CAAC,CAAC,CAAC;IAEHxC,cAAc,CAACS,OAAO,CAAEC,KAAK,IAAK;MAC9B4B,KAAK,CAACzB,IAAI,CAAC;QACPgB,EAAE,EAAEnB,KAAK,CAACuB,IAAI,IAAIvB,KAAK,CAACiC,GAAG;QAC3BV,IAAI,EAAEvB,KAAK,CAACuB,IAAI,IAAIvB,KAAK,CAACiC,GAAG;QAC7BF,IAAI,EAAE/B,KAAK,CAAC+B,IAAI,IAAI,CAAC;QACrBC,QAAQ,EAAE;MACd,CAAC,CAAC;IACN,CAAC,CAAC;IAEFrD,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEoB,OAAO,CAAEY,IAAI,IAAK;MACrBiB,KAAK,CAACzB,IAAI,CAACQ,IAAI,CAAC;IACpB,CAAC,CAAC;IAEF,OAAOiB,KAAK;EAChB,CAAC,EAAE,CAACjD,KAAK,EAAEQ,aAAa,EAAEG,cAAc,CAAC,CAAC;EAE1C,OAAO,IAAAoC,cAAO,EACV,mBACIrF,MAAA,CAAAU,OAAA,CAAAmF,aAAA,CAACzF,UAAA,CAAA0F,eAAe,qBACZ9F,MAAA,CAAAU,OAAA,CAAAmF,aAAA,CAACtF,WAAA,CAAAG,OAAU;IACPkC,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,EAAE6C,kBAAmB;IAC/B3C,KAAK,EAAEiC;EAAU,CACpB,CAAC,eACF1E,MAAA,CAAAU,OAAA,CAAAmF,aAAA,CAACxF,SAAA,CAAAK,OAAQ;IAAC4B,KAAK,EAAEgD,cAAe;IAACjD,QAAQ,EAAEwC;EAAiB,CAAE,CACjD,CACpB,EACD,CACIjC,wBAAwB,EACxBR,QAAQ,EACRF,SAAS,EACTF,kBAAkB,EAClBU,wBAAwB,EACxBT,gBAAgB,EAChBU,sBAAsB,EACtBH,eAAe,EACf4C,kBAAkB,EAClBV,SAAS,EACTY,cAAc,EACdT,gBAAgB,CAExB,CAAC;AACL,CACJ,CAAC;AAED/C,SAAS,CAACiE,WAAW,GAAG,WAAW;AAAC,IAAAC,QAAA,GAAApE,OAAA,CAAAlB,OAAA,GAErBoB,SAAS","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":[]}
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _textstring = require("@chayns-components/textstring");
|
|
8
9
|
var _List = _interopRequireDefault(require("../list/List"));
|
|
9
10
|
var _FileList = require("./FileList.styles");
|
|
10
11
|
var _FileItem = _interopRequireDefault(require("./file-item/FileItem"));
|
|
@@ -12,22 +13,28 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
12
13
|
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
14
|
const FileList = ({
|
|
14
15
|
files,
|
|
15
|
-
onRemove
|
|
16
|
+
onRemove,
|
|
17
|
+
shouldAllowDownload
|
|
16
18
|
}) => {
|
|
17
19
|
const content = (0, _react.useMemo)(() => files === null || files === void 0 ? void 0 : files.map(({
|
|
18
20
|
mimeType,
|
|
19
21
|
size,
|
|
20
22
|
name,
|
|
21
|
-
id
|
|
23
|
+
id,
|
|
24
|
+
source
|
|
22
25
|
}) => /*#__PURE__*/_react.default.createElement(_FileItem.default, {
|
|
23
26
|
key: id,
|
|
24
27
|
id: id,
|
|
25
28
|
name: name,
|
|
26
29
|
size: size,
|
|
27
30
|
mimeType: mimeType,
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
+
source: source,
|
|
32
|
+
onRemove: onRemove,
|
|
33
|
+
shouldAllowDownload: shouldAllowDownload
|
|
34
|
+
})), [files, onRemove, shouldAllowDownload]);
|
|
35
|
+
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_textstring.TextstringProvider, {
|
|
36
|
+
libraryName: "@chayns-components-core"
|
|
37
|
+
}, /*#__PURE__*/_react.default.createElement(_FileList.StyledFileList, null, /*#__PURE__*/_react.default.createElement(_List.default, null, content))), [content]);
|
|
31
38
|
};
|
|
32
39
|
FileList.displayName = 'FileList';
|
|
33
40
|
var _default = exports.default = 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 <
|
|
1
|
+
{"version":3,"file":"FileList.js","names":["_react","_interopRequireWildcard","require","_textstring","_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","TextstringProvider","libraryName","StyledFileList","displayName","_default","exports"],"sources":["../../../../src/components/file-list/FileList.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport { TextstringProvider } from '@chayns-components/textstring';\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 <TextstringProvider libraryName=\"@chayns-components-core\">\n <StyledFileList>\n <List>{content}</List>\n </StyledFileList>\n </TextstringProvider>\n ),\n [content],\n );\n};\n\nFileList.displayName = 'FileList';\n\nexport default FileList;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAF,sBAAA,CAAAH,OAAA;AAA4C,SAAAG,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAP,wBAAAO,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAX,uBAAA,YAAAA,CAAAO,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,kBAC5CtC,MAAA,CAAAU,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,mBACIhC,MAAA,CAAAU,OAAA,CAAA6B,aAAA,CAACpC,WAAA,CAAAsC,kBAAkB;IAACC,WAAW,EAAC;EAAyB,gBACrD1C,MAAA,CAAAU,OAAA,CAAA6B,aAAA,CAACjC,SAAA,CAAAqC,cAAc,qBACX3C,MAAA,CAAAU,OAAA,CAAA6B,aAAA,CAACnC,KAAA,CAAAM,OAAI,QAAEqB,OAAc,CACT,CACA,CACvB,EACD,CAACA,OAAO,CACZ,CAAC;AACL,CAAC;AAEDJ,QAAQ,CAACiB,WAAW,GAAG,UAAU;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAApC,OAAA,GAEnBiB,QAAQ","ignoreList":[]}
|
|
@@ -7,8 +7,11 @@ exports.default = void 0;
|
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _file = require("../../../utils/file");
|
|
9
9
|
var _Icon = _interopRequireDefault(require("../../icon/Icon"));
|
|
10
|
+
var _ContextMenu = _interopRequireDefault(require("../../context-menu/ContextMenu"));
|
|
10
11
|
var _ListItem = _interopRequireDefault(require("../../list/list-item/ListItem"));
|
|
11
12
|
var _FileItem = require("./FileItem.styles");
|
|
13
|
+
var _textstring = require("@chayns-components/textstring");
|
|
14
|
+
var _textStrings = _interopRequireDefault(require("../../../constants/textStrings"));
|
|
12
15
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
16
|
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); }
|
|
14
17
|
const FileItem = ({
|
|
@@ -16,7 +19,9 @@ const FileItem = ({
|
|
|
16
19
|
onRemove,
|
|
17
20
|
size,
|
|
18
21
|
name,
|
|
19
|
-
id
|
|
22
|
+
id,
|
|
23
|
+
source,
|
|
24
|
+
shouldAllowDownload
|
|
20
25
|
}) => {
|
|
21
26
|
const humanFileSize = (0, _react.useMemo)(() => {
|
|
22
27
|
if (typeof size === 'number') {
|
|
@@ -25,15 +30,97 @@ const FileItem = ({
|
|
|
25
30
|
return undefined;
|
|
26
31
|
}, [size]);
|
|
27
32
|
const icon = (0, _react.useMemo)(() => (0, _file.getIconByMimeType)(mimeType), [mimeType]);
|
|
33
|
+
const handleDownload = (0, _react.useCallback)(() => {
|
|
34
|
+
if (!source) return;
|
|
35
|
+
if (source instanceof File) {
|
|
36
|
+
const url = URL.createObjectURL(source);
|
|
37
|
+
const a = document.createElement('a');
|
|
38
|
+
a.href = url;
|
|
39
|
+
a.download = name;
|
|
40
|
+
document.body.appendChild(a);
|
|
41
|
+
a.click();
|
|
42
|
+
document.body.removeChild(a);
|
|
43
|
+
URL.revokeObjectURL(url);
|
|
44
|
+
} else {
|
|
45
|
+
// Try fetching as blob to force download. If CORS blocks it,
|
|
46
|
+
// fall back to opening the URL directly.
|
|
47
|
+
fetch(source).then(res => {
|
|
48
|
+
if (!res.ok) throw new Error('fetch failed');
|
|
49
|
+
return res.blob();
|
|
50
|
+
}).then(blob => {
|
|
51
|
+
const url = URL.createObjectURL(blob);
|
|
52
|
+
const a = document.createElement('a');
|
|
53
|
+
a.href = url;
|
|
54
|
+
a.download = name;
|
|
55
|
+
document.body.appendChild(a);
|
|
56
|
+
a.click();
|
|
57
|
+
document.body.removeChild(a);
|
|
58
|
+
URL.revokeObjectURL(url);
|
|
59
|
+
}).catch(() => {
|
|
60
|
+
// CORS or network error: fall back to direct link
|
|
61
|
+
const a = document.createElement('a');
|
|
62
|
+
a.href = source;
|
|
63
|
+
a.download = name;
|
|
64
|
+
a.rel = 'noopener noreferrer';
|
|
65
|
+
a.target = '_blank';
|
|
66
|
+
document.body.appendChild(a);
|
|
67
|
+
a.click();
|
|
68
|
+
document.body.removeChild(a);
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
}, [name, source]);
|
|
72
|
+
const canDownload = shouldAllowDownload && !!source;
|
|
73
|
+
const canRemove = typeof onRemove === 'function';
|
|
74
|
+
const downloadText = (0, _textstring.useTextstringValue)({
|
|
75
|
+
textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.fileItem.download)
|
|
76
|
+
});
|
|
77
|
+
const removeText = (0, _textstring.useTextstringValue)({
|
|
78
|
+
textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.fileItem.remove)
|
|
79
|
+
});
|
|
80
|
+
const rightElement = (0, _react.useMemo)(() => {
|
|
81
|
+
// Both actions available → show as ContextMenu
|
|
82
|
+
if (canDownload && canRemove) {
|
|
83
|
+
const items = [{
|
|
84
|
+
icons: ['fa fa-download'],
|
|
85
|
+
key: 'download',
|
|
86
|
+
onClick: handleDownload,
|
|
87
|
+
text: downloadText
|
|
88
|
+
}, {
|
|
89
|
+
icons: ['fa fa-trash'],
|
|
90
|
+
key: 'remove',
|
|
91
|
+
onClick: () => onRemove(id),
|
|
92
|
+
text: removeText
|
|
93
|
+
}];
|
|
94
|
+
return /*#__PURE__*/_react.default.createElement(_ContextMenu.default, {
|
|
95
|
+
items: items
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
// Only download
|
|
100
|
+
if (canDownload) {
|
|
101
|
+
return /*#__PURE__*/_react.default.createElement(_FileItem.StyledFileItemIcon, {
|
|
102
|
+
onClick: handleDownload
|
|
103
|
+
}, /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
104
|
+
icons: ['fa fa-download']
|
|
105
|
+
}));
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// Only remove
|
|
109
|
+
if (canRemove) {
|
|
110
|
+
return /*#__PURE__*/_react.default.createElement(_FileItem.StyledFileItemIcon, {
|
|
111
|
+
onClick: () => onRemove(id)
|
|
112
|
+
}, /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
113
|
+
icons: ['ts-wrong']
|
|
114
|
+
}));
|
|
115
|
+
}
|
|
116
|
+
return undefined;
|
|
117
|
+
}, [canDownload, canRemove, downloadText, handleDownload, id, onRemove, removeText]);
|
|
28
118
|
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FileItem.StyledFileItem, null, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
|
|
29
119
|
title: name,
|
|
30
120
|
subtitle: humanFileSize,
|
|
31
121
|
icons: [icon],
|
|
32
|
-
rightElements:
|
|
33
|
-
|
|
34
|
-
onClick: () => onRemove(id)
|
|
35
|
-
}) : undefined
|
|
36
|
-
})), [humanFileSize, icon, id, name, onRemove]);
|
|
122
|
+
rightElements: rightElement
|
|
123
|
+
})), [humanFileSize, icon, name, rightElement]);
|
|
37
124
|
};
|
|
38
125
|
FileItem.displayName = 'FileList';
|
|
39
126
|
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> = ({ mimeType, onRemove, size, name, id }) => {\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 return useMemo(\n () => (\n <StyledFileItem>\n <ListItem\n title={name}\n subtitle={humanFileSize}\n icons={[icon]}\n rightElements={\n typeof onRemove === 'function' ? (\n <Icon icons={['ts-wrong']} onClick={() => onRemove(id)} />\n ) : undefined\n }\n />\n </StyledFileItem>\n ),\n [humanFileSize, icon, id, name, onRemove],\n );\n};\n\nFileItem.displayName = 'FileList';\n\nexport default FileItem;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"FileItem.js","names":["_react","_interopRequireWildcard","require","_file","_Icon","_interopRequireDefault","_ContextMenu","_ListItem","_FileItem","_textstring","_textStrings","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","canDownload","canRemove","downloadText","useTextstringValue","textstring","ttsToITextString","textStrings","components","fileItem","removeText","remove","rightElement","items","icons","key","onClick","text","StyledFileItemIcon","StyledFileItem","title","subtitle","rightElements","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 ContextMenu from '../../context-menu/ContextMenu';\nimport type { ContextMenuItem } from '../../context-menu/ContextMenu.types';\nimport ListItem from '../../list/list-item/ListItem';\nimport type { IFileItem } from '../FileList';\nimport { StyledFileItem, StyledFileItemIcon } from './FileItem.styles';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\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 const canDownload = shouldAllowDownload && !!source;\n const canRemove = typeof onRemove === 'function';\n\n const downloadText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.fileItem.download),\n });\n const removeText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.fileItem.remove),\n });\n\n const rightElement = useMemo(() => {\n // Both actions available → show as ContextMenu\n if (canDownload && canRemove) {\n const items: ContextMenuItem[] = [\n {\n icons: ['fa fa-download'],\n key: 'download',\n onClick: handleDownload,\n text: downloadText,\n },\n {\n icons: ['fa fa-trash'],\n key: 'remove',\n onClick: () => onRemove(id),\n text: removeText,\n },\n ];\n\n return <ContextMenu items={items} />;\n }\n\n // Only download\n if (canDownload) {\n return (\n <StyledFileItemIcon onClick={handleDownload}>\n <Icon icons={['fa fa-download']} />\n </StyledFileItemIcon>\n );\n }\n\n // Only remove\n if (canRemove) {\n return (\n <StyledFileItemIcon onClick={() => onRemove(id)}>\n <Icon icons={['ts-wrong']} />\n </StyledFileItemIcon>\n );\n }\n\n return undefined;\n }, [canDownload, canRemove, downloadText, handleDownload, id, onRemove, removeText]);\n\n return useMemo(\n () => (\n <StyledFileItem>\n <ListItem\n title={name}\n subtitle={humanFileSize}\n icons={[icon]}\n rightElements={rightElement}\n />\n </StyledFileItem>\n ),\n [humanFileSize, icon, name, rightElement],\n );\n};\n\nFileItem.displayName = 'FileList';\n\nexport default FileItem;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,8 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledFileItem = void 0;
|
|
6
|
+
exports.StyledFileItemIcon = exports.StyledFileItem = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
8
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
9
|
const StyledFileItem = exports.StyledFileItem = _styledComponents.default.div``;
|
|
10
|
+
const StyledFileItemIcon = exports.StyledFileItemIcon = _styledComponents.default.div`
|
|
11
|
+
align-items: center;
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
display: flex;
|
|
14
|
+
background-color: transparent;
|
|
15
|
+
border-radius: 3px;
|
|
16
|
+
padding: 6px;
|
|
17
|
+
transition: background-color 0.3s ease;
|
|
18
|
+
`;
|
|
10
19
|
//# sourceMappingURL=FileItem.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledFileItem","exports","styled","div"],"sources":["../../../../../src/components/file-list/file-item/FileItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledFileItem = styled.div``;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"FileItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledFileItem","exports","styled","div","StyledFileItemIcon"],"sources":["../../../../../src/components/file-list/file-item/FileItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledFileItem = styled.div``;\nexport const StyledFileItemIcon = styled.div`\n align-items: center;\n cursor: pointer;\n display: flex;\n background-color: transparent;\n border-radius: 3px;\n padding: 6px;\n transition: background-color 0.3s ease;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AACnC,MAAMC,kBAAkB,GAAAH,OAAA,CAAAG,kBAAA,GAAGF,yBAAM,CAACC,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -35,6 +35,16 @@ var _default = exports.default = {
|
|
|
35
35
|
stringName: 'txt_chayns_components_core_components_truncation_more',
|
|
36
36
|
fallback: 'Mehr'
|
|
37
37
|
}
|
|
38
|
+
},
|
|
39
|
+
fileItem: {
|
|
40
|
+
download: {
|
|
41
|
+
stringName: 'txt_chayns_components_core_components_fileItem_download',
|
|
42
|
+
fallback: 'Download'
|
|
43
|
+
},
|
|
44
|
+
remove: {
|
|
45
|
+
stringName: 'txt_chayns_components_core_components_fileItem_remove',
|
|
46
|
+
fallback: 'Entfernen'
|
|
47
|
+
}
|
|
38
48
|
}
|
|
39
49
|
}
|
|
40
50
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textStrings.js","names":["components","filter","filterContent","input","placeholder","stringName","fallback","sort","filterButtons","all","truncation","less","more"],"sources":["../../../src/constants/textStrings.ts"],"sourcesContent":["export default {\n components: {\n filter: {\n filterContent: {\n input: {\n placeholder: {\n stringName:\n 'txt_chayns_components_core_components_filter_filterContent_input_placeholder',\n fallback: 'Suche',\n },\n },\n sort: {\n stringName: 'txt_chayns_components_core_components_filter_filterContent_sort',\n fallback: 'Sortierung',\n },\n },\n },\n filterButtons: {\n all: {\n stringName: 'txt_chayns_components_core_components_filterButtons_all',\n fallback: 'Alle',\n },\n },\n truncation: {\n less: {\n stringName: 'txt_chayns_components_core_components_truncation_less',\n fallback: 'Weniger',\n },\n more: {\n stringName: 'txt_chayns_components_core_components_truncation_more',\n fallback: 'Mehr',\n },\n },\n },\n} as const;\n"],"mappings":";;;;;;iCAAe;EACXA,UAAU,EAAE;IACRC,MAAM,EAAE;MACJC,aAAa,EAAE;QACXC,KAAK,EAAE;UACHC,WAAW,EAAE;YACTC,UAAU,EACN,8EAA8E;YAClFC,QAAQ,EAAE;UACd;QACJ,CAAC;QACDC,IAAI,EAAE;UACFF,UAAU,EAAE,iEAAiE;UAC7EC,QAAQ,EAAE;QACd;MACJ;IACJ,CAAC;IACDE,aAAa,EAAE;MACXC,GAAG,EAAE;QACDJ,UAAU,EAAE,yDAAyD;QACrEC,QAAQ,EAAE;MACd;IACJ,CAAC;IACDI,UAAU,EAAE;MACRC,IAAI,EAAE;QACFN,UAAU,EAAE,uDAAuD;QACnEC,QAAQ,EAAE;MACd,CAAC;MACDM,IAAI,EAAE;QACFP,UAAU,EAAE,uDAAuD;QACnEC,QAAQ,EAAE;MACd;IACJ;EACJ;AACJ,CAAC","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"textStrings.js","names":["components","filter","filterContent","input","placeholder","stringName","fallback","sort","filterButtons","all","truncation","less","more","fileItem","download","remove"],"sources":["../../../src/constants/textStrings.ts"],"sourcesContent":["export default {\n components: {\n filter: {\n filterContent: {\n input: {\n placeholder: {\n stringName:\n 'txt_chayns_components_core_components_filter_filterContent_input_placeholder',\n fallback: 'Suche',\n },\n },\n sort: {\n stringName: 'txt_chayns_components_core_components_filter_filterContent_sort',\n fallback: 'Sortierung',\n },\n },\n },\n filterButtons: {\n all: {\n stringName: 'txt_chayns_components_core_components_filterButtons_all',\n fallback: 'Alle',\n },\n },\n truncation: {\n less: {\n stringName: 'txt_chayns_components_core_components_truncation_less',\n fallback: 'Weniger',\n },\n more: {\n stringName: 'txt_chayns_components_core_components_truncation_more',\n fallback: 'Mehr',\n },\n },\n fileItem: {\n download: {\n stringName: 'txt_chayns_components_core_components_fileItem_download',\n fallback: 'Download',\n },\n remove: {\n stringName: 'txt_chayns_components_core_components_fileItem_remove',\n fallback: 'Entfernen',\n },\n },\n },\n} as const;\n"],"mappings":";;;;;;iCAAe;EACXA,UAAU,EAAE;IACRC,MAAM,EAAE;MACJC,aAAa,EAAE;QACXC,KAAK,EAAE;UACHC,WAAW,EAAE;YACTC,UAAU,EACN,8EAA8E;YAClFC,QAAQ,EAAE;UACd;QACJ,CAAC;QACDC,IAAI,EAAE;UACFF,UAAU,EAAE,iEAAiE;UAC7EC,QAAQ,EAAE;QACd;MACJ;IACJ,CAAC;IACDE,aAAa,EAAE;MACXC,GAAG,EAAE;QACDJ,UAAU,EAAE,yDAAyD;QACrEC,QAAQ,EAAE;MACd;IACJ,CAAC;IACDI,UAAU,EAAE;MACRC,IAAI,EAAE;QACFN,UAAU,EAAE,uDAAuD;QACnEC,QAAQ,EAAE;MACd,CAAC;MACDM,IAAI,EAAE;QACFP,UAAU,EAAE,uDAAuD;QACnEC,QAAQ,EAAE;MACd;IACJ,CAAC;IACDO,QAAQ,EAAE;MACNC,QAAQ,EAAE;QACNT,UAAU,EAAE,yDAAyD;QACrEC,QAAQ,EAAE;MACd,CAAC;MACDS,MAAM,EAAE;QACJV,UAAU,EAAE,uDAAuD;QACnEC,QAAQ,EAAE;MACd;IACJ;EACJ;AACJ,CAAC","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":"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","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":[]}
|
|
@@ -1,25 +1,32 @@
|
|
|
1
1
|
import React, { useMemo } from 'react';
|
|
2
|
+
import { TextstringProvider } from '@chayns-components/textstring';
|
|
2
3
|
import List from '../list/List';
|
|
3
4
|
import { StyledFileList } from './FileList.styles';
|
|
4
5
|
import FileItem from './file-item/FileItem';
|
|
5
6
|
const FileList = ({
|
|
6
7
|
files,
|
|
7
|
-
onRemove
|
|
8
|
+
onRemove,
|
|
9
|
+
shouldAllowDownload
|
|
8
10
|
}) => {
|
|
9
11
|
const content = useMemo(() => files?.map(({
|
|
10
12
|
mimeType,
|
|
11
13
|
size,
|
|
12
14
|
name,
|
|
13
|
-
id
|
|
15
|
+
id,
|
|
16
|
+
source
|
|
14
17
|
}) => /*#__PURE__*/React.createElement(FileItem, {
|
|
15
18
|
key: id,
|
|
16
19
|
id: id,
|
|
17
20
|
name: name,
|
|
18
21
|
size: size,
|
|
19
22
|
mimeType: mimeType,
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
+
source: source,
|
|
24
|
+
onRemove: onRemove,
|
|
25
|
+
shouldAllowDownload: shouldAllowDownload
|
|
26
|
+
})), [files, onRemove, shouldAllowDownload]);
|
|
27
|
+
return useMemo(() => /*#__PURE__*/React.createElement(TextstringProvider, {
|
|
28
|
+
libraryName: "@chayns-components-core"
|
|
29
|
+
}, /*#__PURE__*/React.createElement(StyledFileList, null, /*#__PURE__*/React.createElement(List, null, content))), [content]);
|
|
23
30
|
};
|
|
24
31
|
FileList.displayName = 'FileList';
|
|
25
32
|
export default 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 <
|
|
1
|
+
{"version":3,"file":"FileList.js","names":["React","useMemo","TextstringProvider","List","StyledFileList","FileItem","FileList","files","onRemove","shouldAllowDownload","content","map","mimeType","size","name","id","source","createElement","key","libraryName","displayName"],"sources":["../../../../src/components/file-list/FileList.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport { TextstringProvider } from '@chayns-components/textstring';\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 <TextstringProvider libraryName=\"@chayns-components-core\">\n <StyledFileList>\n <List>{content}</List>\n </StyledFileList>\n </TextstringProvider>\n ),\n [content],\n );\n};\n\nFileList.displayName = 'FileList';\n\nexport default FileList;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,OAAO,QAAQ,OAAO;AAC1C,SAASC,kBAAkB,QAAQ,+BAA+B;AAClE,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,GAAGT,OAAO,CACnB,MACIM,KAAK,EAAEI,GAAG,CAAC,CAAC;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAEC,EAAE;IAAEC;EAAO,CAAC,kBAC5ChB,KAAA,CAAAiB,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,OAAOR,OAAO,CACV,mBACID,KAAA,CAAAiB,aAAA,CAACf,kBAAkB;IAACiB,WAAW,EAAC;EAAyB,gBACrDnB,KAAA,CAAAiB,aAAA,CAACb,cAAc,qBACXJ,KAAA,CAAAiB,aAAA,CAACd,IAAI,QAAEO,OAAc,CACT,CACA,CACvB,EACD,CAACA,OAAO,CACZ,CAAC;AACL,CAAC;AAEDJ,QAAQ,CAACc,WAAW,GAAG,UAAU;AAEjC,eAAed,QAAQ","ignoreList":[]}
|
|
@@ -1,14 +1,19 @@
|
|
|
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
|
+
import ContextMenu from '../../context-menu/ContextMenu';
|
|
4
5
|
import ListItem from '../../list/list-item/ListItem';
|
|
5
|
-
import { StyledFileItem } from './FileItem.styles';
|
|
6
|
+
import { StyledFileItem, StyledFileItemIcon } from './FileItem.styles';
|
|
7
|
+
import { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';
|
|
8
|
+
import textStrings from '../../../constants/textStrings';
|
|
6
9
|
const FileItem = ({
|
|
7
10
|
mimeType,
|
|
8
11
|
onRemove,
|
|
9
12
|
size,
|
|
10
13
|
name,
|
|
11
|
-
id
|
|
14
|
+
id,
|
|
15
|
+
source,
|
|
16
|
+
shouldAllowDownload
|
|
12
17
|
}) => {
|
|
13
18
|
const humanFileSize = useMemo(() => {
|
|
14
19
|
if (typeof size === 'number') {
|
|
@@ -17,15 +22,97 @@ const FileItem = ({
|
|
|
17
22
|
return undefined;
|
|
18
23
|
}, [size]);
|
|
19
24
|
const icon = useMemo(() => getIconByMimeType(mimeType), [mimeType]);
|
|
25
|
+
const handleDownload = useCallback(() => {
|
|
26
|
+
if (!source) return;
|
|
27
|
+
if (source instanceof File) {
|
|
28
|
+
const url = URL.createObjectURL(source);
|
|
29
|
+
const a = document.createElement('a');
|
|
30
|
+
a.href = url;
|
|
31
|
+
a.download = name;
|
|
32
|
+
document.body.appendChild(a);
|
|
33
|
+
a.click();
|
|
34
|
+
document.body.removeChild(a);
|
|
35
|
+
URL.revokeObjectURL(url);
|
|
36
|
+
} else {
|
|
37
|
+
// Try fetching as blob to force download. If CORS blocks it,
|
|
38
|
+
// fall back to opening the URL directly.
|
|
39
|
+
fetch(source).then(res => {
|
|
40
|
+
if (!res.ok) throw new Error('fetch failed');
|
|
41
|
+
return res.blob();
|
|
42
|
+
}).then(blob => {
|
|
43
|
+
const url = URL.createObjectURL(blob);
|
|
44
|
+
const a = document.createElement('a');
|
|
45
|
+
a.href = url;
|
|
46
|
+
a.download = name;
|
|
47
|
+
document.body.appendChild(a);
|
|
48
|
+
a.click();
|
|
49
|
+
document.body.removeChild(a);
|
|
50
|
+
URL.revokeObjectURL(url);
|
|
51
|
+
}).catch(() => {
|
|
52
|
+
// CORS or network error: fall back to direct link
|
|
53
|
+
const a = document.createElement('a');
|
|
54
|
+
a.href = source;
|
|
55
|
+
a.download = name;
|
|
56
|
+
a.rel = 'noopener noreferrer';
|
|
57
|
+
a.target = '_blank';
|
|
58
|
+
document.body.appendChild(a);
|
|
59
|
+
a.click();
|
|
60
|
+
document.body.removeChild(a);
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
}, [name, source]);
|
|
64
|
+
const canDownload = shouldAllowDownload && !!source;
|
|
65
|
+
const canRemove = typeof onRemove === 'function';
|
|
66
|
+
const downloadText = useTextstringValue({
|
|
67
|
+
textstring: ttsToITextString(textStrings.components.fileItem.download)
|
|
68
|
+
});
|
|
69
|
+
const removeText = useTextstringValue({
|
|
70
|
+
textstring: ttsToITextString(textStrings.components.fileItem.remove)
|
|
71
|
+
});
|
|
72
|
+
const rightElement = useMemo(() => {
|
|
73
|
+
// Both actions available → show as ContextMenu
|
|
74
|
+
if (canDownload && canRemove) {
|
|
75
|
+
const items = [{
|
|
76
|
+
icons: ['fa fa-download'],
|
|
77
|
+
key: 'download',
|
|
78
|
+
onClick: handleDownload,
|
|
79
|
+
text: downloadText
|
|
80
|
+
}, {
|
|
81
|
+
icons: ['fa fa-trash'],
|
|
82
|
+
key: 'remove',
|
|
83
|
+
onClick: () => onRemove(id),
|
|
84
|
+
text: removeText
|
|
85
|
+
}];
|
|
86
|
+
return /*#__PURE__*/React.createElement(ContextMenu, {
|
|
87
|
+
items: items
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// Only download
|
|
92
|
+
if (canDownload) {
|
|
93
|
+
return /*#__PURE__*/React.createElement(StyledFileItemIcon, {
|
|
94
|
+
onClick: handleDownload
|
|
95
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
96
|
+
icons: ['fa fa-download']
|
|
97
|
+
}));
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// Only remove
|
|
101
|
+
if (canRemove) {
|
|
102
|
+
return /*#__PURE__*/React.createElement(StyledFileItemIcon, {
|
|
103
|
+
onClick: () => onRemove(id)
|
|
104
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
105
|
+
icons: ['ts-wrong']
|
|
106
|
+
}));
|
|
107
|
+
}
|
|
108
|
+
return undefined;
|
|
109
|
+
}, [canDownload, canRemove, downloadText, handleDownload, id, onRemove, removeText]);
|
|
20
110
|
return useMemo(() => /*#__PURE__*/React.createElement(StyledFileItem, null, /*#__PURE__*/React.createElement(ListItem, {
|
|
21
111
|
title: name,
|
|
22
112
|
subtitle: humanFileSize,
|
|
23
113
|
icons: [icon],
|
|
24
|
-
rightElements:
|
|
25
|
-
|
|
26
|
-
onClick: () => onRemove(id)
|
|
27
|
-
}) : undefined
|
|
28
|
-
})), [humanFileSize, icon, id, name, onRemove]);
|
|
114
|
+
rightElements: rightElement
|
|
115
|
+
})), [humanFileSize, icon, name, rightElement]);
|
|
29
116
|
};
|
|
30
117
|
FileItem.displayName = 'FileList';
|
|
31
118
|
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","
|
|
1
|
+
{"version":3,"file":"FileItem.js","names":["React","useCallback","useMemo","getHumanSize","getIconByMimeType","Icon","ContextMenu","ListItem","StyledFileItem","StyledFileItemIcon","ttsToITextString","useTextstringValue","textStrings","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","canDownload","canRemove","downloadText","textstring","components","fileItem","removeText","remove","rightElement","items","icons","key","onClick","text","title","subtitle","rightElements","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 ContextMenu from '../../context-menu/ContextMenu';\nimport type { ContextMenuItem } from '../../context-menu/ContextMenu.types';\nimport ListItem from '../../list/list-item/ListItem';\nimport type { IFileItem } from '../FileList';\nimport { StyledFileItem, StyledFileItemIcon } from './FileItem.styles';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\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 const canDownload = shouldAllowDownload && !!source;\n const canRemove = typeof onRemove === 'function';\n\n const downloadText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.fileItem.download),\n });\n const removeText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.fileItem.remove),\n });\n\n const rightElement = useMemo(() => {\n // Both actions available → show as ContextMenu\n if (canDownload && canRemove) {\n const items: ContextMenuItem[] = [\n {\n icons: ['fa fa-download'],\n key: 'download',\n onClick: handleDownload,\n text: downloadText,\n },\n {\n icons: ['fa fa-trash'],\n key: 'remove',\n onClick: () => onRemove(id),\n text: removeText,\n },\n ];\n\n return <ContextMenu items={items} />;\n }\n\n // Only download\n if (canDownload) {\n return (\n <StyledFileItemIcon onClick={handleDownload}>\n <Icon icons={['fa fa-download']} />\n </StyledFileItemIcon>\n );\n }\n\n // Only remove\n if (canRemove) {\n return (\n <StyledFileItemIcon onClick={() => onRemove(id)}>\n <Icon icons={['ts-wrong']} />\n </StyledFileItemIcon>\n );\n }\n\n return undefined;\n }, [canDownload, canRemove, downloadText, handleDownload, id, onRemove, removeText]);\n\n return useMemo(\n () => (\n <StyledFileItem>\n <ListItem\n title={name}\n subtitle={humanFileSize}\n icons={[icon]}\n rightElements={rightElement}\n />\n </StyledFileItem>\n ),\n [humanFileSize, icon, name, rightElement],\n );\n};\n\nFileItem.displayName = 'FileList';\n\nexport default FileItem;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,3 +1,12 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
2
|
export const StyledFileItem = styled.div``;
|
|
3
|
+
export const StyledFileItemIcon = styled.div`
|
|
4
|
+
align-items: center;
|
|
5
|
+
cursor: pointer;
|
|
6
|
+
display: flex;
|
|
7
|
+
background-color: transparent;
|
|
8
|
+
border-radius: 3px;
|
|
9
|
+
padding: 6px;
|
|
10
|
+
transition: background-color 0.3s ease;
|
|
11
|
+
`;
|
|
3
12
|
//# sourceMappingURL=FileItem.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileItem.styles.js","names":["styled","StyledFileItem","div"],"sources":["../../../../../src/components/file-list/file-item/FileItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledFileItem = styled.div``;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,cAAc,GAAGD,MAAM,CAACE,GAAG,EAAE","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"FileItem.styles.js","names":["styled","StyledFileItem","div","StyledFileItemIcon"],"sources":["../../../../../src/components/file-list/file-item/FileItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledFileItem = styled.div``;\nexport const StyledFileItemIcon = styled.div`\n align-items: center;\n cursor: pointer;\n display: flex;\n background-color: transparent;\n border-radius: 3px;\n padding: 6px;\n transition: background-color 0.3s ease;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,cAAc,GAAGD,MAAM,CAACE,GAAG,EAAE;AAC1C,OAAO,MAAMC,kBAAkB,GAAGH,MAAM,CAACE,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -29,6 +29,16 @@ export default {
|
|
|
29
29
|
stringName: 'txt_chayns_components_core_components_truncation_more',
|
|
30
30
|
fallback: 'Mehr'
|
|
31
31
|
}
|
|
32
|
+
},
|
|
33
|
+
fileItem: {
|
|
34
|
+
download: {
|
|
35
|
+
stringName: 'txt_chayns_components_core_components_fileItem_download',
|
|
36
|
+
fallback: 'Download'
|
|
37
|
+
},
|
|
38
|
+
remove: {
|
|
39
|
+
stringName: 'txt_chayns_components_core_components_fileItem_remove',
|
|
40
|
+
fallback: 'Entfernen'
|
|
41
|
+
}
|
|
32
42
|
}
|
|
33
43
|
}
|
|
34
44
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textStrings.js","names":["components","filter","filterContent","input","placeholder","stringName","fallback","sort","filterButtons","all","truncation","less","more"],"sources":["../../../src/constants/textStrings.ts"],"sourcesContent":["export default {\n components: {\n filter: {\n filterContent: {\n input: {\n placeholder: {\n stringName:\n 'txt_chayns_components_core_components_filter_filterContent_input_placeholder',\n fallback: 'Suche',\n },\n },\n sort: {\n stringName: 'txt_chayns_components_core_components_filter_filterContent_sort',\n fallback: 'Sortierung',\n },\n },\n },\n filterButtons: {\n all: {\n stringName: 'txt_chayns_components_core_components_filterButtons_all',\n fallback: 'Alle',\n },\n },\n truncation: {\n less: {\n stringName: 'txt_chayns_components_core_components_truncation_less',\n fallback: 'Weniger',\n },\n more: {\n stringName: 'txt_chayns_components_core_components_truncation_more',\n fallback: 'Mehr',\n },\n },\n },\n} as const;\n"],"mappings":"AAAA,eAAe;EACXA,UAAU,EAAE;IACRC,MAAM,EAAE;MACJC,aAAa,EAAE;QACXC,KAAK,EAAE;UACHC,WAAW,EAAE;YACTC,UAAU,EACN,8EAA8E;YAClFC,QAAQ,EAAE;UACd;QACJ,CAAC;QACDC,IAAI,EAAE;UACFF,UAAU,EAAE,iEAAiE;UAC7EC,QAAQ,EAAE;QACd;MACJ;IACJ,CAAC;IACDE,aAAa,EAAE;MACXC,GAAG,EAAE;QACDJ,UAAU,EAAE,yDAAyD;QACrEC,QAAQ,EAAE;MACd;IACJ,CAAC;IACDI,UAAU,EAAE;MACRC,IAAI,EAAE;QACFN,UAAU,EAAE,uDAAuD;QACnEC,QAAQ,EAAE;MACd,CAAC;MACDM,IAAI,EAAE;QACFP,UAAU,EAAE,uDAAuD;QACnEC,QAAQ,EAAE;MACd;IACJ;EACJ;AACJ,CAAC","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"textStrings.js","names":["components","filter","filterContent","input","placeholder","stringName","fallback","sort","filterButtons","all","truncation","less","more","fileItem","download","remove"],"sources":["../../../src/constants/textStrings.ts"],"sourcesContent":["export default {\n components: {\n filter: {\n filterContent: {\n input: {\n placeholder: {\n stringName:\n 'txt_chayns_components_core_components_filter_filterContent_input_placeholder',\n fallback: 'Suche',\n },\n },\n sort: {\n stringName: 'txt_chayns_components_core_components_filter_filterContent_sort',\n fallback: 'Sortierung',\n },\n },\n },\n filterButtons: {\n all: {\n stringName: 'txt_chayns_components_core_components_filterButtons_all',\n fallback: 'Alle',\n },\n },\n truncation: {\n less: {\n stringName: 'txt_chayns_components_core_components_truncation_less',\n fallback: 'Weniger',\n },\n more: {\n stringName: 'txt_chayns_components_core_components_truncation_more',\n fallback: 'Mehr',\n },\n },\n fileItem: {\n download: {\n stringName: 'txt_chayns_components_core_components_fileItem_download',\n fallback: 'Download',\n },\n remove: {\n stringName: 'txt_chayns_components_core_components_fileItem_remove',\n fallback: 'Entfernen',\n },\n },\n },\n} as const;\n"],"mappings":"AAAA,eAAe;EACXA,UAAU,EAAE;IACRC,MAAM,EAAE;MACJC,aAAa,EAAE;QACXC,KAAK,EAAE;UACHC,WAAW,EAAE;YACTC,UAAU,EACN,8EAA8E;YAClFC,QAAQ,EAAE;UACd;QACJ,CAAC;QACDC,IAAI,EAAE;UACFF,UAAU,EAAE,iEAAiE;UAC7EC,QAAQ,EAAE;QACd;MACJ;IACJ,CAAC;IACDE,aAAa,EAAE;MACXC,GAAG,EAAE;QACDJ,UAAU,EAAE,yDAAyD;QACrEC,QAAQ,EAAE;MACd;IACJ,CAAC;IACDI,UAAU,EAAE;MACRC,IAAI,EAAE;QACFN,UAAU,EAAE,uDAAuD;QACnEC,QAAQ,EAAE;MACd,CAAC;MACDM,IAAI,EAAE;QACFP,UAAU,EAAE,uDAAuD;QACnEC,QAAQ,EAAE;MACd;IACJ,CAAC;IACDO,QAAQ,EAAE;MACNC,QAAQ,EAAE;QACNT,UAAU,EAAE,yDAAyD;QACrEC,QAAQ,EAAE;MACd,CAAC;MACDS,MAAM,EAAE;QACJV,UAAU,EAAE,uDAAuD;QACnEC,QAAQ,EAAE;MACd;IACJ;EACJ;AACJ,CAAC","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;
|
|
@@ -1 +1,2 @@
|
|
|
1
1
|
export declare const StyledFileItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
2
|
+
export declare const StyledFileItemIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
@@ -30,6 +30,16 @@ declare const _default: {
|
|
|
30
30
|
readonly fallback: "Mehr";
|
|
31
31
|
};
|
|
32
32
|
};
|
|
33
|
+
readonly fileItem: {
|
|
34
|
+
readonly download: {
|
|
35
|
+
readonly stringName: "txt_chayns_components_core_components_fileItem_download";
|
|
36
|
+
readonly fallback: "Download";
|
|
37
|
+
};
|
|
38
|
+
readonly remove: {
|
|
39
|
+
readonly stringName: "txt_chayns_components_core_components_fileItem_remove";
|
|
40
|
+
readonly fallback: "Entfernen";
|
|
41
|
+
};
|
|
42
|
+
};
|
|
33
43
|
};
|
|
34
44
|
};
|
|
35
45
|
export default _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.3.
|
|
3
|
+
"version": "5.3.8",
|
|
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": "5908ac60cadb2ae7a4bc098784f5eaa2791d5fa8"
|
|
92
92
|
}
|