npm - @chayns-components/core - Versions diffs - 5.0.0-beta.1315 → 5.0.0-beta.1317 - Mend

@chayns-components/core 5.0.0-beta.1315 → 5.0.0-beta.1317

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/lib/cjs/components/file-input/FileInput.js CHANGED Viewed

@@ -82,7 +82,7 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
   }, [fileTypes, files === null || files === void 0 ? void 0 : files.length, internalFiles, maxFiles, onAdd]);
   const handleAdd = (0, _react.useCallback)(newFiles => {
     if (Array.isArray(newFiles) && newFiles.length > 0) {
-      if (typeof newFiles[0] === 'string') {
+      if (newFiles[0] && 'url' in newFiles[0]) {
         handleAddImages(newFiles);
       } else {
         handleAddFiles(newFiles);
@@ -103,10 +103,10 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
     setInternalFiles(filteredFiles);
     if (!fileToDelete) {
       const filteredImages = internalImages.filter(image => {
-        if (image === id) {
+        if (image.name === id) {
           fileToDelete = image;
         }
-        return image !== id;
+        return image.name !== id;
       });
       setInternalImages(filteredImages);
     }
@@ -149,9 +149,9 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
     }));
     internalImages.forEach(image => {
       items.push({
-        id: image,
-        name: image,
-        size: 0,
+        id: image.name ?? image.url,
+        name: image.name ?? image.url,
+        size: image.size ?? 0,
         mimeType: 'image/png'
       });
     });

package/lib/cjs/components/file-input/FileInput.js.map CHANGED Viewed

	@@ -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","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","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 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[] \| string[]) => 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 \| string) => void;\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 },\n ref,\n ) => {\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n const [internalImages, setInternalImages] = useState<string[]>([]);\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: string[]) => {\n const newImages: string[] = [];\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[] \| string[]) => {\n if (Array.isArray(newFiles) && newFiles.length > 0) {\n if (typeof newFiles[0] === 'string') {\n handleAddImages(newFiles as string[]);\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 \| string \| 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 === id) {\n fileToDelete = image;\n }\n\n return image !== 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,\n name: image,\n 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 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 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;AAAmD,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;AAE5C,MAAMgB,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GACzB,oFAAoF;AAEjF,MAAME,2BAA2B,GAAAD,OAAA,CAAAC,2BAAA,GACpC,oFAAoF;AAyDxF,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;AACJ,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,EAAW,EAAE,CAAC;EAElE,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,MAAgB,IAAK;IAClB,MAAMC,SAAmB,GAAG,EAAE;IAE9BD,MAAM,CAACE,OAAO,CAAEC,KAAK,IAAK;MACtB,IAAI,CAAC,IAAAC,6BAAuB,EAAC;QAAErB,KAAK,EAAEU,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,IAAIpB,QAAQ,EAAE;MACV0B,GAAG,GAAGN,SAAS,CAACO,KAAK,CACjB,CAAC,EACD3B,QAAQ,IACHS,aAAa,CAACmB,MAAM,GAAGhB,cAAc,CAACgB,MAAM,IAAI,CAAA1B,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAE0B,MAAM,KAAI,CAAC,CAAC,CAC5E,CAAC;IACL;IAEA,IAAIF,GAAG,CAACE,MAAM,GAAG,CAAC,IAAI,OAAOvB,KAAK,KAAK,UAAU,EAAE;MAC/CA,KAAK,CAACqB,GAAG,CAAC;IACd;IAEAb,iBAAiB,CAAEgB,SAAS,IAAK,CAAC,GAAGA,SAAS,EAAE,GAAGH,GAAG,CAAC,CAAC;EAC5D,CAAC,EACD,CAACxB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAE0B,MAAM,EAAEnB,aAAa,CAACmB,MAAM,EAAEhB,cAAc,EAAEZ,QAAQ,EAAEK,KAAK,CACzE,CAAC;EAED,MAAMyB,cAAc,GAAG,IAAAZ,kBAAW,EAC7Ba,QAAgB,IAAK;IAClB,MAAMC,YAAoB,GAAG,EAAE;IAE/BD,QAAQ,CAACV,OAAO,CAAEY,IAAI,IAAK;MACvB,IAAInC,SAAS,IAAI,CAAC,IAAAoC,qBAAe,EAAC;QAAED,IAAI;QAAEE,KAAK,EAAErC;MAAU,CAAC,CAAC,EAAE;QAC3D;MACJ;MAEA,IAAImC,IAAI,IAAI,CAAC,IAAAG,yBAAmB,EAAC;QAAElC,KAAK,EAAEO,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,IAAIhC,QAAQ,EAAE;MACV0B,GAAG,GAAGM,YAAY,CAACL,KAAK,CACpB,CAAC,EACD3B,QAAQ,IAAIS,aAAa,CAACmB,MAAM,IAAI,CAAA1B,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAE0B,MAAM,KAAI,CAAC,CAAC,CAC3D,CAAC;IACL;IAEA,IAAIF,GAAG,CAACE,MAAM,GAAG,CAAC,IAAI,OAAOvB,KAAK,KAAK,UAAU,EAAE;MAC/CA,KAAK,CAACqB,GAAG,CAAC;IACd;IAEAhB,gBAAgB,CAAEmB,SAAS,IAAK,CAAC,GAAGA,SAAS,EAAE,GAAGH,GAAG,CAAC,CAAC;EAC3D,CAAC,EACD,CAAC5B,SAAS,EAAEI,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAE0B,MAAM,EAAEnB,aAAa,EAAET,QAAQ,EAAEK,KAAK,CAC7D,CAAC;EAED,MAAMgC,SAAS,GAAG,IAAAnB,kBAAW,EACxBa,QAA2B,IAAK;IAC7B,IAAIO,KAAK,CAACC,OAAO,CAACR,QAAQ,CAAC,IAAIA,QAAQ,CAACH,MAAM,GAAG,CAAC,EAAE;MAChD,IAAI,OAAOG,QAAQ,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE;QACjCd,eAAe,CAACc,QAAoB,CAAC;MACzC,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,YAAmD;IAEvD,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,KAAKmB,EAAE,EAAE;UACdC,YAAY,GAAGpB,KAAK;QACxB;QAEA,OAAOA,KAAK,KAAKmB,EAAE;MACvB,CAAC,CAAC;MAEF5B,iBAAiB,CAACiC,cAAc,CAAC;IACrC;IAEA,IAAI,CAACJ,YAAY,EAAE;MACfxC,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEmB,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,OAAOzC,QAAQ,KAAK,UAAU,EAAE;MACjD;IACJ;IAEAA,QAAQ,CAACyC,YAAY,CAAC;EAC1B,CAAC,EACD,CAACxC,KAAK,EAAEO,aAAa,EAAEG,cAAc,EAAEX,QAAQ,CACnD,CAAC;EAED,MAAM8C,kBAAkB,GAAG,IAAAC,cAAO,EAAC,MAAM;IACrC,IAAI7C,UAAU,EAAE;MACZ,OAAO,IAAI;IACf;IAEA,IAAIH,QAAQ,EAAE;MACV,IAAIS,aAAa,CAACmB,MAAM,GAAGhB,cAAc,CAACgB,MAAM,IAAI5B,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,CAACU,aAAa,CAACmB,MAAM,EAAEhB,cAAc,CAACgB,MAAM,EAAEzB,UAAU,EAAEH,QAAQ,EAAED,iBAAiB,CAAC,CAAC;EAE1F,MAAMkD,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;QACTuB,IAAI,EAAEvB,KAAK;QACX+B,IAAI,EAAE,CAAC;QACPC,QAAQ,EAAE;MACd,CAAC,CAAC;IACN,CAAC,CAAC;IAEFpD,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEmB,OAAO,CAAEY,IAAI,IAAK;MACrBiB,KAAK,CAACzB,IAAI,CAACQ,IAAI,CAAC;IACpB,CAAC,CAAC;IAEF,OAAOiB,KAAK;EAChB,CAAC,EAAE,CAAChD,KAAK,EAAEO,aAAa,EAAEG,cAAc,CAAC,CAAC;EAE1C,OAAO,IAAAoC,cAAO,EACV,mBACIpF,MAAA,CAAAU,OAAA,CAAAiF,aAAA,CAACvF,UAAA,CAAAwF,eAAe,qBACZ5F,MAAA,CAAAU,OAAA,CAAAiF,aAAA,CAACpF,WAAA,CAAAG,OAAU;IACPwB,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,EAAE4C,kBAAmB;IAC/B1C,KAAK,EAAEgC;EAAU,CACpB,CAAC,eACFzE,MAAA,CAAAU,OAAA,CAAAiF,aAAA,CAACtF,SAAA,CAAAK,OAAQ;IAAC4B,KAAK,EAAE+C,cAAe;IAAChD,QAAQ,EAAEuC;EAAiB,CAAE,CACjD,CACpB,EACD,CACI1C,SAAS,EACTF,kBAAkB,EAClBU,wBAAwB,EACxBT,gBAAgB,EAChBU,sBAAsB,EACtBH,eAAe,EACf2C,kBAAkB,EAClBV,SAAS,EACTY,cAAc,EACdT,gBAAgB,CAExB,CAAC;AACL,CACJ,CAAC;AAED9C,SAAS,CAAC+D,WAAW,GAAG,WAAW;AAAC,IAAAC,QAAA,GAAAlE,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","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\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 },\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 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 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":[]}

package/lib/cjs/components/file-select/FileSelect.js CHANGED Viewed

@@ -55,7 +55,11 @@ const FileSelect = ({
       },
       buttons: []
     }).open();
-    if (buttonType === 1 && result !== null && result !== void 0 && result.url) handleAddImages([result.url]);
+    if (buttonType === 1 && result !== null && result !== void 0 && result.url) handleAddImages([{
+      url: result.url,
+      size: file.size,
+      name: file.name
+    }]);
   }, [handleAddImages]);
   const handleImageSelectionClick = (0, _react.useCallback)(async () => {
     if (isDisabled) return;
@@ -75,7 +79,9 @@ const FileSelect = ({
       },
       buttons: []
     }).open();
-    if (buttonType === 1 && result !== null && result !== void 0 && result.url) handleAddImages([result.url]);
+    if (buttonType === 1 && result !== null && result !== void 0 && result.url) handleAddImages([{
+      url: result.url
+    }]);
   }, [handleAddImages, isDisabled]);
   const handleFileSelectionClick = (0, _react.useCallback)(async () => {
     if (isDisabled) return;

package/lib/cjs/components/file-select/FileSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileSelect.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_file","_fileDialog","_Icon","_interopRequireDefault","_FileSelect","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DialogView","FileSelect","fileSelectionIcons","imageSelectIcons","fileTypes","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","handleAddImages","useCallback","images","handleAddFiles","newFiles","handleOpenEditor","file","buttonType","result","createDialog","dialogInput","upload","initialView","EDITOR","imageArrayBuffer","type","DialogType","MODULE","system","url","scope","module","buttons","open","handleImageSelectionClick","PIXABAY","handleFileSelectionClick","selectFiles","multiple","length","startsWith","handleDrop","preventDefault","draggedFiles","Array","from","dataTransfer","files","filter","isValidFileType","types","size","useMemo","createElement","StyledFileSelect","StyledFileSelectWrapper","$isDisabled","StyledFileSelectContainer","onClick","onDragOver","onDrop","icons","StyledFileSelectText","$isImageSelection","displayName","_default","exports"],"sources":["../../../../src/components/file-select/FileSelect.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { DragEvent, FC, useCallback, useMemo } from 'react';\nimport type { ImageDialogResult } from '../../types/fileInput';\nimport { isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport {\n StyledFileSelect,\n StyledFileSelectContainer,\n StyledFileSelectText,\n StyledFileSelectWrapper,\n} from './FileSelect.styles';\n\nenum DialogView {\n PIXABAY = 'pixabay',\n EDITOR = 'editor',\n}\n\ntype DialogInput = {\n upload: boolean;\n initialView: DialogView;\n imageArrayBuffer?: File;\n};\n\nexport type FileSelectProps = {\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[] \| string[]) => void;\n};\n\nconst FileSelect: FC<FileSelectProps> = ({\n fileSelectionIcons = ['fa fa-upload'],\n imageSelectIcons = ['ts-image'],\n fileTypes,\n isDisabled,\n maxFileSizeInMB,\n onAdd,\n fileSelectionPlaceholder = 'Dateien hochladen',\n imageSelectPlaceholder,\n}) => {\n const handleAddImages = useCallback(\n (images: string[]) => {\n if (typeof onAdd === 'function') {\n onAdd(images);\n }\n },\n [onAdd],\n );\n\n const handleAddFiles = useCallback(\n (newFiles: File[]) => {\n if (typeof onAdd === 'function') {\n onAdd(newFiles);\n }\n },\n [onAdd],\n );\n\n const handleOpenEditor = useCallback(\n async (file: File) => {\n const { buttonType, result } = (await createDialog<DialogInput>({\n dialogInput: {\n upload: true,\n initialView: DialogView.EDITOR,\n imageArrayBuffer: file,\n },\n type: DialogType.MODULE,\n system: {\n url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n scope: 'dialog_image_editor',\n module: './ImageEditorEntry',\n },\n buttons: [],\n }).open()) as ImageDialogResult;\n\n if (buttonType === 1 && result?.url) handleAddImages([result.url]);\n },\n [handleAddImages],\n );\n\n const handleImageSelectionClick = useCallback(async () => {\n if (isDisabled) return;\n\n const { buttonType, result } = (await createDialog<DialogInput>({\n dialogInput: { upload: true, initialView: DialogView.PIXABAY },\n type: DialogType.MODULE,\n system: {\n url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n scope: 'dialog_image_editor',\n module: './ImageEditorEntry',\n },\n buttons: [],\n }).open()) as ImageDialogResult;\n\n if (buttonType === 1 && result?.url) handleAddImages([result.url]);\n }, [handleAddImages, isDisabled]);\n\n const handleFileSelectionClick = useCallback(async () => {\n if (isDisabled) return;\n\n const newFiles = await selectFiles({ multiple: true, type: fileTypes, maxFileSizeInMB });\n\n if (newFiles.length === 1 && newFiles[0] && newFiles[0].type.startsWith('image')) {\n void handleOpenEditor(newFiles[0]);\n\n return;\n }\n\n handleAddFiles(newFiles);\n }, [fileTypes, handleAddFiles, handleOpenEditor, isDisabled, maxFileSizeInMB]);\n\n const handleDrop = useCallback(\n (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n\n const draggedFiles = Array.from(e.dataTransfer.files).filter((file) => {\n if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n return false;\n }\n\n return !(maxFileSizeInMB && file.size > maxFileSizeInMB 1024 * 1024);\n });\n\n if (\n draggedFiles.length === 1 &&\n draggedFiles[0] &&\n draggedFiles[0].type.startsWith('image')\n ) {\n void handleOpenEditor(draggedFiles[0]);\n\n return;\n }\n\n handleAddFiles(draggedFiles);\n },\n [handleAddFiles, fileTypes, maxFileSizeInMB, handleOpenEditor],\n );\n\n return useMemo(\n () => (\n <StyledFileSelect>\n <StyledFileSelectWrapper $isDisabled={isDisabled}>\n <StyledFileSelectContainer\n onClick={() => void handleFileSelectionClick()}\n onDragOver={(e) => e.preventDefault()}\n onDrop={handleDrop}\n >\n <Icon icons={fileSelectionIcons} />\n <StyledFileSelectText>{fileSelectionPlaceholder}</StyledFileSelectText>\n </StyledFileSelectContainer>\n {imageSelectPlaceholder && (\n <StyledFileSelectContainer\n $isImageSelection\n onClick={() => void handleImageSelectionClick()}\n >\n <Icon icons={imageSelectIcons} />\n <StyledFileSelectText>{imageSelectPlaceholder}</StyledFileSelectText>\n </StyledFileSelectContainer>\n )}\n </StyledFileSelectWrapper>\n </StyledFileSelect>\n ),\n [\n isDisabled,\n fileSelectionIcons,\n fileSelectionPlaceholder,\n imageSelectPlaceholder,\n imageSelectIcons,\n handleFileSelectionClick,\n handleDrop,\n handleImageSelectionClick,\n ],\n );\n};\n\nFileSelect.displayName = 'FileSelect';\n\nexport default FileSelect;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"FileSelect.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_file","_fileDialog","_Icon","_interopRequireDefault","_FileSelect","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DialogView","FileSelect","fileSelectionIcons","imageSelectIcons","fileTypes","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","handleAddImages","useCallback","images","handleAddFiles","newFiles","handleOpenEditor","file","buttonType","result","createDialog","dialogInput","upload","initialView","EDITOR","imageArrayBuffer","type","DialogType","MODULE","system","url","scope","module","buttons","open","size","name","handleImageSelectionClick","PIXABAY","handleFileSelectionClick","selectFiles","multiple","length","startsWith","handleDrop","preventDefault","draggedFiles","Array","from","dataTransfer","files","filter","isValidFileType","types","useMemo","createElement","StyledFileSelect","StyledFileSelectWrapper","$isDisabled","StyledFileSelectContainer","onClick","onDragOver","onDrop","icons","StyledFileSelectText","$isImageSelection","displayName","_default","exports"],"sources":["../../../../src/components/file-select/FileSelect.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { DragEvent, FC, useCallback, useMemo } from 'react';\nimport type { ImageDialogResult } from '../../types/fileInput';\nimport { isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport {\n StyledFileSelect,\n StyledFileSelectContainer,\n StyledFileSelectText,\n StyledFileSelectWrapper,\n} from './FileSelect.styles';\n\nenum DialogView {\n PIXABAY = 'pixabay',\n EDITOR = 'editor',\n}\n\ntype DialogInput = {\n upload: boolean;\n initialView: DialogView;\n imageArrayBuffer?: File;\n};\n\nexport interface UploadedFile {\n url: string;\n size?: number;\n name?: string;\n}\n\nexport type FileSelectProps = {\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\nconst FileSelect: FC<FileSelectProps> = ({\n fileSelectionIcons = ['fa fa-upload'],\n imageSelectIcons = ['ts-image'],\n fileTypes,\n isDisabled,\n maxFileSizeInMB,\n onAdd,\n fileSelectionPlaceholder = 'Dateien hochladen',\n imageSelectPlaceholder,\n}) => {\n const handleAddImages = useCallback(\n (images: UploadedFile[]) => {\n if (typeof onAdd === 'function') {\n onAdd(images);\n }\n },\n [onAdd],\n );\n\n const handleAddFiles = useCallback(\n (newFiles: File[]) => {\n if (typeof onAdd === 'function') {\n onAdd(newFiles);\n }\n },\n [onAdd],\n );\n\n const handleOpenEditor = useCallback(\n async (file: File) => {\n const { buttonType, result } = (await createDialog<DialogInput>({\n dialogInput: {\n upload: true,\n initialView: DialogView.EDITOR,\n imageArrayBuffer: file,\n },\n type: DialogType.MODULE,\n system: {\n url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n scope: 'dialog_image_editor',\n module: './ImageEditorEntry',\n },\n buttons: [],\n }).open()) as ImageDialogResult;\n\n if (buttonType === 1 && result?.url)\n handleAddImages([\n {\n url: result.url,\n size: file.size,\n name: file.name,\n },\n ]);\n },\n [handleAddImages],\n );\n\n const handleImageSelectionClick = useCallback(async () => {\n if (isDisabled) return;\n\n const { buttonType, result } = (await createDialog<DialogInput>({\n dialogInput: { upload: true, initialView: DialogView.PIXABAY },\n type: DialogType.MODULE,\n system: {\n url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n scope: 'dialog_image_editor',\n module: './ImageEditorEntry',\n },\n buttons: [],\n }).open()) as ImageDialogResult;\n\n if (buttonType === 1 && result?.url) handleAddImages([{ url: result.url }]);\n }, [handleAddImages, isDisabled]);\n\n const handleFileSelectionClick = useCallback(async () => {\n if (isDisabled) return;\n\n const newFiles = await selectFiles({ multiple: true, type: fileTypes, maxFileSizeInMB });\n\n if (newFiles.length === 1 && newFiles[0] && newFiles[0].type.startsWith('image')) {\n void handleOpenEditor(newFiles[0]);\n\n return;\n }\n\n handleAddFiles(newFiles);\n }, [fileTypes, handleAddFiles, handleOpenEditor, isDisabled, maxFileSizeInMB]);\n\n const handleDrop = useCallback(\n (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n\n const draggedFiles = Array.from(e.dataTransfer.files).filter((file) => {\n if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n return false;\n }\n\n return !(maxFileSizeInMB && file.size > maxFileSizeInMB 1024 * 1024);\n });\n\n if (\n draggedFiles.length === 1 &&\n draggedFiles[0] &&\n draggedFiles[0].type.startsWith('image')\n ) {\n void handleOpenEditor(draggedFiles[0]);\n\n return;\n }\n\n handleAddFiles(draggedFiles);\n },\n [handleAddFiles, fileTypes, maxFileSizeInMB, handleOpenEditor],\n );\n\n return useMemo(\n () => (\n <StyledFileSelect>\n <StyledFileSelectWrapper $isDisabled={isDisabled}>\n <StyledFileSelectContainer\n onClick={() => void handleFileSelectionClick()}\n onDragOver={(e) => e.preventDefault()}\n onDrop={handleDrop}\n >\n <Icon icons={fileSelectionIcons} />\n <StyledFileSelectText>{fileSelectionPlaceholder}</StyledFileSelectText>\n </StyledFileSelectContainer>\n {imageSelectPlaceholder && (\n <StyledFileSelectContainer\n $isImageSelection\n onClick={() => void handleImageSelectionClick()}\n >\n <Icon icons={imageSelectIcons} />\n <StyledFileSelectText>{imageSelectPlaceholder}</StyledFileSelectText>\n </StyledFileSelectContainer>\n )}\n </StyledFileSelectWrapper>\n </StyledFileSelect>\n ),\n [\n isDisabled,\n fileSelectionIcons,\n fileSelectionPlaceholder,\n imageSelectPlaceholder,\n imageSelectIcons,\n handleFileSelectionClick,\n handleDrop,\n handleImageSelectionClick,\n ],\n );\n};\n\nFileSelect.displayName = 'FileSelect';\n\nexport default FileSelect;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AAEA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAC,sBAAA,CAAAN,OAAA;AACA,IAAAO,WAAA,GAAAP,OAAA;AAK6B,SAAAM,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAM,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAAA,IAExBgB,UAAU,0BAAVA,UAAU;EAAVA,UAAU;EAAVA,UAAU;EAAA,OAAVA,UAAU;AAAA,EAAVA,UAAU;AAwDf,MAAMC,UAA+B,GAAGA,CAAC;EACrCC,kBAAkB,GAAG,CAAC,cAAc,CAAC;EACrCC,gBAAgB,GAAG,CAAC,UAAU,CAAC;EAC/BC,SAAS;EACTC,UAAU;EACVC,eAAe;EACfC,KAAK;EACLC,wBAAwB,GAAG,mBAAmB;EAC9CC;AACJ,CAAC,KAAK;EACF,MAAMC,eAAe,GAAG,IAAAC,kBAAW,EAC9BC,MAAsB,IAAK;IACxB,IAAI,OAAOL,KAAK,KAAK,UAAU,EAAE;MAC7BA,KAAK,CAACK,MAAM,CAAC;IACjB;EACJ,CAAC,EACD,CAACL,KAAK,CACV,CAAC;EAED,MAAMM,cAAc,GAAG,IAAAF,kBAAW,EAC7BG,QAAgB,IAAK;IAClB,IAAI,OAAOP,KAAK,KAAK,UAAU,EAAE;MAC7BA,KAAK,CAACO,QAAQ,CAAC;IACnB;EACJ,CAAC,EACD,CAACP,KAAK,CACV,CAAC;EAED,MAAMQ,gBAAgB,GAAG,IAAAJ,kBAAW,EAChC,MAAOK,IAAU,IAAK;IAClB,MAAM;MAAEC,UAAU;MAAEC;IAAO,CAAC,GAAI,MAAM,IAAAC,uBAAY,EAAc;MAC5DC,WAAW,EAAE;QACTC,MAAM,EAAE,IAAI;QACZC,WAAW,EAAEtB,UAAU,CAACuB,MAAM;QAC9BC,gBAAgB,EAAER;MACtB,CAAC;MACDS,IAAI,EAAEC,qBAAU,CAACC,MAAM;MACvBC,MAAM,EAAE;QACJC,GAAG,EAAE,4EAA4E;QACjFC,KAAK,EAAE,qBAAqB;QAC5BC,MAAM,EAAE;MACZ,CAAC;MACDC,OAAO,EAAE;IACb,CAAC,CAAC,CAACC,IAAI,CAAC,CAAuB;IAE/B,IAAIhB,UAAU,KAAK,CAAC,IAAIC,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEW,GAAG,EAC/BnB,eAAe,CAAC,CACZ;MACImB,GAAG,EAAEX,MAAM,CAACW,GAAG;MACfK,IAAI,EAAElB,IAAI,CAACkB,IAAI;MACfC,IAAI,EAAEnB,IAAI,CAACmB;IACf,CAAC,CACJ,CAAC;EACV,CAAC,EACD,CAACzB,eAAe,CACpB,CAAC;EAED,MAAM0B,yBAAyB,GAAG,IAAAzB,kBAAW,EAAC,YAAY;IACtD,IAAIN,UAAU,EAAE;IAEhB,MAAM;MAAEY,UAAU;MAAEC;IAAO,CAAC,GAAI,MAAM,IAAAC,uBAAY,EAAc;MAC5DC,WAAW,EAAE;QAAEC,MAAM,EAAE,IAAI;QAAEC,WAAW,EAAEtB,UAAU,CAACqC;MAAQ,CAAC;MAC9DZ,IAAI,EAAEC,qBAAU,CAACC,MAAM;MACvBC,MAAM,EAAE;QACJC,GAAG,EAAE,4EAA4E;QACjFC,KAAK,EAAE,qBAAqB;QAC5BC,MAAM,EAAE;MACZ,CAAC;MACDC,OAAO,EAAE;IACb,CAAC,CAAC,CAACC,IAAI,CAAC,CAAuB;IAE/B,IAAIhB,UAAU,KAAK,CAAC,IAAIC,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEW,GAAG,EAAEnB,eAAe,CAAC,CAAC;MAAEmB,GAAG,EAAEX,MAAM,CAACW;IAAI,CAAC,CAAC,CAAC;EAC/E,CAAC,EAAE,CAACnB,eAAe,EAAEL,UAAU,CAAC,CAAC;EAEjC,MAAMiC,wBAAwB,GAAG,IAAA3B,kBAAW,EAAC,YAAY;IACrD,IAAIN,UAAU,EAAE;IAEhB,MAAMS,QAAQ,GAAG,MAAM,IAAAyB,uBAAW,EAAC;MAAEC,QAAQ,EAAE,IAAI;MAAEf,IAAI,EAAErB,SAAS;MAAEE;IAAgB,CAAC,CAAC;IAExF,IAAIQ,QAAQ,CAAC2B,MAAM,KAAK,CAAC,IAAI3B,QAAQ,CAAC,CAAC,CAAC,IAAIA,QAAQ,CAAC,CAAC,CAAC,CAACW,IAAI,CAACiB,UAAU,CAAC,OAAO,CAAC,EAAE;MAC9E,KAAK3B,gBAAgB,CAACD,QAAQ,CAAC,CAAC,CAAC,CAAC;MAElC;IACJ;IAEAD,cAAc,CAACC,QAAQ,CAAC;EAC5B,CAAC,EAAE,CAACV,SAAS,EAAES,cAAc,EAAEE,gBAAgB,EAAEV,UAAU,EAAEC,eAAe,CAAC,CAAC;EAE9E,MAAMqC,UAAU,GAAG,IAAAhC,kBAAW,EACzB9B,CAA4B,IAAK;IAC9BA,CAAC,CAAC+D,cAAc,CAAC,CAAC;IAElB,MAAMC,YAAY,GAAGC,KAAK,CAACC,IAAI,CAAClE,CAAC,CAACmE,YAAY,CAACC,KAAK,CAAC,CAACC,MAAM,CAAElC,IAAI,IAAK;MACnE,IAAIZ,SAAS,IAAI,CAAC,IAAA+C,qBAAe,EAAC;QAAEnC,IAAI;QAAEoC,KAAK,EAAEhD;MAAU,CAAC,CAAC,EAAE;QAC3D,OAAO,KAAK;MAChB;MAEA,OAAO,EAAEE,eAAe,IAAIU,IAAI,CAACkB,IAAI,GAAG5B,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1E,CAAC,CAAC;IAEF,IACIuC,YAAY,CAACJ,MAAM,KAAK,CAAC,IACzBI,YAAY,CAAC,CAAC,CAAC,IACfA,YAAY,CAAC,CAAC,CAAC,CAACpB,IAAI,CAACiB,UAAU,CAAC,OAAO,CAAC,EAC1C;MACE,KAAK3B,gBAAgB,CAAC8B,YAAY,CAAC,CAAC,CAAC,CAAC;MAEtC;IACJ;IAEAhC,cAAc,CAACgC,YAAY,CAAC;EAChC,CAAC,EACD,CAAChC,cAAc,EAAET,SAAS,EAAEE,eAAe,EAAES,gBAAgB,CACjE,CAAC;EAED,OAAO,IAAAsC,cAAO,EACV,mBACI/E,MAAA,CAAAS,OAAA,CAAAuE,aAAA,CAAC1E,WAAA,CAAA2E,gBAAgB,qBACbjF,MAAA,CAAAS,OAAA,CAAAuE,aAAA,CAAC1E,WAAA,CAAA4E,uBAAuB;IAACC,WAAW,EAAEpD;EAAW,gBAC7C/B,MAAA,CAAAS,OAAA,CAAAuE,aAAA,CAAC1E,WAAA,CAAA8E,yBAAyB;IACtBC,OAAO,EAAEA,CAAA,KAAM,KAAKrB,wBAAwB,CAAC,CAAE;IAC/CsB,UAAU,EAAG/E,CAAC,IAAKA,CAAC,CAAC+D,cAAc,CAAC,CAAE;IACtCiB,MAAM,EAAElB;EAAW,gBAEnBrE,MAAA,CAAAS,OAAA,CAAAuE,aAAA,CAAC5E,KAAA,CAAAK,OAAI;IAAC+E,KAAK,EAAE5D;EAAmB,CAAE,CAAC,eACnC5B,MAAA,CAAAS,OAAA,CAAAuE,aAAA,CAAC1E,WAAA,CAAAmF,oBAAoB,QAAEvD,wBAA+C,CAC/C,CAAC,EAC3BC,sBAAsB,iBACnBnC,MAAA,CAAAS,OAAA,CAAAuE,aAAA,CAAC1E,WAAA,CAAA8E,yBAAyB;IACtBM,iBAAiB;IACjBL,OAAO,EAAEA,CAAA,KAAM,KAAKvB,yBAAyB,CAAC;EAAE,gBAEhD9D,MAAA,CAAAS,OAAA,CAAAuE,aAAA,CAAC5E,KAAA,CAAAK,OAAI;IAAC+E,KAAK,EAAE3D;EAAiB,CAAE,CAAC,eACjC7B,MAAA,CAAAS,OAAA,CAAAuE,aAAA,CAAC1E,WAAA,CAAAmF,oBAAoB,QAAEtD,sBAA6C,CAC7C,CAEV,CACX,CACrB,EACD,CACIJ,UAAU,EACVH,kBAAkB,EAClBM,wBAAwB,EACxBC,sBAAsB,EACtBN,gBAAgB,EAChBmC,wBAAwB,EACxBK,UAAU,EACVP,yBAAyB,CAEjC,CAAC;AACL,CAAC;AAEDnC,UAAU,CAACgE,WAAW,GAAG,YAAY;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAApF,OAAA,GAEvBkB,UAAU","ignoreList":[]}

package/lib/cjs/components/search-box/SearchBox.js CHANGED Viewed

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _chaynsApi = require("chayns-api");
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = require("styled-components");
 var _calculate = require("../../utils/calculate");
@@ -21,23 +22,24 @@ var _TagInput = _interopRequireDefault(require("../tag-input/TagInput"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
+  container,
+  customFilter,
+  dropdownDirection,
   isInvalid = false,
-  placeholder,
   leftIcons,
   lists,
-  onChange,
   onBlur,
-  onSelect,
+  onChange,
   onKeyDown,
+  onSelect,
+  placeholder,
+  presetValue,
   selectedId,
-  container,
+  shouldAddInputToList = true,
   shouldHideFilterButtons = false,
-  shouldShowRoundImage,
   shouldShowContentOnEmptyInput = true,
-  shouldAddInputToList = true,
+  shouldShowRoundImage,
   shouldShowToggleIcon = false,
-  customFilter,
-  presetValue,
   tagInputSettings
 }, ref) => {
   const [matchingListsItems, setMatchingListsItems] = (0, _react.useState)(lists);
@@ -59,9 +61,12 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
   const isAnimatingRef = (0, _react.useRef)(false);
   const shouldShowPresetValue = (0, _react.useRef)(typeof presetValue === 'string' && presetValue !== '');
   const theme = (0, _styledComponents.useTheme)();
+  const {
+    isTouch
+  } = (0, _chaynsApi.useDevice)();
   /**
-   * Checks if Lists are smaller then 1
+   * Checks if there are multiple groups in the lists
    */
   (0, _react.useEffect)(() => {
     setHasMultipleGroups(lists.length > 1);
@@ -207,7 +212,8 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
   }, [handleOpen, matchingListsItems.length]);
   /**
-   * This function sets the items on focus if shouldShowContentOnEmptyInput
+   * This function handles the focus event of the input and opens the dropdown if the input
+   * should show content on an empty input
    */
   const handleFocus = (0, _react.useCallback)(() => {
     hasFocusRef.current = true;
@@ -368,6 +374,11 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       onBlur(event);
     }
   }, [onBlur]);
+  const handleDropdownOutsideClick = (0, _react.useCallback)(() => {
+    var _tagInputRef$current;
+    (_tagInputRef$current = tagInputRef.current) === null || _tagInputRef$current === void 0 || _tagInputRef$current.blur();
+    return hasFocusRef.current && isTouch;
+  }, [isTouch]);
   /**
    * This function handles the item selection
@@ -378,10 +389,10 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       text: item.text.replace('<b>', '').replace('</b>', '').replace('</b', '')
     };
     if (tagInputSettings) {
-      var _tagInputRef$current;
+      var _tagInputRef$current2;
       setValue('');
       setInputToListValue('');
-      (_tagInputRef$current = tagInputRef.current) === null || _tagInputRef$current === void 0 || _tagInputRef$current.resetValue();
+      (_tagInputRef$current2 = tagInputRef.current) === null || _tagInputRef$current2 === void 0 || _tagInputRef$current2.resetValue();
     } else {
       setValue(newItem.text);
     }
@@ -450,7 +461,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
         return;
       }
       const childrenArray = Array.from(children);
-      const newChildren = (_childrenArray$find = childrenArray.find(child => child.id.startsWith('searchbox-content__'))) === null || _childrenArray$find === void 0 ? void 0 : _childrenArray$find.children;
+      const newChildren = (_childrenArray$find = childrenArray.find(child => child.id.startsWith('searchBoxContent__'))) === null || _childrenArray$find === void 0 ? void 0 : _childrenArray$find.children;
       if (!(newChildren && newChildren.length > 0)) {
         return;
       }
@@ -530,49 +541,52 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       setValue(presetValue);
     }
   }, [presetValue]);
+  const shouldShowDropdown = shouldShowBody && matchingListsItems.length !== 0 && (value.trim() !== '' || shouldShowContentOnEmptyInput);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SearchBox.StyledSearchBox, {
     ref: boxRef,
     key: `search-box-${uuid}`
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: `search_box_input${uuid}`
   }, tagInputSettings ? /*#__PURE__*/_react.default.createElement(_TagInput.default, {
-    tags: tagInputSettings.tags,
-    onChange: handleChange,
+    leftElement: leftElement,
     onAdd: tagInputSettings.onAdd,
-    onRemove: tagInputSettings.onRemove,
-    onFocus: handleFocus,
     onBlur: handleBlur,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onRemove: tagInputSettings.onRemove,
     placeholder: placeholder,
-    leftElement: leftElement,
+    ref: tagInputRef,
     shouldAllowMultiple: tagInputSettings.shouldAllowMultiple,
     shouldPreventEnter: true,
-    ref: tagInputRef
+    tags: tagInputSettings.tags
   }) : /*#__PURE__*/_react.default.createElement(_Input.default, {
     isInvalid: isInvalid,
-    ref: inputRef,
-    onChange: handleChange,
+    leftElement: leftElement,
     onBlur: handleBlur,
+    onChange: handleChange,
     onFocus: handleFocus,
-    placeholder: placeholder,
     onKeyDown: onKeyDown,
-    leftElement: leftElement,
+    placeholder: placeholder,
+    ref: inputRef,
     rightElement: rightElement,
     value: value
   })), boxRef.current && /*#__PURE__*/_react.default.createElement(_DropdownBodyWrapper.default, {
-    shouldShowDropdown: shouldShowBody && matchingListsItems.length !== 0 && (value.trim() !== '' || shouldShowContentOnEmptyInput),
-    onClose: handleClose,
     anchorElement: boxRef.current,
+    container: container,
+    direction: dropdownDirection,
     maxHeight: 300,
-    container: container
+    onClose: handleClose,
+    onOutsideClick: handleDropdownOutsideClick,
+    shouldShowDropdown: shouldShowDropdown
   }, /*#__PURE__*/_react.default.createElement(_SearchBoxBody.default, {
-    key: `search-box-body-${uuid}`,
     filterButtons: filterButtons,
-    selectedGroups: groups,
     height: height,
-    ref: contentRef,
+    key: `search-box-body-${uuid}`,
     onGroupSelect: handleFilterButtonsGroupSelect,
+    ref: contentRef,
+    selectedGroups: groups,
     shouldHideFilterButtons: shouldHideFilterButtons
-  }, content))), [container, content, filterButtons, groups, handleBlur, handleChange, handleClose, handleFocus, height, isInvalid, leftElement, matchingListsItems.length, onKeyDown, placeholder, rightElement, shouldHideFilterButtons, shouldShowBody, shouldShowContentOnEmptyInput, tagInputSettings, uuid, value]);
+  }, content))), [container, content, dropdownDirection, filterButtons, groups, handleBlur, handleChange, handleClose, handleDropdownOutsideClick, handleFocus, height, isInvalid, leftElement, onKeyDown, placeholder, rightElement, shouldHideFilterButtons, shouldShowDropdown, tagInputSettings, uuid, value]);
 });
 SearchBox.displayName = 'SearchBox';
 var _default = exports.default = SearchBox;